Accessible URLs and Hyperlinks

Episode 8 transcript of the Access & Allies podcast

Tap into this episode for a brief list of easy actions you can take — starting now — to make the links you share on your website more accessible and easier to use for a wider audience.

Go back to the articles and blogs page

An illustrated person: a white masculine person in a hoodie and jeans sitting on a text bubble holding a mobile phone.

Introduction

This is the All Access podcast Access & Allies. My name is Rowan; I’m the co-Founder of All Access.

The goal of Access & Allies is to attempt to break down any digital accessibility topic under the sun to answer any and all of your questions around making digital tools more accessible. Thanks for tuning in, and if you prefer to read along, make sure to find this episode’s transcript in the notes — along with any resources I mention.

All Access is an initiative focused on supporting organizations and business leaders in making their online presence and digital information accessible to everyone, regardless of ability or disability, device they’re using, or their location, be it sitting at home or on the bus. We make inclusive digital spaces through making new or retrofitting existing websites to meet WCAG’s standards for accessibility, training & consulting, and full or partial site assessments.

Now, let’s get started with today’s topic: How to make accessible links.

In this episode, we will discuss the importance of making links accessible and the steps you can take to ensure that everyone, including people with disabilities, can access the content on your website.

Links are an essential part of the web browsing experience. They allow users to navigate between different sections of a website, and they provide a way to access external content. However, for people with certain disabilities, links can actually act as a barrier to accessing information.

For example, people who are blind or have low vision may use assistive technologies like screen readers to access web content. If links are not properly labeled or are not descriptive enough, screen readers cannot convey the context of the link to the user. And in digital spaces, context is everything! This can lead to confusion and frustration for the user, and it can prevent them from accessing what they’re looking for, and what you’ve worked so hard to provide.

Going back to POUR

Now going back to our POUR acronym (perceivable, operable, understandable, and robust), there are three key words here I want us to think about when we’re thinking about creating accessible links. Those are “perceivable”, “understandable”, and “robust”. Meaning, no matter how someone is engaging with your content, whether its by reading or listening, it needs to be robust so that there is enough context to be perceived at every access point for someone to understand what is in front of them. So again, make sure there is enough context for both readers and listeners to be able to interact with your site fully informed.

So how do we stop links from being a problem, and instead make them gateways to new information?

  • The first step is to use descriptive link text and avoid using in-text URLs: The link text should provide the user with a clear idea of where the link will take them. Avoid using generic text like “click here” or “read more”. Instead, use descriptive text that accurately reflects the content of the link. For example, “click here for more information on fruit bats”.
  • Next up is to use the title attribute: The title attribute provides additional context about the link. It can be used to provide more information about the destination of the link or to provide a warning about the content of the link.
  • Ensure that links are distinguishable: Links should be visually distinguishable from the surrounding text. This can be achieved through the use of colour, underlining, or bold text. Also, make links visually different when they are highlighted or the mouse hovers over them. An example might be providing an outline, or changing their text and background colours.
  • Use proper heading structure: Headings provide a structure for web content and help users navigate through the page. Links should be placed within the appropriate heading structure to provide context for the user.
  • Another thing to keep in mind that goes along with general accessible design is to not use all caps for linked text. Screen readers will read words in all capitals character by character, as if they are acronyms. It makes these words difficult to understand, not to mention gets annoying fast.
  • One tip I found that I hadn’t come across before is to not use tooltips — a pop-up window that hovers with your mouse — as a way to provide information. Tooltips are inaccessible to many users with assistive technologies or who have low vision and aren’t necessary if the right information is provided through more efficient means — like in the link text itself.

By following these rules, you can ensure that your website is accessible to everyone, including people with disabilities.

What about ARIA labels?

To get a bit more in-depth here for the developers out there, you might have heard about these things called ARIA labels. So what are they? And if you can make links accessible without using them, why bother using them?

ARIA labels, or Accessible Rich Internet Applications labels, are a set of attributes that can be added to HTML elements to provide additional information for assistive technologies. They are especially useful when standard HTML elements do not provide enough context or when elements need to be customized to make them accessible.

To use ARIA labels, you can add the aria-label attribute to an HTML element and provide a descriptive text that explains the purpose or function of the element. For example, if you have a button that says "Learn More" but you want to provide more context for screen reader users, you can add aria-label="Read more about our services" to the button element.

Another way to use ARIA labels is through the aria-labelledby attribute. This attribute references the ID of another element on the page that serves as the label for the current element. This is useful when you have a complex component with multiple elements and you want to associate a label with it.

It's important to note that while ARIA labels can enhance accessibility, think critically about when they might be needed or beneficial, and don’t only rely on your ARIA labels to provide context.

By incorporating ARIA labels appropriately, you can improve the accessibility of your website and ensure that more users can navigate and understand the content effectively.

Conclusion

Thank you for listening to this episode of Access & Allies on how to make links accessible. I hope this has provided you with some new information, or at least confirmed some old knowledge. You put a lot of effort into getting the information you care about out there to the world, and this is just one way to make sure that its done in an inclusive, thoughtful way that reduces barriers for a many members of your audience.

If you’re still wondering about link accessibility, feel free to check out the resources provided in the notes section. And if you have any questions or comments, please feel free to reach out at info@allaccess.dev or through LinkedIn.

Want your site assessed for accessibility, or looking for consultation on your site plan? Make sure to reach out about that as well — we would love to know how we can support you.

It’s been fun talking at you and until next time on Access & Allies.