Inhalte richtig ausblenden

Nicht alle Methoden zum Verbergen von Inhalten eignen sich für Benutzer von Screenreadern oder anderen assistiven Technologien. Auf dieser Seite werden grundlegende Methoden beschrieben, um Inhalte für alle Benutzer und speziell für Screenreader-Benutzer zu verbergen.

Inhalte unsichtbar machen (visuell verstecken)

Wenn ein Element auf der Seite:

• ein interaktives Element ist, das jedoch unsichtbar sein muss, damit es thematisch genutzt werden kann (z. B. Link, Checkbox, Umschalter oder Formularelement mit benutzerdefinierten Stilen),
• eine Überschrift oder Beschriftung für etwas ist, dessen Zweck offensichtlich ist (und daher nicht für sehende Benutzer sichtbar sein muss, z. B. eine Abschnittsbeschriftung oder Formularfeldbeschriftung),
• nicht für sehende Benutzer sichtbar sein soll, aber für Screenreader-Benutzer sichtbar sein muss,

... dann sollten Sie es unsichtbar (visuell versteckt) machen.

Das können Sie tun durch:

dem Element die Klasse visually-hidden zu geben,
in Drupal 8 die Felder auf der Anzeigeverwaltungsseite für Entitätstypen (z. B. das Feld „Tags“ im Inhaltstyp „Artikel“) so einzustellen, dass die Feldbeschriftung „- Visually Hidden -“ lautet,
CSS verwenden, um das Element außerhalb des sichtbaren Bereichs der Seite zu positionieren, oder
folgendes CSS verwenden:

position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
height: 1px;
width: 1px;
word-wrap: normal;

auf dem Element.

Beispiel:
Verstecken der Überschrift für Fehlermeldungen, Warnungen und Statusmeldungen.

Begründung:
In den meisten Themes werden Statusmeldungen an gut sichtbarer Stelle in einem farbigen Rahmen angezeigt, sodass sie die Aufmerksamkeit sehender Benutzer auf sich ziehen. Gemäß Abschnitt 1.3.3 WCAG 2.0 darf das Verständnis und die Bedienbarkeit von Inhalten jedoch nicht ausschließlich auf sensorischen Merkmalen wie Form, Größe, visueller Position oder Ausrichtung beruhen.

Ohne eine Überschrift, die den Statusmeldungen zugeordnet ist, können Screenreader-Benutzer verwirrt sein.

Die meisten Screenreader bieten die Möglichkeit, die Seite anhand von Überschriften zu überfliegen. Das Hinzufügen einer Überschrift zu Statusmeldungen erleichtert das Auffinden dieser Nachrichten.

Inhalte unsichtbar machen, bis jemand mit der Tastatur zu ihnen navigiert

Wenn ein Element auf der Seite:

• ein Link ist, der Benutzern hilft, zum Hauptinhalt oder zur Hauptnavigation zu springen,
• eine Alternative zu anderen Elementen ist, die nur mit der Maus nutzbar sind, oder
• für sehende Benutzer nicht sichtbar sein soll, es sei denn, sie navigieren mit der Tastatur durch die Seite,

... dann sollten Sie es unsichtbar machen, bis jemand mit der Tastatur dorthin navigiert.

Sie können dies tun, indem Sie:

• dem Element sowohl die Klassen visually-hidden als auch focusable geben oder
• folgendes CSS verwenden:

css_selector_for_my_element {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  height: 1px;
  width: 1px;
  word-wrap: normal;
}
css_selector_for_my_element:active,
css_selector_for_my_element:focus {
  position: static !important;
  clip: auto;
  overflow: visible;
  height: auto;
  width: auto;
}

Wobei css_selector_for_my_element der Selektor für das Element ist, das unsichtbar sein soll, bis jemand mit der Tastatur dorthin navigiert.

Beispiel:
Der Link „Zum Hauptinhalt springen“ oben auf jeder Seite in den Standard-Themes.

