Links are a critical component of any website. They allow users to navigate to different sections of the website or even to external pages to consume content, network with other users, make online purchases, and do many other activities. Without links, a website would be a single page. Given their importance, it is a wonder that so much thought goes into a URL but so little into a “Read More” link.

Many users rely on context clues to understand a link’s destination. A headline followed by teaser text and a read more link likely goes to the complete article, but for users with visual impairments or reading difficulties, whether permanent or temporary, context clues may not be enough. Most screen readers used by those with visual impairments also allow users to skip over reading text and provide a list of available links. Without context, these links can be meaningless.

The problem may be exacerbated when images or icons are used. All images should have alt text to describe what is being shown, but when an image or icon is used as a link, visually impaired users may receive even less information from assistive devices.

The simplest option is to make every link distinctive. But this may not be the most popular option with regards to design or with dynamic text that should update with little to no manual editing. Fortunately, there are coding options that can resolve this by providing additional information to users while not impacting design or adding manual work every time a new blog post is created.

Unique Link Text

The simplest way to ensure links are clear to all users is unique link text. This means the link's purpose should be clear on its own. In most cases where a link is part of a block of text, this can be easily done by rewording the text.

To contact us, please click here.

In the example above, the link text reads “click here”. Alone, this text does not indicate what the link does.

Contact us to learn more.

Almost all website users know to click a link. By removing unnecessary language and turning the text that describes the action into the link, the purpose of the link becomes clear. Additionally, this can be done with fewer words.

Using aria-labelledby

Consider how most blog pages are formatted — headline, summary, and a link to “Read More”. As with the problem of link text not being unique, the link to “read more” relies on context to be understood by the user. Screenreader users may skip the headline and summary text when scanning for links.

One solution is to use unique link text as described above, but when building dynamic features such as blog post listings, it can be time-consuming to write each. Another solution is to use the area-labelledby attribute.

<h2 id=“headline”>Warm Weather ahead in the Forecast</h2>

<p>High temperatures are expected to remain in the lower 90s for the next week with plenty of sunshine. <a id=“123” href=“/news/warm-weather” aria-labelledby=“123 headline”>Read More</a></p>

In the above example, the aria-labelledby attribute uses two IDs to create a reference used by a screenreader. In this example, the id=“123” references the link text while the id=“headline” references the blog headline. The result will be the screen reader announcing a link to “Read more warm weather ahead in the forecast.”

A tip when building any dynamic feature using aria-labelledby is to ensure the IDs are unique for each item. For example, if a blog list features the five most recent posts, each headline ID needs to be unique. In Drupal Views, this can be done by adding the node ID, hiding it from the view, and adding it to the headline id.

Title

Another option to help provide clarity to users is adding the title attribute. While it is not the preferred method, it can be used to help users better understand the purpose of the link.

<a href=“/news/warm-weather” title=“Read more about the upcoming weather forecast”>High Temperatures Forecasted.</a>

In the above example, the link text does not make it clear that there is more information about the weather forecast on the linked page. By adding the title, screenreader users will hear the additional information; however, the title attribute also causes more information to display when hovering over the link. Because of this second attribute, it can be viewed as providing supplemental information to all users, not only those relying on screenreader to text-to-speech features of mobile devices.

Alt Text

It is always best practice to include alt text with any images, but this become even more true when an image or an icon is used as a link. Icons used purely for decoration can use the attribute alt=“” but if the image is used to inform users about a link, it must include alt text and can use any of the previously described techniques.

It is recommended that alt-text fields be required fields for all images.