Creating accessible links to help users discover your site’s content treasures

Links are among a website's most valuable components. They connect (that’s what the word “link” means, after all) different pages and resources, helping site visitors find the content they are looking for. Well-planned and formatted links are like a detailed, intuitive treasure map that sends visitors to the right destination.

Links are also critical for making your website accessible to visitors with visual or other impairments. A link that lacks important information can prevent some visitors from accessing all the treasures a website holds. Or even worse, it can send users to completely undesirable content and discourage them from exploring all your site has to offer.

In this post, I’ll discuss how to present links in various contexts, clearly explaining how they can create and inform powerful relationships between different pages and assets.

Links <> buttons

Perhaps the most common error developers make when creating pages and templates is to confuse <a> with <button>. This is because both <a> and <button> can be clicked, receive focus, and trigger different events on the page. They also can be coded to look the same via CSS, and many designers (and page builder tools, for that matter) use the visual presentation of a “button” to emphasize key links.

So, let me start off by making this clear distinction:

• Links [the <a> HTML tag] connect or relate two different internet resources.
• Buttons [the <button> HTML tag] trigger actions on a page and should not be used to link to other resources.

Buttons <button> show or hide a block of the page, expand part of a menu, close a modal on the page, or submit a form. Use links <a> to send the visitor to another page, refer to an anchor link on the same page, or download a PDF file.

Extending links and buttons information

Proper use of <a> and <button> HTML tags also has a dramatic impact on accessibility. However, developers can use some attributes to add more information to links and buttons, helping visitors to make the right decision when clicking on each of them. Sometimes, the additional information is crucial for screen readers to properly communicate what a link or a button on the page is for.

Here’s a look at the attributes used to add additional information to your links and buttons and how you can use them to make your site more accessible and user-friendly. 

Adding a little more info to your links

Providing a clear description of a link in the body copy of your page is an awesome way to help visitors understand it. For example:

The Mugo blog has an <a href="https://www.mugo.ca/Blog">extensive archive of posts about web development</a>.

This leaves little question about what the user can expect when they click on the anchor text.

But, this is not always possible. Often, a meaningful link requires additional information, and fortunately, there are two HTML attributes that serve this purpose: title and aria-label. Let's dig into each of them.

HTML title attribute

According to W3Schools, the title attribute specifies extra information about an element, which is displayed as tooltip text when the mouse moves over it. The title attribute is also an additional source of information about a link for assistive screen reader technology.

So, the title is essential for adding meaningful information to the link's visible description.

Consider the following example:

<a href="https://www.mugo.ca/Blog" title="Blog Posts">See All</a>

The screen reader apps will read:

• “Link” – recognizes the <a> tag as a link.
• “See All” – the visible content of the <a> tag
• “Blog Posts” – additional information from the title attribute.

There is no need to repeat the visible content in the title attribute -- in other words, you don't have to put "See All Blog Posts" in that attribute. Doing so will only cause screen readers to repeat information already presented.

HTML aria-label attribute

MDN Web Docs defines aria-label as a string value that labels an interactive element. Page elements can be either too complex or so simple that they require an aria-label attribute to describe it properly. Effectively, aria-label overrides any other information about the element, including the title attribute.

Consider the following example:

<a href="https://www.mugo.ca/Blog" aria-label="Mugo Web's blog" title="Blog Posts">See All</a>

The screen reader apps will read:

• “Link” – recognizes the <a> tag as a link.
• “Mugo Web's blog” – the content from the aria-label attribute.

Screen readers will provide a clean, useful audio description of the link while the title attribute continues to present a visible mouseover tooltip.

In-depth examples of title and aria-label attributes

The following examples present a variety of cases and how adding title or aria-label attributes could improve link accessibility. This is not a comprehensive list of all use cases, but it gives you a good idea of how these attributes work together to optimize accessibility.

Basic link with insufficient visible description

A link with insufficient visible description requires additional information that can be provided by title or aria-labelattributes.

<a href="https://www.mugo.ca/Blog">See All</a>

Link with non-descriptive images

When the image does not have a descriptive alt attribute, the link must have a descriptive attribute.

<a href="https://www.mugo.ca/Blog">
   <img src="icon.jpg" alt="">
</a>

Link with descriptive images

In this case, the image has a descriptive alt attribute. However, the image description explains the image but tells nothing about the link.

<a href="https://www.mugo.ca/Blog">
   <img src="icon.jpg" alt="Icon of a pile of books">
</a>

Link with cards or complex element

A card or complex element might contain an image, title, description, date, categories, and other information. In this case, the link description requires even more attention to convert a beautiful and valuable element (card) into an accessible link.

<a href="https://www.mugo.ca/Blog">
   <img src="icon.jpg" alt="Icon of a pile of books">
    <div class="title">Blog Post</div>
    <div class="body">A complete list of in-depth insights on content, code, and creativity</div>
</a>

Stretched links

The aria-label attribute overrides any additional link description, making it a good accessibility option. Although aria-label can be used to provide a precise and accurate link description, it also ignores any existing content inside the link. For example, in a card with date and category, these two fields will be completely ignored by assistive technology if not included in the aria-label. How can you add a concise description to link cards and keep its content accessible? The solution is a stretched link.

Bootstrap describes stretched links as a powerful tool for making any component clickable by “stretching” a nested link via CSS, with the .stretched-link class being clickable. With stretched links, the link goes to an element that covers the entire card with position CSS rules. The card content (image, category, date, and so on) is outside the link, and it is still available on the page.

Here’s an example of code for a card with a stretched link:

<div class="card">
   <img src="icon.jpg" alt="Icon of a pile of books">
    <div class="title">Blog Post</div>
    <div class="body>A complete list of in-depth insights on content, code, and creativity</div>
    <a class="stretched-link" href="https://www.mugo.ca/Blog">Access now</a>
</div>

So, the stretched link is a basic link where the description can be managed accordingly.

Keep in mind that if the content inside the card contains any other link, that may break the stretched link feature. This might be a problem if your body or card description is a rich text field.

Conclusion

There are no magic rules for link implementation. Understanding the pros and cons of the available tools will help you choose the best solution for each situation. Mugo is always focused on providing the most appropriate solution for each case.

When it comes to accessibility, Mugo carefully audits sites to manually evaluate link descriptions. This audit includes automated tools that check for attributes and then human evaluation to see if the description is meaningful. Our team then works with developers and editors to make the links accessible.