WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: W3school accessible toggle switch

for

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

Thanks Nick for insight

Sent from my BlackBerry 10 smartphone.
Original Message
From: Beranek, Nicholas
Sent: Tuesday, January 3, 2017 2:04 PM
To: WebAIM Discussion List
Reply To: WebAIM Discussion List
Subject: Re: [WebAIM] W3school accessible toggle switch


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.
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf
> Of Pierre Hachey
> Sent: Tuesday, January 3, 2017 11:28 AM
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: [WebAIM] W3school accessible toggle switch
>
> Hi,
> How can I make the w3schools toggle switch keyboard accessible? I added a
> tabindex on the input element to make it get focus. That works for focus.
> I have tried to replace display:none. With offscreen positioning however
> this does not work.
>
> Do I need javascript event handler or can I make it accessible with css
> only?
>
> Ref:
> Http://Www.w3schools.com/howto/howto_css_switch.asp
>
> Thanks
> Pierre
>
>
>
> Sent from my BlackBerry 10 smartphone.
> > > http://webaim.org/discussion/archives
> >
> > > > >


--
Work hard. Have fun. Make history.
The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.