E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 7 (In chronological order)

From: Pierre Hachey
Date: Tue, Jan 03 2017 10:28AM
Subject: W3school accessible toggle switch
No previous message | Next message →

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.

From: JP Jamous
Date: Tue, Jan 03 2017 10:49AM
Subject: Re: W3school accessible toggle switch
← Previous message | Next message →

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.

From: Birkir R. Gunnarsson
Date: Tue, Jan 03 2017 11:36AM
Subject: Re: W3school accessible toggle switch
← Previous message | Next message →

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

From: Beranek, Nicholas
Date: Tue, Jan 03 2017 12:02PM
Subject: Re: W3school accessible toggle switch
← Previous message | Next message →

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 ADDRESS REMOVED = on behalf of = EMAIL ADDRESS 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 ADDRESS 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.
>

From: Pierre Hachey
Date: Tue, Jan 03 2017 5:19PM
Subject: Re: W3school accessible toggle switch
← Previous message | Next message →

Thanks JP for insight. I'll work this with your thoughts.

Sent from my BlackBerry 10 smartphone.
Original Message
From: JP Jamous
Sent: Tuesday, January 3, 2017 12:50 PM
To: 'WebAIM Discussion List'
Reply To: WebAIM Discussion List
Subject: Re: [WebAIM] W3school accessible toggle switch


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.

From: Pierre Hachey
Date: Tue, Jan 03 2017 5:23PM
Subject: Re: W3school accessible toggle switch
← Previous message | Next message →

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

From: Pierre Hachey
Date: Tue, Jan 03 2017 5:24PM
Subject: Re: W3school accessible toggle switch
← Previous message | No next message

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 ADDRESS REMOVED = on behalf of = EMAIL ADDRESS 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 ADDRESS 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.
>