# User Agent Support Notes for ARIA Techniques

This page documents user agent support notes for ARIA Techniques.

-

### WAI-ARIA Technology Notes

To improve accessibility, WAI-ARIA provides Web developers with the option to add the following semantic information to Web pages and rich Internet widgets which are then exposed to the browser:

- Roles to describe the type of widget presented, such as "menu", "treeitem", "slider" and "progressbar."

- Roles to describe the structure of the Web page, such as headings, regions, search areas and navigation areas.

- Properties to describe the state widgets are in, such as "checked" for a check box, "haspopup" for a menu that renders a sub-menu or other popup and "expanded/collapsed" for a tree node.

- Properties to define live regions of a page that are likely to get updates (such as stock quotes), as well as an interruption policy for those updates. Assistive technologies may present critical updates as soon as they are rendered. However, incidental updates are presented only after completing the current task. For example, a screen reader informs a user of an incidental update only after it finishes reading the current paragraph.

- Properties for drag-and-drop that describe drag sources and drop targets

- A method to provide keyboard navigation for rich internet widgets.

The combination of these features and the structural information conveyed by the DOM structure allow authors to produce an interoperable solution to assistive technologies. (Source: WAI-ARIA Overview)

### User Agent Support for WAI-ARIA

User Agent support for WAI-ARIA varies, but overall support for WAI-ARIA is improving. Browsers which support WAI-ARIA map WAI-ARIA roles and properties to platform accessibility APIs.

- Firefox 1.5 and Firefox 2.0 partially supports WAI-ARIA, however it requires the use of namespaces, and doesn't support the use of Liveregions.

- Firefox 3+ contains better support for WAI-ARIA, including Liveregions.

- IE8 partially supports WAI-ARIA.

- JAWS 8 and Window-Eyes 5.5+ partially support WAI-ARIA.

- Jaws 10+ supports WAI-ARIA.

- FireVox, a self-voicing extension to Firefox, also supports WAI-ARIA via direct DOM access.

- NVDA partially supports WAI-ARIA.

### Accessibility Support for WAI-ARIA

Using technologies in an Accessibility Supported way is required for conformance claims. Read more about Accessibility Support. [begin delete] The WCAG Working Group plans to review which WAI-ARIA techniques are sufficient when Accessible Rich Internet Application specifications reach W3C Recommendation status. [end delete]Refer to WAI-ARIA Overview for the latest information on the status of WAI-ARIA specifications.

## ARIA1: Using the aria-describedby property to provide a descriptive label for user interface controls

See User Agent Support for WAI-ARIA for general information on user agent support.

IE 8 only supports `aria-labelledby` with a single id value and it partially supports `aria-describedby`.

## ARIA2: Identifying a required field with the aria-required property

See User Agent Support for WAI-ARIA for general information on user agent support.

## ARIA4: Using a WAI-ARIA role to expose the role of a user interface component

See User Agent Support for WAI-ARIA for general information on user agent support.

## ARIA5: Using WAI-ARIA state and property attributes to expose the state of a user interface component

See User Agent Support for WAI-ARIA for general information on user agent support.

## ARIA6: Using aria-label to provide labels for objects

See User Agent Support for WAI-ARIA for general information on user agent support.

- Jaws V.11 and greater has complete support.

- ChromeVox V.1 and greater has complete support

- VoiceOver V.3 and greater supports

- NVDA 2 supports Aria Describedby

- Window Eyes as of V.7.

## ARIA7: Using aria-labelledby for link purpose

See User Agent Support for WAI-ARIA for general information on user agent support.

Screen reader testing as of October 2012

- Not supported:

  - Win 7, IE 9, JAWS 13

  - Win 7, FF 13, NVDA 2012.2.1

  - Win XP, FF 15.0, NVDA 2011.3

  - Win XP, IE 8, SaToGo

- Partial support (both link text and element referenced by aria-labeledby are read):

  - Win 7, IE9, NVDA 2012.2.1 (but Example 2 not supported)

  - Win XP, IE 8, NVDA 2011.3 (but Example 2 not supported)

- Supported:

  - Win 7, FF 13, JAWS 13 (but Example 2 has only partial/buggy support: "Sales report 2012" is read twice)

  - Mac OS 10.5.8, VoiceOver

See full testing results for Example 1

See full testing results for Example 2

David tested on Aug 25, 2013... Example 2 and 3 are still not sufficiently supported.

- Example 1 ok on JAWS, VoiceOver. NVDA ignores labelledby on an anchor

