WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Expected behavior for description text of a toggle button


From: Birkir R. Gunnarsson
Date: May 20, 2015 9:09PM

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.

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.