Es ist sinnvoll, Webinhalte mit Überschriften zu strukturieren. Visuell sind Überschriften beispielsweise mit einer größeren Schrift gestaltet. Damit auch Nutzer von Hilfsmitteln, z.B. blinde Menschen, wahrnehmen können, dass es sich um eine Überschrift handelt, müssen diese im HTML-Code als solche ausgezeichnet sein.

Um eine Überschrift auszuzeichnen, verwendet man den Tag <h> für „heading“. Genauso wie man visuell unterschiedliche Überschriftenebenen durch Schriftgröße, Farbe etc. unterscheiden kann, so ist dies auch im HTML Code möglich. Die Hauptüberschrift ist die Überschrift erster Ordnung <h1>, die nächste Überschrift ist die der zweiten Ordnung <h2> usw. bis <h6>. Wenn die Abfolge von <h1> nach <h6> der inhaltlichen Logik entspricht, kann der Nutzer sich anhand der Überschriftenstruktur orientieren und mit Tastaturbefehlen navigieren (z.B. von Überschrift zu Überschrift springen).

Anforderungen an Barrierefreiheit:

• Seiten sind mit Überschriften gegliedert.
• Jeder Text, der aussieht wie eine Überschrift, ist auch als HTML-Überschrift ausgezeichnet.
• Jeder Text, der als HTML-Überschrift ausgezeichnet ist, ist auch tatsächlich eine Überschrift.
• Die Überschriften-Hierarchie von <h1> bis <h6> entspricht der Logik des Inhalts.

Vertiefende Informationen zum Thema Strukturierung von Textinhalten finden Sie in unserem Leitfaden für Online-Redakteure.

Prüfung:

Rufen Sie mit der Taste F12 das Entwicklerwerkzeug des Browsers (Inspektor) auf. Der HTML-Code wird eingeblendet. Klicken Sie links in der Menüleiste des eingeblendeten Inspektors auf das Auswahlwerkzeug (Icon mit Cursor-Pfeil auf einem Rechteck). Klicken Sie anschließend eine Überschrift an und prüfen Sie, ob sie als <h1> oder <h2> usw. ausgezeichnet ist. Prüfen Sie auch, ob über- und untergeordnete Überschriften mit dem entsprechenden Überschriftenelement ausgezeichnet sind.

Korrekt: Die Überschrift "Zielgruppe erweitern" ist mit <h2> als Überschrift zweiter Ebene ausgezeichnet.

Alternative Prüfung mit Werkzeugen:

Wer nicht den Quellcode prüfen möchte, kann sich auch das Bookmarklet „Inhalte gegliedert“ herunterladen. Es kann die Prüfung erleichtern.

Das Bookmarklet „Inhalte gegliedert“ ist eine von BIK zur Verfügung gestellte Funktion, mit der Sie die Überschriftenelemente auf der Webseite einblenden können. Es funktioniert nur unter Firefox.

Zur Installation, auf der Seite BITV-Test - Bookmarklets, den Link „Inhalte gegliedert“ als Lesezeichen speichern (Rechtsklick auf den Link > Lesezeichen für diesen Link hinzufügen). Nun kann das Bookmarklet aus den Lesezeichen heraus aufgerufen werden.

Über das Browsermenü Lesezeichen > Inhalte gegliedert aufrufen. Links und rechts neben den Überschriften wird das HTML-Element eingeblendet, sofern es im HTML Code steht. Prüfen, ob über- und untergeordnete Überschriften mit dem entsprechenden Überschriftenelement ausgezeichnet sind.

Der Screenreader gibt bei der h1-Überschrift aus: „Überschrift erster Ordnung, Vorteile von barrierefreiem Internet“. Das Bookmarklet zeigt auch an, ob Absätze korrekt mit dem p-Element ausgezeichnet sind.

Der Inhalt von Webseiten lässt sich vergrößern, etwa mit der Zoom-Funktion des Browsers. Damit kann der Webseiteninhalt entsprechend der individuellen Seh-Bedürfnisse eingestellt werden. Für Menschen mit Seheinschränkungen ist das elementar. Durch das Vergrößern darf es jedoch weder zu Überlappungen noch zu abgeschnittenen Inhalten kommen.

Anforderungen an Barrierefreiheit

• Jeder Text wird vergrößert.
• Text verschwindet nicht oder wird abgeschnitten.
• Es kommt nicht zu Überlappungen.
• Alle Buttons, Formularelemente sind sichtbar und nutzbar.

Prüfung:

Zoomen Sie Ihre Webseite auf 200%, indem Sie sechs Mal die Tastenkombination Strg + drücken. Wird alles vergrößert dargestellt? Gibt es keine Überlappungen? Bleibt die Seite vollständig nutzbar?

Falls sich durch das Vergrößern keine einspaltige (die sogenannte responsive) Ansicht ergibt, sondern rechts und unten ein Scrollbalken erscheint, ist das zwar weniger nutzerfreundlich, aber aus Sicht der Barrierefreiheit in Ordnung.

