WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Ideas for solving non-distinguishable links onaccordion lables

for

From: Angela French
Date: Feb 2, 2017 5:13PM

I know that we need to re-do the XSL that in our CMS produces the rendered html for our accordions. It is in the project plan. For right now, I'm looking for a quick fix that might at least help until we can get there.

Angela

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Birkir R. Gunnarsson
Sent: Thursday, February 02, 2017 4:00 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Ideas for solving non-distinguishable links on accordion lables

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


--
Work hard. Have fun. Make history.