Web Accessibility Cookbook

Chapter 3. Linking Content

Hyperlinks serve different purposes; they link to other web pages, sections within a page, external resources, email addresses, telephone numbers, and files. Users have certain expectations of what happens when they find and click a link, and you should meet these expectations with your designs and technical implementations.

A well-designed link has a concise and descriptive text label. It informs users up front what will happen when they click it, and users can activate it with any input modality. When it doesn’t, users might be unable to identify the link as such, use it, or understand its purpose.

This chapter closely examines the anatomy of hyperlinks and explains how to label, style, and create links in server-side and client-side rendered environments.

3.1 Pick the Right Element

Problem

If a link to a resource doesn’t meet basic requirements, you may exclude one or more groups of users from being able to access it or understand its purpose. The discussion section of this recipe provides more detail, but the essential criteria for a link are:

• It must convey its link role.

• It has an accessible name.

• The label is unique, concise, and straightforward.

• It’s accessible to assistive technology.

• It’s focusable with the keyboard.

Tip

Some elements are focusable; for example, links, buttons, or form fields. You can access them using the keyboard by pressing Tab or Shift + Tab. By default, browsers highlight focused elements visually.

Solution ...