Manchmal ist es erforderlich, Inhalte einer Website dauerhaft, zeitweise oder für bestimmte Zielgruppen zu verbergen. Es exis­tieren unter­schiedliche Techniken zu diesem Zweck, und jede hat ihre eigenen Vorzüge und Auswirkungen auf die Barrierefreiheit und assistive Technologien. Wir zeigen, welche Methode sich wann besonders eignet und was daran zu beachten ist.

Warum verstecken?

Es gibt 3 Hauptgründe, aus denen wir manche Teile einer Weboberfläche gelegentlich verbergen müssen:

  • Vollständiges Verbergen: Inhalte sollen für alle Nutzende verborgen werden, etwa weil sie erst zu einem späteren Zeitpunkt oder beim Eintreten eines bestimmten Zustands sichtbar sein sollen.
  • Visuelles Verbergen: Für Sehende erschließt sich die Bedeutung von Interface-Komponenten oft aus ihrer visuellen Erscheinung, während assistive Technologien, etwa Screenreader, zusätzlichen (textlichen) Kontext benötigen. Um eine möglichst kompakte Darstellung zu erreichen, können solche Inhalte bei Bedarf rein visuell verborgen werden und trotzdem für Screenreader erfassbar bleiben.
  • Verbergen für assistive Technologien: Nicht informationstragende, rein dekorative Elemente stellen für Screenreader-Nutzende oft nur eine unnötige Überfrachtung mit Informationen dar, die nicht zum Verständnis beitragen. Solche Teile sollten gezielt für assistive Technologien verborgen werden.

Techniken

Je nach Zielsetzung, warum und für wen wir einen Inhalt verbergen möchten, kommen verschiedene Techniken — HTML, ARIA, CSS, JavaScript oder eine Kombination daraus — zur Umsetzung in Betracht. Die Entscheidung für eine dieser Zielsetzungen steht immer am Anfang — die sinnvollste Technik ergibt sich dann fast von selbst.

Vollständig verbergen

Wenn Inhalte vollständig, also für alle Nutzende verborgen werden sollen, dann ist dies in der Regel ein beabsichtigter Teil des Designs und Nutzungserlebnisses einer Webseite. Bestimmte Oberflächenelemente sind in ihrem Ausgangszustand typischerweise verborgen und werden erst dargestellt, sobald eine bestimmte Aktion ausgeführt oder ein bestimmter Zustand erreicht wird, zum Beispiel:

  • Ein mobiles Menü wird erst eingeblendet, sobald der zugehörige Menüschalter aktiviert wird (Hamburger-Menü).
  • Ein modaler Dialog wird geöffnet und legt sich über den Bildschirm, um eine Hinweismeldung zu zeigen oder eine andere Reaktion von Nutzenden zu fordern, bevor sie weiter mit der Seite interagieren können.
  • Eine Registerkarten-Navigation (Tab Interface) wird verwendet, um abwechselnd Inhalte auf einzelnen Registerkarten zu zeigen.
  • Ein kollabierbarer Bereich oder ein Akkordeon wird genutzt, um eine kompakte Darstellung zu erreichen und Inhalte erst auf Anforderung einzublenden.

In diesen Fällen ist es Absicht, dass bestimmte Inhalte für alle Nutzende unzugänglich sind, bis die entsprechenden Voraussetzungen für die Anzeige erfüllt sind. In der Praxis haben sich vor allem 3 Techniken bewährt, um ein vollständiges Verbergen zu realisieren:

display: none (CSS)

HTML-Elemente, deren Darstellung per display: none im CSS unterbunden wird, werden (vorrübergehend) aus dem normalen DOM-Fluss entfernt und sind weder visuell, noch für assistive Technologien erfassbar.

<p style="display: none">
    Dieser Absatz ist sowohl für Sehende, als auch für
    assistive Technologien nicht erfassbar.
</p>

Im Codebeispiel wurde das display: none lediglich zu Übersichtszwecken als Wert eines style-Attributs angegeben (als Inline Style). Das Separation of Concerns-Prinzip legt jedoch nahe, CSS-Code in der Praxis generell in eigenständige CSS-Dateien zu verlegen und über <link href="…"> extern einzubinden. Das Ausblenden sollte dann besser über eine entsprechend aussagekräftige CSS-Klasse, zum Beispiel .invisible, gelöst werden.

