Verbergen von Inhalten

Kommentare im Code

Webtechnologien bieten Mechanismen zum Einfügen von Metainformationen zum Code an, die selbst nicht als Code dienen. Durch diese Mechanismen können Anmerkungen zur Codierung vorgesehen werden oder Codeabschnitte vor der technischen Veröffentlichung aus der Darstellung entfernt werden. Bereiche aus dem Quellcode werden dadurch generell als nicht zur Veröffentlichung gedacht gekennzeichnet.

Leider werden vorhandene Kommentare vielfach bei der Online-Veröffentlichung aus wirtschaftlichen Interessen gänzlich aus dem Code entfernt. Dies erschwert die Problemanalyse und Bereitstellung von Lösungsansätzen zur Verbesserung der Barrierefreiheit.

Kommentare werden je nach Technologie durch ein Zeichen oder eine Zeichenfolge angekündigt oder in eine Zeichenfolge eingebettet. Im Folgenden zentrale Beispiele für einzelne Webtechnologien:

Falls du diese Seite allein über eine Sprachausgabe liest: Setze die Wiedergabe von Satzzeichen auf Alle, damit der erforderliche Code zuverlässig wiedergegeben wird.

HTML

<!-- [Kommentar] -->

CSS

/* [Kommentar] */

JavaScript

Einzeiliger Kommentar

//[Kommentar]

Mehrzeiliger Kommentar

/*
  [Kommentare]
*/

SVG

<!-- [Kommentar] -->

VBA

Jede Kommentarzeile muss mit einem Apostroph (') oder dem String „REM“ eingeleitet werden.

' [Kommentarzeile]
Rem[Kommentarzeile]

CMD (Windows Batch-Dateien)

Jede Kommentarzeile muss auf eine der folgenden Weisen eingeleitet werden:

:: [Kommentarzeile]
Rem [Kommentarzeile]

Browserdarstellung unterdrücken

• HTML Attribut hidden
  Vorteil: Das Element bleibt auch dann verborgen bleibt, wenn CSS deaktiviert ist.
• CSS Anweisung display: none

Vom Bildschirm verbergen - Screen Reader Only

Es ist manchmal zweckmäßig oder gewünscht, einzelne Inhalte oder Funktionalitäten für Screen Reader vorzusehen, ohne dass diese am Bildschirm sichtbar sind. Ein typisches Beispiel dafür sind Einsprungmenüs am Seitenanfang zu signifikanten Seitenbereichen.

Technisch werden sr-only Bereiche durch die Positionierung des Bereichs mittels CSS-Anweisungen außerhalb des Bildschirms platziert. Weil Screen Reader in der Regel CSS-Anweisungen ignorieren, sind sie daher unsichtbar und trotzdem für den Screen Reader wahrnehmbar.

CSS-Code für ein sr-only Element in HTML

Eine CSS-Klasse, die für den Screen Reader vorbehalten bleiben sollte, wird Off Screen absolut etwa folgendermaßen gekennzeichnet:

.sr-only {
  position: absolute;
  left: -1000em;
}

Für Screen Reader verbergen

aria-hidden

Element für assistierende Technologien verbergen

Semantik entziehen

role="presentation"

ARIA-Attribut, das einem Element und dessen Kindelementen die native Semantik (Überschrift, Tabelle, …) entzieht.

role="none"

ARIA-Attribut, das einem Element und dessen Kindelementen die native Semantik (Überschrift, Tabelle, …) entzieht.

role="img"

Eine Komponente mit role="img" wird als ein Bild aus den Kindelementen der Komponente interpretiert.

ARIA-Attribut, das einem Element samt Kindelementen als visuelle Darstellung kennzeichnet und deren native Semantik (Schalter, Tabelle, …) und textuelle Information entzieht.

Überblick zu Anweisungen zum Verbergen

Webtechnologien bieten unterschiedliche Anweisungen zum Verbergen von Inhalten für einzelne oder alle Medien. Die zu erwartenden Auswirkungen fasse ich in folgender Tabelle zusammen: