Ich bin kein großer Barrierefreiheitexperte, auch nicht, wenn es um Websites geht. Eines weiß ich aber: Einfach irgendwelche Elemente mit Javascript anklickbar zu machen, die üblicherweise nicht anklickbar sind, ist nicht barrierefrei, weil Screenreader oder andere Hilfstechnologie sie nicht als anklickbar erkennt. Das ist eine Barriere für z.B. sehbehinderte Personen, für die die Klickbarkeit einfach unsichtbar ist.
Vor diesem Problem stand ich gestern, als ich ein paar Tabellenzeilen (<tr>, „table row“ in HTML) nicht nur anklickbar, sondern auch mit der Tastatur auswählbar machen musste. Die Idee war: User sucht etwas, User kriegt eine Tabelle mit Ergebnissen, User klickt auf eine Zeile, irgendetwas passiert. In meinem Fall war es ein Button, der eine Änderung auslöste, es könnte aber auch genausogut ein Link sein, der irgendwohin führt.
Was tun? Man kann den <button> oder das <a> nicht um das <tr> wrappen, weil das in HTML nicht erlaubt ist. Man kann in jede einzelne Zelle einen Link oder Button stecken, aber das ist unschön und die Tabellenzellenpaddings sind dann auch nicht klickbar. Man könnte in eine Zelle einen Link stecken und dann zusätzlich mit Javascript die Zeile anklickbar machen. Das ist aber unschön und funktioniert nicht ohne Javascript (letzteres wäre in meinem Fall kein größeres Problem gewesen.
Ich habe ein bisschen recherchiert und einen Blogpost mit einer Lösung gefunden. Ich gehe hier nicht in die Details, lest euch dazu den Post durch, aber die Idee ist: Man packt nur in eine Zelle den Link und sorgt dann mit geschicktem CSS dazu, dass für typische Browsernutzer der Link auf die ganze Zeile ausgedehnt wird. Für Hilfstechnologie ist aber der ursprügliche Button oder der Link immer noch da (sollte aber einen passenden Text haben). Ich weiß nicht, ob das komplett barrierefrei ist, ist aber auf jeden Fall deutlich besser als die Variante, in der man die Zeile nur klickbar macht. Bonus: Man kann auch mit Tab durch die Zeilen wechseln und dann mit Enter eine auswählen (die Anleitung ist für einen <button>, mit leichten Änderungen funktioniert es aber auch für ein <a>).
Ich war also ganz zufrieden mit dem Ergebnis, bis mir ein Kollege sagte: Hey, das funktioniert bei mir überhaupt nicht und macht die ganze Seite unbrauchbar. Was ist passiert?
Wir sind kurz zusammen durchgegangen: In Firefox funktioniert es. In Chrome auch. In Safari nicht. Woran lag das? Nun, um den Klickbereich auf die ganze Zeile auszuweiten, habe ich einen Trick verwendet: Ich habe dem Button in CSS mit einem ::after selector ein Dummy-Kindelement hinzugefügt. Dieses habe ich dann mit position: absolute und inset: 0 positioniert und skaliert. Und zwar genau über das nächste Vorfahrelement, das ebenfalls explizit positioniert war (position: relative. In diesem Fall war es die Tabellenzeile <tr>.
Safari hat aber einen Bug, durch den ein position: relative an einer Tabellenzeile ignoriert wird. Dabei wollte ich die Tabellenzeile ja nicht einmal bewegen, ich brauchte sie nur als Referenzpunkt. Mangels weiterer positionierter Elemente hat sich dann das button::after auf die gesamte Seitengröße ausgedehnt. Man konnte also nichts mehr klicken. Egal, wo man klickte, es wurde immer derselbe Button gedrückt.
Glücklicherweise habe ich einen anderen Blogpost mit einem Workaround gefunden. Das ist ein bisschen hacky, funktioniert aber auf allen drei getesteten Browsern.