WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Styling Radio elements to look like Button element?

for

From: Maraikayar Prem Nawaz
Date: Nov 2, 2014 9:30PM

Thank you guys for the input. So how should the keyboard navigation be?
Because in the same example (
http://getbootstrap.com/javascript/#buttons-checkbox-radio) , checkboxes
are styled as button and next same visual effect but with radio buttons.
To make it consistent, should it be tab +shift tab as it appears as buttons
or should it be arrow key navigation, as it appears in ARIA widgets or in
Radio buttons?
Yes Bryan, noted your point about aria-checked state.


On Sat, Nov 1, 2014 at 11:36 PM, Bryan Garaventa <
<EMAIL REMOVED> > wrote:

> Just a quick note, it's the checked state you want to convey with radios,
> not selected. This is often misimplemented for ARIA roles
> such as 'radio', where aria-selected is used instead of aria-checked,
> which is what it should be. The use of aria-selected is not
> valid on role=radio.
>
> Live demo:
>
> http://whatsock.com/tsg/Coding%20Arena/ARIA%20Radio%20Buttons/ARIA%20Radio%20Buttons/demo.htm
>
> -----Original Message-----
> From: <EMAIL REMOVED> [mailto:
> <EMAIL REMOVED> ] On Behalf Of Birkir R. Gunnarsson
> Sent: Saturday, November 01, 2014 9:38 AM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] Styling Radio elements to look like Button element?
>
> 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
> >> > >> > >> list messages to <EMAIL REMOVED>
> >>
> > > > > > list messages to <EMAIL REMOVED>
> >
>
>
> --
> Work hard. Have fun. Make history.
> > > messages to <EMAIL REMOVED>
>
> > > >