Disambiguate Your Links

This post is primarily for developers or content editors who are able to edit the HTML.

You may have a list of article summaries or teasers that all end with a link like “Read more” that take the user to the full article. You may have a list of things and each one of them has a link like “Edit” or “Delete”.

Sighted users know what each link refers to because of the link’s visual context. But a blind user navigating via links will be severely inconvenienced.

The solution is to provide some extra information that is available to the screen reader software but hidden visually. These two techniques involve some minor code changes.

Provide screen-reader-only text

The <span> will be read by screen readers but not be visible to other users. Most modern frameworks have a “sr-only” or equivalent CSS class. If not, try the second technique.

Add aria-label

The first technique is more robust and works in older combinations of screen reader and browsers. But your framework may be more amenable to the second technique.

Explore Related Priorities