WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Ideas for solving non-distinguishable links on accordion lables

for

From: Birkir R. Gunnarsson
Date: Feb 2, 2017 5:00PM

Angela

The accordion header should have an aria-expanded attribute
(aria-expanded="false" when content is hidden, aria-expanded="true"
when it's visible).
Also, technically, it should be a button (or a link with role="button").
You must use aria-expanded to communicate to screen reader that, when
clicked, this header will display content, as well as the currently
displayed state of that content.
See example at:
https://dequeuniversity.com/library/aria/tabpanels-accordions/sf-tabless-multiselect-accordion

Once you code the accordion triggers correctly, a screen reader will
distinguish it fro a link with the same text.
One is announced by screen reader as "foo button expanded", the other
as "foo link".




On 2/2/17, Angela French < <EMAIL REMOVED> > wrote:
> Hello,
>
> Our site makes use of expanding content areas that we call accordions. Each
> accordion is labeled with a heading and is a link, which when "clicked" on,
> exposes more content.
> The problem is that there may be a link inside of the accordion that also
> has the same link text as the accordion label. This leads to a situation of
> two exact non-distinguishable links. I'm trying to figure out a solution.
> One idea I thought of, is to add a title attribute to each accordion heading
> link that reads something like "expand content area." But my understanding
> is that the title attribute is not turned on by default on screen readers,
> so this is probably not the best solution.
>
> Looking for other ideas.
>
>
> Thank you,
>
>
> 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.