1.3.1 - Valides HTML-Markup, Information und Beziehungen

A 2.0 Umsetzung, Redaktion

Ziel

Valides HTML-Markup verwenden: Sicherstellen, dass Informationen, Struktur und Beziehungen, die durch visuelle oder akustische Formatierung vermittelt werden, für assistierende Technologien programmtechnisch bestimmbar oder textuell verfügbar sind.

Beschreibung

Strukturierte Inhalte wie Überschriften, Listen, Tabellen oder Formulare müssen korrekt mit semantischem HTML-Markup versehen sein, damit assistierende Technologien die Beziehungen erkennen können.
Farbabhängige Informationen oder rein visuelle Formatierungen (z. B. Pflichtfelder) benötigen ergänzende textuelle Beschreibungen.
Beziehungen zwischen Inhalten wie Formularfeldern und deren Beschriftungen müssen klar definiert und programmgesteuert nachvollziehbar sein.
Beschriftungen müssen mit Formularfeldern verknüpft sein.
ARIA-Rols sollen wir alle benutzerdefinierten Komponente verwendet werden

Anforderungen

Auszeichnungen von Headlines muss stringent sein und der HTML-Semantik (Verschachtelung bzw. Textgliederung) entsprechen. Das Auslassen von Hierarchie-Ebenen ist aber an sich kein Fehler, solange die hierarchische Abfolge der Überschriften logisch bleibt.
Bei Formularfeldern darf ein Sternchen nie alleine stehen, sondern muss durch erläuternden Text ergänzt werden.

Muss die technische Vorraussetzung, für eine valide HTML-Struktur sicherstellen, unter Berücksichtigung der ARIA-Rols, HX-Struktur, etc.
Nutzen Sie <h1> bis <h6> für Überschriften. Es müssen die Klassen zum Pflegen der Headlines breitgestellt werden. Verwendung von Klassen dienen dem Styling (.h1, .h2, etc.) sind optisch gleich aber semantisch unterschiedlich.
Setzen Sie <ul>, <ol> und <li> für Listen ein.
Verwenden Sie <table>-Markup mit Kopfzeilen (<th>) und Zellenverknüpfungen (scope, headers).
Nutzen Sie <fieldset> und <legend> für Formulargruppen.
Aria-Rols müssen als unterstützende Rollenzuweisungen verwendet werden. aria-labelledby und aria-describedby für zusätzliche Beschreibungen. Diese dienen der Strukturierung und Auszeichnung des Markups für Screenreader und werden als Bezeichner des Markups berücksichtigt, um Rollen bzw. Bedeutungen zuzuweisen. ARIA-Lables sind vor allem bei Abweichungen von HTML-Tags zu verwenden.

Code-Beispiele

Semantische Überschriftenstruktur:

<h1>Hauptüberschrift</h1>
<h2>Unterüberschrift</h2>
<h3>Detaillierte Sektion</h3>

Tabelle mit Kopfzeilen:

<table>
  <thead>
    <tr>
      <th scope="col">Buslinie</th>
      <th scope="col">Abfahrtszeit</th>
      <th scope="col">Haltestelle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>10A</td>
      <td>10:30</td>
      <td>Hauptbahnhof</td>
    </tr>
  </tbody>
</table>

Formular mit Pflichtfeldern und Beschreibung:

<form>
  <fieldset>
    <legend>Persönliche Daten</legend>
    <label for="name">Name <span aria-hidden="true" style="color: red;">*</span></label>
    <input type="text" id="name" required aria-describedby="required-note">
    <p id="required-note">* Pflichtfeld</p>
  </fieldset>
</form>

Farbhinweise mit textueller Ergänzung:

<p>Pflichtfelder sind rot markiert und mit einem Sternchen (*) gekennzeichnet.</p>

ARIA-Region zur Kennzeichnung eines Seitenbereichs:

<div role="region" aria-labelledby="section-heading">
  <h2 id="section-heading">Wichtiger Bereich</h2>
  <p>Inhalt dieses Bereichs.</p>
</div>