Notes on use of multiple ARIA role attribute values

Posted on Thursday, 15 October 2015 by Steve Faulkner

The role attribute in HTML can have multiple space separated values :

3.2.7.3.1 ARIA Role Attribute

Every HTML element may have an ARIA role attribute specified. This is an ARIA Role attribute as defined by ARIA Section 5.4 Definition of Roles.

The attribute, if specified, must have a value that is a set of space-separated tokens representing the various WAI-ARIA roles that the element belongs to.

The WAI-ARIA role that an HTML element has assigned to it is the first non-abstract role found in the list of values generated when the role attribute is split on spaces.

Code examples:

A new role switch has been introduced in ARIA 1.1, for assistive technology that recognise the switch role it should be the role used to represent the semantics of the element, for those that don’t it should be ignored and the checkbox role should be recognised as representing the semantics of the element.

<div tabindex="0" role="switch checkbox" aria-label="test">test</div>

Note: in browsers tested (latest versions of Chrome and Firefox on Windows 10) multiple role values are presented as such in the accessibility tree and the switch role is exposed correctly in iA2 with a role=”toggle button”

Test cases:

These include various permutations of abstract (landmark, section) roles and a landmark role main, as well as tests for the switch role.

Note: the abstract roles are used ONLY for the purposes of testing implementations, as the ARIA spec states:

Abstract roles are used for the ontology. Authors MUST NOT use abstract roles in content.

See the Pen multiple role value tests by steve faulkner (@stevef) on CodePen.

Findings

JAWS

JAWS 16/Firefox 41 does not recognise the role of an element when abstract role values are placed prior to a recognised non abstract role, for example the following is reported as a ‘main region’:

<div role="main landmark" aria-label="test 3">test 3</div>

This is not reported as having any role.

<div role="landmark main" aria-label="test 2">test 2</div>

This is a JAWS bug.

JAWS does not recognise the switch role and does not fallback to reporting as a checkbox. This is a JAWS bug.

NVDA

NVDA/Firefox 41 reports all test cases correctly: all main regions are recognised. switch role is recognised (really NVDA uses the iA2 role value exposed by browser, it doesn’t take note of the ARIA role) and reported as “toggle button”.

Window Eyes

Window Eyes 9.2/Firefox 41  only reports test 1 as a region, does not recognise any element semantics for multiple roles in tests 2-5.

This is a Window Eyes bug.

Reports test 6/7 as a checkbox, this is correct fallback behaviour as Window Eyes has not yet implemented support for the iA2 toggle button role exposed in the browser.

VoiceOver on iOS

Reports all test cases correctly: all main regions are recognised. switch role is not recognised, but test 6 reported with fallback role as “tick box”.

Note: the iOS testing was not latest version (version prior).  Michiel Bijl reports the switch role is not implemented in iOS 9.02.

VoiceOver on OSX Yosemite

@ccwilcox reports VO supports all test cases correctly: all main regions are recognised. switch role is reported as “switch”.

Suggestion

Until screen readers such as JAWS and Window Eyes have fixed their bugs it may not be the best idea to use the role attribute with multiple values or to use the switch role.

With thanks to my friend John Foliot for asking a question about use of multiple role values.

About Steve Faulkner

Steve is the Technical Director at TPG. He joined The Paciello Group in 2006 and was previously a Senior Web Accessibility Consultant at vision australia. He is the creator and lead developer of the Web Accessibility Toolbar accessibility testing tool. Steve is a member of several groups, including the W3C Web Platforms Working Group and the W3C ARIA Working Group. He is an editor of several specifications at the W3C including HTML 5.1, ARIA in HTML, Notes on Using ARIA in HTML and HTML5: Techniques for providing useful text alternatives. He also develops and maintains HTML5accessibility.

Comments

  1. W00ts, just tested with orca 3.18.1 on Firefox 41.0.1
    with the
    div tabindex=”0″ role=”switch checkbox” aria-label=”test” test /div

    and get “toggle button” as the role. You can add it to the list 🙂

  2. With
    div role=”landmark main” and
    div role=”main landmark”
    when using the shortcut to “list landmarks” there are no landmarks found.

    Currently my version sees role=”main” and <main> tags as “sections” and sees their aria-labels as section names. I might be misunderstanding whether or not Orca knows that main is the landmark type, but it does see it’s a landmark when alone.

Comments for this post are closed.