E-mail List Archives
Thread: code for FAQ
Number of posts in this thread: 3 (In chronological order)
From: Joseph Sherman
Date: Tue, Jun 07 2016 10:14AM
Subject: code for FAQ
No previous message | Next message →
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
From: Jonathan Avila
Date: Tue, Jun 07 2016 11:19AM
Subject: Re: code for FAQ
← Previous message | Next message →
> 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 ADDRESS 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 ADDRESS 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
From: Birkir R. Gunnarsson
Date: Tue, Jun 07 2016 7:28PM
Subject: Re: code for FAQ
← Previous message | No next message
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 ADDRESS 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 ADDRESS 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 ADDRESS 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
>
> > > http://webaim.org/discussion/archives
> > > > > >
--
Work hard. Have fun. Make history.