Caitlin de Rooij is a Web Accessibility Specialist. She works as an Accessibility Consultant for Level Level and provides training and workshops for enhancing digital accessibility. Caitlin’s expertise lies in ensuring that websites and digital content are designed and developed to be inclusive and usable for individuals with diverse abilities and disabilities.
Hypertext links, also known as hyperlinks, are the connective strands that form the web. They take us from one webpage to another, giving us access to a wide range of information, services, and experiences. However, we often forget to think about link accessibility.
Links are important for individuals of all abilities, including those who depend on screen readers or keyboard navigation. When used effectively, links can improve the browsing experience for everyone. However, if overlooked, they can create obstacles that reduce accessibility and usability.
Enhancing link accessibility: A deeper dive into advanced techniques
Optimising link text for accessibility
Link texts are signposts of the web. They guide users to their destinations with clarity and purpose. According to the Web Content Accessibility Guidelines (WCAG), the purpose of each link should be discernible from the link text alone or with its surrounding context (WCAG Success Criterion 2.4.4). Here are some key tips to optimise link text for accessibility:
- Use descriptive link text, for example:
| Good | Bad |
|---|---|
| Explore our range of accessible online courses. | Click here for more information. |
- Keep link text concise:
| Good | Bad |
|---|---|
| Learn more about web accessibility | For additional details and insights on the topic of web accessibility, please click here. |
- Avoid linking full URLs unless necessary:
| Good | Bad |
|---|---|
| Visit Hotels.com | https://www.hotels.com |
- Always use unique link text:
| Good | Bad |
|---|---|
| Contact us | Contact |
- Provide action prompts at the end of the link text:
| Good | Bad |
|---|---|
| Discover The A11y Collective’s range of accessibility courses (opens in a new window). | Find accessibility courses. |
Designing links with assistive technologies in mind
Recognising and accommodating the needs of individuals who interact with websites differently is important when thinking about inclusivity. When designing links, it’s important to prioritise accessibility for users who rely on assistive technologies like screen readers and keyboard navigation.
Here are some strategies to make sure your links are accessible to all:
- Avoid redundant link text: Including the word Link in link text is unnecessary as screen readers automatically announce links. Redundant text only clutters the user experience.
- Consolidate adjacent links: Multiple adjacent links to the same destination can overwhelm users of assistive technology. Combine them into a single anchor tag to improve navigation.
- Optimize alt text for linked images: When linking images, make sure the alt text provides context about the link’s destination and purpose. Treat linked images as functional elements rather than just decorations.
- Highlight keyboard focus: Users who navigate via keyboard need a clear indication of their focus. Customise focus styles to ensure visibility, particularly on backgrounds where default styles may be less discernible.
- Use unambiguous link text: Links should clearly show their purpose, even when the text is read alone. Choose descriptive words and phrases that make sense on their own, helping users who use screen readers.
- Use CSS for hidden text: If design limits how descriptive link text can be, use CSS to hide extra text visually but keep it readable by screen readers. This keeps the site accessible without affecting the design. Here’s a sample CSS:
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}- position: absolute; takes the element out of the normal document flow and off-screen without affecting the layout of other elements.
- width: 1px; and height: 1px; set the element’s width and height to a tiny size to make it invisible.
- margin: -1px; is a negative margin to ensure the element is moved slightly off the screen to assist in hiding it visually.
- padding: 0; removes any padding that might increase the size of the element.
- overflow: hidden; ensures that anything outside the tiny bounding box of the element is not visible.
- clip: rect(0, 0, 0, 0); clips the content of the element to a rectangle with zero dimensions.
- border: 0; removes any border that might add to the dimensions or visibility of the element.
Also, WordPress has built-in CSS classes (such as, .screen-reader-text and .screen-reader-text:focus) for hiding text for screen readers. This can be particularly useful when you’re developing a theme or plugin.
The impact of link appearance on accessibility
The way links look is important for accessibility, as it can help or hinder how users interact with them. Here are some things to keep in mind to make sure links are easy to use:
- Distinguishable visual indicators: Use multiple visual cues, such as underlines, to differentiate links from surrounding text. Avoid relying solely on colour, which may pose challenges for users with colour blindness or visual impairments.
- Contrast ratios for readability: Maintain adequate colour contrast ratios between link text, background, and surrounding text. To enhance readability for all users, aim for a minimum contrast ratio of 4.5:1 for link text against the background and 3:1 against surrounding text.
- Clear hover and focus styles: Implement distinct hover and focus styles for link text to indicate interactive states. These styles should be visible and consistent across different input methods, ensuring clarity for both keyboard and mouse users.
- Avoid tooltips for link information: Tooltips can pose accessibility challenges when used to provide additional link information. Instead, explore alternative methods to offer supplementary details. For more insights, take a look at The A11y Collective’s guide on tooltip accessibility.
Decoding ARIA for enhanced link navigation
ARIA attributes play an important role in providing screen reader users with enriched context about website content, enhancing their navigation experience. Here are three key ARIA attributes that developers can implement for screen reader users:
aria-describedby
By adding an id attribute to descriptive text and linking it to a link using aria-describedby, screen readers will first read the link text and then provide the associated description. This attribute offers additional context and clarity to users.
aria-label
When used on a link, aria-label replaces the link text with custom ARIA label text, which helps screen readers prioritize reading the label over the link text. It’s important to ensure that the original link text is included as the first part of the aria-label to maintain consistency for voice control users, allowing them to select specific links accurately.
aria-labelledby
Linking descriptive text to a link using aria-labelledby enables screen readers to prioritize reading the descriptive text instead of the link text. This attribute enhances comprehension by offering detailed context about the link’s purpose.
For deeper insights into using ARIA attributes, enroll in The A11y Collective’s “ARIA explained” course for expert guidance!
Take your link accessibility to the next level
Link accessibility is all about creating an inclusive and enhanced user experience. By prioritizing accessible links, you uphold ethical standards and comply with legal requirements, ensuring equal access for all users.
While this guide has laid out the basics for creating accessible links, the journey to accessibility doesn’t end here. Continuous learning is essential to improving your website’s overall accessibility. Explore The A11y Collective’s suite of accessibility courses, which offer training on all aspects of accessible website design.
Ready to elevate your website’s accessibility? Enrol in The A11y Collective’s Accessible Design, the Basics course, and take the next step towards creating a digital space where everyone can be involved!
Ready to get started?
Enrol in our “Accessible design, the basics” course to learn the fundamentals of accessible design and take your website’s accessibility to the next level.
