Accessible Name Button Test

From Level Access Web Labs
Jump to: navigation, search

Overview

This page tests how the accessible name and description is rendered by screen readers on buttons (button elements) in different browsers and different interaction methods (e.g. tab/swipe, arrowing, list of buttons/item chooser, etc. The beginner verbosity settings were used in JAWS and speak hints was turn on in VoiceOver.

According to the HTML to Platform Accessibility APIs Implementation Guide the accessible name calculation should be:

a element accessible name calculation

  1. Use aria-labelledby
  2. Otherwise use aria-label
  3. Otherwise use button element subtree
  4. Otherwise use the title attribute
  5. If none of the above yield a usable text string there is no accessible name

a element accessible description calculation

  1. Use aria-describedby
  2. Otherwise use the title attribute if it wasn't used as the accessible name
  3. If none of the above yield a usable text string there is no accessible description

aria-label seems to be the most consistent method that is supported across interaction modes, browsers, and AT when there is also text content in the button element. On caution with aria-label is that while it is not currently supported by speech recognition software such as Dragon -- replacing the accessible with something that is different than what visually appears on screen could have potential consequences and thus best practice is to start the aria-label with the same on-screen text for the button element. The title attribute is also consistently supported when there is no button element text content present.

The results also indicate that the accessible description is not announced by most screen readers in a number of navigation methods and thus this technique should not be relied upon.

The use of CSS positioned text still remains a viable method that is supported by assistive technology to augment to the visually displayed button text. The best cross platform method uses the CSS clip property in addition to setting the overflow to hidden, position absolute, and width and height to 1.

Test Set

Test 1: Button with inner text
test 2: Button with @title and inner text.
Test 3: Button with @title and no inner text (e.g. background image).
Test 4: Button with @aria-label and inner text.
Test 5: Button with @aria-label and no inner text (e.g. background image).
Test 6: Button with @aria-labelledby and inner text.
Test 7: Button with @aria-labelledby and no inner text (e.g. background image).
Test 8: Button with @aria-describedby and inner text.

The below text is referenced by the tests above.

aria-labelledby text
My aria-labelledby
aria-describedby text
My aria-describedby

Results

* indicates an incomplete calculation

Test JAWS 16 IE 11- Tab JAWS 16 IE 11- Arrows JAWS 16 IE 11- Button List JAWS 16 FF 37- Tab JAWS 16 FF 37- Arrows JAWS 16 FF 37- Button List NVDA 2015.1 FF 37- Tab NVDA 2015.1 FF 37- Arrows NVDA 2015.1 FF37- Elements List VoiceOver Safari iOS 8.3 Swipe VoiceOver Safari iOS 8.3 Item Chooser Talkback 4.1.0 FF 37 swipe Talkback 4.1.0 FF 37 rotor Window-eyes 9 IE 11- Tab Window-eyes 9 IE 11- Arrows Window-eyes 9 IE 11- Browse Mode Navigation Dialog Window-eyes 9 FF 37- Tab Window-eyes 9 FF 37- Arrows Window-eyes 9 FF 37- Browse Mode Navigation Dialog
Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content N/A Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content
Text Content and @title Text Content and title (after pause) *Text Content *Text Content Text Content and title (after pause) *Text Content *Text Content Text Content and title (after pause) *Text Content N/A Text Content and title (after pause) *Text Content Text Content and title (after pause) Text Content and title (after pause) *Text Content *Text Content *Text Content *Text Content *Text Content *Text Content
title no text content title title title title title title title title N/A title title title title title title title title title title
aria-label and text content aria-label *text content aria-label aria-label aria-label aria-label aria-label aria-label N/A aria-label aria-label aria-label aria-label aria-label aria-label aria-label aria-label aria-label aria-label
aria-label no text content aria-label aria-label aria-label aria-label aria-label aria-label aria-label aria-label N/A aria-label aria-label aria-label aria-label aria-label aria-label aria-label aria-label aria-label aria-label
aria-labelledby and text content aria-labelledby aria-labelledby aria-labelledby aria-labelledby aria-labelledby aria-labelledby aria-labelledby aria-labelledby N/a aria-labelledby aria-labelledby aria-labelledby aria-labelledby aria-labelledby aria-labelledby aria-labelledby aria-labelledby aria-labelledby aria-labelledby
aria-labelledby and no text content aria-labelledby aria-labelledby aria-labelledby aria-labelledby aria-labelledby aria-labelledby aria-labelledby aria-labelledby n/a aria-labelledby aria-labelledby aria-labelledby aria-labelledby aria-labelledby aria-labelledby aria-labelledby aria-labelledby aria-labelledby aria-labelledby
Text content and aria-describedby Text content and aria-description *Text Content *Text Content Text content and aria-description *Text Content *Text Content Text content and aria-description *Text Content N/a Text content and aria-description *Text Content Text content and aria-description Text content and aria-description Text content and aria-description Text content and aria-description Text content and aria-description Text content and aria-description Text content and aria-description Text content and aria-description