Das href macht den Link aus

veröffentlicht in 2026

Das Urelement des Webs ist der Link. Mit Links werden die Inhalte des Webs miteinander verknüpft.

Links können vielseitig eingesetzt werden, aber eines können Sie mit Links nicht machen: Links lassen sich nach dem HTML-Standard nicht deaktivieren. Dennoch finden sich im Web immer wieder Beispiele, in denen das versucht wird. Es gibt Möglichkeiten, solche Links mit weiteren Attributen zu ergänzen, damit sie für alle "deaktiviert" wirken.

Es ist außerdem zulässig, das href-Attribut von einem Link zu entfernen. Der Link ist dann kein Link mehr. Problematisch kann das werden, wenn Funktionalität per JavaScript hinzugefügt wird.

Links sind standardmäßig barrierefrei

Links rufen andere Ressourcen auf oder verweisen auf einen Identifier auf derselben Seite:

<a href="ressource.html">Linktext</a>

oder

<a href="#identifier">Linktext</a>
…
<div id="identifier"> … </div>

Links sind geräteunabhängig bedienbar. Per Tastatur ist der Link beispielsweise fokussierbar, und der Link kann mit Eingabetaste aktiviert werden.

Als aktives Element benötigt ein Link eine Rolle und einen Namen:

Links deaktiviert wirken lassen

In der Praxis werden Links hin und wieder als „deaktiviert“ dargestellt. Der HTML-Standard sieht das disabled-Attribut für Links nicht vor. Solche Links dürfen weder per Zeiger noch per Tastatur aktivierbar sein. Normalerweise werden deaktivierte Elemente eingegraut und mit tabindex="-1" aus der Fokus-Reihenfolge entfernt; für Assistenztechnologien muss der visualisierte Zustand per aria-disabled-Attribut angegeben werden:

Hinweis: Das aria-disabled-Attribut deaktiviert die Funktionalität nicht, sondern es kennzeichnet ein Element lediglich mit einem Text. Die Interaktion mit dem Link muss zusätzlich per Skript oder CSS verhindert werden.

In diesem Beispiel sollten Sie folgendes beachten:

Entfernung des href-Attributs

Fehlt für ein a-Element das href-Attribut, handelt es sich bei dem a-Element lediglich um einen Platzhalter für einen Link. Das Element erhält die Rolle "generic" und ist semantisch bedeutungslos und darüber hinaus per Tastatur nicht mehr fokussierbar. Ein a-Element ohne href-Attribut könnte für einen nicht verfügbaren Link verwendet werden, wenn der Link normalerweise auf die Seite selbst verlinkt:

<nav>
<ul>
<li> <a href="/">Startseite</a> </li>
<li> <a href="/nachrichten">Nachrichten</a> </li>
<li> <a>Beispiele</a> </li>
<li> <a href="/kontakt">Kontakt</a> </li>
</ul>
</nav>

Auf Webseiten finden sich auch aus anderen Gründen aktive Elemente mit einem a-Element ohne href-Attribut. Die Funktionalität wird dann mit click-Ereignissen abgefangen. Diese Vorgehensweise ist problematisch:

<!-- nicht nachahmen -->
<a class="tueWas">Anklickbarer Text</a>
<script>
let obj = document.querySelector('.tueWas');

obj.addEventListener('click', (event) => {
… Funktionalität …
})
</script>

Insbesondere entstehen folgende Probleme:

Wird einem a-Element ohne href-Attribut ein click-Event-Handler hinzugefügt, dann handelt es sich bei dem a-Element um anklickbaren Text. Wenn das a-Element auf der Webseite eine Funktionalität auslösen soll, setzen Sie stattdessen Schaltflächen ein.

Ein Platzhalter für einen Link kann dennoch mit einem role- und einem tabindex-Attribut korrigiert werden:

<a class="tueWasAnderes" tabindex="0" role="link">Linktext</a>

<script>
let obj = document.querySelector('.tueWasAnderes');

obj.addEventListener('click', (event) => {
… Funktionalität …
})
obj.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
… Funktionalität …
}
})
</script>

Hinweis: Für die Tastaturbedienung ist ein eigener Event-Handler erforderlich. Das Auslösen eines click-Events bei Drücken der Eingabetaste wird nur bei Links (a-Elementen mit einem href-Attribut) und Schaltflächen ausgelöst.

Diese Maßnahmen stellen sicher, dass das Element per Tastatur bedienbar ist (Erfolgskriterium 2.1.1 der Web Content Accessibility Guidelines (WCAG) 2.2) und eine korrekte Rolle besitzt (Erfolgskriterium 4.1.2).