Hier ist ein toller Beitrag von Chen Hui Jing, in dem sie uns durch ihren Prozess führt, wie man Radiobuttons per Tastatur barrierefrei macht. Besonders gut gefallen hat mir dieser Abschnitt, in dem sie die vier Optionen diskutiert, die uns zur Verfügung stehen, um das Radio-Input zu verstecken und es durch eine Auswahl von Karten zu ersetzen, die stattdessen wie Schalter funktionieren.
Die meisten von uns vermasseln den Teil der Tastaturnavigation, wenn wir das Input-Element verstecken. Es gibt verschiedene Möglichkeiten, etwas unsichtbar oder versteckt zu machen.
- clip-path: polygon(0 0)
- display: none
- opacity: 0
- visibility: hidden
Für benutzerdefinierte Radiobuttons (oder Checkboxen) werden Option 2 und 4 nicht empfohlen, da Screenreader das Standard-Radio-Element nicht lesen können. Dies hindert uns auch daran, das :focus-Pseudoelement auf dem versteckten Input zu verwenden, daher scheiden diese aus.
Damit bleiben uns Option 1 und Option 3. Ich mag Option 1 irgendwie, weil clip-path Spaß macht. Clip-path erstellt einen Ausschnittbereich, der definiert, welcher Teil eines Elements sichtbar ist. Dieser Ausschnittbereich kann eine einfache Form oder eine URL sein, die auf ein Clipping-Path-Element verweist.
Und, wo wir gerade beim Thema Styling und Barrierefreiheit sind, es lohnt sich, Scotts O’Haras Repository mit barrierefreiheitsorientierten gestylten Formular-Komponenten und Daves Ruperts Nutrition Cards für barrierefreie Komponenten anzusehen.