E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 7 (In chronological order)

From: Angela French
Date: Thu, Feb 02 2017 4:52PM
Subject: Ideas for solving non-distinguishable links on accordion lables
No previous message | Next message →

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 ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
www.sbctc.edu<;http://www.sbctc.edu/>;

From: Birkir R. Gunnarsson
Date: Thu, Feb 02 2017 5:00PM
Subject: Re: Ideas for solving non-distinguishable links on accordion lables
← Previous message | Next message →

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 ADDRESS 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 ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
> www.sbctc.edu<;http://www.sbctc.edu/>;
>
> > > > >


--
Work hard. Have fun. Make history.

From: Angela French
Date: Thu, Feb 02 2017 5:13PM
Subject: Re: Ideas for solving non-distinguishable links onaccordion lables
← Previous message | Next message →

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

From: Bryan Garaventa
Date: Thu, Feb 02 2017 5:34PM
Subject: Re: Ideas for solving non-distinguishable links on accordionlables
← Previous message | Next message →

" 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 ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com

From: Angela French
Date: Thu, Feb 02 2017 5:43PM
Subject: Re: Ideas for solving non-distinguishable links onaccordionlables
← Previous message | Next message →

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

From: Bryan Garaventa
Date: Thu, Feb 02 2017 6:06PM
Subject: Re: Ideas for solving non-distinguishable linksonaccordionlabels
← Previous message | Next message →

The ARIA "tab" role is not a composite widget role and it is "children presentational", meaning that it does not support focusable child elements.

This is the same as role="option" within an ARIA Listbox (role="listbox") widget.



Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
= EMAIL ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com

From: Sailesh Panchang
Date: Fri, Feb 03 2017 9:53AM
Subject: Re: Ideas for solving non-distinguishable links on accordion lables
← Previous message | No next message

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 ADDRESS 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
>
>