Link Accessibility No-Nos That May Surprise You

Six changes made to AT3 Center News and Tips to improve readability for everyone, including individuals with disabilities and seniors.

A Click Here link canceled with a red slash.

True confession: I like to write about things I don’t know too much about. I’ve observed over the years that this naiveté is valuable for reaching large numbers of people. After all, what is news to me is often news to others. But when I began researching how to create accessible links, I did think this was a topic I knew reasonably well.

I was wrong.

“Because links are so basic to the functionality of web content, inaccessible links are one of the most severe barriers to overall accessibility.” WebAIM “Introduction to Links and Hypertext”

Gulp.

As a result, this month a few changes took place at AT3CenterBlog.com to improve the experience and usability of the site for a larger audience. That audience includes visitors with visual and/or cognitive disabilities, seniors, as well as anyone using a smartphone or tablet. Yes, that’s most of us.

Below are six rules for accessible hypertext links that triggered changes to this site.

One: Link Text Must Inform Out Of Context

I thought I already had this nailed. You won’t find “click here” or  “read more” as stand-alone links at AT3CenterBlog. I knew users of screen readers often scan links on a page to skim content and structure. Links need to be descriptive and intelligible on their own. Also, “click here” is unnecessary and annoying. Screen readers already announce when text is a link.

Still, my site menu offered two pages: “What is AT?” and “About.”

About what?

Now it reads “About this Blog.”

Read more about link text accessibility and phrases to avoid (such as why I’m no longer including the “read more about” within the link).

Two: Links Must Look Like Links

This is so obvious. I thought I had this covered. The corollary to this rule is text that is not a link should not resemble a link. Hence, no one underlines book titles anymore (although dinosaurs were taught to do so on our typewritten papers).

Still, this site’s menu offered “What is AT” and “About” using the same grey font as body text.

Now they are red.

Note: there is an exception to this rule for a site’s primary navigation links. I notice that WebAIM.org also has a menu without distinguished links. However, I think turning mine red would assist anyone who is not savvy about Web convention (such as a few of my own family members…).

Three: Colored Links Must Have a 3:1 Contrast Ratio

Best practice is to underline all links in content. However, if your links are not underlined, web accessibility guidelines (WCAG 2.0) require link text be discernable from body text by at least a 3:1 contrast ratio.

I used WebAIM’s link contrast checker after inspecting my page to learn the hex value of my colors. I found I had to adjust both my body text and my link text colors to achieve that ratio. Of course, an easier fix would be to underline all links, but I’m not fond of how busy this looks on the page.

Learn more about color and contrast requirements.

Four: Color Isn’t Enough for Mouse Hover or Keyboard Focus

This was news to me. If a website uses color instead of underline to designate links, those links must change in a different way when a mouse hovers over them. This is also true for “keyboard focus” (using keystrokes to navigate links). Links “must present a ‘non-color designator.'”

Testing this rule, I found no change at all when I used my mouse to hover above an AT3CenterBlog link. With keyboard focus (using the tab key) I found they did highlight with a subtle box outline.

To comply with WCAG 2.0, I changed my links to be more perceivable for selection. All links now become underlined when hovered with a mouse or with keyboard focus (thank you WordPress Help).

Learn more about link appearance.

Five: Linktips Cannot Provide Vital Information

Ouch. This one hurt. A linktip (or tooltip) is the text that sometimes shows up when you hover over a link. Yet no one sees a linktip on a mobile device or using keyboard focus. Screen readers have to be set to read them (some can’t).

Linktips are created with HTML using the “title attribute.” Although I am not a coder, I had been earnestly hand-coding them. Linktips are now dead to me. Read more about accessibility problems with the title attribute.

Six: Links That Open in a New Tab Need a Permanently Visible Label

Ouch again. I was under the impression I could use the linktip to alert users to links that open in a new tab. Instead, that information should be a part of the link text itself.  Alternately, I had learned it was fine to put the statement “all links open in a new tab” on a page. Yet how would someone scanning links with a screen reader find this?

The more I read, the more resigned I am to links opening in the same tab (and letting visitors rely on their back button). This is a change I’ve made to this post and posts going forward.

The World Wide Web Consortium (W3C) recommends links open in a new window or tab only when necessary (such as when opening a link would log out a user from a secured area of a site).

If you have an accessibility issue with AT3 Center News and Tips, please email me. Together we might improve the site (and blog about it!)