PLANET-5245 Checkbox Accessibility

[planet-4]

This task is just about going through some pages and blocks using checkboxes and checking they are accessible. For example, the Cookies block uses checkboxes, the EN form too, and the Search page.

Our checkboxes have some custom styles, but as far as I tested they are ok. There is an issue with VoiceOver, it reads the labels twice, but it seems to be reported by other users even when using fully native checkboxes with labels and no style.

Some guidelines here: https://www.a11ymatters.com/pattern/checkbox/

VoiceOver bug: https://bugs.webkit.org/show_bug.cgi?id=191743

Maybe there is nothing to do, but maybe it worths time-boxing this task to see if we can find a workaround for the VoiceOver bug, and check also that our custom checkbox works with other screenreaders like Orca and NVDA.

Reporter: pcuadrad
Sections: 

Potentially affected repositories: planet4-master-theme, planet4-plugin-gutenberg-blocks

Testing

• For the blocks (Cookies, EN form) so you can just add these to a page and test them with a screen reader.
• For the Search page, you can access it on local by clicking on the search icon in the navigation bar input (or by going directly to this page). Make sure to test it in mobile too, since the layout is different there.

[aeisenberg]

I'll take a look at this.

[aeisenberg]

I've been playing around with the All blocks template page. There are 4 checkboxes on the page and I used them all with MacOS voiceover on. On Firefox and Chrome, I see no issues. On Safari, I do hear the description read twice. I also see that it is sometimes hard to get Safari to read the correct text that you are hovering on.

In general, it feels like voice over on Safari is just a worse experience compared to Chrome and FIrefox. My opinion is that since this is specifically a Safari bug that will affect more than just planet4 pages and there are some reasonable work arounds (don't use safari), I don't think this is worth much effort.

Do you have any statistics on how many users are trying to use voiceover and safari, compared with voiceover and other browsers?

[mleray]

I've been playing around with the All blocks template page. There are 4 checkboxes on the page and I used them all with MacOS voiceover on. On Firefox and Chrome, I see no issues. On Safari, I do hear the description read twice. I also see that it is sometimes hard to get Safari to read the correct text that you are hovering on.

In general, it feels like voice over on Safari is just a worse experience compared to Chrome and FIrefox. My opinion is that since this is specifically a Safari bug that will affect more than just planet4 pages and there are some reasonable work arounds (don't use safari), I don't think this is worth much effort.

Do you have any statistics on how many users are trying to use voiceover and safari, compared with voiceover and other browsers?

Thanks @aeisenberg for having a look 💚 I have no idea whether or not we have this sort of statistics, I don't think so, but our data analyst is currently on holiday so I can't confirm. So indeed it sounds like we can let that go, at least for now. However, we do have a few other checkboxes on the site, I'll add some testing guidelines to the description 🙂 Also, for the 2 blocks (Cookies, EN form) it's actually better to wait for accessibility improvements since they will both be converted to WYSIWYG soon... So actually I think you can limit your testing to the Search page for now!