WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Expected behavior for description text of a toggle button

for

From: _mallory
Date: May 21, 2015 3:36AM

Hm, I too didn't think it "looked" like clickable text, but then labels
never do, it's only their proximity to a control that lets me know that
I can click the label instead to [trigger a checkbox/radio or focus a
textarea/input/select). I'll bet if you user-tested on some (grand)
parents (on something that looks more like a real form) you'd get
those who typically click labels trying to click them and non-label-
clickers only hitting the buttony-looking bits.

Maybe that's another input for the team to use to determine if it
would be bad usability to have things which look like they're
representing labels but aren't not be at least clickable-to-move-focus.

Maybe only letting focus move to the controls in the example would be
a doable compromise? While the real labels do toggling as they normally
do? Not a standard behaviour either, but depending on the user testing
it might make the most sense to the most users.

Back in the day, when we needed non-label texts that sat near real-
label texts to act the same as labels, we'd use CSS to expand the label
padding around that text.

Covering the fake-label text with label padding let mouse/touch users
get the behaviour they expected... tho obviously this wouldn't work with
composable widgety things like this project where you can't control
where people put stuff.

_mallory


On Wed, May 20, 2015 at 11:29:25PM -0400, Alexander Schmitz wrote:
> 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