Closed hopffgam closed 1 year ago
I looked into this briefly and I think I understand what is happening.
The available/unavailable toggles seem to be handled by this bootstrap plugin. The plugin seems to take a normal checkbox input and essentially replaces it with stuff that looks nice but isn't accessible at all.
I don't have time to fix it right away (maybe this weekend I'll try again to get a dev environment going), but I think the simplest idea might be to just wrap the checkbox with a div with an aria-label, then hook into the events on the checkbox to update that aria-label (the github for the plugin makes it seem like this would be easy, but who knows).
https://github.com/Lichess4545/heltour/blob/13160c63eaeb9f0c27856d9835d3687e2d5fb5c3/heltour/tournament/templates/tournament/availability.html#L44-L56 is the relevant place in the form. https://github.com/Lichess4545/heltour/blob/13160c63eaeb9f0c27856d9835d3687e2d5fb5c3/heltour/tournament/views.py#L1797 is the related view class.
The toggles in the availability form are not read by screen readers. Blind users of our website don't know if a toggle is set to "available" or to "unavailable".