Aria Testing [Oi Diguinho]

Useful links

Accessibility Tools


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

Column 1 Column 2 Cell 1-1 Cell 1-2 Cell 2-1 Cell 2-2 Cell 3-1 Cell 3-2


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:


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

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.