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:24PM

Hi Birkir,

Thank you for your response. Sorry i was not clear in my original
description. What I am talking about is a checkbox or radio input the
input's label is styled to look like a button and the visual state toggles
when it is clicked by switching from a light grey default background to a
blue "Active" background. There are placed in a form which has a 2 column
layout in column the left column is a description of the control ( a label
) and in the right column is the control itself. In the first case to make
the descriptive text ( label ) activate the control properly i use 2 labels
one is the description and one forms the visual button. In the second i use
a fieldset and the legend forms the descriptive text and the label still
forms the button. In the second case since the descriptive text is a legend
it is associated with the input but does not activate it.

Im not sure if there really is a direct native correlation to this so i'm
not sure what the expected behavior would be here. However layouts and
checkboxes of this style are becoming very popular for mobile devices
precisely because of the better hit area and visual feedback they provide
to the user.

The root of why we are trying to figure this out comes down to the choice
of which label to use to create the visual button from, if more then one
label is associated with the input. Initially we planned on just always
using the first one found. However that makes the 2 column layout i'm
describing a little tricky to create, so it may be better to actually chose
the last label not the first. However we are not even sure if in this type
of layout if it would be expected if the descriptive text would activate
the control at all.

I hope this clarifies better.

On Wed, May 20, 2015 at 11:09 PM, Birkir R. Gunnarsson <
<EMAIL REMOVED> > wrote:

> I am confused by this actually.
> What do you mean by toggle button? In html/ARIA lingo that is a button
> with an aria-pressed attribute (and a button does not have a label,
> its accessible name comes from its contents, its value .. if it is an
> input of type button, reset, submit etc. or from ARIA labeling).
> Labels only work for compatible html form fields, checkboxes,
> radiobuttons, textarea elements etc.
> As far as I understand this, and being a screen reader user I may be
> wrong here and can always be corrected, activating the label
> associated with a checkbox or radiobutton moves focus to that control,
> but does not necessarily activate it.
> If you could clarify a bit more what you mean by toggle button, then
> we can start to explore.
> Users would generally assume that simulated controls work similarly to
> the closest equivalent html controls.
> So if we are still talking radiobutton or checkbox, you can check what
> the behavior is for a native html version.
> If we are talking about toggle buttons, I believe the only way to
> associate the label with a button is through aARIA labeling which
> traditionally does ot cause activation of the control if user clicks
> on the associated label, that only works in case of native html
> labeling by use of the <label> tag.
> I am not saying this is desireable .. larger click targets are a huge
> accessibility benefit to users with difficulty interacting with a
> touch-screen, I am only saying that is not the generally expected
> behavior, as far as I understand your question.
> Thanks
> -Birkir
>
>
>
> On 5/20/15, 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.
> >> > >> > >> > >> > >>
> > > > > > > > > >
>
>
> --
> Work hard. Have fun. Make history.
> > > > >