WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Best acccessible accordion widget example

for

From: Birkir R. Gunnarsson
Date: Dec 5, 2016 7:43AM

Good point.
Ifthe content isnotimmadiately after the triggeringelement,
aria-controls should be used on the trigger to pointtothe content.
<buttonaria-expanded="true" aria-controls="cpanel1">text</button>
....somestuff goeshere...

<div id="cpanel1">content of panel goes here</div>
1. For this setup it is better to use an aria-labelledby on the
content panel pointing back to the button.
2.Screen reader support for aria-controls is nearly non-existent (Jaws
with FF and Narrator last time I checked, nothing else), so the
aria-labelledby implementation is marginally better.
Feel free to file bugs so wecankeep pushingthis issue with thevendors.



On 12/5/16, Lovely, Brian (CONT) < <EMAIL REMOVED> > wrote:
> :" aria-expanded on a button is really all you need" ...with maybe the
> caveat that the content panel should be just after the triggering element,
> so that the expanded content is the next thing the user encounters.
>
>