Code Accessibility
Vier Zeilen HTML, vier fehlende Namen
Feld, Schaltfläche, Link, Bild: vier Stellen im Quelltext.
Hör-Test
Wie der Code vorgelesen wird
Derselbe Ausschnitt, vor und nach dem Review.
Vier Elemente ohne Namen. Der Code ist gültig, die Bedeutung fehlt.
label, aria-label, Linktext und alt liefern die vier fehlenden Namen.
Aus dem Prüfbericht
Vier Regeln in einem Ausschnitt
Kritisch Das Eingabefeld ohne Beschriftung Regel label
Im Formular steht der Text nur neben dem Feld. Ein label mit for verbindet ihn programmatisch mit dem Eingabefeld.
Kritisch Die Schaltfläche mit reinem Symbol Regel button-name
Das Icon ist mit aria-hidden ausgeblendet, ein Text fehlt. aria-label am button benennt die Aktion.
Kritisch Der leere Anker im Raster Regel link-name
Ein a ohne Inhalt hat keinen Namen. Schreiben Sie das Ziel als sichtbaren Text in den Link.
Kritisch Das img ohne alt-Attribut Regel image-alt
Fehlt alt, liest das Programm den Dateinamen. Jedes img braucht alt, ein rein dekoratives ein leeres.
Zum Mitnehmen
Der Codeausschnitt, korrigiert
Vier Namen, vier Zeilen im HTML.
Korrektur in 2 Schritten ansehen
Feld und Schaltfläche benennen
Ein label mit for benennt das Feld, aria-label die Symbolschaltfläche. Die Gestaltung des Formulars bleibt unverändert.
KorrekturvergleichSchritt 1 · HTML Vorher
<span>Suchbegriff</span> <input id="q" type="search"> <button type="submit"> <svg aria-hidden="true"><use href="#lupe"></use></svg> </button>Nachher
<label for="q">Suchbegriff</label> <input id="q" type="search"> <button type="submit" aria-label="Suchen"> <svg aria-hidden="true"><use href="#lupe"></use></svg> </button>Markierte Zeilen wurden geändert
So prüfen Sie es Klicken Sie auf „Suchbegriff“. Der Cursor springt ins Feld.
Link und Bild benennen
Der Linktext nennt das Ziel, das alt-Attribut den Zweck des Bildes. Beide Namen entstehen aus sichtbarem Inhalt.
KorrekturvergleichSchritt 2 · HTML Vorher
<a href="#planner-form"></a> <img src="logo.svg">Nachher
<a href="#planner-form">Zum Seitenplan</a> <img src="logo.svg" alt="Imkerei Sommerfeld">Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie die Linkliste eines Vorleseprogramms. Jeder Eintrag nennt sein Ziel.