WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Bootstrap Switch?

for

From: Patrick H. Lauke
Date: Jul 9, 2015 1:07PM

> 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