search

cehfisher / a11y-style-guide

Accessibility (A11Y) Style Guide
http://a11y-style-guide.com/style-guide
MIT License
558 stars 61 forks source link

Some examples of toggle switches fail WCAG 1.4.1 (Color is not used as the only visual means of conveying information) #286

Closed calebtr-metro closed 3 years ago

calebtr-metro commented 3 years ago

Issue

Some of the toggle switches demonstrated at https://a11y-style-guide.com/style-guide/section-forms.html#kssref-forms-toggles use only color to convey information about their state. Specifically, the first and third examples, which do not have text labels integrated with the switches, do not convey information about their state without the use of color.

It is true that technically, the toggle switches are in different positions when in the "on" and "off" state, but it is impossible to be certain which position is which without the information provided by the color. I do not believe there is an established convention for users to distinguish "on" vs. "off" in this case.

It is also true that assistive technology users will get more information about the elements' states - but without such tools, the toggle fails WCAG 1.4.1.

Example

In this example, you can choose your sandwich toppings, but you don't know which ones you have selected and which you have not. https://codepen.io/calebtr/pen/bGWzjXb

scottaohara commented 3 years ago

You are correct that the toggles you mentioned would have improved usability if there was an additional indicator to convey the on/off state. However, normatively these do not fail 1.4.1. It is not "technically" that they are in different positions, they are in different positions which means that it is not through use of color alone that the state is indicated.

Regarding the establishment of a convention, Android, Windows and iOS all follow the same pattern that these toggles do. in the off state, the knob is to the left. In the on state, it's to the right.

On the web, component libraries such as material, bootstraps, foundation, fluent ui, etc. all follow the same positioning for their on/off state as described for the different OS's.

Re: your mention of programmatic exposure of state, you're right. The programmatic state of a control has nothing to do with 1.4.1. So even if someone was using a screen reader, and color alone were the only indicator – that too would then fail 1.4.1 Use of color, since this criterion is only concerned with the visual representation of data.

Furthermore, the example you provided does not fail 1.4.1 either, as there is no change in color at all to indicate the different states.

WCAG is not perfect, and again I will say that you are correct that such examples would be better with additional indicators – but you are incorrect in your assertion. I hope my explanation has been helpful.

calebtr-metro commented 3 years ago

Thank you for the prompt and thorough explanation, as well as your effort in helping to maintain this repository.

I disagree, and I don't want to implement those examples, but I won't submit a PR either. Unless the user knows the meaning of each position, they don't know if the toggle is on or off. In this respect, the toggle switch is no different than radio buttons or checkboxes, so I can see how I lose that argument pretty quickly.

In case anyone comes a searchin, I do also see another counter-argument that labels, depending on their position, can be equally confusing.

scottaohara commented 3 years ago

I wouldn't say i put in much effort here, i'd have to look at the commit history to even recall when i last contributed anything :D

Regarding your response though, I'm questioning what it is you disagree with? And I ask this not trying to start a fight, or anything of the sort. I'm truly curious how you can come to a different understanding of the normative text. Or do you disagree with whether or not this should be considered a failure? As that is a very different thing, and as i indicated in my previous response, while these are not WCAG failures, they could be more inclusive.

calebtr-metro commented 3 years ago

The pen was intended to demonstrate how the toggles behaved if color could not be perceived. The left-off-right-on convention isn't intuitive to me. I believe you if you say the convention is real, but I need the color to be confident that the switch is on, and I see that as accessibility problem. But now it is about me and not the user.

After doing some more reading, I am over my hang-ups. The problem with my pen (and thinking) is that a toggle switch is supposed to take effect immediately, such as switching between dark and light mode or adding/removing layers to a map.

A sandwich order form that records your decisions all at once when you hit submit should probably use checkboxes. Of course it doesn't work here. When I think of it this way, the lack of labels on a toggle switch isn't a problem because the user can switch back with no side effects. If you can't take natto off of your order after hitting submit, the toggle switch is the wrong form element to use.

I also looked at some examples of toggles with really bad labels. Converted.

scottaohara commented 3 years ago

thank you. i appreciate you taking the time to provide your thinking here.