Bedienung

Verhalten und Aussehen bleiben getrennt

Geltung

universal · web, react-native

Warum

Ohne diese Trennung hängt das Verhalten am Aussehen. Aus „Der Knopf ist blau" wird „blau heißt anklickbar". Ändert der nächste Umbau die Farbe, ändert sich auch die Bedienlogik. Mit der Trennung kannst Du das Aussehen wechseln, ohne dass sich ändert, was das Element tut. Und Du kannst etwas Neues bauen, indem Du nur sein Verhalten benennst, statt sein Aussehen neu zu erfinden.

Ein Agent fragt am häufigsten, welches Element er hier einsetzt. Die Tabelle der Verhaltensarten beantwortet das. Statt „nimm einen Button" heißt es dann „das ist ein dauerhafter Zustand, also toggleable, also Schalter oder Reiter".

Die fünf Verhaltensarten

Die Verhaltensarten entsprechen dem, was ein blinder Nutzer heute schon erlebt. Der Accessibility Tree kennt Verhalten, kein Aussehen. Die Verhaltensarten bilden also ab, was die Plattform schon kennt, und sind keine ausgedachte Abstraktion.

Das Element im Code

Jede Verhaltensart hat ihr Bauteil im Code. navigable ist ein Link mit Adresse, pressable und toggleable sind ein button, editable ist ein Feld mit verbundener Beschriftung, readable ist Text. Ein Kasten mit Klick sieht für die Maus genauso aus, aber die Tastatur erreicht ihn nicht, der Screenreader erkennt ihn nicht, und ein Link lässt sich nicht in einem neuen Tab öffnen. Gibt es kein passendes Bauteil, etwa für Tabs oder eine Kombi-Box, gilt das Muster aus der ARIA APG.

Eine Rolle im Code weckt beim Nutzer Erwartungen. Wer etwas als Menü, Tabs oder Raster auszeichnet, baut auch die Tastaturbedienung dazu. Sonst drückt der Nutzer Pfeiltasten, die nichts tun. Eine Hauptnavigation ist deshalb eine Liste von Links ohne Menü-Rolle.

Das Wörterbuch

Bekannte Paare aus Verhalten und Aussehen, die einen Namen tragen. Der Name der Zeile ist die Abkürzung für das Paar. Die Namen in der Spalte Aussehen sind die Vorgabe. Ein Projekt darf sie anders nennen.

Chip und Badge sind verwandt, aber nicht gleich. Der Chip ist ein kleiner Umschalter, etwa ein Filter, der an oder aus ist. Das Badge hebt nur eine Information als Etikett hervor. Was gleich aussieht, hält der Nutzer für gleichartig. Deshalb sehen die beiden verschieden aus. Das Badge ist schmaler und hat nur ein knappes Padding, der Chip hat die Polsterung eines Bedienelements. So sieht man vor dem Klick, was sich drücken lässt.

Woran Du den Verstoß erkennst

• Ein Badge reagiert auf Klick. Dann ist es kein Badge, sondern ein Chip.
• Chip und Badge haben dasselbe Padding und dieselbe Höhe.
• Ein Switch löst eine einmalige Aktion aus, statt einen Zustand zu halten. Dann ist es ein Button.
• Etwas wird über seine Farbe beschrieben („der graue Knopf") statt über sein Verhalten.
• Das Aussehen bringt Interaktions-Code mit, oder das Verhalten setzt Farben.
• Das Verhalten wird in einer einzelnen Ansicht nachgebaut statt benutzt.
• Ein Klick sitzt auf einem div, span oder li.
• Ein button wechselt per Code die Seite, oder ein a hat kein href.
• Die Hauptnavigation hat role="menu", oder ein Element hat eine Rolle ohne die Tastaturbedienung dazu.

Grenzen

Zusammengesetzte Gebilde wie Dropdown, Datepicker oder Dialog bestehen aus mehreren Elementen und bekommen keine eigene Verhaltensart. Ihr Auslöser ist pressable, ihre Einträge sind navigable oder toggleable.

Nicht jede Kombination ergibt Sinn. Welche verboten sind, gehört in die Grammatik des Projekts, nicht in diese Notiz.

Verwandt

• Verhalten und Aussehen werden nicht in der Ansicht nachgebaut
• Farbe trägt nie allein
• Kurze Zustände verschieben, dauerhafte wechseln die Palette
• Die Höhe gehört der Zeile, nicht dem Element
• Klickbares hat eine Fläche, und nur Klickbares sieht so aus