Unsichtbare Texte veröffentlicht in 2012zuletzt bearbeitet in
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:
- Vorab: Für jegliche Form von Nicht-Text-Inhalt – insbesondere Grafiken – müssen Textalternativen vergeben werden. Es handelt sich zwar um zusätzlichen Text, aber es gibt hierfür spezielle Techniken etwa mit dem
alt
-Attribut für dasIMG
-Element oder dastitle
-Attribut für dasIFRAME
-Element. - Wenn es darum geht, textliche Inhalte zu konkretisieren oder visuelle Darstellungen zu bezeichnen, bieten Accessible Rich Internet Applications ()ARIA) verschiedene Attribute. Attribute wie
aria-label
,aria-labelledby
oderaria-describedby
können eingesetzt werden, um zusätzlichen Text nur für Screenreader zu berücksichtigen. Diese kommen insbesondere für aktive Elemente (Links, Formularelemente und Widgets) sowie Seitenregionen in Frage. - Wenn es darum geht, die Navigation innerhalb von Webseiten zu verbessern, indem unsichtbare Sprunglinks berücksichtigt werden, dann geht es nicht mehr nur um Screenreader, sondern um die Tastaturbedienung. Sprunglinks werden per CSS am Bildschirm unsichtbar gestaltet, müssen aber bei Fokus sichtbar gemacht werden. Für Screenreader müssen Sie immer zugänglich sein (weil Screenreader neben dem Fokus über alternative Navigationsmöglichkeiten verfügen und nicht unbedingt die Browserfunktion zum Tabben einsetzen).
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:
- Er sollte am Anfang einer Webseite stehen und bei Aktivierung den Fokus auf einem Punkt hinter der Navigation (idealerweise zum Hauptinhalt der Webseite) setzen.
- Weil ein "skip navigation link" per Tab-Taste fokussiert werden soll, muss er spätestens bei Fokus sichtbar werden.
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-path: inset(50%);
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.
Der Beitrag Unsichtbare Texte besteht aus folgenden einzelnen Webseiten:
- Für keinen zugänglich
Für Inhalte, die nur in bestimmten Situationen eingeblendet werden, sollte die CSS-Deklaration
display:none;
oder eine ähnliche Technik eingesetzt werden, um sie vor jedem Nutzer zu verstecken.- Nur am Bildschirm zugänglich
Wenn Inhalte am Bildschirm redundant eingesetzt werden, können sie in Screenreadern manchmal störend sein. ARIA bitet bestimmte Attribute bzw. Werte für Attribute an, um solche Inhalte (vorsichtig!) vor dem Accessibility-Tree zu verbergen.
- Nur für Screenreader und Tastaturnutzer zugänglich
(Aktuelle Seite)
Der folgende Begriff auf dieser Seite wird im Glossar definiert:Inhalt