WebAIM - Web Accessibility In Mind

E-mail List Archives

question about design for either-or buttons

for

From: jeffgutsell
Date: Jul 18, 2022 9:23AM

Hi all,

I have been experimenting with creative designs for a widget that provides
for "yes/no" sort of input. The obvious approach would be to just use radio
buttons, but my friend does not want that.

My first experiment was to use a div container with roltrole =radiogroup,
then use a pair of button elements with role=radio. The effect seemed nice,
but I felt that a lot of JavaScript would be needed to prvide correct arrow
key support.

So now I am experimenting with real radio buttons where the button is
covered by the label element. The keyboard support is good, and I have d
been able to achieve what I would call a rocker button look that my friend
likes

I know that some developers do not like designs that make radio buttons
appear to be another sort of widget. So what do you think?

Here is the HTML snippet:



<div id="radio-btns-wrapper" >

<input id="btn-yes" type="radio" name="yesno-btns"
value="0">

<label for="btn-yess">Yes</label>

<input id="btn-no" type="radio" name="yesno-btns"
value="1">

<label for="btn-no">No</label>

</div>

The CSS has a selector using the :checked pseudo-event to trigger a style
that makes the selected element look depressed.



I think I recall a discussion about two years ago that may have covered this
topic, but for the life of me I cannot find it in the archives.

My poor senior brain only recalls that the discussion included mention that
a toggle button differs from this sort of component.

The user navigates this with arrow keys, and pressing Tab moves to the next
control.



Jeff Gutsell