WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: code for FAQ

for

From: Jonathan Avila
Date: Jun 7, 2016 11:19AM

> 1) How to easily add information on when expanded or collapsed? Is it just adding an aria-expanded true/false toggle?
> 2) In general for accordions and similar types of elements, when a user selects one of the Questions/categories, should a screen reader should start reading the answer automatically? I think it makes sense to do so, since the user has requested it. How best to do so?

Yes, add the aria-expanded to the button and then we generally recommend adding role of region to the expanded div area that holds the content with aria-labelledby that points to the name of the region. Moving focus makes sense here as it is user initiated -- a tabindex=-1 may be needed on the region to set focus to it with the .focus() method.

Jonathan

Jonathan Avila
Chief Accessibility Officer
SSB BART Group
<EMAIL REMOVED>
703.637.8957 (Office)
Visit us online: Website | Twitter | Facebook | Linkedin | Blog
Check out our Digital Accessibility Webinars!