Barrier-free links in HTML

Date of publication

A link in HTML is set with <a href="targetpage.html">linktext</a>.

In this example, a link to the fictitious HTML file "Zielseite.html" is set and displayed in the browser with the text "Linktext".

Open the target page in a new tab or window

If the page is not to be exited, but a new window or tab is to be opened, the source text for this looks as follows <a href="Zielseite.html" target="_blank">linktext</a>. Whether a new tab or a new window is opened depends on the individual browser settings.

However, this is where the first barrier arises. Users of assistive technologies do not realise that this link opens in a new tab. When closing the browser at the latest, they are surprised that so many tabs are open. This can be solved by adding this additional information in brackets. A title attribute, however, does not solve the problem. As a rule, they are ignored by screen readers.

Get ready to anchor

If you want to make certain contents within your own page directly accessible, you have to do two things. First, they must mark the areas with an ID. For example, a heading <h3 id="jump2">heading that is totally important</h3> Then our link to jump directly to this heading looks like this: <a href="#sprung2">linktext</a>.

The ID we have set is "jump2". This ID can be defined completely freely. For example, a table of contents can be realised at the beginning of the article.

Barriers

There are two pitfalls when setting links.

  • Links in a new tab/window
  • Links with non-meaningful link texts

The good news is that they can be circumvented with little effort.

It must be a new tab

If we use the source code example above and want to make it accessible, we get the following. <a href="targetpage.html" target="_blank">Link text (page opens in new tab)</a> The additional information in brackets tells us what behaviour to expect. This approach allows all visitors to know that a page will open in a new tab. Regardless of whether screen readers or other assistive technologies are used.

Hiding this information is a new barrier. Even if it looks prettier.

Link texts

A good link text also works without the text that is next to it. So "here are our blog articles" is less suitable than "here are our blog articles".

The practice

In the following screencast I show the effects of these theoretical explanations in practice:

Screencast: Links in HTML with screen readers

Profile picture for user DeepL

DeepL is a deep learning company that develops AI systems for languages. The company, based in Cologne, Germany, was founded in 2009 as Linguee, and introduced the first internet search engine for translations. Linguee has answered over 10 billion queries from more than 1 billion users.

Profile picture for user dennis.westphal

Dennis Westphal

Dennis is an IT consultant at the Company for the Development of Things. His field is accessibility. Helpfully, Dennis has been blind since birth. He creates his screencasts with open source software.