The ARIA treegrid has not gotten enough love. Docs the old specs provide recommendations for keyboard shortcuts that would conflict with browser/OS keys.
The main challenge is that the left/right arrow key could be used to collapse/expand or to move by column. This example attempts to resolve this conflict while remaining intuitive and discoverable. Essentially: left/right collapse/expand. If the current row is already expanded, the right arrow will begin cell navigation mode, and after that, arrows/home/end will navigate by cell. In addition, tab/shift+tab move between interactive cells in the current row. To exit cell navigation mode, move left past the first cell. Note that left/right/home/end are not supported when there is a focused text input cell, as it needs those keys.
- Ideally, screen readers would implement table navigation keys even in focus mode, launching from the current row or cell. NVDA does this in Firefox via Ctrl+Alt+Arrow, recognizing the current row as a starting position.
- roles used are treegrid, row and gridcell
- aria-level: used to set the current level of an item, 1, 2, 3, etc.
- aria-posinset, aria-setsize: used on a row to indicate the position of an item within it's local group, such as item 3 of 5. Unfortunately, this is not currently legal in the spec.
- aria-rowindex, aria-rowcount, aria-colindex, aria-colcount. Not currently used, as UA/AT can compute this for fully loaded table DOMs.
- aria-expanded (triststate): this attribute must be removed (not present) if the item cannot be expanded. For expandable items, the value is "true" or "false"
- aria-hidden: set to "true" for child items that are currently hidden because the parent is collapsed
- aria-owns: not currently used, awaiting discussion. Could be used for parents to identify their children, but it doesn't look like any screen readers actually use this so it seems to be a wasteful recommendation.
- aria-labelledby or aria-describedby for headers? Not currently used, awaiting discussion
- aria-activedescendant -- this example does not use, because it is not exposed to ATs in IE, and thus uses tabindex instead
- aria-readonly: be default, a grid/treegrid is editable, but these tend not to be. This is mentioned in the text of the ARIA spec for grid/treegrid but doesn't seem to have made its way into the AAM. This idea originated for grids, which are like spreadsheets, where most cells are probably editable. It may not make sense for a treegrid, but this is the legacy. Bottom line: if you don't want "editable" read for every cell in some browser-screen reader combinations, you'll need to put aria-readonly="true" on the appropriate role="gridcell" elements or on the grid/treegrid itself.
- aria-selected: used on row in the case of a multiselectable treegrid where each row begins with a checkbox. Must be set to false or true so that it is clear that row is selectable.
- tabindex is set in the JS, as per the usual roving tabindex methodology. Specifically, we use tabindex="0" for the current item so that it is the subitem that gets focused if user tabs out and back in, and tabindex="-1" for all items where we want click-to-focus behavior enabled.
| Chrome (Canary currently required) | Firefox | IE11 | Safari | |
|---|---|---|---|---|
| Chomevox |
|
|||
| JAWS |
|
|
Need to use Insert+Z to turn virtual cursor off. Does not report level or item n of m. | |
| NVDA |
|
|
| |
| VoiceOver |
| Row navigation: doesn't let us do this, reads cells no matter what |