hidden-Attribut (HTML)

Das hidden-Attribut ist eine native HTML5-Technik, um Inhalte vor allen Nutzenden zu verbergen. Es wirkt wie dispay: none, ohne dabei jedoch auf CSS angewiesen zu sein.

<p hidden>
    Auch dieser Absatz ist sowohl für Sehende, als auch für
    assistive Technologien nicht erfassbar.
</p>

Die Unterstützung für das hidden-Attribut beginnt erst etwa mit Browsern der Generation des Internet Explorer 11. Wenn auch ältere Browser unterstützt werden sollen, kann die fehlende Unterstützung mit der einfachen CSS-Regel [hidden] { display: none } in einem Stylesheet auch für ältere Browser nachgerüstet werden.

visibility: hidden (CSS)

Ähnlich wie display: none verbirgt auch die CSS-Einstellung visibility: hidden ein Element vollständig vor allen Nutzenden.

<p style="visibility: hidden">
    Dieser Absatz ist sowohl für Sehende, als auch für assistive
    Technologien nicht erfassbar. Das Element wird jedoch nicht
    aus dem DOM-Fluss entfernt und nimmt weiterhin seinen
    regulären, visuellen Platz in Anspruch.
</p>

Es gibt jedoch zwei wichtige Unterschiede zum Verhalten von display: none:

  1. Elemente, die mit visibility: hidden verborgen sind, werden nicht aus dem normalen DOM-Fluss entfernt und beanspruchen daher auch im unsichtbaren Zustand denselben Platz auf dem Bildschirm, den sie im sichtbaren Zustand einnehmen würden. Auch wenn sie weder sichtbar noch für Screenreader erfassbar sind, bleibt die Lücke, die sie hinterlassen, visuell dominant.

    Um hier entgegenzuwirken, kann visibility: hidden mit anderen CSS-Einstellungen kombiniert werden: Etwa solchen, die das Element aus dem normalen DOM-Fluss entfernen und aus dem sichbaren Bildschirmbereich hinausverlegen (position: absolute). Oder solchen, die das Element in seinen Dimensionen minimieren (overflow: hidden; height: 0).

  2. Im Unterschied zur display-Eigenschaft kann visibility auch mit CSS-Übergängen (Transitions) kombiniert werden. Soll ein Element durch einen CSS-Übergang zwischen seinem ausgeblendeten und eingeblendeten Zustand wechseln, zum Beispiel durch eine animierte Größenveränderung, so ist visibility das Mittel der Wahl.

display, hidden oder visibility?

Alle drei dargestellten Techniken führen letztlich zum selben Ergebnis — Inhalte werden für allen Nutzende vollständig verborgen. Es gibt jedoch Unterschiede im Umsetzungsaufwand und in der Kompatibilität mit älteren Browsern. Welche Technik ist also wann am sinnvollsten? Hier der Versuch einer Entscheidungshilfe:

  • Wenn eine Interface-Komponente einfach nur ein- und ausgeblendet werden soll, und wenn es akzeptabel ist, dass die Komponente sichtbar ist, falls CSS (aus welchen Gründen auch immer) einmal ausfällt, dann ist die Umsetzung mit display: none vermutlich am effektivsten.
  • Wenn die Komponente nicht auf CSS angewiesen und im Ausgangszustand versteckt sein soll, dann kommt wohl eher das hidden-Attribut in Frage. Für ältere Browser wird gegebenenfalls ein CSS-Polyfill benötigt.
  • Wenn ein komplexerer Übergang zwischen ausgeblendetem und eingeblendetem Zustand benötigt wird, etwa wenn eine außerhalb des Bildausschnitts liegende Navigation in den Sichtbereich animiert werden soll, dann wird eine Umsetzung mit visibility: hidden am ehesten zum Ziel führen.

