What You Need To Know About Accessible Links!

Below is common sense accessibility advice, from a great article with fifteen link creation rules to code by- thanks to Gian Wild.  Gian rightly focuses on practical accessibility  rather than compliance with mostly outdated regulations (like the 18 year-old Section 508!) A few excerpts:

Rule 6: Restrict the number of text links on a page

This is important because users see links as a form of navigation: they know they are not on the right page so they are looking for links that will take them to where they want to go.

If there are a lot of links on a page, it makes it that much harder to navigate a site.

And of course, screen reader users can pull out all the links in a page, so if there are hundreds of links then reading through them all is a nightmare.

Ok, so how many links are too many? That’s the ‘How long is a piece of string’ question, and depends on the type of site that you have.

Just bear in mind the users that are navigating from link to link when you’re constructing your pages.

Rule 11: The case for underlining links

People expect links to be underlined. When they see underlined text they expect it to be a link (which is why you should never underline text in the online world unless you are representing a link).

WCAG2 does recommend that you underline your inline text links, but also allows developers to meet the accessibility criterion if they use a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them.

This requires that your text links contrast sufficiently with surrounding text (the W3C has a list of link colors that contrast appropriately with black text and a white background) and there is an additional visual cue when the link receives mouse or keyboard focus.

This visual cue can be an underline (go on, make those links underlined!), bold, italic or increase in font size or it can be the addition of a glyph or image. It can be implemented through CSS as this only needs to be a visual indicator.

But remember to add a:focus to a:hover!

The article: