WebAIM - Web Accessibility In Mind

E-mail List Archives

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.

for

From: Bryan Garaventa
Date: Dec 2, 2013 10:29AM

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 REMOVED> >
To: "WebAIM Discussion List" < <EMAIL 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
>
>
> -----Original Message-----
> From: <EMAIL REMOVED>
> [mailto: <EMAIL REMOVED> ] On Behalf Of Bryan Garaventa
> Sent: Saturday, November 30, 2013 11:41 PM
> To: WebAIM Discussion List
> 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.
>
> 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 REMOVED> >
> To: "WebAIM Discussion List" < <EMAIL 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%20G
> rid%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.
> > > >
> > > > > >