Ein Bedienelement ist ein Element einer Oberfläche, über das Besucher etwas auslösen oder eingeben. Dazu gehören Schaltflächen, Eingabefelder, Auswahllisten, Reiter und alles andere, worauf geklickt, getippt oder gezogen wird.
- Bedienelement
Element einer Oberfläche, über das Besucher etwas auslösen oder eingeben.
Beispiel: „Die Seite kommt mit vier Bedienelementen aus: Suchfeld, Filter, Sortierung und Blätterleiste.“Auch: Steuerelement, Interaktionselement oder Control. Im englischen Sprachgebrauch heißen sie UI Controls.
Abgrenzung zum Inhalt: Der Inhalt wird gelesen, das Bedienelement wird benutzt. Ein Link im Fließtext steht dazwischen: Er gehört zum Inhalt und ist zugleich bedienbar.
Welche Bedienelemente es gibt
Vier Gruppen decken den Alltag ab: Elemente, die etwas auslösen, also Schaltflächen und Links; Elemente, die etwas aufnehmen, also Eingabefelder und Auswahlfelder; Elemente, die etwas ein- und ausblenden, also Akkordeon, Reiter und Aufklappmenü; und Elemente, die durch Mengen führen, also Blätterleiste, Sortierung und Filter.
Jede Gruppe hat eine eigene Erwartung. Was auslöst, muss nach Schaltfläche aussehen; was aufnimmt, muss nach Feld aussehen. Ein Feld, das in Wahrheit ein Knopf ist, wird nicht angetippt, und ein Knopf, der aussieht wie Text, auch nicht.
Was jedes Bedienelement können muss
Es muss erkennbar sein, einen Namen haben, mit der Tastatur erreichbar sein und eine Rückmeldung geben. Die ersten beiden entscheiden darüber, ob es überhaupt benutzt wird, die letzten beiden darüber, ob es für alle benutzbar ist.
Technisch heißt das: das richtige HTML-Element statt eines umgedeuteten div. Ein button ist fokussierbar, reagiert auf Leer- und Eingabetaste und meldet Vorlesewerkzeugen seine Rolle. Alles davon müsste man an einem div von Hand nachbauen.
<!-- traegt Rolle, Fokus und Tastaturbedienung von Haus aus -->
<button type="button" aria-expanded="false">Filter anzeigen</button>
<!-- sieht gleich aus und kann nichts davon -->
<div class="button" onclick="…">Filter anzeigen</div>Für zusammengesetzte Bedienelemente wie Reiter, Akkordeon oder Auswahlfeld beschreiben die ARIA Authoring Practices je Bauform die erwartete Tastaturbedienung. Wer davon abweicht, baut ein Element, das aussieht wie bekannt und sich anders verhält.
Woran Bedienelemente scheitern
Am Zustand. Deaktiviert, ausgewählt, aufgeklappt, fehlerhaft: Jeder Zustand braucht eine sichtbare Darstellung und eine Entsprechung im Markup. Ein Element, das nur optisch grau wird, ist für Vorlesewerkzeuge weiterhin bedienbar.
Aus unserer Arbeit an über 2.500 Website-Projekten ist die zweithäufigste Ursache die Größe: Zielflächen unter rund 44 Pixeln werden auf dem Smartphone danebengetippt, und zwei Elemente ohne Abstand dazwischen führen zuverlässig zum falschen Treffer.