WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Bryan Garaventa
Date: May 8, 2012 3:05PM

Yes, thank you, that is helpful. I see how this method can also be used to
make selectable data table rows accessible as well.

----- Original Message -----
From: "Jared Smith" < <EMAIL REMOVED> >
To: "WebAIM Discussion List" < <EMAIL REMOVED> >
Sent: Tuesday, May 08, 2012 1:50 PM
Subject: Re: [WebAIM] Fw: Regarding checkboxes and radio buttons that are
not input elements


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