Meine Sprunganker für Randbemerkungen
… für Nutzer der Tastatur und für Screenreader.
Sehende können einfach ausblenden und überspringen, was nicht in den Focus soll. Dies können Nutzer von Screenreader nicht; sogenannte Sprunganker helfen dann bei der Navigation.
Und eigentlich stehen solche Sprunganker im Kopfbereich einer Webseite, für Sehende in der Regel versteckt (da unnötig), für Nutzer von Screenreader lesbar und nutzbar, zum Beispiel: „Sprung zur Navigation“ und / oder „Sprung zum Inhalt“.
Durch die Einführung in HTML5 des nav-Elements für Navigation (Menü) und des main-Element für Beginn des Inhaltsbereiches sowie die schon im „alten“ HTML vorgesehene Strukturierung via Überschriften und der Empfehlung, die Hauptüberschrift der Seite, das h1-Element, nur einmal pro Seite zu verwenden, ergeben sich zusammengenommen ausreichende semantisch sinnvolle sowie direkt nutzbare „Sprunganker“.
Wenigstens setze ich keine Sprunganker mehr in den Kopfbereich meiner Seiten.
Innerhalb eines Textabschnittes indessen können Sprunganker auch sinnvoll sein; etwa Inhalte, die zu einem Artikel aufgeführt werden, jedoch nicht entscheidend sind – etwa „Nebeninhalte“ oder Randbemerkungen innerhalb eines aside-Elements – wie oben rechts diesen Artikel begleitend.
Sehende können einfach entscheiden, solche „Randbemerkungen“ auszublenden. Screenreader indessen lesen den Nutzern alles vor, was erreichbar ist … Hier mag das Angebot helfen, zum Beispiel solche „Randbemerkungen“ via eines Sprungankers überspringen zu können.
Für Screenreader also sollen solche Anker „sichtbar“ sein, für Sehende können sie ausgeblendet werden.
Versteckte Sprunganker und Tastaturnutzer
Den Focus via Tastatur auf einen Link zu bekommen, den man nicht sieht, ist wohl stets irritierend. Besser ist es wohl, bei Focus des Sprungankers via Tastatur diesen Skip-Link für den Tastaturnutzer sichtbar zu machen.
Hier helfen Cascading Style Sheets (CSS).
Viele Wege führen hier nach Rom, sprich, es gibt verschiedene Möglichkeiten, Sprunganker via CSS zu gestalten – mit Vor- und Nachteilen.
Ich habe mich für folgende Lösung entschieden:
.sprung-screen-tastatur a {
position: absolute;
top: -3em;
left: -999em;
background-color: transparent;
transition: top .5s ease-out;
z-index: 7;
}
.sprung-screen-tastatur a:focus {
position: absolute;
top: 0;
left: 0;
background-color: #fdfdfd;
transition: top .5s ease-in;
}
Ein Beispiel finden Sie hier auf dieser Seite bei der rechtsstehenden „Randbemerkung“ zu diesem Artikel – als Sehender müssen Sie den Quelltext bemühen oder die Tastatur für die Navigation, um den sich einblendenden Sprunganker sehen zu können …
Der Focus kann sicher noch deutlicher gestaltet werden als nur durch „transition“. Signalartige Hintergrundfarbe oder Schriftfarbe wären beispielsweise denkbar.
Also gut, hier bin ich wieder langweilig unterwegs …
Grundsätzliches
Im Grunde aber ist die Überlegung ähnlich wie bei Tooltips, Abkürzungen sowie Akronyme: Kann die „Randbemerkung“ nicht einfach weg? Oder als Fußnote im Text eingearbeitet werden?