TIL aria-expanded for showing when things are hidden/shown

POSTED ON: Oct 31, 2022

TAGS: accessibility html accordion

Say you had a accordion.

aria-expanded

The aria-expanded attribute is set on an element to indicate if a control is expanded or collapsed, and whether or not its child elements are displayed or hidden.

<style>
.topic {
    display: none;
    margin-bottom: 1em;
    padding: .25em;
    border: black thin solid;
    background-color: #EEEEFF;
    width: 40em;
}
</style>


<button class="buttonControl" aria-controls="topic1" aria-expanded="false">
    <span>Show</span> Topic 1
</button>

<div id="topic1" class="topic" role="region" tabindex="-1" >
    Topic 1 is all about being Topic 1 and may or may not have anything to do with other topics.
</div>

code via W3C wiki

via the MDN

via #99 - 101 Digital Accessibility (a11y) tips and tricks

Related TILs

Tagged: accessibility

• Next: TIL Windowing in BrowsersWindowing only allow you to render what's available. Using twitter as a example, with tweets, when you scroll through hundreds of tweets and inspect the DOM, they just put a bunch of blank space above so there's not like 400 tweets above you.
• Previous: TIL ARIA role presentationThink of this as a reset. You use role=presentation to remove semantic meaning from an element.