E-mail List Archives

Thread: Page Layout / Descriptive Link Question

for

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

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Greenfield, Mark
Sent: Wednesday, October 04, 2017 10:59 AM
To: ' = EMAIL ADDRESS REMOVED = ' < = EMAIL ADDRESS 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 ADDRESS REMOVED = <mailto: = EMAIL ADDRESS 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.

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.

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

PROCEED WITH CAUTION: This message triggered warnings of potentially malicious web content. Evaluate this email by considering whether you are expecting the message, along with inspection for suspicious links.

Questions: = EMAIL ADDRESS REMOVED =

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

This electronic message contains information generated by the USDA solely for the intended recipients. Any unauthorized interception of this message or the use or disclosure of the information it contains may violate the law and subject the violator to civil or criminal penalties. If you believe you have received this message in error, please notify the sender and delete the email immediately.