renvert.com Logo Druckversion


Nur nicht den :focus aus den Augen verlieren.

Oft vernachlässigt und doch so wichtig: der :focus Selector.

[zum Inhalt]
Hintergrundbild

Anforderung im Sinne der Barrierefreiheit

Laut der BITV ist es notwendig, eine schlüssige, mit Hilfe der Tabulator-Taste navigierbare Reihenfolge von Hyperlinks festzulegen. Befindet sich die Hauptnavigation in einer ungeordneten Liste (ul), wird die Reihenfolge der Links automatisch chronologisch durchlaufen.

Mit Hilfe des HTML-Attributs "tabindex" lässt sich die Reihenfolge von Links manipulieren; einzelne Verlinkungen können mit diesem Attribut aber auch von einer Erreichbarkeit der Tabulatortaste ausgeschlossen werden.

Das Attribut tabindex

<!--
 Linkreihenfolge manipulieren:
 Obwohl der Link zum Portfolio im Quelltext voransteht, 
 würde in diesem Falle zuerst der Link zum Blog mit 
 der Tabulatortaste angesteuert.
-->

<ul>
 <li><a href="/portfolio" tabindex="2">Portfolio</a></li>
 <li><a href="/blog" tabindex="1">Blog</a></li>
</ul>

Ausschluss eines Links aus der Tabreihenfolge

<!-- Einen Link von der Tabsteuerung ausschließen -->
<a href="#" onclick="scrollToTop()" tabindex="-1">nach oben</a>

Durch den Wert -1 wird dieser beispielhafte Link zum Seitenanfang einfach übersprungen.

Hinweis für den Internet Explorer und Google Chrome:
Bei diesen Browsern funktioniert diese Methode nicht wie gewünscht. Wie Du dies mit ein wenig Javascript korrigieren kannst, erfährst Du hier.

Der CSS-Teil

So weit, so gut. Wir können also bestimmen, welche Links und in welcher Reihenfolge diese per Tastatur ansteuerbar sind. Aber wie erfährt der Benutzer, welcher Link gerade aktiv ist?

Hier kommt der CSS-Selektor :focus zum Einsatz. Obwohl ein unverzichtbares Kriterium der Barrierefreiheit, wird diese Kenntlichmachung der per Tastatur angesteuerten Links viel zu oft vernachlässigt.

Warum? Bei der Entwicklung einer Website wird immer noch zu stark auf die Nutzererfahrung mit der Maus Wert gelegt. Das heißt, man deklariert zum default-Status eines Links lediglich den :hover-Status, also das Aussehen des Links – sei es ein Text oder ein Bild – beim Darüberfahren mit der Maus.

// Generelles Aussehen der Links:
a {
 text-decoration: none;
 color: #000;
 font-weight: bold;
}
// :hover Status:
a:hover {
 text-decoration: underline;
 color: #c00;
}

Dieser CSS-Code bewirkt, dass Links beim MouseOver unterstrichen und rot dargestellt werden. Dies hat aber keinen Effekt auf das Aussehen beim Ansteuern mit der Tab-Taste. Das beeinträchtigt Nutzer, die auf alternative Eingabegeräte angewiesen sind.
Dazu benötigen wir noch folgenden Zusatz:

// :focus, :hover und :active Status:
a:focus, a:hover, a:active {
 text-decoration: underline;
 color: #c00;
}

Diese Deklaration ermöglicht es, mit der Tastatur stets den angesteuerten Link zu erkennen.
Selbstverständlich kann man die Tabulator-Styles von den Hover-Styles trennen, sodass das Ansteuern per Tab-Taste noch deutlicher wird. Hier ein weiteres Beispiel:

// default
a {
 text-decoration: none;
 color: #000;
 font-weight: bold;
}

// Aussehen bei Tastatur-Steuerung:
a:focus {
 background: #fc0; // schwarze Schrift auf gelb-orangem Hintergrund
}

// :active und MouseOver
a:active, a:hover {
 text-decoration: underline;
 color: #c00; // rote Schrift
}

Die Reihenfolge der Deklarationen :focus, :active, :hover ist nicht zufällig gewählt sondern folgt einem festen Schema. Mehr zu diesem Thema findest Du auf den Seiten des Projekts Einfach für Alle, dem Online-Angebot der Aktion Mensch zum Thema barrierefreies Internet.

Auch auf meiner Seite kannst Du feststellen, dass das Aussehen von Links beim "Durchtabben" anders definiert wurde als beim einfachen MouseOver. Ebenso sind diverse Links von der Tab-Taste ausgeschlossen. Versuch es einfach mal und drücke mehrfach die Tab-Taste, um Dich durch die Links zu navigieren.

Folge mir auf twitter

Hinweis: Momentan ist die Geschwindigkeit meiner Website aufgrund eines Serverproblems bei meinem Hosting-Anbieter stark beeinträchtigt.
Ich bitte, diese Unannehmlichkeit zu entschuldigen.


Fenster schließen

Danke fürs Teilen.

Fenster schließen