Go to overview: WAI-ARIA techniques with code examples

Using aria-expanded to indicate the state of a collapsible element

Detlev Fischer, (detlev [dot] fischer [ at ] testkreis [dot] de) - Twitter: @wcagtest
Last update: 15 May 2013

Introduction

This example was provided by Birkir R. Gunnarsson (@birkir_gun) and is based on Example 1 in the WCAG Technique SCR28: Using an expandable and collapsible menu to bypass block of content. I have added a variant where the link is given a role="button" (since a button seems to map better than a link on the action of hiding and showing some content). Currently, there is the minor problem that toggling the visibility resets the scroll status of the page.

Example 1: aria-expanded used on link toggling visibibity of section

(In this variant, the default setting is aria-expanded="true")

Toggle Navigation Bar 1

Here is some content below the collapsible section.

Example 2: aria-expanded used on link with role="button" toggling visibibity of section

(In this variant, the default setting is aria-expanded="false")

Here is some content below the collapsible section.

Future work

It might be interesting, from a best practice point of view, to find out what combination of aria attributes would work best across browsers / screen readers - if we turn a link into a button, for example, would it be advantageous also to use the aria-pressed attribute on the trigger if the visual appearance of the button changes, or would this just add noise?

The example (or the user agent and assisitive technology test results) may be added to the ARIA Technique Using WAI-ARIA state and property attributes to expose the state of a user interface component.

Results

Desktop: Fairly well supported in both IE and Firefox with both NVDA and JAWS. NVDA has the edge since it announces the state change of aria-expanded after activating the link / button.

Mobile: No support in iOS.

Win 7, IE 9, JAWS 14 Supported

  • Tabbing:
    toggle navigation bar 1 - expanded link - ENTER - TAB Link 1 - link - SHIFT TAB toggle navigation bar 1 - expanded visited link

    ENTER - TAB Link 1 - link TAB toggle navigation bar 2 - button collapsed SHIFT TAB toggle navigation bar 1 - collapsed visited link
  • Browse mode: State announced, just reverses order for links, e.g.: collapsed visited link - toggle navigation bar 1 ARROW DOWN (repeatedly, then:) toggle navigation bar 2 - button collapsed
Win 7, FF 20, JAWS 14 Supported (possibly a bit buggy)
  • Tabbing: Basically the same behaviour as with IE9 above (but seems slightly buggy, possibly related to content not being visible by default when loading the page (as with navigation bar 2). After continued use, JAWS at times stopped reading links (requiring a page reload). In one case tabbing through links under navigation bar 2 would keep announcing the state of button instead of the links visibly receiving focus, and not reading the links at all in browse mode.
  • Browse mode: basically as with IE9 above but a bit buggy (see note above).
Win 7, FF 20, NVDA 2012.3.1 Supported (but browse mode a bit buggy)
  • Tabbing, Example 1: Support better than in JAWS since the new state is announced after activating the link:
    toggle navigation bar 1 - expanded visited link ENTER collapsed
  • Tabbing, Example 2: Support better than in JAWS since the new state is announced after activating the link:
    toggle navigation bar 2 - button collapsed ENTER expanded SHIFT TAB list with seven items link four - link TAB out of list - toggle navigation bar 2 - button expanded ENTER collapsed
  • Browse mode: Arrowing beyond collapsee navigatino bar 2 does not read the line of sample content but goes straight to the next heading: button collapsed - toggle navigation bar 2 ARROW DOWN heading level 2 - future work. Howeerver, the skipped line is read when the sectino is expanded.
Win 7, IE9, NVDA 2012.3.1 Supported
  • Tabbing: Basically same behaviour as reported above for NVDA + Firefox
  • Browse mode: in IE, there was no sign of skipped content as founf under Firefox (content below link was read correctly).
Mac OS 10.6.8, Safari, VoiceOver Supported? Not yet tested.
iOS 6.1.3, Safari, VoiceOver (iPad mini) Not supported
  • Swiping example 1: No announcement of aria-expanded state: toggle navigation bar 1 - hyperlink DOUBLE TAP toggle navigation bar 1 - hyperlink
  • Swiping example 2: No announcement of aria-expanded state: toggle navigation bar 2 - button DOUBLE TAP toggle navigation bar 2 (Note that Button (Taste) is not read again after activation
  • Touch exploration: Equally no announcement of aria-expanded state
Android 4.1.2, Firefox, TalkBack (Sony Xperia Z) Supported

Works (but doesn't announce state change directly after double tapping link / button).

  • Example 1: expanded link - toggle navigation bar 1 SWIPE R List seven items - first item link - link 1 - SWIPE R expanded visited link - toggle navigation bar 1 DOUBLE TAP Here is some content below the collapsible section
  • Example 2: collapsed button - toggle navigation bar 2 - SWIPE L - Here is some content below the collapsible section - SWIPE R collapsed button - toggle navigation bar 2 SWIPE R - List seven items - first item link - link 5 SWIP L expanded button - toggle navigation bar 2