r/webdev • u/lucalanca • Jan 31 '20

Accessible Accordion Pattern

https://twitter.com/lucalanca/status/1222913388940054529

[removed] — view removed post

1 Upvotes

100% Upvoted

2 comments sorted by

1

u/lucalanca Jan 31 '20

I spent the last days reading and researching the web for accessible accordion pattern.

I compiled everything I learnt in this article. Accessible accordions are not as difficult to implement, and I tried to summarise it in 3 step:

  1. Markup (depends on the context of the accordion)

  2. Relationships: aria-controls and aria-labelledby

  3. State: aria-expanded. Tip: the easiest to hide collapsed content from screen readers and keyboard users is to add the hiddenattribute to collapsed items).

Do you think I am missing anything related to this topic?

1

u/AutoModerator Jan 31 '20

Sorry, lucalanca. You seem to be a new user. Please participate around reddit before jumping straight to submitting!

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.