Accessible Button HTML
Zwei Tasten prüfen jede Schaltfläche
Tab und Enter zeigen, ob eine Schaltfläche echt ist.
Tab und Enter
Zwei Tasten prüfen jede Schaltfläche
Drei Schaltflächen, drei Ergebnisse.
Vorher
- Menge erhöhen · div, kein Tab-Stopp
- Lesezeichen · Symbol ohne Namen
- Warenkorb · Link im Button
Das Vorleseprogramm sagt„Schaltfläche“
Nachher
- Menge erhöhen · button mit Namen
- Lesezeichen · aria-label
- Warenkorb · Link daneben
Das Vorleseprogramm sagt„Menge erhöhen, Schaltfläche“
Aus dem Prüfbericht
Drei Schaltflächen, drei Befunde
Kritisch Das Symbol hat keinen Namen Regel button-name
Ein Lesezeichen-Symbol ohne Wort ergibt „Schaltfläche“. aria-label liefert den Namen.
Kritisch role="button" ohne Namen Regel aria-command-name
Wer einem div die Rolle button gibt, schuldet ihm auch einen Namen. Sonst bleibt es eine stumme Rolle.
Kritisch Ein Link in der Schaltfläche Regel nested-interactive
Zwei Bedienelemente ineinander ergeben zwei Tab-Stopps und einen verwirrenden Namen. Nebeneinander stellen.
Zum Mitnehmen
Die Schaltflächen, korrigiert
Ein echtes button-Element löst Rolle, Fokus und Tastatur auf einmal.
Korrektur in 2 Schritten ansehen
Das div durch button ersetzen
Ein button ist per Tab erreichbar und reagiert auf Enter und Leertaste. Ein div kann das nicht.
KorrekturvergleichSchritt 1 · HTML Vorher
<div class="btn" onclick="mehr()">+</div>Nachher
<button type="button" class="btn" onclick="mehr()" aria-label="Menge erhöhen"> + </button>Markierte Zeilen wurden geändert
So prüfen Sie es Tab auf das Plus, dann Enter. Die Menge steigt, ohne dass die Maus im Spiel war.
Den Link neben die Schaltfläche stellen
Ein Link darf nicht in einem button liegen. Als Nachbar hat jedes Element seinen eigenen Namen.
KorrekturvergleichSchritt 2 · HTML Vorher
<button type="submit"> In den Warenkorb <a href="/versand">Versandkosten</a> </button>Nachher
<button type="submit">In den Warenkorb</button> <a href="/versand">Versandkosten</a>Markierte Zeilen wurden geändert
So prüfen Sie es Ein Vorleseprogramm sagt „In den Warenkorb, Schaltfläche“ und danach „Versandkosten, Link“.