Expand and collapse accessibility on the Ind.ie manifesto
16th February, 2015 —
TL; DR: Using WAI-ARIA
aria-hidden attributes can make expanding and collapsing content more accessible.
We’re always trying to iterate and improve the accessibility on the Ind.ie site. I’ve recently been updating my knowledge on WAI-ARIA, and I realised I could improve the experience for keyboard navigation and screen reader users on the Ind.ie manifesto.
Expanding and collapsing content boxes are a very common space-saver on modern sites. Usually you’d select the heading of the box to expand and collapse the text underneath. Great if you’re equipped with a mouse and can see what you’re doing. If not, the hidden text will remain hidden away forever.
On the manifesto page, we hide and show longer descriptions of terminology used in the manifesto. Previously we used
<dfn> definition tags to mark up the initial text, and
<div> to mark up the description. We used the
data-definition-text-id='definition-corporate-surveillance' custom data attribute on the
In order to improve the accessibility of the page, I needed to cover a few areas:
tabindex='-1' to make the skip link content accessible to keyboard navigation and screen readers.
HTML for basic definitions
<dfn data-definition-text-id='definition-corporate-surveillance'> <a class='definition-link' href='#definition-corporate-surveillance'>corporate surveillance</a> </dfn>
HTML for basic descriptions
<div class='full-text definition-expanded' id='definition-corporate-surveillance' tabindex='-1'> <p>Corporate surveillance treats[…]</p> </div>
Turn the definition links into buttons
Connect the definitions to the descriptive text in a way that’s meaningful to screen readers
I learned about the
aria-controls attribute from Heydon Pickering’s fantastic blog post on Practical ARIA examples. The attribute helps describe how one element controls another. Teamed with the
aria-expanded attribute on the definition, I could describe whether the description was expanded or collapsed. VoiceOver on Safari reads the definition as “corporate surveillance, collapsed, button.”
aria-hidden attribute on to the description, and rather than just hiding the content using the latest CSS hack, the markup can tell assistive technology that it’s hidden.
Definition text HTML after JS has loaded
<button data-definition-text-id="definition-corporate-surveillance" class="definition-link" aria-expanded="true" aria-controls="definition-corporate-surveillance">corporate surveillance</button>
Toggle the expanding and collapsing of the content
Not too tricky