Hi,
We have a requirement to make our pages accessible to sightless users based on the W3C Accessibility guidelines.
I have managed to write work-arounds for Grid control to meet most of the requirements: (such as adding CAPTION and SUMMARY elements, and duplicating the Header Row on the “obj” table itself using a 0pt font-size)
But there are a few issues I cannot solve:
1) ROW HEADINGS: W3C Guidelines recommend using the TH element with a “scope” attribute for cells which act as labels for each ROW (as opposed to column headers). Is there any way of rendering a grid so that cells with a certain CSS class (or other trigger) render as TH elements instead of TD’s? I’ve tried dynamically changing them from TD’s to TH’s after the grid has rendered, but I get lots of “oCell is undefined” javascript errors. It seems the DHTMLX Grid code is really expecting TD elements (not TH’s) in the body of the grid. Is this unavoidable?
2) EDITABLE CELLS: Normally, screen readers will announce if the currently-focused page element is editable (a textbox, drop-down list, etc).
However, because the eXcell editors are not attached to grid cells until AFTER a keypress/mouseclick, the screen readers do not announce the fact that they are editable. Can you suggest a workaround to enable a screen-reader to announce an editable cell in the grid?
Any help would be appreciated!
Thanks in advance,
Jon.
It seems the DHTMLX Grid code is really expecting TD elements (not TH’s) in the body of the grid. Is this unavoidable?
It possible to change TD’s to TH’s it will break existing styling , and they will not react on some actions, but except of that - there must not be any negative side effects.
Inside dhtmlxgrid.js
_build_master_row:function(){
var t = document.createElement(“DIV”);
var html = ["
"];
for (var i = 0; i < this._cCount; i++) html.push("");
can be changed as
_build_master_row:function(){
var t = document.createElement(“DIV”);
var html = ["
"];
html.push("");
for (var i = 0; i < this._cCount-1; i++) html.push("");
>>Can you suggest a workaround to enable a screen-reader to announce an editable cell in the grid?
I’m not pretty sure, about functionality of screenreaders, but you can try to use “liveedit” excell type ( codebase/excells/dhtmlxgrid_liveedit.js )
Which is rendered as input in both active and passive state ( tecnically it is the same as static input, so it must not be a problem for screen reader, to recognize such element )
Brilliant!
Thanks for this information.