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 3, 2014 6:09AM

Thanks to Bryan to point out my oversight there re aria-checked vs.
aria-selected.
Since I keep preaching the importance of using the correct ARIA role
to the people I work with, I don't know how I accidentally posted
this, my bad.
From a usability perspective, make sure you do not confuse the user.
You need to clearly communicate to the user whether he can only select
one option in a group of controls (radiobutton) or he can select
multiple choices (checkboxes).
Each checkbox control is focusable and you should be able to select
them with the spacebar (on Windows, or the equivalent for other OS´s).
No arrow key navigation expected.
Make sure the visual appearance of the UI element clearly communicates
the intended functionality, and then match the accessibility
implementation to that.
If this is impossible I woul go with semantic meaning for
accessibility implementation, but I would ask myself why there is a
need to style one element to look like a different one, and be aware
of potential end user problems.
-B



On 11/3/14, Scott González < <EMAIL REMOVED> > wrote:
> The keyboard interaction is always based on the semantic meaning, not the
> visual presentation. When the visual presentation of checkbox groups and
> radio groups are the same, the developer should make sure that users know
> whether the options are mutually exclusive (radio) or not (checkbox). The
> user can know this from common/prior knowledge (e.g., a group of bold,
> italic, underline settings in a text editor), or via a note in the user
> interface.
>
> On Mon, Nov 3, 2014 at 5:05 AM, Maraikayar Prem Nawaz < <EMAIL REMOVED> >
> wrote:
>
>> Is the keyboard interactions differ for 2 different components which
>> looks
>> the same, wouldn't it confuse Keyboard only users?
>>
>> Should the keyboard interaction match the hidden control or the one which
>> is visually shown. For example, span element shown as a link imitates a
>> link behavior correct?
>>
>> On Mon, Nov 3, 2014 at 12:06 PM, Bryan Garaventa <
>> <EMAIL REMOVED> > wrote:
>>
>> > Since the checkbox role maps to equivalent control types on the OS, as
>> > with the radio role, then the keyboard model should match the
>> > functionality of each accordingly.
>> >
>> > So, checkbox controls should have separate tab stops unless otherwise
>> > disabled, and grouped radio controls should have one tab stop
>> > and the arrow keys should switch between them or skip one if otherwise
>> > disabled.
>> >
>> > Basically, the keyboard functionality should match the equivalent
>> > control
>> > type observed on the native OS.
>> >
>> >
>> > -----Original Message-----
>> > From: <EMAIL REMOVED> [mailto:
>> > <EMAIL REMOVED> ] On Behalf Of Maraikayar Prem
>> > Nawaz
>> > Sent: Sunday, November 02, 2014 8:30 PM
>> > To: WebAIM Discussion List
>> > Subject: Re: [WebAIM] Styling Radio elements to look like Button
>> > element?
>> >
>> > 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%20R
>> > > adio%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-5593587
>> > > >> 9
>> > > >>
>> > > >>
>> > > >> 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.
>> > > >> > > >> > > list messages to <EMAIL REMOVED>
>> > >
>> > > >> > > >> > > list messages to <EMAIL REMOVED>
>> > >
>> > >> > >> > messages to <EMAIL REMOVED>
>> >
>> > >> > >> > >> >
>> >> >> >>
> > > >


--
Work hard. Have fun. Make history.