Needless UI

Komponenten

Select

Wähle eine oder mehrere Optionen, aus einer kurzen oder riesigen Liste.

Tastaturbedienung

TasteAktion
Pfeil nach unten und obenÖffnet die Liste und bewegt sich dann durch die Optionen.
Pos1 und EndeSpringt zur ersten oder letzten Option.
Bild ab und Bild aufSpringt zehn Optionen weiter.
Enter oder LeertasteÖffnet die Liste oder wählt die aktive Option.
BuchstabenSpringt zur nächsten Option, die mit ihnen beginnt.
Pfeil nach rechts und linksKlappt im Baum eine Option auf oder springt zu ihrem ersten Kind; klappt sie zu oder springt zum Elternelement. Bei Text von rechts nach links sind die Pfeile vertauscht.
Alt + Pfeil nach obenWählt die aktive Option und schließt die Liste.
TabWählt bei Einfachauswahl die aktive Option und springt weiter.
EscSchließt die Liste, ohne zu wählen.

Hinweise zur Barrierefreiheit

  • Der Button ist eine combobox ohne Texteingabe, mit aria-expanded und aria-controls. Der Fokus bleibt auf ihm, und aria-activedescendant zeigt auf die aktive Option.
  • Die Liste ist eine listbox oder ein tree mit aria-level und aria-expanded. aria-setsize und aria-posinset bleiben korrekt, auch wenn nur einige Zeilen gerendert sind.
  • Die aktive Option hat eine volle Füllung und im Forced-Colors-Modus eine Kontur.
  • Benenne das Select mit einem <label for>, das auf triggerId zeigt, oder mit label.