E-mail List Archives
Thread: Page Layout / Descriptive Link Question
Number of posts in this thread: 4 (In chronological order)
From: Greenfield, Mark
Date: Wed, Oct 04 2017 8:59AM
Subject: Page Layout / Descriptive Link Question
No previous message | Next message →
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 ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
From: Karl Brown
Date: Wed, Oct 04 2017 9:16AM
Subject: Re: Page Layout / Descriptive Link Question
← Previous message | Next message →
HI Mark,
There're three ways I usually advise.
The first would be to make the item under "Training Topic" the link. That
way you have a descriptive idea of what you're downloading. This is my
preferred solution to allow everyone a better idea of what they're getting,
though they'll be missing the "How to" part.
The second option is to make the links longer where they are to include to
descriptive text, but this might break the existing designs.
The third option, if sighted users aren't a concern, is to use some visibly
hidden text as part of the link, e.g., <a href="#">How to<span
class="sr-only"> sign in to HUB</span></a>.
The class of .sr-only I usually use from Yahoo's method:
.sr-only {
position: absolute;
height: 1px;
width: 1px;
clip: rect(1px,1px,1px,1px);
margin: 0;
padding: 0;
overflow: hidden;
white-space: nowrap;
}
This gives a bit more descriptive link text to people who hear the page,
but doesn't really work for sighted users who'd benefit from the
information.
There might be better ways of doing this, I'd be interested to hear what
anyone else thinks?
On Wed, Oct 4, 2017 at 3:59 PM, Greenfield, Mark < = EMAIL ADDRESS REMOVED = > wrote:
> 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 ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
>
> > > > >
--
Karl Brown
Twitter: @kbdevelops
Skype: kbdevelopment
Professional Certificate Web Accessibility Compliance (Distinction),
University of South Australia, 2015
From: Beranek, Nicholas
Date: Wed, Oct 04 2017 9:17AM
Subject: Re: Page Layout / Descriptive Link Question
← Previous message | Next message →
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
From: Meacham, Steve - FSA, Kansas City, MO
Date: Wed, Oct 04 2017 12:00PM
Subject: Re: [CAUTION: Suspicious Link] Page Layout / Descriptive Link Question
← Previous message | No next message
I set the standard at my agency to follow WCAG 2.0 Level AA plus two AAA's. One of them is SC 2.4.9 Link Purpose (Link Only) (AAA). I usually require the link text alone to be sufficient to identify the link. Finding it's context is sometimes problematic for the blind and those with limited vision. So is the aria workaround, as it only helps the blind with screen readers.