WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Page Layout / Descriptive Link Question

for

From: Beranek, Nicholas
Date: Oct 4, 2017 9:17AM

Hi Mark,

First off, let me applaud you for wanting to go above-and-beyond the call of duty in ensuring that a link's purpose can be determined by the link text alone. Let me reference 2 success criteria: SC 2.4.4 Link Purpose (In Context) (A) and SC 2.4.9 Link Purpose (Link Only) (AAA). The first SC is one you should absolutely be following. What this means is that a user would be able to determine a link's purpose through its surrounding context, whether it's the same paragraph, list, or has a table header to describe it.

The reason I mention these criteria is because of your desire to "make it accessible". Technically, your column headers, "Web Based Tutorial" and "How To Guides", coupled with row headers such as "Signing in to HUB" and "Recognizing Universal Navigation" would solve for SC 2.4.4. In order for the latter to work, you'll need to mark them up as <th> like to column headers and a scope="row". If you want to take it a step further, then consider adding aria-describedby to each of the links and point to the ID of the row header (you would need to add it). Or, you could add an aria-label to the anchor and pass the string "Signing in to HUB How To (PDF)". Remember, we are trying to make a "programmatically-determinable" and it doesn't necessarily need to be visible in plain text.

I think what you may be concerned about here is when the user brings up a list of links. The aria-label should help because it overrides the visible text according to the Text Alternative Computation (and my testing in NVDA and Firefox).

I'm anxious to hear what you come up with!

Nick Beranek
Capital One