Digital Accessibility 101: Descriptive Links and Headers

Back to blog

Digital Accessibility 101: Descriptive Links and Headers

Posted July 11, 2023

AudioEye

Posted July 11, 2023

A purple accessibility symbol, with an icon of a person on the left and a gear on the right.
A purple accessibility symbol, with an icon of a person on the left and a gear on the right.

Ready to see AudioEye in action?

Watch Demo

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.

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.

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

  1. 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.
  2. Avoid using vague or generic terms, like “click here” or “learn more.”
  3. Use descriptive terms that accurately reflect the content of the page or section.
  4. Avoid skipping heading levels or using headings for styling purposes only.
  5. Make sure that all links to the same destination use the same link text.
  6. 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.

Ready to see AudioEye in action?

Watch Demo

Ready to test your website for accessibility?

Scan your website now.

Share post

Topics:

Keep Reading