How do I set a link in HTML?
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:
