WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Styling Radio elements to look like Button element?

for

From: Birkir R. Gunnarsson
Date: Nov 1, 2014 10:38AM

Make sure that appropriate ARIA markup is used if you are creating
faux radiobuttons, and that the selected state is always clearly
indicated.
What do you do for keyboard behavior?
People expect radiobuttons to consist of a single focusable element
with arrow key navigation to select a different option from within the
group.
For buttons you expect each button to be focusable.
I would recommend implementing keyboard navigation consistent with
user expectations for the perceived element(s), (so JavaScript to
allow for arrow navigation of radiobutton groups), though one could
argue either way on whether not doing so it a WCAG violation (4.1.2).
Cheers
-B

On 10/31/14, Jesse Hausler < <EMAIL REMOVED> > wrote:
> I haven't looked at your code, but we've styled radio buttons to look like
> big buttons and things like that.
>
> Sometimes we'll place the real <input type="radio"> off screen and wrap an
> associated label around the click target. That way when a user clicks on
> it, the radio is triggered.
>
> We'll usually use an anchor with javascript to trigger the radio with a
> keyboard.
>
> Jesse
>
>
>
> On Thu, Oct 30, 2014 at 9:41 PM, Maraikayar Prem Nawaz < <EMAIL REMOVED> >
> wrote:
>
>> Greetings,
>>
>> One of the Collaborator of Bootstrap plugin says
>> "Folks wanted easy to use form-based components, but with the style of
>> our
>> bootstrap buttons, so we gave it to them in an easy to implement way."
>> https://github.com/twbs/bootstrap/issues/14635#issuecomment-55935879
>>
>>
>> This is example link which talks about functional "radio" button groups.
>>
>> http://getbootstrap.com/javascript/#buttons-checkbox-radio
>>
>> What do you think of styling Radio Button to look exactly like Button?
>> I'm
>> not sure about the use case for this example.
>>
>>
>>
>> Thanks
>> -Nawaz
>> >> >> >>
> > > >


--
Work hard. Have fun. Make history.