Digital Accessibility 101: Descriptive Links and Headers
In this post, we discuss the role that descriptive links and headers play in delivering an accessible browsing experience to every visitor.
Choosing which part of a sentence to hyperlink might not seem like a big deal, but it can have a major impact on someone’s ability to quickly and confidently navigate your website.
In this post, we explain the importance of descriptive links and headings — and share tips on how you can make your site easier for everyone to understand.
Why Are Descriptive Links So Important for Accessibility?
When it comes to hyperlinks, many organizations default to short, declarative phrases like “click here” or “learn more.”
Although this approach might be good enough for people who can take in all of the surrounding information at a glance, it does little for screen reader users or people with cognitive impairments.
In order to be accessible, hyperlinks should contain clear, descriptive text that tells users exactly what they’ll get — or where they’ll go — by clicking the link.
The Web Content Accessibility Guidelines (WCAG) — the de facto international standard for digital accessibility — even has specific guidance on how to write descriptive link text. WCAG Success Criterion (SC) 2.4.4: Link Purpose (In Context) states that:
"The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general."
How Do Screen Reader Users Navigate Websites?
To understand why descriptive links are so important for accessibility, it helps to understand how screen reader users typically navigate a website.
Screen reader users will often skip through an entire page on their first visit, using their keyboard to jump between HTML headers and get a sense of what each section covers.
If your headers aren’t descriptive — or if you don’t use headers to separate ideas and break up large sections of text — it can be hard for a screen reader user to skim your page and decide if they want to read more.
The same holds true for links.
Imagine the following links are being read out loud to you by screen reader software. Which one is the easiest to understand, without any additional context?
- link https://www.audioeye.com/post/common-accessibility-issues/
- link click here
- link Learn more about common accessibility issues
Of these options, the third bullet makes it clear where users will be taken — and what they will get out of clicking the link.
Best Practices for Descriptive Links and Headers
- User clear, concise language. For example, a link that reads “Click on this link to discover the latest best practices for writing alt text” can be shortened to “Discover the latest alt text best practices” — without losing meaning.
- Avoid using vague or generic terms, like “click here” or “learn more.”
- Use descriptive terms that accurately reflect the content of the page or section.
- Avoid skipping heading levels or using headings for styling purposes only.
- Make sure that all links to the same destination use the same link text.
- Avoid redundant ARIA roles, which can create a lot of confusion and frustration for users. For example, adding “role=link” to a link tag will cause screen readers to announce the element twice, i.e., “Link Link.”
Get More Tips on Making Your Website Accessible
Of course, it isn’t just screen reader users who can benefit from descriptive links and headers. We’ve also written about the importance of using accessible language — which can support comprehension for people with cognitive or memory impairments.
Want more tips on making your website accessible? Download AudioEye’s Comprehensive Guide on Accessible Web Design, which covers everything from alt text best practices and color contrast to site architecture.
Using the JAWS Screen Reader To Test Web Accessibility
Here’s what developers should know before using the JAWS screen reader for accessibility testing.
March 27, 2023
How to Choose a Web Accessibility Tool
Learn about the different web accessibility tools and how to develop a testing strategy.
March 20, 2023
Framer Offers Accessibility Features, But Are They Enough?
In this post, Sr. Manager of Brand and Design, Sojin Rank, provides an overview of the website builder Framer and its accessibility features.
March 17, 2023