WebAIM - Web Accessibility In Mind

E-mail List Archives

for

From: TRAUTWEIN_PAUL
Date: Oct 10, 2019 8:38AM

Here's another couple options that have worked for me:

I created a style in my external css called "hfsr" (hide for screen readers) and set the indents to shove the content off screen, essentially hiding it from people who are able to read the button/link names in context.

Then in my link I would include descriptive content and surround it with a span with the "hfsr" class:

<a href="link"><span class="hfsr">Product Name, </span>Buy it Now!</a>

Another way I've done it, and here's where I might get in trouble with some of the more knowledgeable accessibility experts, is to use an "area-label" in the anchor tag:

<a href="link" aria-label="Buy the Product Name now.">Buy it Now!</a>

The aria-label overrides what's in between the anchor tags and reads off a grammatically correct sentence.

Both solutions have worked when I've tested them in NVDA and Voiceover. In context and in a list of links.

All that said, I have never tested "Dragon" as Mark has so I'm not sure how it would handle my solutions.

Paul

On 10/9/19, 2:02 AM, "Mark Magennis" < <EMAIL REMOVED> > wrote:

Glen pointed out that even if you include the repeated link text "get it now" in context in the ways allowed for WCAG SC 2.4.4 compliance, that context is not available in a links list. Similarly, it is not directly available when you TAB through the links. To understand what "it" means, the user has to backtrack through the sentence, paragraph, list item, or table cell to discover the context. This is a major pain.

There's another consideration too. Users of voice activation software such as Dragon Naturally Speaking want to activate the link by saying "click" followed by the unique link name. They may guess (or find out) that the link name is always in the form "Get it now {product name}" so they can speak that. They could also use a two-step process of just saying "click link" and Dragon will number all the links on the page, then "press 17" or whatever number they want. But I'm informed that Dragon users feel this is unacceptable, making them "jump through hoops" to use the functionality. They want to be able to activate everything directly.

Glen, I quite like your idea of inserting the comma to get around the clumsy construct. Some time ago, when I was working on pages with repeated links "launch", "edit", "delete", etc. I was finding that some of them were very clumsy. I can't remember the particular examples but it was something like "get details". I thought it would be clever to add extra words in there, such as "for" to make it "get details for {object}" but then the Dragon issue came up. The comma would seem to not create that issue, although I actually doubt that it will make that much difference to most screen reader users who seem perfectly able to understand what to me sounds like verbal garbage spoken at 300 words per minute.

Mark

Mark Magennis
Skillsoft | mobile: +353 87 60 60 162
Accessibility Specialist