top of page
  • Writer's pictureBrent Payne

Making Every Link Count: A Guide to Accessible Web Design

In the ever-evolving landscape of the internet, accessibility remains a cornerstone of web design that we, at Loud Interactive, champion with fervor. Today, we're diving deep into an issue that might seem minute at first glance but holds monumental importance for inclusive digital spaces: ensuring every link has discernible text.


Why Does This Matter?

Imagine navigating a website with your eyes closed. You rely on a screen reader to describe every element to you. Now, you encounter a link that simply says "click here." Where does it lead? What does it do? This is the crux of the issue. Links without clear, descriptive text are like road signs missing directions—they don't tell you where you're going. For users relying on assistive technologies, this isn't just inconvenient; it's a barrier to accessing information.


This matter extends beyond digital courtesy; it's a fundamental aspect of web accessibility standards, including WCAG 2.1 and Section 508. Ensuring links have discernible text is not just about compliance; it's about affirming the right of every individual to have equal access to the web.


How to Address the Issue


1. Clear Link Text: Make sure each link conveys its destination or action. Use specific descriptions over vague terms. For example, "Download the Accessibility Guide" instead of "Click here."

2. Focusable Links: Ensure links can be navigated to and activated using a keyboard alone. This involves proper use of HTML and avoiding CSS or JavaScript that might hide links from keyboard users or screen readers.

3. Screen Reader Accessibility: Avoid techniques that hide link text from screen readers, such as `aria-hidden="true"` or `display: none;` in CSS. If you're using icons as links, make sure to include text alternatives.

4. Use ARIA Labels Wisely: When text alone doesn't suffice, `aria-label` and `aria-labelledby` can provide additional context to screen readers, making links more informative.


Further Learning and Resources

- Deque University: An unparalleled resource for diving deeper into accessibility standards and practices. Their courses on Semantic Structure and Links

- W3C WAI Guidelines: The WAI Guidelines Wiki offers extensive documentation on using ARIA labels to improve link accessibility.

- Axe Core GitHub: Join the conversation and contribute to axe-core on GitHub. It's a great way to stay at the forefront of accessibility tools and techniques.


In our journey towards making the web universally accessible, it's the small steps that lead to significant changes. Ensuring every link has discernible text might seem like a minor detail, but it plays a crucial role in dismantling the digital barriers faced by many. At Loud Interactive, we're committed to sharing knowledge and strategies that make the web a welcoming place for everyone. Join us in this mission—start by auditing your site's links today.

0 views0 comments

Recent Posts

See All

CSS file size too large discovered in SEO audit

In our SEO audits at Loud Interactive, we often come across a common yet significant issue that can heavily impact your website's loading speed and overall performance: CSS file size too large. Let's

CSS file size too large discovered in SEO audit

When conducting an SEO audit on your site, one issue that might come up is that your CSS file size is too large. But why does this matter, and what can you do about it? Let's dive in. What's the Issue

H1 tag missing or empty" Discovered in an SEO Audit

At Loud Interactive, we've encountered a common issue during our SEO audits that can significantly impact a website's performance on search engines: the "H1 tag missing or empty" warning. This problem

bottom of page