A11Y Area51

Accordion

Accordion open, accordion closed.

Make sure the state is clearly exposed.

Use ARIA right, and let keys steer,

So every user can read with cheer.

Some lovely Text. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed eget eleifend ipsum. Ut aliquet lacus condimentum, faucibus arcu et, scelerisque nibh.

So is this accessible? Let’s put that to the test. Let’s throw in a link and see if this toggle opens upon focus. Which it will only do when the toggle is an actual <button>. Link here.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at cursus metus. Cras turpis ipsum, aliquam at facilisis a, maximus sed ipsum. Donec eget leo sit amet purus aliquet fringilla. Integer ullamcorper id lectus et blandit. In pretium ex luctus enim rhoncus, nec pulvinar diam luctus. Quisque lobortis quam vitae elit sollicitudin finibus.

What has been checked

  • If accordion titles are headings encased inside <button> tags. Titles are not correctly encased. Also, when no heading-level is selected, the titles are spans. Suggestion: Prompt the user to select the correct heading level when they insert the accordion Block.

  • If buttons use aria-expanded so a screen reader user knows if they are opened or closed.

  • If the buttons use aria-controls to reference the relevant content panel.

  • If the heading level can be chosen to make sure heading order will be correct for its location in the page.

  • Visible keyboard focus for all focusable elements.

  • The accordion works on zoom (both text only and full page)

  • Give an open all button as an option (nice to have / best practise)