Aria Testing [Oi Diguinho]

Useful links

• Practices
• DataGrids
• Advanced DataGrids

Accessibility Tools

• Narrator: This tool comes with Windows. It is easy-to-use and works with most apps, including Edge and Chrome. I don't know how full-featured it is compared to others.
• ChromeVox: This tool is free and easy-to-use, but only works in Chrome. I don't know how full-featured it is compared to others.
• JAWS: This seems to be the 'standard' for accessibility. It is popular and full-featured, and there is a free trial mode.
• NVDA: This tool seems to be popular, but does not handle table headers at all. Apparently this will change in a future version.
• ZoomText: I have not tried this one.
• Window Eyes: I have not tried this one.

Gauge

Using the Gauge as an input element (range):

InputNumber, Date

Using InputNumber and InputDate controls:

Regular Table

This is a regular table with thead/tbody. It works with Google Vox, JAWS, and Narrator.

Div-Based Table

This doesn't work with Google Vox, Narrator, or JAWS. The problem seems to be related to divs with role set to "rowgroup".

Another Div-Based Table

This has no rowgroups, and it does work with Google Vox, JAWS, and Narrator. The original example can be found here: VisionGeist

FlexGrid

Working as the markup above. The "cells" panel has a "grid" role. The first row is hidden and contains the column headers. This allows the grid to work with Chrome Vox, Narrator, JAWS, and Edge/inspect.

This sample uses an "AccessibilityExtender" class that enhances FlexGrid accessibility by providing keyboard-based column resizing (use alt+Left/Right to resize the selected columns, or alt-End to auto-size the selected columns to fit their content). The "AccessibilityExtender" class also provides an alert method used in the sample to announce column sorting and header selection.

To improve accessibility support, we overloaded the HitTestInfo class constructor to accept HTML elements as a parameter. You can use this feature to find the cell that contains the given element and use the grid's object model to perform the appropriate actions:

Click Column Header Row Header Cell Collapse Button DropDown Button Filter Button

The grid layout applies a z-Index to frozen cells. If your grid doesn't have frozen cells, it does not apply z-Index to any elements, so you can show popup elements over the grid by adding them to the document after the grid:

Popup Menu Show

Comments on requirements/requests:

1. Tab behavior: We added a keyActionTab property to the grid so you can select whether the Tab key should navigate controls (the default) or cells (the original behavior).
2. Enter behavior: We added a keyActionEnter property to the grid so you can select whether the Enter key should navigate to the next row (default) or do nothing (the requested behavior, as in this sample).
3. Header selection with keyboard: The sample shows how you can do this by handling the keydown event and setting the focus on a header cell element.
4. Enter key on header does sort (or any other default action): Once the header cell is selected, you can add any behavior you want to it using code. Or you can invoke commands from accessibility tools.
5. Filtering can be invoked by Alt + Down: Done.
6. Hidden header fields should be invokable: Done.