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

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Greenfield, Mark
Sent: Wednesday, October 04, 2017 10:59 AM
To: ' <EMAIL REMOVED> ' < <EMAIL REMOVED> >
Subject: [WebAIM] Page Layout / Descriptive Link Question

Hi All,

I am looking for guidance on the layout for this page: https://hubsupport.buffalo.edu/students/index.php.

The current layout has dozens of links to "How to (PDF)" and "Video Tutorial". We are struggling with the best way to design this page to make it accessible by providing more descriptive links.

Thanks in advance for your help.

Mark
Mark A. Greenfield
Digital Strategist
109 Norton Hall
State University of New York at Buffalo
Buffalo, N.Y. 14260
telephone: (716)645-2811
e-mail: <EMAIL REMOVED> <mailto: <EMAIL REMOVED> >

The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.