WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: W3school accessible toggle switch

for

From: Beranek, Nicholas
Date: Jan 3, 2017 12:02PM

It's not a slider and you won't need to use JavaScript. If the checkboxes are positioned offscreen and NOT set to display: none, then the CSS appears to be adding the appropriates focus styles. I would, however, improve upon the box-shadow that's present by replacing it with an outline that's highly visible. We cannot rely on default browser focus indication here without JavaScript since it's the checkbox that receives focus, not the sibling <div>. The :focus and sibling selectors can only take you so far (i.e. a class cannot be appended using CSS).

I hope this helps!

Nick

--
Nick Beranek
Digital Accessibility Team

On 1/3/17, 1:36 PM, "WebAIM-Forum on behalf of Birkir R. Gunnarsson" < <EMAIL REMOVED> on behalf of <EMAIL REMOVED> > wrote:

What do these CSS switches do?
It looks like they are some sort of sliders. The markup is not correct
for an accessible slider, see the ARIA Authoring Practicesguide at:
http://www.w3.org/TR/wai-aria-practices-1.1/#slider
If you can better explain the function we can give you a better ide of
how you can solve this.



On 1/3/17, JP Jamous < <EMAIL REMOVED> > wrote:
> You need to provide keyboard navigation through JS. That's arrow key
> navigation and swipes for mobile devices.
>
> I run into lots of developers creating such custom buttons. You have to
> ensure that keyboard navigation is implemented through JS scripts for the
> up, and down keys.
>
> You might be able to make it accessible with role="radio" tabindex="0".
> Ensure that it works with screen readers on and with screen readers off,
> which means keyboard only.
>