WebAIM - Web Accessibility In Mind

E-mail List Archives

The ARIA Data Grid Module has been released, and supports readonly data grids, single and multi-row selection, editable strings and toggle values, full keyboard and screen reader accessibility.

for

From: Bryan Garaventa
Date: Nov 30, 2013 1:50PM

The ARIA Data Grid Module has been released, and supports readonly data grids, single and multi-row selection, editable strings and toggle values, auto pagination and infinite scrolling, dynamic loading of any number of data table rows, change listeners for server side data base synchronization, full keyboard and screen reader accessibility, and quite a bit more.

E.G Live demo: http://whatsock.com/tsg/Coding%20Arena/ARIA%20Data%20Grids/ARIA%20Data%20Grid%20(Dynamic)/demo.htm
(Keyboard commands are indexed at the bottom of the page)

The coding instructions for using the grid control are documented in the new ARIA Data Grids section at
http://whatsock.com/tsg
The code of which normalizes equally across jQuery, Dojo, and MooTools. All relevant ARIA attributes are also indexed there.

The ARIA Data Grid has also been added to the Coding Arena at
https://github.com/accdc/tsg
Including all related mirrors.

Here are some important accessibility notes and design details to be aware of, which will effect anyone who is making similar constructs, which also expose some current screen reader bugs that need to be reported.

Accessibility confirmed using:

• The keyboard with no screen reader running.
• JAWS 12, 13, 14, and 15 using Firefox and IE 8, 9, and 10 in Win XP, Win7, and Win8.
• NVDA using Firefox and IE 8, 9, and 10 in Win XP, Win7, and Win8.
• VoiceOver using Safari in iOS7.

Notes about keyboard interactivity

A focusable ARIA Grid is a complicated concept, and there are only a certain number of keyboard commands available that don't directly conflict with the screen reader or browser. The following keyboard commands should not be used for this reason:

• Control+PageUp/PageDown: Is automatically intercepted by JAWS and never gets passed through to the grid.
• Control+Up/Down: Is automatically intercepted by JAWS and never gets passed through to the grid.
• Alt+Home: Automatically loads the home page in the browser.
• Alt+Left/Right: Automatically activates the Back and Forward buttons in the browser.

Notes about mouse interactivity

When activating a selectable row or editable cell using the mouse, double click must be used. If a single click is used to invoke this functionality, it will conflict with screen reader behavior. For example, when browsing the page using JAWS in Virtual Cursor mode, it is necessary to press Enter on the desired grid cell to enter Applications Mode. When JAWS does this, it automatically activates the click event, which automatically invokes selection or editing for that cell. When double click is used instead, this conflict does not occur. Single tapping of a selectable or editable cell using a touch screen device however, works using one click.

ARIA Grid screen reader bugs

JAWS:
1. JAWS does not properly announce the value of aria-selected when set to 'true' on selectable rows and cells when navigating in Applications Mode.
2. When in Applications Mode, JAWS reads the column and row headers after the cell content instead of before as typically seen within data tables.
3. When a Button has no innerText, and the title attribute is used to set a textual label, the button is announced only as "button" when arrowing down the page in Firefox. If an aria-label attribute is added to fix this, then the buttons entirely disappear in IE 8, 9, and 10. Confirmed using JAWS 14 and 15.

NVDA:
1. When in Applications Mode, NVDA announces 'selected' for every cell that receives focus, making it very difficult to tell the difference when aria-selected is used to toggle selection for a row, since both are announced as 'selected'.
2. When using Firefox in Browse Mode, it is not possible to use NVDA table navigation commands such as Alt+Ctrl+Left/Up/Right/Down within the grid to navigate by cell. No table structure is recognized.
3. When in Applications Mode, pressing Up and Down to navigate by column cell will read the content of the entire row instead of just the cell that received focus. (This may be a feature, I'm not sure)
4. When aria-readonly='true' is applied to a container with role='grid' or role='gridcell', NVDA prevents focus from being set to that node and there is no way to maintain Applications Mode for continued navigation using the arrow keys. According to the ARIA spec, focusability should not be effected by aria-readonly.
E.G
"This means the user can read but not set the value of the widget. Readonly elements are relevant to the user, and application authors SHOULD NOT restrict navigation to the element or its focusable descendants. Other actions such as copying the value of the element are also supported. This is in contrast to disabled elements, to which applications might not allow user navigation to descendants."
(Reference: http://www.w3.org/TR/2011/CR-wai-aria-20110118/states_and_properties#aria-readonly)

VoiceOver on iOS7:
1. The select state of rows and cells that include aria-selected='true' is not conveyed by Voiceover.

ARIA Data Grid keyboard commands:

Set focus to the grid and enter Applications Mode if using a screen reader like JAWS or NVDA.
Press Up or Down to navigate by row. (Infinite scrolling is supported)
Press Control+Spacebar to announce the current row when using a screen reader.
Press Alt+Up or Alt+Down to set focus to the first or last row on the current page.
Press Left or Right to navigate left or right by cell.
Press Home or End to move to the first or last cell on the current row.
Press Control+Home or Control+End to move to the first row on the first page or the last row on the last page.
Press PageUp or PageDown to open the previous or next page and set focus to the first row.
Press Alt+PageUp or Alt+PageDown to open the first or last page and set focus to the first row.

For mode 'Selectable':
Press Space to toggle row selection, or double click to activate using a mouse.
If multiSelect is enabled, press Control+A to select all rows on the current page.
If Delete is enabled, press Delete to remove all selected rows.

For mode 'Editable':
Press Enter or Space to edit or toggle a cell, or double click to activate using a mouse.