Bei Zoom auf 200% wird die BIK-für-Alle-Webseite einspaltig und die Inhalte bleiben lesbar.

Oft finden sich in Webangeboten Formularfelder (z.B. eine Suche) oder ganze Formulare (z.B. Kontaktformulare). Damit der Nutzer weiß, welche Eingabe beim jeweiligen Formularfeld erwartet wird, gibt es in der Regel eine sichtbare Beschriftung, die links neben oder über dem Eingabefeld steht.

Die Beschriftung vermittelt dem Nutzer, welche Eingaben gemacht werden sollen.

Wenn die Beschriftung (im oberen Beispiel: „Name“) im HTML-Code richtig ausgezeichnet ist, können Nutzer damit interagieren, unabhängig davon, ob sie die Tastatur, eine Spracheingabe oder einen Screenreader nutzen.
Ein weiterer Vorteil: Die Beschriftung selbst wird klickbar und der Cursor springt automatisch in das dazugehörige Eingabefeld bzw. Checkboxen oder Radiobuttons werden aktiviert. Das erleichtert die Bedienung, denn die Klickfläche ist größer.

Anforderungen an Barrierefreiheit:

• Formularfelder haben sichtbare Beschriftungen (Ausnahmen kann es geben, z.B. bei einfachen Suche-Formularfeldern, die einen beschrifteten Button haben).
• Die Beschriftungen sind mit dem Formularfeld verknüpft (d.h. die Beschriftung ist klickbar, der Cursor springt z.B. in das Feld oder ein Kontrollelement (Checkbox, Radiobutton) wird aktiviert. Gleichzeitig liest der Screenreader bei Fokussierung eines Feldes die entsprechende Beschriftung vor.

Prüfung:

Klicken Sie auf die Beschriftung von Formularelementen (Texteingabefelder, Checkboxen, Radiobuttons). Springt der Cursor in das Feld bzw. werden Checkboxen, Radiobuttons dadurch aktiviert?

Bei Klick auf die Beschriftung "Name" springt der Cursor in das verknüpfte Formularfeld.

Alternative Prüfung des Quellcodes:

Wer genauer wissen will, wie das Formular umgesetzt ist, kann auch den HTML-Code prüfen.

Rufen Sie mit der Taste F12 das Entwicklerwerkzeug des Browsers (Inspektor) auf. Der HTML-Code wird dadurch eingeblendet. Klicken Sie links in der Menüleiste des eingeblendeten Inspektors auf das Auswahlwerkzeug (Icon mit Cursor-Pfeil auf einem Rechteck):

Beschriftung ansehen: Wählen Sie mit dem Auswahlwerkzeug eine Beschriftung innerhalb des Formulars aus, z.B. Name, und betrachten Sie den blau hervorgehobenen HTML-Code: Ist das label-Element mit dem for-Attribut (<label for=“ctrl_12“...>) zu finden?

Eingabefeld ansehen: Wählen Sie nun mit dem Auswahlwerkzeug das dazugehörige Eingabefeld (<input>) aus und suchen Sie dessen ID: Im Code steht dann beispielsweise <input id=“ctrl_12“...>.

Korrekte Verknüpfung prüfen: Die Verknüpfung ist dann korrekt, wenn die ID des input-Elements dem Wert des for-Attributs (also das was innerhalb der Anführungszeichen steht), entspricht, d.h. <label for=“ctrl_12“...> und <input id=“ctrl_12“...> vergleichen.

Wenn Eingabefeld und Beschriftung korrekt verknüpft sind, wird die Beschriftung vom Screenreader vorgelesen, sobald das Feld fokussiert wird.

Informationen, die über Audio (z.B. in einem eingebetteten Video) vermittelt werden, sind für Menschen mit Höreinschränkungen nicht verfügbar. Sie benötigen als Alternative eine Untertitelung.

Die Untertitelung ist entweder „offen“, d.h. immer am unteren Rand des Videobildes sichtbar, oder über einen Untertitel-Button auf der Bedienleiste des Players ein- und ausblendbar.

Automatisch erzeugte Untertitel, wie sie z.B. YouTube anbietet, sind in der Regel nicht ausreichend, sie müssen nachbearbeitet werden. Dies kann bei YouTube im Videomanager geschehen.

Vertiefende Informationen zum Thema Untertitelung und speziell zu Untertitelung mit YouTube finden Sie in unserem Leitfaden für barrierefreie Videos.

Anforderung an die Barrierefreiheit:

• Untertitel erscheinen synchron zum gesprochenen Text.
• Die Sprecher werden im Untertitel genannt.
• Wichtige Geräusche werden genannt.

Prüfung:

Wenn keine Untertitel sichtbar sind, prüfen Sie, ob es einen Untertitel-Button gibt, über den Sie die Untertitel einblenden können. Falls nein, gibt es keine Untertitelung. Falls ja, schauen Sie sich eine kurze Sequenz des Videos mit Untertiteln an, um festzustellen, ob die Untertitel dem hörbaren Inhalt entsprechen.

Beim YouTube-Player gibt es ein Bedienelement, über das die Untertitelung eingeblendet werden kann.