Barrierefreie Assets erstellen: Schnipsel/HTML-Code

Wenn du benutzerdefinierten HTML-Code oder Snippets zu deiner Website hinzufügst, sollte die Barrierefreiheit ein wichtiger Aspekt sein. Schlecht strukturierter Code kann Barrieren für Nutzer/innen schaffen, die auf Hilfsmittel angewiesen sind. Dieser Artikel erklärt, wie du sauberen, semantischen HTML-Code schreibst, der Barrierefreiheit unterstützt. Er behandelt Elemente wie ARIA-Rollen, die richtige Verwendung von Tags und ein tastaturfreundliches Design, um sicherzustellen, dass dein benutzerdefinierter Code für alle Besucher funktioniert.

Um sicherzustellen, dass deine Website, Landing Page, dein Formular oder deine Nachricht die Anforderungen an die Barrierefreiheit erfüllt, kannst du die Checkliste hier nutzen.

Bitte beachte, dass wir keine weitere Unterstützung bei HTML anbieten. Vergewissere dich, dass du dich mit der Programmierung auskennst oder dass du einen Entwickler zu Rate ziehen kannst.

Anforderungen

Iframes

  • Das iframe-Titelattribut (auf der übergeordneten Seite) muss genau und beschreibend sein.
  • Die Quellseite eines iframe (die im iframe eingebettete Seite) muss einen gültigen und aussagekräftigen <title> haben .

Orientierungspunkte

  • Bildschirmlesegeräte ermöglichen es den Nutzern, anhand von Orientierungspunkten zu navigieren. Daher sind Orientierungspunkte ein effektives Mittel, um Inhaltsblöcke zu umgehen, wie in WCAG 2.4.1 gefordert.
  • Orientierungspunkte können entweder mit HTML-Tags oder den entsprechenden ARIA-Rollen gekennzeichnet werden (z. B. <header> oder role="banner", <nav> oder role="navigation", <main> oder role="main", <footer> oder role="contentinfo", usw.).

Sprache

  • Die Hauptsprache der Seite muss durch einen Standard-Sprachcode auf dem Element genau identifiziert werden, z. B:
    • <html lang="en">,
    • <html lang="fr">.
  • Inline-Sprachänderungen MÜSSEN mit einem gültigen lang-Attribut gekennzeichnet werden.

Listen

  • Listen müssen mit dem entsprechenden semantischen Markup erstellt werden, d.h.:
    • <ul> oder <ol> mit <li> Kindelementen,
    • oder <dl> mit <dt> und <dd> Kinderelementen.

Tabellen

  • Tabellenüberschriften müssen mit <th> gekennzeichnet werden .
  • Der Text der Tabellenüberschrift muss die Kategorie der entsprechenden Datenzellen genau beschreiben.
  • Die Datenzellen der Tabelle müssen mit den entsprechenden Kopfzellen verknüpft werden.
    • Die Verwendung von scope(<th scope="col"> und <th scope="row">) wird dringend empfohlen, ist aber nicht immer notwendig. Wenn alle Zellen in der ersten Zeile als <th> ohne Geltungsbereich markiert sind, schließen die meisten modernen Bildschirmlesegeräte daraus, dass der Geltungsbereich die Spalte unter jeder Kopfzelle ist.
  • Die Kopfzeilen der Datengruppen einer Tabelle (falls vorhanden) müssen mit den entsprechenden Datenzellengruppen verknüpft werden (z. B. über scope="rowgroup" oder scope=”colgroup").
  • Kopfzeilen/Datenzuordnungen, die nicht mit <th> und scope bezeichnet werden können, müssen mit den Attributen header und id bezeichnet werden.
  • Tabellenköpfe und Datenverknüpfungen dürfen nicht in verschachtelten, zusammengeführten oder getrennten Tabellen referenziert werden.

Ausnahmen

Inline-Sprachänderungen

Ausnahmen sind erlaubt für:

  • eigennamen,
  • fachbegriffe,
  • wörter mit unbestimmter Sprache,
  • und Wörter oder Ausdrücke, die Teil der Umgangssprache des unmittelbar umgebenden Textes geworden sind.

Beispiele

iframe-CodeDO: Ein Titel, der dem iframe hinzugefügt wird, erklärt den Zweck des Inhalts.
landmarks on websiteDO: Korrekt markierte Orientierungspunkte, die es den Nutzern ermöglichen, über Einsen zu navigieren.
Beispielcode mit dem /Lang-EintragDO: Das folgende Codefragment veranschaulicht einen typischen Code für die Verwendung des /Lang-Eintrags, um die Standardsprache des Dokuments zu überschreiben, indem eine markierte Inhaltssequenz innerhalb des Inhaltsstroms einer Seite angegeben wird.
Website mit markierten ListenDO: Korrekt markierte Liste von Elementen.
Tabelle im HTML-CodeDON’T: In diesem Beispiel werden verschachtelte Überschriften verwendet, aber die Inhaltszellen sind über die Attribute id und headers falsch zugeordnet. Alle Zellen verweisen auf die Überschrift der obersten Ebene “Prüfungen”(id="e") – dies ist für die letzten drei Spalten nicht korrekt, die auf die Überschrift “Projekte” verweisen sollten. Außerdem wurde der Verweis auf die Spaltenüberschriften der zweiten Ebene versehentlich vertauscht, obwohl dies in diesem Beispiel keinen Unterschied macht, da sich die Inhalte (1, 2, Final) wiederholen.

Verwandte Artikel

Beliebte Ratgeber