WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Ideas for solving non-distinguishable links onaccordionlables

for

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

Currently, the div that the heading is nested in has role=tab. The anchor tag that is nested in the heading tag has the aria-expanded attribute. The problem is that the accessibility checker we are using flags the non-distinguishable links. I know I shouldn't get so caught up in the accessibility "score" of pages, but the fact that this gets flagged on our checker tends to obfuscate other issues on the page.

Angela

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

" But my understanding is that the title attribute is not turned on by default on screen readers,"

This is actually not true any longer since screen readers are now more reliably interfacing with the accessibility tree. E.G a link that has link text plus a title attribute will set two different properties in the accessible object, the Name which is from the link text and the Description which is from the title attribute. So when using JAWS or NVDA or VoiceOver for example, when you set focus to the link it will read both.

Here however, for an accordion, simply add role="button" to the accordion link that is inside the heading plus aria-expanded to convey the state which needs to be programatically toggled between "false" when closed and "true" when open.

The use of role="button" here will separate the element type for the accordion toggle and distinguish it from the embedded link that has the same link text.

You can see working code that demonstrates this within the archive at https://github.com/w3c/aria-practices


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: Thursday, February 02, 2017 3:53 PM
To: WebAim Forum ( <EMAIL REMOVED> ) < <EMAIL REMOVED> >
Subject: [WebAIM] Ideas for solving non-distinguishable links on accordion lables

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/>;