ARIA-Button
Was role="button" nicht mitliefert
Rolle ohne Namen, Rolle ohne Tastatur, Link in der Schaltfläche: drei Befunde.
Schaltfläche im Röntgenbild
Eine Rolle ist noch kein Button
Das native Element ist eine vollständige Baugruppe. role="button" beschriftet nur ein Teil im Accessibility Tree. Den Rest müssten Sie selbst bauen.
Vollständig ab Werk
<button>
Aktion wird ausgelöst
- SemantikRolle und Nameeingebaut
- TabFokuseingebaut
- EnterAktivierungeingebaut
- LeertasteAktivierungeingebaut
- Formular
typeeingebaut
Nur die Rollenplakette
<div role="button">
Aktion erst nach eigener Logik
- SemantikRolle und Namevorhanden
- Tab
tabindex="0"ergänzen - Enter
keydownergänzen - Leertaste
keydown+keyupergänzen - GesperrtZustand und Logikergänzen
Die kurze, robuste Lösung
<button type="button" id="filter-reset">
Filter zurücksetzen
</button>
<p id="status" aria-live="polite"></p>
<script>
const reset = document.querySelector('#filter-reset');
const status = document.querySelector('#status');
reset.addEventListener('click', () => {
status.textContent = 'Filter wurden zurückgesetzt.';
});
</script> Der sichtbare Text liefert den Namen. type="button" verhindert, dass dieser Button in einem Formular versehentlich als Submit-Button arbeitet.
Falls das Element unveränderbar ist
<div id="filter-reset-custom"
role="button" tabindex="0">
Filter zurücksetzen
</div>
<p id="custom-status" aria-live="polite"></p>
<script>
const reset = document.querySelector('#filter-reset-custom');
const status = document.querySelector('#custom-status');
function activate() {
status.textContent = 'Filter wurden zurückgesetzt.';
}
reset.addEventListener('click', activate);
reset.addEventListener('keydown', (event) => {
if (event.key === 'Enter') activate();
if (event.key === ' ') event.preventDefault();
});
reset.addEventListener('keyup', (event) => {
if (event.key !== ' ') return;
event.preventDefault();
activate();
});
</script> Dazu gehören sichtbarer Fokus und Button-Styling im CSS. Bei aria-disabled="true" müssen alle Handler die Aktion selbst unterdrücken.
So prüfen Sie es
- Erreichen Sie die Schaltfläche mit Tab. Der Fokus muss sichtbar sein.
- Lösen Sie dieselbe Aktion getrennt mit Enter und Leertaste aus.
- Halten Sie die Leertaste gedrückt. Die Seite darf dabei nicht scrollen.
- Prüfen Sie Rolle und Name im Accessibility Tree: „Filter zurücksetzen, Button“.
- Setzen Sie den gesperrten Zustand. Die Aktion darf weder per Zeiger noch Taste laufen.
Aus dem Prüfbericht
Drei Stellen, drei Befunde
Kritisch Die Schaltfläche hat keinen Namen Regel button-name
Ein Symbol ohne Wort sagt „Schaltfläche“. aria-label oder sichtbarer Text liefert den Namen.
Kritisch role="button" ohne Namen Regel aria-command-name
Die Rolle allein reicht nicht. Ein div mit role="button" braucht Namen, tabindex und Tastenlogik.
Kritisch Ein Link in der Schaltfläche Regel nested-interactive
Zwei Bedienelemente ineinander sind zwei Tab-Stopps mit einem Namen. Nebeneinander stellen.
Zum Mitnehmen
Die Schaltflächen, korrigiert
Ein echtes button-Element, oder alles, was ihm fehlt, per Hand.
Korrektur in 2 Schritten ansehen
Das button-Element statt der Rolle
button bringt Rolle, Name aus dem Text, Tab-Stopp, Enter und Leertaste mit. Ein div braucht alles einzeln.
KorrekturvergleichSchritt 1 · HTML Vorher
<div role="button" class="swap" onclick="tauschen()"> <svg aria-hidden="true"><use href="#swap"></use></svg> </div>Nachher
<button type="button" class="swap" onclick="tauschen()" aria-label="Start und Ziel tauschen"> <svg aria-hidden="true"><use href="#swap"></use></svg> </button>Markierte Zeilen wurden geändert
So prüfen Sie es Tab auf den Pfeil, Enter. Start und Ziel tauschen, und das Vorleseprogramm nennt den Namen.
Den Link neben den Umschalter stellen
Ein Link gehört nicht in einen Button. Als Nachbar hat er seinen eigenen Namen und Tab-Stopp.
KorrekturvergleichSchritt 2 · HTML Vorher
<button type="button" aria-pressed="false"> Route merken <a href="/route">Details zur Route</a> </button>Nachher
<button type="button" aria-pressed="false">Route merken</button> <a href="/route">Details zur Route</a>Markierte Zeilen wurden geändert
So prüfen Sie es Ein Vorleseprogramm sagt „Route merken, Umschaltfläche, nicht gedrückt“ und dann „Details zur Route, Link“.