WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: W3school accessible toggle switch

for

From: Birkir R. Gunnarsson
Date: Jan 3, 2017 11:36AM

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.
>