WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Jesse Hausler
Date: May 9, 2012 4:46PM

Here is the example that my colleague, Thomas Sola put together.

http://thomassola.com/labs/CheckboxSemantic/checkbox.html

I tried posting it earlier, but I think the file attachment got my post rejected.

His notes:

The Javascript looks for checkboxes that we want to change into "fake" checkboxes in order to style them. It hides the real checkbox offscreen and adds a SPAN element that is styled to look like a checkbox.

Then the JS looks for the "change" event on that checkbox. When it changes it checks to see what the checkboxes state is and changes the classes on the fake checkbox accordingly.

This was only tested in FF and Chrome.


Enjoy,
Jesse

--
Jesse Hausler
Sr. Accessibility Specialist | salesforce.com
Tel (415) 536-8902 | Mobile (703) 798-0903 | Fax (415) 944-1762



On 5/8/12 5:13 PM, " <EMAIL REMOVED> " < <EMAIL REMOVED> > wrote:

Ryan Hemphill wrote:

> they were asking that a certain block of designed UI be moved 2 pixels to the right and 5 pixels up because it suited their fancy.

In general, the only thing I've found that works is showing them what their so-detailed design looks like on screens other than the one they are using: usually a small laptop, a tablet such as an iPad, and a smart phone. Many designers talk the responsive design talk without paying attention to the fact that the idea is essentially all about losing control of that pixel-by-pixel look and feel, but if you actually *show* them the design on the smaller screen sometimes it sinks in.

Using accessibility as an argument has never worked for me, sadly.

-Deborah