aria-expanded does not require a fallback

When building a control that toggles content in a web app, we can use aria-expanded to let the control know whether the content is shown or hidden. Expanded or not expanded. In assistive technologies (AT) that support this attribute, AT users can figure out whether the element was expanded.

The other day, a website I worked on was audited for accessibility compliance. The auditor suggested we would add a fallback for aria-expanded, so that it would work for more users. After some discussion back and forth, we decided against this and went with no fallback.

For those who don’t know the attribute, aria-expanded is an attribute you can put on a button that toggles content. When toggling the content, you update the attribute to be true of false. This lets browsers, accessibility APIs, platform APIs and ultimately your end users know that the thing is now open or closed. It is the mechanism that powers the details element in HTML, but you can also use it on your own controls, for example a hamburger menu or in a questions and answers sections.

Providing a fallback

For users of AT that does not support the aria-expanded, a fallback can be implemented. One way to do this is to simply add visually hidden text that conveys the control’s state:

<span class="visually-hidden">
 (expanded)</span>

I would not recommend this. Yes, if we add this text like this to the control, it will get conveyed to users of AT. With it, potentially more users can use and understand the control. However, it might cause more problems than it solves.

No fallback

These are some reasons not to provide a fallback for aria-expanded.

A string that needs maintenance

There is now a string of text that needs to be maintained. It sits in your markup, it requires time to explain to new team members and you’ll have to decide whether you want it managed by a CMS.

Non-standard text

If you add this text yourself, you or your colleagues may end up picking different text across the site. Or text that is different from what users hear on other sites that have expandable elements in them. And if someone new starts on the team, they may not understand what this is and can’t look it up in a spec, as it is not standard.

No automagic localisation

Screenreaders that support aria-expanded, will read out the status of the control: when it is collapsed, it says ‘collapsed’, when it is expanded, it says ‘expanded’. This is if your screenreader speaks English. If it speaks Dutch, it adapts and will say ‘ingeklapt’ or ‘uitgeklapt’, respectively. It’s up to the screenreader and its settings what it says, but we can be sure it will be consistent and free of maintenance.

Redundant for most users

Users that use AT with aria-expanded support, will hear the status twice. Ok, this can be mitigated by using hidden text instead of the attribute, but then the other points still stand.

So what is AT support like?

The question this might leave you with: what is AT support for aria-expanded like? It is well supported across platforms, and works in screenreaders like JAWS, NVDA, VoiceOver and Narrator. This means a fallback would leave most AT users to hear the status twice, to solve a problem for very few.

So, in conclusion: it is now best to use aria-expanded without fallbacks.

Thanks Léonie, Roel, Job and Jules for feedback and advice.

Update 22/01/2018 4.56pm: The Paciello Group notes: “To be sure, if an expand/collapse

Comments, likes & shares (31)

Léonie Watson tink@toot.cafe wrote on 22 January 2018:
Useful notes on using aria-expanded, by @hdv hiddedevries.nl/en/blog/2018-0…
Léonie Watson tink@toot.cafe wrote on 22 January 2018:
Useful notes on using aria-expanded, by @hdv hiddedevries.nl/en/blog/2018-0…
Кафедра КНІТ УАД wrote on 22 January 2018:
Useful notes on using aria-expanded, by hdv hiddedevries.nl/en/blog/2018-0…

— Léonie Watson tinktoot.cafe (LeonieWatson) January 22, 2018

twitter.com/smashingmag/st…
Krijn Hoetmer wrote on 22 January 2018:
Wat @roelvangils zegt!
Frozen Rockets wrote on 22 January 2018:
“aria-expanded does not require a fallback”, by @hdvhiddedevries.nl/en/blog/2018-0…
Frozen Rockets wrote on 22 January 2018:
“aria-expanded does not require a fallback”, by @hdvhiddedevries.nl/en/blog/2018-0…
@baldur@toot.cafe wrote on 22 January 2018:
“aria-expanded does not require a fallback”
hiddedevries.nl/en/blog/2018-0…
The Paciello Group wrote on 22 January 2018:
This post recommends not using hidden text to convey the state of aria-expanded controls.

To be sure, if an expand/collapse <button> makes use of visible text, it’s still fine to update its visible text (such as perhaps between “expand recipe details” and “hide recipe details”).
Bram Duvigneau wrote on 22 January 2018:
Thanks for writing this, I totally agree with your conclusion and have explained this to clients for years. Now I can just point them here :)
Hidde wrote on 22 January 2018:
Aw that means a lot coming from you, thanks Bram!
まとり wrote on 24 January 2018:
見てる / aria-expanded does not require a fallback hiddedevries.nl/en/blog/2018-0…
若気の至り(60) wrote on 24 January 2018:
aria-expanded does not require a fallback hiddedevries.nl/en/blog/2018-0…
CSS-Tricks wrote on 29 January 2018:
`aria-expanded` does not require a fallback :: hiddedevries.nl/en/blog/2018-0…

(As in, don't use screen-reader-only text to announce the new state. An alternative is to change the text of the button itself.)
Access42 wrote on 31 January 2018:
4 bonnes raisons de ne pas implémenter de fallback pour l'attribut aria-expanded #a11y #accessibilité #webdev #ARIA hiddedevries.nl/en/blog/2018-0…
.Hiroya wrote on 16 February 2018:
共有してもらった記事が素敵だなとおもったのでTLに流しておきます。

aria-expandedにフォールバックとしてテキストをおく必要は無い。的なお話。
hiddedevries.nl/en/blog/2018-0…
.Hiroya🍣🍵 wrote on 15 June 2020:
WAI-ARIAのaria-expanded属性を使いつつ、文言(アクセシビリティネーム)の切り替えをしている例をたびたび見かけますが、実はテキストの切り替えは要らなかったりします🤧 aria-expanded does not require a fallback hiddedevries.nl/en/blog/2018-0… #駆け出しエンジニアさんと繋がりたい #a11y