In allen 3 Fällen wird JavaScript benötigt, um zwischen dem ausgeblendetem und eingeblendetem Zustand umzuschalten. Je nach eingesetzter Technik müssen die CSS-Klassen und / oder Attribute des betreffenden HTML-Elements dynamisch verändert werden, so dass die Sichtbarkeitseinstellungen entsprechend greifen.

Visuell verbergen

Die Techniken zum rein visuellen Verbergen werden dann benötigt, wenn sich Sehende die Bedeutung von Oberflächenkomponenten aus ihrer Erscheinung erschließen können, assistive Technologien aber zusätzliche, textliche Anhaltspunkte benötigen, so auch dass Nicht-Sehende die Oberfläche verstehen. Beispielsweise könnte ein Icon, das einen Telefonhörer zeigt, ausreichend sein, um Sehenden verständlich zu machen, dass es sich bei der folgenden Information um eine Telefon- und nicht eine Faxnummer handelt. Nicht-Sehende hingegen bräuchten eine zusätzliche, textliche Konkretisierung — die dann für Sehende visuell verborgen werden kann.

Auch zum visuellen Verbergen stehen mehrere Techniken zur Verfügung, die durchgängig mit CSS realisiert werden. Die universelle Methode eignet sich, um komplette HTML-Elemente samt ihrem Inhalt zuverlässig zu verstecken. In manchen Fällen bietet sich auch die Off-Screen-Variante an, etwa wenn das Einblenden des Elements animiert werden soll. Unter bestimmten Voraussetzungen, und wenn nur der Textinhalt eines Elements verborgen werden muss, bietet sich die Inline-Methode an.

Elemente verbergen (universell)

Die gängigste aller Techniken kursiert in mehreren Varianten und nutzt eine Kombination verschiedener CSS-Einstellungen, um Inhalte aus dem Sichtbereich zu entfernen, aber weiterhin für Screenreader erfassbar zu lassen. Häufig unter den CSS-Klassennamen visually-hidden oder sr-only genutzt, stellt sich der CSS-Code etwa so dar:

/* Nutzbar ab Internet Explorer 9 oder höher */
.visually-hidden:not(:focus):not(:active) {
    clip: rect(0 0 0 0); 
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap; 
    width: 1px;
}

Ein Element, dem die CSS-Klasse visually-hidden gegeben wird, wird durch diese CSS-Regel unter anderem

  • auf die Dimensionen 1 × 1 Pixel verkleinert (width: 1px; height: 1px),
  • auf einen Null-Ausschnitt beschnitten (clip: rect(0 0 0 0)),
  • aus dem normalen Layoutfluß entfernt (position: absolute) und
  • es werden alle überlaufenden Inhalte ausgeblendet (overflow: hidden).

Folgendes Beispiel zeigt, wie ein Mehr erfahren-Link für Screenreader-Nutzende aussagekräftiger gestaltet werden kann, indem zusätzliche Anhaltspunkte gegeben werden, die sich für Sehende vermutlich aus dem Kontext erschließen.

<a href="barrierefrei-verstecken.html">
    Mehr erfahren
    <span class="visually-hidden">
        über Techniken zum barrierefreien Verstecken
    </span>
</a>

Die :not()-Einschränkungen des Selektors der oben dargestellten visually-hidden-Klasse sorgen dafür, dass nur solche Elemente verborgen werden, die gerade nicht den Tastaturfokus innehaben oder aktiv sind. Oder anders formuliert: Verborgene, interaktive Elemente, die grundsätzlich den Tastaturfokus erhalten können — also Links, Schaltflächen und Formularelemente — werden automatisch eingeblendet, sobald sie den Tastaturfokus erhalten. Dies ist wichtig, um das WCAG 2.1 Erfolgskriterium 2.4.7 Focus Visible zu erfüllen: Es muss immer sichergestellt sein, dass die aktuelle Fokusposition klar erkennbar ist.

Die visually-hidden-Klasse kann also etwa genutzt werden, um Navigation Überspringen-Links (Skip Links) oben auf einer Seite zu realisieren: Solche liegen ganz am Anfang im HTML-Quelltext und sind im Ausgangszustand verborgen, können aber den Tastaturfokus erhalten. Sie ermöglichen es Tastaturnutzenden, unmittelbar zum Hauptinhalt der Seite zu springen und sich nicht erst mühsam durch den Kopfbereich kämpfen zu müssen. Auch diese Webseite nutzt einen solchen Sprung-Link — probieren Sie es aus! Setzen Sie den Fokus in die Adressleiste Ihres Browsers und drücken sie die TAB-Taste, bis sie das Sprung-Link sehen.

