Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

Unsichtbare Texte — mit HTML, CSS oder ARIA? veröffentlicht in 2012zuletzt bearbeitet in 2018

Nur für Screenreader und Tastaturnutzer zugänglich

Manchmal ist das, was am Bildschirm zu sehen ist, in einem Screenreader nicht gut nachvollziehbar. Um einen barrierefreien Zugang zu ermöglichen, wird es dadurch erforderlich, zusätzlichen Text zu berücksichtigen, der aber am Bildschirm nicht sinnvoll erscheint. In solchen Fällen können verschiedene Techniken eingesetzt werden:

Unsichtbare Bezeichnungen

Vor HTML5 gab es die Notwendigkeit, unterstützende (unsichtbare) Überschriften für die strukturelle Navigation in Screenreadern zu berücksichtigen; Screenreadernutzer konnten mit solchen Überschriften über die Seite navigieren, um sich einen Überblick der Inhalte zu verschaffen. Die unsichtbaren Überschriften wurden oft mit Klassen wie "unsichtbar" oder "sr-only" ergänzt, Die CSS-Eigenschaften sahen dabei unterschiedliches vor. Meist wurde das Element außerhalb des sichtbaren Bildschirmbereichs geschoben oder auf 1×1 Pixel reduziert.

heute sollte die strukturelle Navigation mit Seitenregionen z.B. mit NAV oder MAIN realisiert werden. Um einzelne Strukturen besser zu differenzieren können sie zusätzlich mit ARIA bezeichnet werden

<nav id="fussleiste" aria-label="Fußleiste">
  ...
</nav>

Ein Screenreader identifiziert die Seitenregion mit der Rolle (Navigation) und Namen (hier: "Fußleiste"). Außerdem sind solche Seitenregionen in einem Screenreader Teil der strukturellen Navigation, d.h. sie können nacheinander mit einem Tastendruck angesprungen oder aufgelistet werden.

Mit HTML4 wurden nicht nur unsichtbare Überschriften, sondern die Technik des Versteckens musste auch für Formularbeschriftungen oder Linktexte genutzt werden. Wenn Linktexte den Linkzweck nicht angaben oder Formularbeschriftungen nicht beschreibend waren, dann wurden nur für Screenreader zugängliche Texte zu den Linktexten oder Formularbeschriftungen hinzugefügt:

<div class="teaser">
  <h2>Frühlingserwachen am Bach</h2>
  <p>Naturführung. Bitte Gummistiefel mitbringen. <a href="seite.html"><span class="sr-only">Frühlingserwachen am Bach </span>zu den Veranstaltungsdetails</a></p>
</div>

Was Linktexte und Formularbeschriftungen angeht, können ARIA-Attribute heute ebenfalls eingesetzt werden, um den Anforderungen der Web Content Accessibility Guidelines (WCAG) 2.0 respektive Barrierefreien Informationstechnik-Verordnung – BITV 2.0 zu genügen, z.B. mit aria-describedby oder aria-labelledby:

<div class="teaser">
  <h2 id="teaserHeading">Frühlingserwachen am Bach</h2>
  <p>Naturführung. Bitte Gummistiefel mitbringen. <a id="teaserLink" aria-labelledby="teaser Heading teaserLink" href="seite.html">zu den Veranstaltungsdetails</a></p>
</div>

Mit aria-labelledby wird der Linkname neu zusammengesetzt; das Attribut überschreibt den eigentlichen Linktext im Accessibility-Tree des Betriebssystems.

Unsichtbarer Sprunglink

Streng genommen ist die Bereitstellung eines Sprunglinks keine Anforderung aus den WCAG 2.0. Die WCAG 2.0 verlangen, dass Navigationsbereiche übersprungen werden können und dafür gibt es diverse Techniken. Zum einen können Strukturen auf der Webseite die Überspringbarkeit gut ermöglichen, aber die strukturelle Navigation steht meist nur Screenreadernutzern zur Verfügung. Zum anderen gibt es die Browserfunktion des Tabbens: Für Tastaturnutzer (Nutzer der Tab-Taste) ist ein Sprunglink am Anfang der Webseite sinnvoll. Im Allgemeinen wird ein solcher Sprunglink unsichtbar gestellt.

Wenn ein sogenannter "skip navigation link zu einer Webseite hinzugefügt werden soll, dann sind folgende Punkte zu berücksichtigen:

Ein solcher unsichtbarer Sprunglink könnte wie folgt aussehen:

<nav aria-label="Sprunglinks">
  <p><a class="keyboard-accessible" href="#main">Hauptinhalt anspringen</a></p>                
</nav>
  

Die CSS-Eigenschaften für diesen Link könnten wie folgt aussehen:

.keyboard-accessible:not(:focus) {
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  white-space: nowrap;
}

Der Selektor schließt das Verstecken bei Fokus mit der Tab-Taste aus (allerdings funktioniert das in Internet Explorer nur ab v9). Darüber hinaus minimieren die weiteren Deklarationen die Größe des Inhalts und unterdrücken jegliche Spur des Elements am Bildschirm, lassen die enthaltenen Inhalte aber für Screenreader zugänglich.

Wenn diese CSS-Technik für einen "skip navigation link verwendet wird, wird der Link am Bildschirm nur dann sichtbar, wenn er fokussiert wird. Screenreadernutzer werden dabei nicht feststellen, dass der versteckte Inhalt am Bildschirm unsichtbar ist.