WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Sailesh Panchang
Date: Feb 3, 2017 9:53AM

Angela,
Testing with screen reader for links with anchor text / aria-label + title
http://www.deque.com/blog/text-links-practices-screen-readers/
Thanks,
Sailesh Panchang

On 2/2/17, Angela French < <EMAIL REMOVED> > wrote:
> 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/>;
>
> > > http://webaim.org/discussion/archives
> > > > http://webaim.org/discussion/archives
> > > > > >