Hello everyone,
I am facing some problems with accessibility matters on the UltraWebGrid control. I hope somebody could guide me in the right direction.
1. I cannot make the UltraWebGrid control accessible by keyboard. How can I make it posible?
Even though I have assigned a Tabindex value and i have setted the DisplayLayout.Section508Compliance value to true, I cannot get the focus on the grid via the keyboard.
2. How can I select a row via keyboard?
I need to perform both operations (row select and cell select), so I have setted the DisplayLayout.CellClickActionDefault property to CellSelect
3. I have setted up a hierarchical webgrid.Once I select a row, I can easily navigate to the next row, expand/contract the tree for the records that posess detail records, all these operations by keyboard.
How can I access the detail records by keyboard? I want to be able to select the detail rows with the corresponding individual cells. How can I perform this?
4. I also need to perform the update/insert operations via keyboard. How can I access the "Add..." footer of the grid? Is there an alternative method to this?
Can you help me with some answers to these questions? Are any of the features mentioned above not supported yet in the UltraWebGrid control?
Thank you,
C.
Hello,
That's a good question. So while Section508Compliant does help a lot, it does not certainly cover all accessbility points. Grids are complex controls and sometimes additional logic is required to make that happen.
The problem with focus on tab (TabIndex) is that grids essentially render as <table> elements and do not allow focus (TabIndex / AccessKey). The solution to this problem is to have a hidden input that gains focus on TabIndex / AccessKey and activate the first row of the grid there. Example (note how we hide the textbox with css):
<input type="text" tabindex="0" id="focusongrid" onfocus="focusGrid()" style="position: absolute; top: -50px; left: -50px;" /> <script type="text/javascript"> function focusGrid() { var grid = igtbl_getGridById("<%= UltraWebGrid1.ClientID %>"); grid.Rows.getRow(0).activate(); } </script>
All the other question you have can derive from this approach - hide an input control and have an access key trigger its focus and from there use the CSOM of the grid (Client Side Object Model) to do the respective action.
I will probably need to come up with a complete article for that, it will just take some time and I wanted to give you something tangible you can start building on today.
Hello Rumen,
Thank you for your answers. It helps me even if if doesn't answers to all the questions (for instance, the access to expand/collapse button). I will have a look at the CSOM documentation to search for the answers.
The project I am involved regards "accessifying" some modules of an ERP. This means making accessible not only some tables (and generally speaking, the "read-only" part), but also the insert/modify/delete operations of the grids. This means a sharp control of all the components of the grids.
It also regards not oly the control over all the elements on the page, but also their "parsing" by the text narator program (in my case JAWS). This means also to be able to associate descriptive text to the elements of the grid.
Meanwhile, I want to ask you something more:
1. CSOM means a lot of Javascript. Yet the accessibility guidelines insist on avoiding the use of Javascript. How does CSOM deal with this issue?
2. In a hierarchical grid, how do I access the expand/colapse button? I have checked the CSOM reference, but it didn't help too much.
Has this issue been answered elsewhere? I haven't been able to find how to access the expand/colapse button In a hierarchical grid using a screen reader.
On this grid, for example:
http://samples.infragistics.com/2007.3/webfeaturebrowser/contents.aspx?t=WebGrid/HierarchicalGrid/HierarchicalGrid.aspx%7Esrcview.aspx?path=../webfeaturebrowservb/WebGrid/HierarchicalGrid/HierarchicalGrid.src%7Esrcview.aspx?path=WebGrid/HierarchicalGrid/HierarchicalGrid.src