Accessible Links

Importance of Accessible Links

There are various ways users may interact with links on a page. .

Screen readers can scan a whole page and read it aloud to a user, but this can be time consuming if a user is looking for specific information. Screen reader users will typically pull up a list of links present on a page and scan through that list instead. In this case, the links lose context and only the link text is pulled up. It is important that link text be succinct and descriptive so that these users can make sense of where the link will be taking them, especially with no context. 

Keyboard only users do not use a mouse to click through links, instead they will use the tab key to navigate through links, buttons, and form fields. This makes it important for links to be distinctive when they receive focus so that these users are aware of what link, button, or form field they are on. The focus of a link is typically determined by the browser and different browsers will display the focus in different ways. Chrome places a blueish border around the link and Firefox places a dotted border around the link. It is important that developers and designers do not override this default behavior. 

Links are usually a different color than its surrounding, non-link text. Depending on color cues to distinguish links can make it inaccessible to color blind users. If color is the only distinguishing factor then a color contrast ratio of at least 4:5:1 for normal text and 3:1 for large text must be met. Adding non-color indicators such as an underline to links on mouse hover and keyboard focus also help distinguish links. Users who may not be as adept with technology or web sites may also appreciate distinguishing links from regular text. 

Link Text Guidelines

Link text must be succinct and make sense out of context. The link text alone should sufficiently convey function and purpose to users. Consider these guidelines when writing link text:

• Do not use ambiguous text such "Learn more" or "Read more". Ambiguous link text are confusing to screen reader users. For example, if you have multiple "Learn more" links and a screen reader user pulls up a list of links on the page he/she will be faced with multiple ambiguous "Learn more" links
• Do not include "Click here..." in your link. Links on the site are designed to be distinguishable so visual users and screen reader users will be aware of what is a link and what is not
• It is perfectly acceptable have sentence long links, but avoid having anything longer than a sentence
• Try not use full URLS as links and instead use the title of site. Screen readers will have the entire URL read out to them, even the special characters. Visual users may not be able to make out where the link will be taking them, especially if a site uses an abbreviation in its URL.
• Often times link text is enhanced when you include more surrounding text in the link
• Do not link to one destination multiple times too close to each other

To read more on link text visit WebAiM: Links and Hypertext

Image Links

Generally you should not use images as links. If this is a route you do take then it is important that you also fill in the "Alternative text" field for the image. The alt text should be treated like link text within content and describe the function and purpose of the link and not the image.