The Internet has always been about connectivity. The links that crisscross every site play a vital role in guiding users as they explore the online realm. As one of the most basic elements of web accessibility, hyperlinks help users navigate to another page to access different types of digital content. While creating hyperlinks is easy, making them web accessible takes careful consideration. But how can we make sure they are accessible to everyone?
What are Descriptive Links?
A descriptive link provides clear information about where the link will take the user. Instead of generic terms like “click here” or “read more,” a descriptive link might say “learn about our sustainability practices” or “view our summer collection.”
Why Use Descriptive Links?
People using screen readers either tab through links or bring up a list. This can take the link out of the context of the surrounding text. However, descriptive link text provides clarity, aiding users with assistive tools in grasping the destination of a link without additional information. By ensuring links are descriptive, users can confidently know the link’s destination, allowing those using assistive technologies to navigate more efficiently.
Types of Links That Need to Be Accessible
There are three types of links that need to be accessible:
Anchor Text
Anchor text is clickable text linking to another page or file. The best practice is to ensure it’s descriptive. For example, instead of “Click here for more information about web accessibility,” use “Learn more about web accessibility.”
Image Links
Images links are clickable images or call-to-action buttons that link to another page or file. When using an image or button, an alternative text (alt text) must describe its purpose. This helps screen readers in conveying the link’s purpose to the user.
Adjacent Links
Adjacent links are two links next to each other that point to the same destination—for example, an image with text beneath it both linking to the same page.
Creating Valid and Accessible Links
Start with Valid HTML
The foundation of any accessible website is its underlying code. Think of your site’s HTML as the skeleton, providing structure and meaning. Just as a well-built house begins with a solid foundation, a fully accessible website starts with clean, valid HTML.
When crafting links, it’s essential to use the correct tags and attributes. The <a> (anchor) tag is the standard for creating links.
Here’s a basic example:
<a href="https://www.example.com">Visit our homepage</a>This link is valid and clear, ensuring that screen readers and other assistive devices can interpret and present it correctly to the user.
To be a valid link, it must have the following:
- A href Attribute: The location or URL of the anchor, page, or resource. Without the href attribute, the <a> tag won’t work.
- Link Content Text describing where the link is going. This could be plain text or the alt attribute of an image.
- Opening and closing tags: An opening tag begins the link, and a closing tag ends it. A closing tag always precedes the element with a /.
Write Helpful Link Text
The actual text of your link is crucial for web accessibility. Avoid generic terms like “click here” or “read more.” Instead, aim for descriptive, context-rich text that clearly indicates the link’s destination or purpose.
For example:
Instead of using
<a href= "#">click here</a>.Use:
<a href="#">View our comprehensive guide</a>.This approach benefits those using assistive technologies and improves the user experience for everyone, making your content more intuitive and navigable.
What About the Title Attribute?
The title attribute can provide additional information about a link. However, not all browsers present the title attribute accessibly, so individuals using keyboards or touch-only devices might not see this information. Therefore, using the title attribute on <a> elements is not recommended.
Focus State and Keyboard Navigation
Web accessibility isn’t just about screen readers. Many users use keyboards for navigation due to motor disabilities or personal preferences. It’s essential to ensure that all links are navigable and clearly highlighted when accessed via a keyboard.
This is where the WCAG’s success criteria 2.4.7, focus visible, comes into play. Essentially, when someone tabs through a website using the keyboard, the “focused” element (like a link) should have a clear visual indicator, such as a border or a change in background color.
If you’re using CSS, you might apply a focus style like:
a: focus {
outline: 2px solid black; }This will give a black outline to any link that’s currently selected via keyboard navigation.
Moreover, make sure that the tab order (the sequence in which elements are selected when tabbing through) is logical and follows the flow of your content.
When Should You Use a Button Instead?
Links and buttons are often used interchangeably on the web. However, they serve distinct purposes:
- Links: Primarily navigate users from one page or resource to another.
- Buttons: Used for actions like submitting a form, opening a popup, or toggling content.
From an accessibility standpoint, it’s essential to use them appropriately. Screen reader users, for instance, might need clarification if a link behaves like a button or vice versa.
So, if you’re leading users to a different resource, use a link. Consider using a button if you’re prompting an action on the same page.
Designing Accessible Buttons and Linked Images
Design plays a significant role in digital accessibility. For buttons and linked images:
- Clear Labels: Ensure every button or link has a clear label. This assists not just visually impaired users but everyone. “Read more” is often ambiguous. Instead, be specific, like “Read more about web accessibility.”
- Contrast: Make sure there’s enough contrast between the button’s link text and its background. This helps people with visual impairments and disabilities easily identify and read content.
- Descriptive Alt Text for Linked Images: If an image acts as a link, ensure it has descriptive alternative text. This allows screen reader users to understand the purpose of the link. For instance, instead of “image1.jpg”, use “Click to view our accessibility guide.”
- Focus Indicators: Ensure links and buttons have a visible focus indicator. This helps keyboard-only users identify which element is currently in focus.
Understanding Touch Target Size Accessibility
Touch target is the area that responds to a user can press or click. It’s especially vital for touchscreen devices. Here’s what you should consider:
- Minimum Size: According to many WCAG guidelines, the touch target size should be at least 24×24 pixels. This ensures even users with motor disabilities can easily tap the element.
- Spacing: Ensure there’s enough space between tappable elements. Crowded links or buttons can lead to mistaken taps or clicks, frustrating users.
- Visual Feedback: When a user taps a link or button, provide visual feedback, like a color change, so they know their tap was successful.
- Font Size: The smallest acceptable font size is 14 points, but anything between 14 to 18 points, or equivalently 18.5 to 24 pixels, is considered compliant by WCAG.
Take the Next Steps Toward Web Accessibility
The digital realm has evolved, and web accessibility has emerged as a fundamental right, not just a trend. Making your website accessible isn’t just about compliance but inclusion. It’s about ensuring everyone can access and enjoy the content you’ve painstakingly created, regardless of their abilities. And while the nuances of accessibility can seem daunting, there are experts available to assist you.
216digital has been at the forefront of web accessibility, armed with the tools, knowledge, and experience to make your online space both compliant and welcoming for all. We will help you take the steps towards web accessibility on your terms by developing a strategy to integrate WCAG 2.1 compliance into your development roadmap.
So, if you’re committed to creating a digital space where everyone feels valued, don’t leave it to chance. Schedule a Complimentary ADA Strategy Briefing with the experts at 216digital, where web accessibility is more than just a checklist—it’s a mission.