WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: please test my accordions

for

From: Birkir R. Gunnarsson
Date: Jul 19, 2016 4:08PM

Hi Angela

This very pattern is going through an ARIA Authoring Practices review
and we are proposing a much simpler implementation for accordions.
Not to assume the conclusion of the review, but here are the roles
that I have used and recommended for effective and accessible
accordion implementation.
1. REmove all the tablist and tab roles (when using role="tab" make
sure you use it on the focusable/actionable element, not on its
parent).
This bad:
<li role="tab"><a href="#">Do something</a></li>
THis better
<li><a href="#" role="tab">Do something</a></li>

For accordions you don't need the tab or tablist roles.
2. The actionable item to expand or collapse the tab shouldn't point
anywhere, it should be a toggle control (you click it to expand or
collapse the tabpanel content).
In fact it is best to use buttons, but links are ok to, as long as
they don't point anywhere.
The buttons/toggle controls should have aria-expanded and aria-controls.
Make sure aria-expanded="false" is present in the html by default when
button controls collapsed content. This will ensure that screen
readers announce the state and users realize the function of the
control.

3. Use the region role and aria-labelledby (not aria-expanded) on the
content controlled by the buttons (basically replace tabpanel with
region and remove aria-expanded).

Example:
<button id="b1" aria-expanded="false" aria-controls="r1">Toggle
control 1</button>
<div role="region" aria-labelledby="b1" class="hidden">
Content for the accordion controlled by b1.
</div>

When expanded you just set aria-expanded on the button to true and
remove class="hidden" (assuming that class is display: none;".
-B


On 7/19/16, Angela French < <EMAIL REMOVED> > wrote:
> Hello,
> I am hoping one or two of you that use screen readers could test this simple
> test page<http://www.dev.sbctc.edu/_testing/test-anchor-asset-1.aspx>; I have
> made. I'm not sure that the aria attributes are correct.
>
> I'd like to confirm that each accordion opens and that the content inside is
> revealed. Secondly, I'd like to know if the link that is inside of
> Accordion 11 reveals the content that it is linking to that is inside of
> Accordion 12. This depends on jquery to inject changes and I'm just not
> convinced it is all working correctly for screen readers.
>
> As always, I'm grateful for your assistance.
>
>
>
> Angela French
> Internet/Intranet Specialist
> Washington State Board for Community and Technical Colleges
> 360-704-4316
> <EMAIL REMOVED> <mailto: <EMAIL REMOVED> >
> www.sbctc.edu<;http://www.sbctc.edu/>;
>
> > > > >


--
Work hard. Have fun. Make history.