WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Expected behavior for description text of a toggle button

for

From: Paul J. Adam
Date: May 20, 2015 9:24PM

To me the "Label Text" to the right of the checkbox looks like a button with button text and that's what I click to activate the toggle. I would not click on the label to the left of that text due to the design making it look like a button or making it look like the label is to the right.

I would say the accessible names/click target areas should only be on the strings "Label Text" and "Toggle2". I would not expect the text to the left to be the connected label.

I think this is pretty confusing to convey/explain if you can't see the design visually. I wish I could paste screenshots into WebAIM also ;)

Paul J. Adam
Accessibility Evangelist
www.deque.com

Join us at our Mobile Accessibility "Bootcamp!"
August 6-7 in Austin Texas
https://dequeuniversity.com/events/2015/mobile
Topics include responsive web design, native apps, & more

> On May 20, 2015, at 3:59 PM, Alexander Schmitz < <EMAIL REMOVED> > wrote:
>
>> I'm curious: Why isn't the default behavior of the native control
> adequate? For usability as well as accessibility, it's best to use native
> controls whenever possible.
>
> All of the controls in the form in my example
> are exhibiting native behavior they just use different markup. The question
> is what is the correct markup / behavior for this particular form layout.
> When the control appears as a button type element ( toggle button ).
>
> I updated to add a native un-styled checkbox to show this.
> http://jsbin.com/muceye/3/edit?html,css,output hope this clears up any
> confusion.
>
> On Wed, May 20, 2015 at 3:40 PM, Scott González < <EMAIL REMOVED> >
> wrote:
>
>> On Wed, May 20, 2015 at 3:11 PM, Cliff Tyllick < <EMAIL REMOVED> > wrote:
>>
>>> Alexander, if I understand your question correctly, the answer is
>>> "Neither."
>>>
>>> When I touch the text, I probably want to swipe up or down, or perhaps
>>> zoom in with a two-finger motion. I don't expect a form control to
>> toggle,
>>> because that isn't what text—even when it's a form label—does.
>>>
>>
>> That's not true. Labels for checkboxes and radios *do* activate their
>> associated controls. This makes forms much more usable because the
>> extremely small form controls receive much larger hit areas as a result.
>> >> >> >> >>
> > > >