<!-- Sprunglink als erstes interaktives Element im Quelltext -->
<a href="#main" class="visually-hidden">
    Zum Hauptinhalt springen
</a>

Abgewandelte Varianten der visually-hidden-Klasse finden sich in den (englischsprachigen) Online-Artikeln, auf die unter Ressourcen verwiesen wird.

Elemente verbergen (off screen)

In manchen Situationen kann es zum Verbergen ausreichend sein, Elemente aus dem sichtbaren Bildschirmbereich (off screen) zu verschieben, ohne sie gleichzeitig in ihren Dimensionen oder anderweitig zu beschränken. Eine Anwendung hierfür könnten die bereits beschriebenen Navigation überspringen-Links zu Beginn einer Seite sein, wenn sie bei Fokuserhalt animiert in den sichtbaren Bereich verschoben werden sollen:

<!-- Skip-Links zum Springen zur Navigation und zum Hauptinhalt -->
<ul class="off-screen-skiplinks">
    <li>
        <a href="#menu" class="skip-link">
            Zur Navigation springen
        </a>
    </li>
    <li>
        <a href="#main" class="skip-link">
            Zur Navigation springen
        </a>
    </li>
</ul>

Eine skip-links-Klasse könnte im CSS etwa so gestaltet werden:

/* 
Verschiebt die Liste der Sprunglinks nach außerhalb
des Sichtbereichs, da diese nur für Tastaturnutzende
nützlich sind und nicht permanent sichtbar sein müssen
*/
.off-screen-skiplinks {
    position: absolute;
    left: -100vw;
    list-style: none;
}

/*
Fixiert die Sprunglinks am oberen Seitenrand und
verschiebt sie vertikal aus dem Sichtbereich
*/
.skip-link {
    position: fixed;
    top: 0;
    transform: translateY(-10em);
    transition: transform .2s ease-in-out;
}

/*
Verschiebt ein einzelnes Link bei Fokuserhalt
zurück in den Sichtbereich
*/
.skip-link:focus {
    transform: translateY(0em);
}

Da die verborgenen Elemente nur in ihrer Position, nicht aber in ihren Dimensionen beeinflusst werden, lassen sich mit dieser Technik vor allem Bewegungsanimationen elegant bewerkstelligen.

Textinhalte verbergen (inline)

In bestimmten Situationen kann es sinnvoll sein, nicht ganze Elemente zu verbergen, sondern nur ihren Textinhalt unsichtbar werden zu lassen. Eine Anwendung hierfür wäre etwa ein Icon, dessen Beschriftung für Sehende nicht sichtbar sein muss:

<p>
    <span class="icon icon-tel">Telefonnummer:</span>
    +49 911 959394-5
</p>

Um den Blick auf das Wesentliche zu lenken, wurde im Beispiel-Quelltext darauf verzichtet, die dargestellte Telefonnummer mit dem tel://-Protokoll zu verknüpfen. Folgender CSS-Code ersetzt die Beschriftung Telefonnummer: screenreader-freundlich durch ein Icon:

/* Allgemeine Eigenschaften für alle Icons */
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    white-space: nowrap;
    overflow: hidden;
    text-indent: 2em;
    background-size: contain;
    background-repeat: no-repeat;
}

/* Telefon-Icon */
.icon-tel {
    background-image: url("telephone.svg");
}

Im Beispiel werden zunächst allgemeine Angaben für alle Icons getroffen (icon-Klasse): Die Dimensionen werden auf ein 1-em-Quadrat festgelegt (width: 1em; height 1em), Textüberläufe werden verborgen (white-space: no-wrap; overflow: hidden), die Textinhalte werden um 2 em eingerückt (text-indent: 2em) und liegen damit außerhalb der sichtbaren Breite des Icons, und es werden Voreinstellungen für die Einbindung eines Hintergrundbilds getroffen. Speziell für Telefonnummern (icon-tel-Klasse) wird schließlich eine geeignete Grafik als Hintergrundbild definiert, die das quadratische Element vollständig ausfüllt.

