WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Expected behavior for description text of a toggle button

for

From: Alexander Schmitz
Date: May 20, 2015 9:29PM

Paul thank you. That was our thought exactly is that when it looks like a
button i don't think i would ever click the descriptive text and expect it
to activate the button, that seems a little odd. HOWEVER... Since all the
other controls are using their normal labels on the left, and the labels
properly focus or jump to their associated input ( which i would say is the
desired and expected out come in all the other cases for sure ), i was not
sure if it may be confusing to some in a layout like this that on some
items ( the checkboxes and radios ), the descriptive text DID NOT behave as
a label.

On Wed, May 20, 2015 at 11:24 PM, Paul J. Adam < <EMAIL REMOVED> > wrote:

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