HTML-Kurs / Barrierefreiheit: Überschriften, Links, Bilder und Tastatur

Barrierefreies HTML beginnt mit der Auswahl von Elementen basierend auf ihrer Bedeutung. Verwenden Sie Überschriften in logischer Reihenfolge, schreiben Sie Links, die ihr Ziel offenbaren, geben Sie Bildern geeignete Alternativen und stellen Sie sicher, dass Personen die Interaktionen mit einer Tastatur ausführen können.

Verwenden Sie Überschriften, um die Hierarchie zu beschreiben

Ein Titel ist nicht einfach ein großer Text. Er markiert eine Ebene im Dokument: Ein Seitenthema kann h1 verwenden, die Hauptabschnitte h2 und deren Unterabschnitte h3. Springen Sie nicht direkt zu h4, nur weil Ihnen seine Standardgröße gefällt; passen Sie das Aussehen mit CSS an. Jemand, der nur die Titel liest, sollte in der Lage sein, den Seitenplan zu verstehen. Vergleichen Sie die Überschriftenebenen und Absätze in den Beispielen von Überschriften und Absätze.

Zum Beispiel kann „Lieferinformationen“ ein Hauptabschnitt sein, mit „Lieferzonen“ und „Lieferzeiten“ als Unterabschnitte. Vermeiden Sie leere Überschriften oder Überschriften, die nicht zum folgenden Text passen. Die Hierarchie der Überschriften hilft Menschen, visuell zu lesen und mit Hilfstechnologien zu navigieren.

Machen Sie Links und Bilder verständlich

Eine Liste von Links, die alle „hier“ genannt werden, gibt nur wenige Hinweise auf ihre Ziele. Geben Sie das Ziel im Linktext an, wie in <a href="guide.html">Benutzerhandbuch lesen</a>. Wenn der Link eine Datei herunterlädt, geben Sie den Typ im umgebenden Kontext an. Überprüfen Sie die geeigneten Bildalternativen für die Rolle und die Abmessungen in Bilder: img, Alternativtext und Abmessungen.

Der alt Text eines informativen Bildes muss die Informationen vermitteln, die es hier bereitstellt. Ein rein dekoratives Bild, das einen ähnlichen Text wiederholt, kann alt="" verwenden. Ein als Link verwendetes Bild muss ebenfalls das Ziel des Links anzeigen, wie z. B. „Benutzerhandbuch öffnen“. Vermeiden Sie, jede sichtbare Farbe oder Form aufzulisten, wenn die Funktion entscheidend ist. Der W3C WAI Entscheidungsbaum für Bilder hilft zu bestimmen, welche Alternative angemessen ist.

Probieren Sie die Seite ohne Maus aus

1. Verwenden Sie Tab, um durch Links, Formularfelder und Schaltflächen zu navigieren.
2. Stellen Sie sicher, dass das fokussierte Element sichtbar identifiziert wird.
3. Aktivieren Sie die Steuerelemente mit Enter oder Leertaste, je nach Fall.
4. Wenn ein Formular einen Fehler meldet, lesen Sie ihn, kehren Sie zum Feld zurück, korrigieren Sie den Wert und senden Sie erneut.

Ein div mit nur einem Klick-Handler erwirbt nicht automatisch die Bedeutung oder das Tastaturverhalten eines Buttons. Verwenden Sie a für die Navigation und button für Aktionen. Wenn ein Menü oder ein aufklappbarer Inhalt geöffnet und geschlossen wird, überprüfen Sie, wohin der Tastaturfokus anschließend verschoben wird. Der Fokus darf nicht in versteckten Inhalten verschwinden, und die Navigationsreihenfolge sollte ungefähr der Lesereihenfolge entsprechen. Überprüfen Sie die explizite Zuordnung von Feldnamen mit der Klick-Übung auf das Label in label und input richtig verknüpfen .

Typischerweise wird ein fokussierter Link mit Enter geöffnet, während eine Schaltfläche mit Enter oder Leertaste aktiviert wird. Die Auswahl eines Elements, das der Navigation oder Aktion entspricht, gibt den Tastaturbenutzern das erwartete Verhalten, anstatt einen Link zu zwingen, eine Schaltfläche nachzuahmen oder umgekehrt.

