E-mail List Archives

Re: Page Layout / Descriptive Link Question


From: Karl Brown
Date: Oct 4, 2017 9:16AM

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

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 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 REMOVED> <mailto: <EMAIL REMOVED> >
> > > > >

Karl Brown
Twitter: @kbdevelops
Skype: kbdevelopment

Professional Certificate Web Accessibility Compliance (Distinction),
University of South Australia, 2015