WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Bootstrap Switch?

for

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

From: Patrick Burke
Date: Thu, Jul 09 2015 12:53PM
Subject: Bootstrap Switch?
No previous message | Next message →

Has anyone dealt with Bootstrap Switch controls? In a brief
screenreader test, I ... can't figure out what's going on.

They are supposed to enhance the basic checkbox & radiobutton
controls. But in the various examples, the standard checkboxes/rdbs
are the only ones that indicate a changed state to me.

In particular, the on-off & yes-no pairs just appear as graphics,
with no evident way to change them via keyboard. (Some items are
identified as "clickable", but I can't get any click emulation
commands to work with them.)

http://www.bootstrap-switch.org/examples.html


Paging Dr. Lauke? Dr Lauke to the white courtesy telephone, please. :)

Thanks much,
Patrick

--
Patrick J. Burke

Coordinator
UCLA Disabilities &
Computing Program

Phone: 310 206-6004
E-mail: = EMAIL ADDRESS REMOVED =
Location: 4909 Math Science


Department Contact: = EMAIL ADDRESS REMOVED =

From: Patrick H. Lauke
Date: Thu, Jul 09 2015 1:07PM
Subject: Re: Bootstrap Switch?
← Previous message | Next message →

> Paging Dr. Lauke? Dr Lauke to the white courtesy telephone, please. :)

Hah. Well, I'll preface this by saying that this has nothing to do with
Bootstrap itself...it's two developers that are quite separate from
Bootstrap's team https://github.com/nostalgiaz/bootstrap-switch

> Has anyone dealt with Bootstrap Switch controls? In a brief screenreader
> test, I ... can't figure out what's going on.
> They are supposed to enhance the basic checkbox & radiobutton controls.
> But in the various examples, the standard checkboxes/rdbs are the only
> ones that indicate a changed state to me.

In essence, what's going on here is that the checkbox/radio button is
hidden, and a custom-looking, very iOS like animated on/off, yes/no
toggle is visible on the page. This faked control is what mouse/touch
users would be interacting with directly. When navigating purely with
the keyboard, these actually also work - there are listeners hooked to
the checkboxes/radio buttons that show custom focus outline and change
the state of the faked switch when the user interacts with the hidden
input itself.

The two things that this solution doesn't do: it should really hide
(using aria-hidden) the markup for the faked on/off buttons (assuming
this is the bit that tripped you up when testing with the screenreader)
and it should provide proper labels (or aria-label, aria-labelledby,
etc) to the hidden inputs.

In all, not a completely horrid effort, but lacking in its execution.

Diagnosis: time to file an issue on their github repo...

P
--
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke

From: Patrick Burke
Date: Thu, Jul 09 2015 4:10PM
Subject: Re: Bootstrap Switch?
← Previous message | No next message

Thanks very much for the explanation, & sorry for making the false
Bootstrap connection.

Patrick B

At 12:07 PM 7/9/2015, Patrick H. Lauke wrote:
> > Paging Dr. Lauke? Dr Lauke to the white courtesy telephone,
> please. :) Hah. Well, I'll preface this by saying that this has
> nothing to do with Bootstrap itself...it's two developers that are
> quite separate from Bootstrap's team
> https://github.com/nostalgiaz/bootstrap-switch > Has anyone dealt
> with Bootstrap Switch controls? In a brief screenreader > test, I
> ... can't figure out what's going on. > They are supposed to
> enhance the basic checkbox & radiobutton controls. > But in the
> various examples, the standard checkboxes/rdbs are the only > ones
> that indicate a changed state to me. In essence, what's going on
> here is that the checkbox/radio button is hidden, and a
> custom-looking, very iOS like animated on/off, yes/no toggle is
> visible on the page. This faked control is what mouse/touch users
> would be interacting with directly. When navigating purely with the
> keyboard, these actually also work - there are listeners hooked to
> the checkboxes/radio buttons that show custom focus outline and
> change the state of the faked switch when the user interacts with
> the hidden input itself. The two things that this solution doesn't
> do: it should really hide (using aria-hidden) the markup for the
> faked on/off buttons (assuming this is the bit that tripped you up
> when testing with the screenreader) and it should provide proper
> labels (or aria-label, aria-labelledby, etc) to the hidden inputs.
> In all, not a completely horrid effort, but lacking in its
> execution. Diagnosis: time to file an issue on their github repo...
> P -- Patrick H. Lauke www.splintered.co.uk |
> https://github.com/patrickhlauke http://flickr.com/photos/redux/ |
> http://redux.deviantart.com twitter: @patrick_h_lauke | skype: patrick_h_lauke


--
Patrick J. Burke

Coordinator
UCLA Disabilities &
Computing Program

Phone: 310 206-6004
E-mail: = EMAIL ADDRESS REMOVED =
Location: 4909 Math Science


Department Contact: = EMAIL ADDRESS REMOVED =