Verbergen für assistive Technologien

Rein dekorative Elemente, die keinen Beitrag zum Verständnis einer Seite leisten, sollten für assistive Technologien verborgen werden. So können die zu verarbeitenden Informationen und damit die kognitive Last für Screenreader-Nutzende auf das Notwendige reduziert werden. Zu typischen Anwendungsfällen zählen:

  • Grafiken oder Icons, die gleichzeitig textlich beschriftet sind
  • Icons, die mit Hilfe sogenannter Icon-Fonts dargestellt werden (bestimmte Screenreader- und Browser-Kombinationen unternehmen den Versuch, solche Icons vorzulesen, was kaum zu sinnvollen Ansagen führt)
  • Dekorative, nicht-informationstragende Bilder

Auch zum Verbergen für assistive Technologien stehen unterschiedliche Techniken zur Auswahl, jede mit ihren eigenen Besonderheiten und Grenzen.

aria-hidden="true"

HTML selbst bietet keine Technik an, um Inhalte speziell für assistive Technologien zu verbergen. An dieser Stelle springt das ARIA-Zusatzvokabular ein und gibt uns mit dem aria-hidden-Attribut ein geeignetes Werkzeug an die Hand. HTML-Elemente mit aria-hidden="true" sind visuell sichtbar, werden jedoch nicht an den Accessibility Tree des Browsers weitergereicht und sind damit für assistive Technologien nicht zu erfassen.

<button type="button">
    <!-- Ein "X"-Icon -->
    <span class="icon-close" aria-hidden="true"></span> 
    <!-- Ergänzende, visuell verborgene Alternativbeschriftung -->
    <span class="visually-hidden">Schließen</span>
</button>

Im Beispiel wird ein Schaltflächen-Icon, das etwa über ein Hintergrundbild oder einen Icon-Font zusammen mit CSS Generated Content (::before oder ::after) realisiert wurde, per aria-hidden="true" für assistive Technologien verborgen. Um die Schaltfläche für Screenreader nutzbar zu machen, wird das Icon zusätzlich durch einen screenreader-freundlichen, visuell verborgenen Alternativtext ergänzt.

Bei der Verwendung von aria-hidden="true" sollte eine Reihe von Besonderheiten beachtet werden:

  • Nicht anzuraten ist die Verwendung bei Elementen, die den Tastaturfokus erhalten können — standardmäßig also bei Links, Schaltflächen und Formularelementen. Solche Elemente wären weiterhin per Tastatur fokussierbar, würden aber von assistiven Technologien nicht mehr sinnvoll angesagt werden können. Das Entfernen der Elemente aus der Fokusreihenfolge per tabindex="-1" wäre möglich, aber weshalb handelt es sich dann überhaupt um interaktive Elemente?
  • Anders als zum Beispiel das hidden-Attribut kann aria-hidden="true" nicht durch CSS neutralisiert werden. Um ein derart verborgenes Element für assistive Technologien wieder verfügbar zu machen, muss der Wert des Attributs auf false gesetzt oder — besser noch — das Attribut muss komplett entfernt werden.
  • Um die Sichtbarkeit eines per aria-hidden verborgenen Elements für assistive Technolgien dynamisch zu ändern, wird JavaScript benötigt. In solchen Fällen ist es nicht ratsam, aria-hidden="true" schon in den Auslieferungszustand des HTML-Quelltexts zu integrieren. Wenn JavaScript — aus welchen Gründen auch immer — einmal nicht zur Verfügung steht, so sind diese Elemente permanent unzugänglich für Screenreader, da ihr Zustand nicht verändert werden kann.

role="presentation"

