E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 5 (In chronological order)

From: Jeremiah Rogers
Date: Thu, Dec 01 2016 8:58AM
Subject: Visual Styling of Radio Buttons, Checkboxes
No previous message | Next message →

Hi. I've recently come across a survey which contains checkboxes and
radio buttons. Both are coded using the intended HTML elements, but
are styled to look like buttons when viewed on a mobile device. A
result of this design is that, it isn't visually apparent whether
options are radio buttons or checkboxes. Are sighted keyboard users
accustomed to maneuvering such quandaries with ease, or should I ask
the designer to incorporate some elements of checkbox and radio button
design to better the experience of keyboard users? Thanks!

Jeremiah Rogers

From: Birkir R. Gunnarsson
Date: Thu, Dec 01 2016 9:05AM
Subject: Re: Visual Styling of Radio Buttons, Checkboxes
← Previous message | Next message →

You definitely should (because there is a big difference between
radiobuttons and checkboxes).
But that is a usability issue, not an accessibility violation (in fact
those who rely on the semantics have an advantage knowing that
something is a radiobutton or a checkbox).



On 12/1/16, Jeremiah Rogers < = EMAIL ADDRESS REMOVED = > wrote:
> Hi. I've recently come across a survey which contains checkboxes and
> radio buttons. Both are coded using the intended HTML elements, but
> are styled to look like buttons when viewed on a mobile device. A
> result of this design is that, it isn't visually apparent whether
> options are radio buttons or checkboxes. Are sighted keyboard users
> accustomed to maneuvering such quandaries with ease, or should I ask
> the designer to incorporate some elements of checkbox and radio button
> design to better the experience of keyboard users? Thanks!
>
> Jeremiah Rogers
> > > > >


--
Work hard. Have fun. Make history.

From: JP Jamous
Date: Thu, Dec 01 2016 10:14AM
Subject: Re: Visual Styling of Radio Buttons, Checkboxes
← Previous message | Next message →

I agree to keep the surveys consistent across large and small views. However, if they do not want to use radio button or check boxes on small view, they better add aria-pressed to those buttons. Otherwise, how would I know if the button was checked or not.

That would occur if the small view screen readers are not announcing the status of each button. We face this at work and I always have to remind them of identifying the status of a button.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Birkir R. Gunnarsson
Sent: Thursday, December 1, 2016 10:06 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Visual Styling of Radio Buttons, Checkboxes

You definitely should (because there is a big difference between radiobuttons and checkboxes).
But that is a usability issue, not an accessibility violation (in fact those who rely on the semantics have an advantage knowing that something is a radiobutton or a checkbox).



On 12/1/16, Jeremiah Rogers < = EMAIL ADDRESS REMOVED = > wrote:
> Hi. I've recently come across a survey which contains checkboxes and
> radio buttons. Both are coded using the intended HTML elements, but
> are styled to look like buttons when viewed on a mobile device. A
> result of this design is that, it isn't visually apparent whether
> options are radio buttons or checkboxes. Are sighted keyboard users
> accustomed to maneuvering such quandaries with ease, or should I ask
> the designer to incorporate some elements of checkbox and radio button
> design to better the experience of keyboard users? Thanks!
>
> Jeremiah Rogers
> > > archives at http://webaim.org/discussion/archives
> >


--
Work hard. Have fun. Make history.

From: Graham Armfield
Date: Thu, Dec 01 2016 12:11PM
Subject: Re: Visual Styling of Radio Buttons, Checkboxes
← Previous message | Next message →

I've seen an approach where the labels for real radio buttons or checkboxes
were pulled across to cover the actual inputs - done via CSS. You can then
style the label to look like a button or some other touchable object -
including indicating which elements have focus and which are checked.

This exploits the browser convention that clicking or touching on an
explicitly marked up label for a radio button or checkbox will toggle the
value of the input.

As the technique uses native controls, you don't need any ARIA at all
really.

I can provide further details and an example if required.

Regards
Graham Armfield



coolfields.co.uk <http://www.coolfields.co.uk/>;
M:07905 590026
T: 01483 856613
@coolfields <https://twitter.com/coolfields>

From: Patrick H. Lauke
Date: Thu, Dec 01 2016 12:36PM
Subject: Re: Visual Styling of Radio Buttons, Checkboxes
← Previous message | No next message

On 01/12/2016 20:11, Graham Armfield wrote:
...
> I can provide further details and an example if required.

http://wtfforms.com/ would be a fair example. But note that this doesn't
directly answer the question of visual design from the thread starter.

P
--
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke