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.
Author: Missy Jensen, Senior Copywriter, SEO
Originally Published: 07/11/2023
)
A purple accessibility symbol, with an icon of a person on the left and a gear on the right.
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.
For example, a link that reads "click here" surrounded by plenty of context clues (like graphics or supporting text) might be sufficient for sighted users, but it doesn't provide much detail for someone using a screen reader to click between headings or links.
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)(opens in a new tab) 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."
)
A stylized web page, with an icon of a human on the left side and a magnifying glass with an accessibility symbol on the right side.
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.”
)
A stylized webpage that shows a number of accessibility issues, next to an icon of gears.
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 Ultimate Guide to Accessible Web Design, which covers everything from alt text best practices and color contrast to site architecture.
Share Article