WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: please test my accordions

for

From: Bryan Garaventa
Date: Jul 19, 2016 4:41PM


Unfortunately these accordions have all the same issues I previously documented at
https://www.w3.org/Bugs/Public/show_bug.cgi?id&254

Also, as an FYI about ARIA Tabs, the 'tab' role doesn't support focusable children as used here, since they are 'children presentational' as of ARIA 1.1. This is exposed visually in red using Visual ARIA when tabbing through the focusable elements.
( http://whatsock.com/training/matrices/visual-aria.htm )

All the best,
Bryan



Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
<EMAIL REMOVED>
415.624.2709 (o)
www.SSBBartGroup.com


-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Angela French
Sent: Tuesday, July 19, 2016 3:19 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] please test my accordions

Well this is disappointing. We have role="tabs" on existing accordions throughout our site.

Besides this use of role, do the accordions work? Are they perceivable and operable?

I ask because I'm trying to gauge how much remediation I'm going to need to make.

We have many other pages on our site that use accordions. Here is an example on the live site: http://www.sbctc.edu/for-employers/centers-of-excellence.aspx .

Angela French

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Bryan Garaventa
Sent: Tuesday, July 19, 2016 3:10 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] please test my accordions

Yes, please don't use ARIA Tabs for accordions.

The ARIA Tab markup is causing accessibility issues in this example.

The use of ARIA Tab roles is no longer going to be a recommendation by the W3C for Accordions as previously documented in APG 1.0 because it presents too many issues across differing disability types and ATs, and instead as of the ARIA Authoring Practices Guide 1.1 revision will use this new design pattern instead:
https://lists.w3.org/Archives/Public/public-aria/2016Jul/0143.html



Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
<EMAIL REMOVED>
415.624.2709 (o)
www.SSBBartGroup.com


-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Birkir R. Gunnarsson
Sent: Tuesday, July 19, 2016 3:08 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] please test my accordions

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/>;
>
> > > archives at http://webaim.org/discussion/archives
> >


--
Work hard. Have fun. Make history.