[4.0] Custom Element Switcher [a11y]

[brianteeman]

The implementation of the switcher element completely fails accessibility. The label is not associated with the custom element so is ignored by the screen reader.

To make it easier for you this is a video recording using nvda

https://www.youtube.com/watch?v=hpo1qgFLZR0

I thought that the a11y team had tested and approved this

[brianteeman]

This article explains the problem and solution https://medium.com/@robdel12/creating-an-accessible-custom-checkbox-64bd87b5c195

[C-Lodder]

They had approved it.

[brianteeman]

So they obviously never tested it

[C-Lodder]

If I rightly remember, they tested the live link we provided, then Dimitris and myself wasted a Saturday discussing and rewriting it based on feedback.

[brianteeman]

Anyway the past is irrelevant. It is not accessible as it is and can't be used.

[chmst]

I said already here joomla/40-backend-template#395 that swithers are not userfriendly as they are. In the actual version it seemed to be better - I did not hear the speaker.

The only way for accessible switchers in my opinion this https://codepen.io/nickbottomley/pen/uhfmn.
Labels for the state on/off must be left and right of the switcher.
If this is not possible, then we better use Checkboxes or lists or simple radio buttons instead of swithers.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/20986.}

[brianteeman]

Labels for the state on/off must be left and right of the switcher.

What is the reasoning for this?

[zwiastunsw]

I tested it with a new template. Screen reader: NVDA 2018.2.1. Windows 10. The switch works correctly when you are in focus mode (NVDA + space). If you are in browse mode, the switch does not work.
I also tested with the ChromeVox. It is working properly.

[brianteeman]

In all my tests the label is never announced

[zwiastunsw]

see: test switcher, article option, j4

[brianteeman]

yes that is exactly what my first video showed. the label is never announced

[zwiastunsw]

You are right! The label is not announced.