Eine subtil verschiedene, in seltenen Fällen jedoch nützliche Variante zum Verbergen von Inhalten für assistive Technologien ist das Vergeben der ARIA-Rolle role="presentation" (oder role="none" seit ARIA 1.2). Sie bewirkt, dass einem Element samt seinen Unterelementen die semantische Bedeutung entzogen wird und es deshalb — wie bei aria-hidden="true" — ebenfalls nicht länger an den Accessibility Tree weitergereicht wird. Es gibt allerdings eine kleine, wichtige Besonderheit: Untergeordnete, fokussierbare Elemente — also Links, Schaltflächen und Formularelemente — behalten ihre semantischen Merkmale. Ein Praxisbeispiel:

<ul role="presentation">
    <li>Erstes Listenelement</li>
    <li>Zweites Listenelement <a href="#">mit Link</a></li>
    <li>Drittes Listenelement</li>
</ul>

Vom dargestellten HTML-Quelltext kommt bei einem Screenreader etwa dies an:

<span role="presentation">
    <span>Erstes Listenelement</span>
    <span>Zweites Listenelement <a href="#">mit Link</a></span>
    <span>Drittes Listenelement</span>
</span>

Während die ungeordnete Liste und ihre Elemente (<ul> und <li>) zu semantisch bedeutungslosen Elementen analog <span> degradiert werden, behält das Link im zweiten Listenelement seine Bedeutung und Funktion bei. role="presentation" verhält sich also ähnlich wie, aber weniger aggressiv als aria-hidden="true". Auch für role="presentation" gelten dieselben Anwendungshinweise wie für aria-hidden="true".

alt="" (Bilder)

Rein dekorative Bilder und Grafiken, die nicht wirklich zum Verständnis einer Seite beitragen, sollten für assistive Technologien verborgen werden, um die kognitive Last für Nutzende möglichst gering zu halten. Per Definition gelten Bilder mit vorhandenen, aber leeren alt-Attributen als dekorativ und werden nicht an den Accessibility Tree weitergereicht.

<!-- Dekoratives Bild mit leerem Alternativtext -->
<img src="deko.jpg" alt="">

<!-- Dekoratives Inline-SVG mit aria-hidden -->
<svg viewBox="0 0 100 100" aria-hidden="true">
    <circle cx="50" cy="50" r="50"/>
</svg>

Anders als <img>-Elemente kennen <svg>-Grafiken kein alt-Attribut — hier muss das Ausblenden mit aria-hidden="true" oder role="presentation" umgesetzt werden.

Anwendungsbeispiel: Versteckte Mehrweg-Beschriftungen

Wie bei den Techniken zum vollständigen Verbergen erläutert, eignen sich display: none und das hidden-Attribut, um Elemente sowohl visuell, als auch für assistive Technologien zu verstecken. In Kombination mit einer Besonderheit der beiden ARIA-Attribute aria-labelledby und aria-describedby ergibt sich eine nette Anwendung, die hin und wieder nützlich ist: Beide Attribute dienen (in unterschiedlichen Konstellationen) dazu, HTML-Elemente für assistive Technologien zu benennen und zu beschreiben. Beide Attribute nutzen einen ID-Verweis, um ein andernorts im Quelltext vorhandenes Element zu referenzieren und seine Inhalte als Beschriftung bzw. Beschreibung zu nutzen. Und beide Attribute sind in der Lage, hierfür auch eigentlich verborgene Elemente heranzuziehen:

<!-- Leer gelassenes Eingabefeld für den Vornamen -->
<label for="given-name">Vorname</label>
<input id="given-name" type="text" aria-describedby="error-empty">

<!-- Leer gelassenes Eingabefeld für den Nachnamen -->
<label for="family-name">Nachname</label>
<input id="family-name" type="text" aria-describedby="error-empty">

<!-- Gemeinsame Fehlerbeschreibung für beide Felder -->
<p hidden id="error-empty">
    Bitte lassen Sie dieses Feld nicht leer.
</p>

Das Beispiel präsentiert sicher nicht die einzige oder optimale Lösung, wie Fehlermeldungen zu Formulareingaben umgesetzt werden können. Es demonstriert aber, wie aria-labelledby und aria-describedby auch auf versteckte Inhalte verweisen und diese so mehrfach genutzt werden können.

Ressourcen

Weiterführende Informationen, darunter Links auf zusätzliche Ressourcen, bieten unter anderem diese englischsprachigen Artikel: