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.
>> >
>> >
>> >