Toggle control fails WCAG
-
The URL I linked is supposed to be the demo site, but it is showing a configuration error. Which means I cannot confirm the ideal version of this control.
However, wading into the issues I found two sites that have the toggle:
– https://www.sinhalamp3.cf/
– https://www.smartifyspaces.com/In both cases the code looks generally like this:
<div class="wp-dark-mode-switcher" onclick="…"> <label for="wp-dark-mode-switch" class="wp-dark-mode-ignore wp-dark-mode-none"> <div></div> <div> <img class="light" src="…/sun.png" alt="Light"> <img class="dark" src="…/moon.png" alt="Dark"> </div> </label> </div>`That code:
– has no native interactive control (like a<button);
– has no control that can receive focus (WCAG SC 2.1.1 Keyboard), though you could fix that by using<button>;
– incorrectly uses the<label>element (WCAG SC 1.3.3 Info and Relationships), which can be addressed by removing the<label>;
– has not interactive role on the trigger (WCAG SC 4.1.2 Name, Role, Value), though you could fix that by using<button>;
– does not convey the state (WCAG SC 4.1.2 Name, Role, Value), which could be corrected witharia-pressedon a<button>.If you do all that, then you may want to come up with a more appropriate accessible name than “light dark”.
The page I need help with: [log in to see the link]
- The topic ‘Toggle control fails WCAG’ is closed to new replies.
