Notes on use of multiple ARIA role attribute 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.