SubscribeLet’s face it: In most browsers forms are plain ugly. Each browser displays radio buttons and checkboxes different. If you ever wanted your radio buttons and checkboxes to look consistant in different browsers and wanted them to look prettier: FancyBoxes is for you.
Form with FancyBoxes
It’s a Prototype based class that let’s you convert checkboxes and radio buttons to “FancyBoxes”. Examples and some documentation are here:
Manko10
/ March 3, 2009Hi,
very nice tool, but unfortunately non-accessible. The elements don’t have a focus status and therefore they are unusable for keyboard navigation. To make sure no users are excluded from using your forms without forcing them to turn off their JavaScript you have to use WAI-ARIA compliant form elements (see here: http://www.w3.org/WAI/intro/aria or for a German introduction: http://www.hessendscher.de/wai-aria/).
admin
/ March 4, 2009Hi Manko10,
thanks fot the advice. I just added a focus status that indicates which element is active/has the focus.
It simly adds a new css-class “fb_focus” which is dynamicilly added onFocus and removed onBlur.
So now you can tab through all elements using your keyboard. I’m going to test this and then upload it.
But I’m not quite sure if that’s enough according to WAI…
Manko10
/ March 4, 2009@ admin
I guess it isn’t. WAI-ARIA is no just for knowing where I am on a website/web application, first of all it’s to make a control element usable for everyone. Even if you check the focus state with your script you would never get such a result as when you use the operating system’s elements. I suggest you to use image buttons as explained on the websites linked above. They also have the advantage that you don’t have to worry about focus state since it’s done by the OS.
admin
/ March 7, 2009Well, thanks. I just uploaded the new version. The script now visually indicates which checkbxo/radio has focus. So now it is usable with the keyboard. It uses the onfocus/onblur events of the input/radio elements. So if JavaScript or CSS is disabled it works – and if JavaScript and CSS are enabled it works too.
Perhaps this is not the perfect solution when it comes to WAI-ARIA. But I think it is pretty good usable and accessible.
Joe Flesh
/ February 26, 2010Would love to use FancyBoxes, but the download link on the project page is broken — says that I don’t have permission to download the file! If you fix this, do shoot me an e-mail.
Andreas
/ February 26, 2010Hi Joe, thanks for pointing this out to me. It was a wrong setting in wordpress.
It’s fixed now.