Begründung:
Benutzer, die nur die Tastatur und Screenreader verwenden, möchten schnell zum Hauptinhalt der Seite springen können.

Um die Anforderungen von WCAG 2.0 Abschnitt 2.4.1 zu erfüllen, müssen Sie eine Möglichkeit bieten, sich wiederholende Inhaltsblöcke auf mehreren Seiten zu überspringen.

Inhalte vollständig für alle Benutzer verstecken

Wenn ein Element auf der Seite:

• nicht sichtbar sein soll, bis ein JavaScript-Ereignis es sichtbar macht,
• im Kontext für sehende Benutzer oder Screenreader-Benutzer nicht relevant ist,
• Werte enthält, die von JavaScript gelesen oder geschrieben werden, aber niemals direkt angezeigt werden sollen, oder
• im Allgemeinen weder für sehende Benutzer noch für Screenreader-Benutzer sichtbar sein sollte,

... dann sollten Sie es für alle Benutzer vollständig verbergen.

Dies können Sie tun, indem Sie:

• dem Element die Klasse hidden geben (Drupal 8),
• wenn es ein Feld in einem Entitätstyp ist, die Anzeige auf „- Versteckt -“ auf der Anzeigeverwaltungsseite für diesen Entitätstyp setzen,
• wenn es eine Feldbeschriftung in einem Entitätstyp ist, die Anzeige der Beschriftung auf „- Versteckt -“ auf der Anzeigeverwaltungsseite setzen oder
• CSS verwenden: display: none;

Beispiel:
Verbergen des Farbvorschau-Bereichs des Color-Moduls bis JavaScript geladen ist:

/* color.css (Drupal 7 und 8) */
#preview {
  display: none;
}

Begründung:
Die Vorschau funktioniert nicht, wenn JavaScript nicht aktiviert ist, daher wird sie für niemanden benötigt.

Missbrauch

Ein häufiger Missbrauch von „display:none“ ist das Entfernen von Formularbeschriftungen oder Überschriften, um das Aussehen der Seite zu ändern. Dies macht das Formularelement jedoch für Screenreader-Benutzer unbrauchbar!

Wenn Sie z. B. die Formularbeschriftung mit „display:none“ entfernen, könnte ein Screenreader-Benutzer sagen: „Ich habe ein Pflichttextfeld, aber ich weiß nicht, wofür es ist“. In so einem Fall wäre es besser, den Inhalt unsichtbar (visuell versteckt) zu machen.

Inhalte für Screenreader unsichtbar machen

Wenn ein Element auf der Seite:

• für sich allein verwirrend wäre oder
• nur für sehende Benutzer sichtbar sein soll,

... dann sollten Sie es für Screenreader unsichtbar machen.

Das erreichen Sie durch:

• dem Element das Attribut aria-hidden="true" zuzuweisen.

Beispiel:
Ein Steuerelement zum Entfernen eines Suchfilters zeigt für sehende Benutzer ein „x“ an und bietet für Screenreader-Benutzer visuell versteckte, aber zugängliche Anweisungen:

Currently filtering by: <a href="...">Module <span class="visually-hidden">Click to remove this filter.</span> <span aria-hidden="true">x</span></a>

Begründung:
Es gibt bereits einen zugänglichen Alternativtext.

Das alleinige Vorlesen von „x“, selbst nach dem Alternativtext, kann für Screenreader-Benutzer verwirrend sein.

Missbrauch

Das Verbergen von Inhalten vor Screenreadern bedeutet, dass Benutzer dieser Technologien die Inhalte nicht wahrnehmen oder damit interagieren können. Um die Anforderungen von WCAG 2.0 Abschnitt 1.1 zu erfüllen, müssen Sie zugängliche Alternativinhalte bereitstellen, sonst können Benutzer assistiver Technologien diese Inhalte nicht nutzen.

Mehr über unsichtbare Inhalte

• WebAIM-Richtlinien
• Display:none ist ein Problem für Screenreader