- Example 2: JAWS 14 in FF, IE 10 read the entire paragraph for each link which is confusing and chatty. VoiceOver for Mountain Lion in Safari 6 same as JAWS. NVDA ignores labelledby on an anchor (unsuccessful implementation)

- Example 3: JAWS 14 in FF, IE 10 read the entire paragraph for each link which is confusing and chatty, VoiceOver for Mountain Lion in Safari 6 OK. NVDA ignores labelledby on an anchor (unsuccessful implementation)

## ARIA8: Using aria-label for link purpose

See User Agent Support for WAI-ARIA for general information on user agent support.

- Jaws V.11 and greater has complete support.

- ChromeVox V.1 and greater has complete support

- VoiceOver V.3 and greater

## ARIA9: Using aria-labelledby to concatenate a label from several text nodes

See User Agent Support for WAI-ARIA for general information on user agent support.

Note: In order to support IE, the attribute `tabindex="-1"` may need to be provided on non-interactive elements that are referenced by aria-labelledby attributes. For more details see Using WAI-ARIA in HTML.

- Full support:

  - WIN7 / FF16 / NVDA 2012.2.1 (Example 2: also reads column headers)

  - WIN7 / FF16 / JAWS 13 (Example 2: also reads column headers)

  - WIN7 / IE9 / JAWS 13

  - WIN XP /FF16 / NVDA 2011.3

  - iOS X / VoiceOver

- Partial support:

  - WIN7 / IE9 / NVDA 2012.2.1 (Example 1: drops default text of text field: "Extend time-out to minutes edit selected 20")

- Not supported:

  - WIN XP / IE8 / NVDA 2001.3 Example 1: Does not read text referenced by `aria-labelledby` ('20','minutes'): "Extend time-out to edit selected 20"

  - System Access To Go (IE8)

## ARIA10: Using aria-labelledby to provide a text alternative for non-text content

See User Agent Support for WAI-ARIA for general information on user agent support.

- NVDA 2012.3 supports Example 1 with FF

As of March 2014, there is much wider accessibility support for the use of the `alt` attribute than for `aria-labelledby`. The use of the `alt` attribute is best practice and strongly encouraged. Especially for elements where the `alt` attribute can be used to provide text alternatives, authors must confirm accessibility support for `aria-labelledby` before relying on this technique in place of H37: Using `alt` attributes on img elements.

## ARIA11: Using ARIA landmarks to identify regions of a page

See User Agent Support for WAI-ARIA for general information on user agent support.

- Jaws V.11 and greater has complete support.

- ChromeVox V.1 and greater has complete support

- VoiceOver V.3 and greater supports all landmarks except “form”.

- NVDA 2 supports all landmarks except it will not support navigation to “application”

- Window Eyes as of V.7 does not support ARIA landmarks.

## ARIA12: Using role=heading to identify headings

See User Agent Support for WAI-ARIA for general information on user agent support.

- Jaws 13 and higher supports this technique.

- NVDA 2012.3 supports this technique.

## ARIA13: Using aria-labelledby to name regions and landmarks

See User Agent Support for WAI-ARIA for general information on user agent support.

## ARIA14: Using aria-label to provide an invisible label where a visible label cannot be used

See User Agent Support for WAI-ARIA for general information on user agent support.

Screen reader support varies depending on browser:

- System Access To Go (IE8) does not recognise `aria-label`

- Using NVDA with Firefox (FF), `aria-label` is only spoken on custom controls

- Using NVDA with Internet Explorer (IE), `aria-label` is only spoken on native controls

- JAWS has the best support of `aria-label`

Here are the results of some detailed testing:

- JAWS 13 (WIN7, FF13)

  - Example 1: JAWS speaks `aria-label` of `div` set to `contentEditable` but not the content of the div (the word to be corrected)

  - Example 2: JAWS speaks `aria-label`: "close button"

  - Example 3: JAWS does not speak the `aria-label`, just says "button"

- JAWS 13 (WIN7, IE9)

  - Example 1: JAWS speaks `aria-label`, but the content of `div` boxes is only spoken in Virtual PC cursor mode, not when tabbing to the `div`s

  - Example 2: JAWS speaks content of `div` box (focus is being moved to its beginning through the skip link) followed by `aria-label`: "close button"

  - Example 3: JAWS speaks the `aria-label`

- NVDA 2011.3 (XP, FF13)

  - Example 1: NVDA speaks specified `aria-label` of `div` set to `contentEditable`, followed by announcing "section editable" and, for mis-spelled words, "spelling error"

  - Example 2: NVDA does not speak the `aria-label`, just "X button"

  - Example 3: NVDA does not speak the `aria-label`, just "button" (- and + are dropped, but this may be customizable in screen reader settings)

