WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: code for FAQ

for

From: Birkir R. Gunnarsson
Date: Jun 7, 2016 7:28PM

You could add aria-live="polite" on div around the region that gets
displayed (not on the div itself). The updated content should cause
screen reader to automatically star reading the answer, if that is
what you want.

<p id="qu">question text <button aria-expanded="false">See answer</button></p>

<div aria-live="polite">
<div role="region" aria-labelledby="qu" style="display: none;">
answer content
</div>
</div>



On 6/7/16, Jonathan Avila < <EMAIL REMOVED> > wrote:
>> 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!
>
>
>