WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Birkir R. Gunnarsson
Date: May 8, 2012 2:54PM

Hi Jared

Do you have a handy example of the types of controls you describe?
I have been asked about this possibilityby a few developers, and it
seems a good example would be very useful.
Thanks
-B

On 5/8/12, Jared Smith < <EMAIL REMOVED> > wrote:
> 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
> > > >