Was gehört dazu, ein eigenes Dropdown barrierefrei zu machen?

Fang damit an, ein natives select zu probieren, denn damit bekommst du Tastaturunterstützung, Fokusmanagement und Screenreader-Verhalten gratis. Schließt das Design das aus, setz das Listbox- oder Combobox-Pattern sauber um: verwalte den Fokus selbst, unterstütz Pfeiltasten, Pos1, Ende, Escape und Type-ahead, verdrahte aria-expanded, aria-activedescendant und die richtigen Rollen, und gib den Fokus beim Schließen an den Trigger zurück.

Mein erster Schritt ist, überhaupt gegen den Eigenbau zu argumentieren, weil ein natives select Tastaturbedienung, mobile Picker und Screenreader-Ansagen mit null Code liefert und sich die meisten Designs mit Styling drumherum erfüllen lassen. Als wir wirklich ein eigenes gebraucht haben, für eine Mehrfachauswahl mit Avataren, habe ich es gegen das Listbox-Pattern der ARIA Authoring Practices gebaut statt zu improvisieren. Das hieß: der Trigger ist ein echter Button mit aria-expanded und aria-controls, das Popup hat role listbox mit Optionen, die role option und aria-selected haben, und ich verfolge die aktive Option mit aria-activedescendant, damit der Fokus auf dem Input bleibt. Tastaturseitig brauchst du hoch und runter, Pos1 und Ende, Escape zum Schließen samt Fokusrückgabe an den Trigger, Enter oder Space zum Auswählen und Type-ahead zum Springen. Was ich Leuten immer sage: ARIA sagt nur Zustand an; es fügt überhaupt kein Verhalten hinzu, ein div mit role button und ohne Tastaturhandler ist also schlimmer als nutzlos. Ich teste erst nur mit der Tastatur, dann mit einem Screenreader, bevor es überhaupt in die Nähe eines Reviews kommt.