Eine kleine Seite für manuelle Tests

Speichern Sie den vollständigen Code unter accessible-page.html. Laden Sie das Beispielbild mit 960 Pixeln Breite herunter und legen Sie es mit seinem ursprünglichen Dateinamen neben die HTML-Datei. Das Formular ist für die Validierung und die Inspektion der GET-Werte gedacht, nicht für den Empfang von Nachrichten.

<!doctype html>
<html lang="de-DE">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tastatur-Testübung</title>
  <style>
    body { margin: 1rem; font-family: sans-serif; line-height: 1.6; }
    img { max-width: 100%; height: auto; }
    input { max-width: 100%; font: inherit; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
  </style>
</head>
<body>
  <a href="#main-content">Zum Hauptinhalt gehen</a>
  <header>
    <nav aria-label="Auf dieser Seite">
      <a href="#guide">Besuchsanleitung</a>
      <a href="#contact">Kontaktübung</a>
    </nav>
  </header>
  <main id="main-content" tabindex="-1">
    <h1>Leitfaden von Kleiner Garten</h1>
    <section id="guide">
      <h2>Besuchsanleitung</h2>
      <p>Bequeme Schuhe und Wasser einplanen.</p>
      <img src="html-image-sample-lake-tree-960-v1.webp"
           alt="Ein Baum auf einer kleinen Insel in der Mitte eines Sees, mit Bergen im Hintergrund" width="960" height="540">
    </section>
    <section id="contact">
      <h2>Mit einem Kontaktfeld üben</h2>
      <form method="get">
        <label for="practice-email">E-Mail (erforderlich)</label>
        <input id="practice-email" name="email" type="email"
               aria-describedby="email-help" required>
        <p id="email-help">Verwenden Sie name@example.com statt einer echten Adresse.</p>
        <button type="submit">Eingegebene Werte überprüfen</button>
      </form>
    </section>
  </main>
</body>
</html>

1. Drücken Sie einmal Tab, um den Sprung-Link in den Fokus zu setzen, und dann Enter, um das wiederholte Menü zu überspringen und zum Hauptinhalt zu gelangen.
2. Das Hauptelement mit tabindex="-1" kann den Fokus erhalten, ohne einen weiteren normalen Tab-Stopp hinzuzufügen. Überprüfen Sie, dass die nächste Bewegung mit Tab einer sinnvollen Lesereihenfolge folgt.
3. Gehen Sie zum Formular und vergleichen Sie eine leere Absendung, einen ungültigen Wert wie abc und eine korrekt formatierte Testadresse. Sein Label und seine Anweisungen sollten während der Eingabe verfügbar bleiben.
4. Überprüfen Sie den Text, das Bild und das Feld bei 390px und mit Zoom. Benennen Sie das Bild vorübergehend um, um seinen alternativen Text zu prüfen, und stellen Sie dann den Dateinamen wieder her.

HTML liefert die Semantik und die nativen Interaktionen; CSS liefert die Anordnung und die visuelle Behandlung des Fokus. Benutzerdefinierte Fehler oder komplexe Menüs können eine zusätzliche Verwaltung des Zustands und des Fokus über JavaScript erfordern. Das Bestehen dieser Übung garantiert nicht, dass die Seite alle Anforderungen an die Barrierefreiheit erfüllt.

W3C-WAI-Tutorial zur Seitenstruktur

Verstehen, was Tests beweisen können und was nicht

Ein automatischer Prüfer kann bestimmte Markup-Fehler erkennen, aber er kann nicht immer beurteilen, ob ein Link verständlich ist oder ob die Beschreibung eines Bildes im Kontext nützlich ist. Kombinieren Sie die Ergebnisse der Werkzeuge mit Tastaturtests, Zoom und gegebenenfalls einem Screenreader. Beginnen Sie mit den wichtigen Nutzerpfaden der Website, anstatt einen fehlerfreien Bericht als Garantie zu betrachten. Der MDN-Leitfaden zur HTML-Barrierefreiheit behandelt weitere native HTML-Elemente.