Task #84881

The new toggle checkboxes must be adjusted to be accessible for colorblind people

Added by Frank Naegler almost 2 years ago. Updated 8 days ago.

Status:
Resolved
Priority:
Should have
Assignee:
-
Category:
Backend User Interface
Start date:
2018-04-26
Due date:
% Done:

100%

TYPO3 Version:
9
PHP Version:
Tags:
accessibility
Complexity:
Sprint Focus:

Description

at the moment it is not possible for colorblind people to decide which state a toggle checkbox has.

For a colorblind person, both states looks identical, one has the a white dot on the left, the other one on the right, but which state it is? on or off?

colorblind.png View (74.3 KB) Frank Naegler, 2018-04-26 14:42

colorblind_working.png View (276 KB) Frank Naegler, 2018-04-26 15:42

on_off.png View - toggle buttons with labels inside (11.3 KB) Luis Pato, 2018-04-30 16:58

checkbox_button.jpg View - checkbox icon in the View Module buttons (6.64 KB) Luis Pato, 2018-05-08 17:38


Related issues

Related to TYPO3 Core - Bug #84896: Toggle switches is_siteroot, no_search, php_tree_stop for page properties in Behaviour: Miscellaneous not changing value until save is pressed New 2018-04-30
Related to TYPO3 Core - Bug #84897: Table field name no_search and description in pages properties flatly contradict each other New 2018-04-30
Related to TYPO3 Core - Task #84936: Make new toggle checkboxes keyboard accessible Closed 2018-05-04
Related to TYPO3 Core - Bug #90195: Toggle button states are not distinguishable Closed 2020-01-24

Associated revisions

Revision 33ef6972 (diff)
Added by Michael Telgkamp 8 days ago

[TASK] Improve color contrast of toggle checkboxes

To allow persons with color blindness to recognize the status
of the toggle checkboxes more easy the contrast is adjusted.

Resolves: #84881
Releases: master
Change-Id: I30aff505cdaafc3272303712d7a4eb70b53c2371
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/63179
Tested-by: TYPO3com <>
Tested-by: Georg Ringer <>
Tested-by: Richard Haeser <>
Reviewed-by: Riny van Tiggelen <>
Reviewed-by: Georg Ringer <>
Reviewed-by: Richard Haeser <>

History

#1 Updated by Frank Naegler almost 2 years ago

  • Description updated (diff)

#2 Updated by Frank Naegler almost 2 years ago

The following version would work for people with red/green deficit, but an additional label for special context, could also be helpful.

#3 Updated by Stephan GroƟberndt almost 2 years ago

  • Subject changed from The new toggle checboxes must be adjusted to be accessible for colorblind people to The new toggle checkboxes must be adjusted to be accessible for colorblind people

#4 Updated by Luis Pato almost 2 years ago

#5 Updated by Luis Pato almost 2 years ago

would there be enough space inside the toggle to add a label?
maybe something like this?

toggle buttons with labels inside

#6 Updated by Sybille Peters almost 2 years ago

  • Related to Bug #84896: Toggle switches is_siteroot, no_search, php_tree_stop for page properties in Behaviour: Miscellaneous not changing value until save is pressed added

#7 Updated by Sybille Peters almost 2 years ago

  • Related to Bug #84897: Table field name no_search and description in pages properties flatly contradict each other added

#8 Updated by Sybille Peters almost 2 years ago

I like this idea by Luis, if it's possible to implement and the text would not be too small. On second thought, you probably don't want more icons so it's better to use the one without text with the checkmark / x or some other symbol.

Please also see the other issues I added, because they are related and also would improve usability.

#9 Updated by Luis Pato almost 2 years ago

i just made a couple of quick toggle button examples on codepen.
Nothing definitive, just so we can try it out and see how it feels.

Toggle Switch Ideas

#10 Updated by Sybille Peters almost 2 years ago

Nice work Luis. Personally I prefer the ones that keep the current look and feel (because it looks nice, I also like the round edges) and adds text.

So that would be: number 8, 10 and 11. 11 being my favorite.

But I guess we should wait for the UI people to see what they say?

And unfortunately, adding the text will be more work with the translations.

#11 Updated by Mona Muzaffar almost 2 years ago

  • Related to Task #84936: Make new toggle checkboxes keyboard accessible added

#12 Updated by Luis Pato almost 2 years ago

i am unsure on how to change the checkboxes. where can i see the checkboxes in the backend? which files should i edit?

So i was snooping around the backend to see what i could find and i saw this (on the List Module):
checkbox icon in the View Module buttons

How do you feel about having a different kind of checkbox inside the buttons (kind of like a "checkbox icon").
Should we just leave this one like it is and change the normal checkboxes so they have a label next to them?

#13 Updated by Sybille Peters almost 2 years ago

I still think having text within the icons would be a problem because then you would need different icons for each language.

A solution that makes clear what is enabled / disabled without using an unaccessible color scheme and / or text next to the label is what I would prefer.

#14 Updated by Riccardo De Contardi almost 2 years ago

these kind of switches should always have a on/off label inside or a label on the side that switches between enabled/disabled text.

[personal opinion, not suffragated by facts]: I guess that on/off are enough "international" and commonly used worldwide,so that they do not need a translation at all.

Also about the switch on the list module, where there is not enough space for a label: The title/tooltip of the icon should communicate its status as well. Not immediate, but works.

#15 Updated by Luis Pato over 1 year ago

The idea of displaying the state on the tooltip is nice, but i'm not sure it will work on touch devices.

I think i would need some help finding the right files inside of TYPO3 where to edit the toggle. Anyone wants to help me? :D

#16 Updated by Susanne Moog over 1 year ago

  • Target version changed from 9.3 to 9.4

#17 Updated by Benni Mack over 1 year ago

  • Target version changed from 9.4 to Candidate for Major Version

#18 Updated by Riccardo De Contardi 29 days ago

  • Related to Bug #90195: Toggle button states are not distinguishable added

#19 Updated by Michael Telgkamp 24 days ago

  • Tags set to accessibility

#20 Updated by Gerrit Code Review 16 days ago

  • Status changed from Accepted to Under Review

Patch set 1 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/63179

#21 Updated by Gerrit Code Review 16 days ago

Patch set 2 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/63179

#22 Updated by Gerrit Code Review 12 days ago

Patch set 3 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/63179

#23 Updated by Gerrit Code Review 12 days ago

Patch set 4 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/63179

#24 Updated by Michael Telgkamp 8 days ago

  • Status changed from Under Review to Resolved
  • % Done changed from 0 to 100

Also available in: Atom PDF