E-mail List Archives
Number of posts in this thread: 4 (In chronological order)
From: Bryan Garaventa
Date: Nov 30, 2013 1:50PM
Subject: 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.
No previous message | Next message →
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.
From: Bryan Garaventa
Date: Dec 1, 2013 12:41AM
Subject: Re: 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.
← Previous message | Next message →
One small update,
I was trying to see if it were possible to consolidate double click vs
single click activation of selectable rows and editable cells, and still
make it possible to enter Applications Mode for navigation for screen reader
users, so I added a new method to the grid named 'useDblClick', which can be
used to enable or disable this feature programmatically.
E.G grid.useDblClick(true);
Unfortunately this appears to be a catch 22, and the method that works best
for ensuring accessibility in JAWS, causes accessibility issues in NVDA.
For example, using double click allows a JAWS user to navigate to the grid
cell using the Virtual Cursor and press Enter to enter Applications Mode for
arrow navigation, regardless whether the cell is readonly, selectable, or
editable.
NVDA however, will not enter Applications Mode when Enter is pressed on an
ARIA Grid, and double click is ignored, so it appears that the cell or row
cannot be activated as a result, even though it is fully keyboard accessible
and actionable from the keyboard.
I've changed all of the grid demos to use single click activation so that
they at least can be activated in NVDA, even though doing this makes it more
difficult to enter Applications Mode in JAWS.
Personally I think this is a bug in NVDA, since it should be possible to
both navigate an ARIA Grid using table navigation commands in Browse Mode,
as well as press enter to invoke Applications Mode for grid based
interaction if desired, since it is technically one large field with one tab
stop.
----- Original Message -----
From: "Bryan Garaventa" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Saturday, November 30, 2013 12:50 PM
Subject: [WebAIM] 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.
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.
From: Lucy Greco
Date: Dec 2, 2013 8:59AM
Subject: Re: 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.
← Previous message | Next message →
Have you sent this off to nvda then there about to release a new version
maybe they will fix it
Lucia Greco
Web Access Analyst
IST-Campus Technology Services
University of California, Berkeley
(510) 289-6008 skype: lucia1-greco
http://webaccess.berkeley.edu
Follow me on twitter @accessaces
From: Bryan Garaventa
Date: Dec 2, 2013 10:29AM
Subject: Re: 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.
← Previous message | No next message
I haven't had time to enter any bugs against, but anyone is welcome to
verify the issues on the live demo. I'll try to take care of this later,
it's sort of hectic.
----- Original Message -----
From: "Lucy Greco" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Monday, December 02, 2013 7:59 AM
Subject: Re: [WebAIM] 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.
> Have you sent this off to nvda then there about to release a new version
> maybe they will fix it
>
> Lucia Greco
> Web Access Analyst
> IST-Campus Technology Services
> University of California, Berkeley
> (510) 289-6008 skype: lucia1-greco
> http://webaccess.berkeley.edu
> Follow me on twitter @accessaces
>
>
>