The humble Hyperlink and Website Accessibility

Hyperlinks were the original interactive controls that made websites interactive. They remain heavily used across the internet to this day. Although hyperlinks may seem simple for those without impairments or disabilities, they pose challenges for many other website users.


Good writing applies to links, too

A focus on high-quality text content for websites is important. But when it comes to hyperlinks, it's common for quality writing to be forgotten.


Issue 1: Including links as text

A link has two parts: the URL that it points to and the link text that appears on the screen. There is no reason that these both need to be the same. How many times have you seen web pages with links that look like this:


Newtown has several garden centers that stock Daffodil bulbs:

http://www.diannesflowers.co.nz

http://www.daffodils.co.nz

http://www.beautifulblooms.co.nz


Imagine having to listen to the links above via a screen reader: “h, t, t, p, colon, forward slash, forward slash, w, w, w, dot, diannesflowers, dot, co, dot, nz”


Pretty frustrating, right? Wouldn’t you prefer to hear the following:


Newtown has several garden centers that stock Daffodil bulbs: Diannesflowers

Flowersareus

Beautifulblooms


Writing cleaner, more readable link text is among the easiest ways to make your site more accessible. Plus it makes the content more readable for everyone involved.


Issue 2: The “click here” confusion

Another common problem with link text is “click here” or "find out more" (and similar).


For example: To visit the iaccess site, click here.


Aaaaarghh! Screen reader users face serious challenges when navigating web pages with links such as these. If nothing else, having to listen patiently to all the text on a page takes a lot of time, particularly if the user is seeking a specific link. One of the shortcuts many screen reader users employ to speed things up is to skip through the links on a page. This lets them hear an overview of the page and get their bearings before returning to the top to begin listening to everything.


When a screen reader user lands on a link, the reader will announce “link” followed by the link text. So in the example above, the user would hear “link: here.” Hmmmmmm ... Rewriting the link text in a more meaningful way enhances the experience greatly for screen reader users and other users too.


Here's a better way to write that text:

Visit the iaccess website.


Opening a new set of issues with every hyperlink

It’s common to set certain hyperlinks to open in new windows (or tabs). For example, designers may want to offer users an easy way to return to the original site where they left off.


Taking users to a new window or tab, however, can be confusing even for sighted users. Imagine navigating a site using a screen-reader and suddenly finding yourself in a new window without clear warning beforehand. It can be disorienting at best.


Consider adding a note to links that open in new windows to forewarn users:


For more details, please visit the beautifulblooms website (links to a new window).


If having the note appear within the link text seems clunky, there are ways to hide it from appearing onscreen while still allowing screen readers to pick it up. Where are those links again?

Once upon a time, all hyperlinks were blue and underlined. Today, however, many websites use subtler ways of differentiating links from regular text. Unfortunately, achieving visual differentiation can be challenging when trying to achieve meaningful accessibility across a whole website.

Both color blindness and low vision are disabilities which can be easily overlooked when designing a site’s color scheme, including link colors. Plus, the needs of color-blind users and those with low vision are often quite different.

Link color should contrast with text color, but certain combinations should be avoided. For example, blue text with purple links or black text with dark red links meld together to become indistinguishable for users with different varieties of color blindness.


However, even with a color scheme that works for color-blind users, it is important that both the regular text color and link color offer sufficient contrast ratios against the background color for users with low vision.


But I need to keep my website colors as they are! It's not easy finding a color scheme that represents your branding whilst also being attractive to sighted users AND color blind or low vision users.


The iaccess Accessibility Tool gives your website users the option to highlight the links throughout your site, and change various colors and contrasts to enable a better digital accessibility experience without affecting your website.