- NVDA 2011.3 (XP, IE8)

  - Example 1: Browser focuses `div contentEditable` but apparently does not expose them to the accessibility API so NVDA does not speak associated contents of `aria-label`

  - Example 2: NVDA speaks the `aria-label` content, "button close", instead of the text included in the button (X)

  - Example 3: NVDA speaks the `aria-label` content

- NVDA 2012.2.1 (WIN7, IE9)

  - Example 1: Same as under (XP, IE8): `div contentEditable` received focus but `aria-label` is not exposed to accessibilty API

  - Example 2: NVDA speaks `aria-label` "This is a div box button close" in browse mode and "close button" in focus mode

  - Example 3: Content of `aria-label` spoken

- NVDA 2012.2.1 (WIN7, FF13)

  - Example 1: NVDA speaks specified `aria-label` for custom div set to contentEditable, followed by announcing "section editable" (but no announcement of mis-spelled words here)

  - Example:2 Does not speak `aria-label` of X-button

  - Example 3: NVDA does not speak `aria-label` for + and - button (- and + are dropped, but this may be customizable in screen reader settings)

- System Access To Go (XP, IE8): In all three examples, SAToGo does not recognise `aria-label`

  - Example 1: SAToGo speaks "editable text" followed by the text in `div contentEditable`

  - Example 2: After activating Link, SAToGo speaks content of the pop-up `div` followed by "button X

  - Example 3: By default, SAToGo speaks "plus button" and "hyphen button" - not the content of `aria-label`

## ARIA15: Using aria-describedby to provide descriptions of images

See User Agent Support for WAI-ARIA for general information on user agent support.

Updated July 16, 2013

- Jaws V.11 and greater has complete support. IE10 JAWS 14. Speaks alt and then "press JAWS key + alt +r to hear descriptive text". IE 10 intermittent support, sometimes works, sometimes need to reload the page for JAWs to read it properly.

- ChromeVox V.1 and greater has complete support?

- VoiceOver V.3 and greater supports but replaces ALT text if both are present

- NVDA 2 reads ALT text if both are present but not Describedby unless it is alone

- Window Eyes as of V.7 ???.

## ARIA16: Using aria-labelledby to provide a name for user interface controls

See User Agent Support for WAI-ARIA for general information on user agent support.

- Jaws V.11 and greater has complete support.

- ChromeVox V.1 and greater has complete support

- VoiceOver V.3 and greater supports ???

- NVDA 2 supports Aria Describedby ???

- Window Eyes as of V.7 ???.

## ARIA17: Using grouping roles to identify related form controls

See User Agent Support for WAI-ARIA for general information on user agent support.

This technique works with:

- JAWS 13 / 14 with Internet Explorer 8 / 9, Firefox

- NVDA 2012 / 2013 with Firefox

- VoiceOver with Safari on OSX 10.7.4 on MacBook Pro but not on later versions like OSX 10.8. (This has been reported to Apple along with broken support for the HTML "title" attribute)

## ARIA18: Using aria-alertdialog to Identify Errors

See User Agent Support for WAI-ARIA for general information on user agent support.

- Jaws 13 and higher supports this technique.

## ARIA19: Using ARIA role=alert or Live Regions to Identify Errors

See User Agent Support for WAI-ARIA for general information on user agent support.

Supports this technique:

- OS X 10.8.4 + Safari + VoiceOver

- iOS 6 & 7 + Mobile Safari + VoiceOver

- Windows 7 + Firefox 20 + NVDA 2013.1

- Windows 7 + Firefox 20 + JAWS 14

- Windows 7 + IE 8 + JAWS 14 (aria-live=assertive ONLY)

- Windows 7 + IE 7 + JAWS 14 (aria-live=assertive ONLY)

Does NOT support this technique:

- Windows 7 + IE 8 + NVDA 2013.1 (NO support)

Support Notes:

Internet Explorer versions 7 through 11 do not support notifications as described in this technique when using role="alert". However, using aria-live="assertive" as described in example 1 does function correctly.

When using Firefox with JAWS and NVDA role=alert is announced as "Alert" and aria-live=assertive does not include that extra text. There is NO support for NVDA 2013.1 + IE 8. The third example uses BOTH role=alert & aria-live=assertive on the error container for wider UA/AT support working in all combinations listed.

There are different methods to display an alert or assertive live region on the page and depending on how you create the error container or inject the error messages determines if it will work in the more difficult browsers/screen reader combinations like IE 8 + JAWS 14 or VoiceOver + Safari.