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!


-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Joseph Sherman
Sent: Tuesday, June 07, 2016 12:14 PM
To: 'WebAIM Discussion List'
Subject: [WebAIM] code for FAQ

Two questions about a simple FAQ (example here<http://www.bmcc.cuny.edu/elearning/page-student.jsp?pid20&n=Student%20Information>):


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?

Thanks.


Joseph