WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: W3school accessible toggle switch

for

From: Pierre Hachey
Date: Jan 3, 2017 5:23PM

Hi Birkir,
I agree at first I thought they were sliders but actually they are checkboxes that are styled.

I guess when these widgets are in mobile mode it's a swipe.

I have investigated the slider possibility however there is only one textvalue.

I'm currious
Pierre


Sent from my BlackBerry 10 smartphone.
Original Message
From: Birkir R. Gunnarsson
Sent: Tuesday, January 3, 2017 1:37 PM
To: WebAIM Discussion List
Reply To: WebAIM Discussion List
Subject: Re: [WebAIM] W3school accessible toggle switch


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