mercredi 25 octobre 2023

Accessibility: Pressing "space" on checkbox is not registered correctly by screen reader

We are working on upgrading our app to vue 3, but in the meantime, one of our users has problems with their screen reader which we have to fix within vue 2.

Problem: Given a vuetify checkbox, when you press space, the screen reader doesn't notice that the checkbox has been unchecked.

Here is a small code pen: https://codepen.io/jkarczm/pen/LYbYmxz?editors=1010

If you try it without a screen reader, pressing with the mouse or the space - it all looks good, but the screen reader won't pick up that the checkbox changed when you press space (it does pick up when you use the mouse). Screen readers tested and affected: Orca, JAWS, NVDA.

Analysis so far:

In that code pen, if you use the developer tools, you can go to the input element for the checkbox and remove the "role: 'checkbox'" property from the HTML. This will result in the underlying input element to be rendered also next to the icon which replaces the natural rendering. Now, if you use mouse clicks, the two checkboxes change accordingly, while if you use the space key, the native checkbox DOES NOT change its value.

I believe that the html here is actually not good: The checkbox should just have a type: "checkbox" property, all the rest is unnecessary. It seems that most modern versions of screen readers just ignore the other properties such as aria-checked and read out the value of the input and that this is CORRECT behaviour - they didn't do that in the past though, which is why the problem is biting us now.

However, that doesn't tell me why the "native" checkbox doesn't pick up the change - to me it seems that the signals are propagated to the same functions and result in the same changes in JavaScript apart from the value of the input element.

Question: Does anyone have an idea or pointers as to how I could fix it? Vuetify 3 behaves correctly in that regard, but there were a lot of changes so I can't quite put a finger on where the relevant change is coming from.




Aucun commentaire:

Enregistrer un commentaire