WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Fw: Regarding checkboxes and radio buttons that are not input elements

for

From: Jared Smith
Date: May 8, 2012 2:50PM

On Tue, May 8, 2012 at 2:38 PM, Bryan Garaventa wrote:
> I'd like to know if I'm missing something.

There are some limitations and consistency issues with styling form
controls. The default controls display quite differently across
browsers, so styling them consistently can be a bit of a pain. A lot
of CSS3 styling has not yet been implemented (or implemented
correctly) to form controls. This is exacerbated if you use HTML5
input types. With that said, you have a lot of flexibility in styling
form controls.

When styling alone is not sufficient, rather than entirely replacing
the standard form controls with ARIA-enhanced divs, etc., it is often
best to maintain the form controls on the page, yet hide them
visually. Styled divs are then used on the page to present the styled
visual representation of those form controls. In other words, keyboard
and screen reader users interact with the actual, off-screen form
controls, but visually it appears that they are interacting with the
fancy looking controls on the screen. This can allow you to use
standard semantics and form interaction, while making it appear
however you would like. Of course the on-screen controls need to be
responsive to mouse interactions and update the underlying form
controls appropriately, but this is much easier than making them both
mouse and keyboard accessible with ARIA, etc.

Jared Smith
WebAIM