Slashdot Mirror
Check Boxes and Radio Buttons Conquered by DHTML
Philip Howard writes "Pretty much every form element has been conquered by CSS so far, letting us create stylish, integrated forms to tie in closely with our site designs for that UI polish graphics artists love to have.
Radio Buttons and Check Boxes, however, have resisted most attempts to style them consistently, accessibly and elegantly- perhaps because nobody cares enough to come up with the solution.
However, these elusive form elements have finally been conquered with a simple combination of CSS and Javascript and a little HTML wrapper.
The solution is easy and quick to implement, is accessible (working with tab and space) and elegantly degrades where CSS and/or XHTML is not available."
Will Lynx render them correctly with ascii-art?
;-)
Yes, actually. While I'm none to keen on the idea of supporting old browsers in DHTML/AJAX/Whatever-you-want-to-call-it-this-week applications, his solution is designed to allow for normal checkboxes to show in browsers that lack JavaScript. As a result, the normal "text" checkboxes would show in Lynx. At least until Lynx gets full JavaScript and DOM support. Then you have problems.
Javascript + Nintendo DSi = DSiCade
So, in other words, the code is incompatible with text-only browsers that understand javascript, as the form element get replaced with pictures on display, making this solution pretty nice but not really very correct.
Hey, here's a question-- Why do we [i]need[/i] styled checkboxes? I hear those words and I just get this mental image of style kicking contents in the nads over and over and over.
Not to mention - but it seems nobody really cares about this, and apparently bringing the subject up always generates a deluge of "we won't hold browser technologies back because of *this*" answers - web developers are so busy beautifying web pages and turning everything graphical and snazzy that you can always count on one category of people getting screwed with this trend: blind people.
They are the truly forgotten of this embelishment, and java[script]tization of the net. I wish web developers cared more about (1) complying strictly with W3C recommendations for accessibility and (2) not forgoing accessibility just for beauty...
"A door is what a dog is perpetually on the wrong side of" - Ogden Nash
There are certainly some people out there who are impressed by cool graphic tricks.
After writing web applications for ten years, though, I find that more and more people simply want to get the job done. Perhaps it's that I work in Healthcare and my customers are busy people caring for patients.
The other thing that makes me nervous about bells and whistles is that they add complexity to things. Complicated things break. Browser makers have changed how they implement CSS and DHTML before and there's a good chance they'll change it in the future. Basic support for checkboxes will last another fifty years.
A lot of people seem to be missing the bigger point here. It's not that he's replacing checkboxes with images, it's that he's managing to do it while keeping the page properly structured and accessible to all browsers. While the page isn't quite all the best HTML underneath (what's with the tables?), if you look at the forms, it's proper HTML and not some javascript hack that will break old browsers.
I think that's the point, anyway.
Slashdot: 24 hours behind every other site or your money back!
Here we go...
Why is it that amongst web developers there is only considered to be 'one way to do things'.
Standards compliance is a good guideline, but it is not law.
Web developers only need to cater to those devices in which they expect their content to be viewed. I do not expect, nor do I desire for someone to use my company's web apps from a cellphone or PDA.
Yet, people wear their xhtml compliant gif's like medals of honor.
Write your pages with compliance in mind, but never lose site of refining your apps and pages for your target audience, regardless of it if bends the standards.
Accessibility my arse.
This looks nice but, as many seem to forget about, the keyboard functionaility (eg: Tab then Spacebar to select) just isn't there. I have several users that still don't feel comfortable with a mouse.
This is my biggest problem with flash.
There is nothing more annoying than browsing to a site from a machine which doesn't have flash installed (don't want it) and realizing the site was written in such a way as to not be able to get past the into animation without flash.
People who make web-sites which can't be operated without flash need beatings.
Lost at C:>. Found at C.
Just because the particluar examples are bad doesn't mean the entire concept is bunk. If correctly labelled and used when appropriate, this would make things much more aesthetically appealing. They don't have to look like Radio buttons in order to offer the same functionality. Netflix users are familiar with the star-ratings- if the usage is as intuitive as that, people will do it without second thought.
I'll give you some more fuel to pour on that fire:
It irritates me too, so I just don't use it, or recommend sites that do. Let's just make our entire site in PostScript, or better yet an OpenOffice.org .sxw or an OpenDocument .odp file format.
People just need beatings anyway, just to let them know they can be beaten by anyone for any reason. This whole "Gimme" generation and the new business model of "Don't have a viable business plan? Sue someone! Profit!" needs to stop.
I'm going to have to start a new campaign called "Slap the Stupid out of Everyone" that does just that. Can't count change in the drive-thru? Find a new job, you're fired. Can't figure out how to answer questions about your product in the store? You're fired. Parking like an idiot? Towed.
I'm tired of just ignoring and tolerating stupidity and ineptitude and excuses. It has to stop.
Unfortunately, accessiblility is going to win this one out, thanks to web services and RSS and many other things. Eye-candy is great, but without a viable fallback, it will die off. That is the nature of evolution, and this will go the same route.
How do you know the vast majority of users are sighted on a PC? There are literally thousands upon thousands of users who are using a PC, who are legally blind or entirely blind. One of my colleagues uses 25+ point fonts because he can't see anything smaller than that, and he reads 8" from the screen.
The advent of the Internet is enabling people with disabilities to meet and join other communities of disabled people (visually, aurally and otherwise), and those communities are strong and growing. Elderly people are getting on the Internet, and many of them can't legally drive because of their sight.
While your own personal userbase might be fully-sighted, don't assume that your demographic expands to the rest of the world... it doesn't.
If the most-important part of your website is the presentation and not the content, you're doing something wrong. Yes, presentation makes the content look better (in some cases), but the users who are there won't be buying your product because you have pretty fonts or a spiffy intro in Flash. They'll be buying it because of what it DOES for them.
But it flat out doesn't work at all in IE. Doesn't even come close. Does this matter? No, not at all. Because the people I'm developing this for don't care what browser they're using. As far as they're concerned, they double-click on the Firefox icon to run this application, and that's all that matters.
It's kind of weird when you start thinking of webapp development in these terms, but you quickly get used to it. Intranet webapps are different (often very different) to internet websites.
"[Regarding the 'cloud,'] ownership was what made America different than Russia." -- Woz
I don't know where you picked up that little nuggest of "wisdom", but it's completely wrong.
The class attribute is for grouping disparate elements. This is very useful in both CSS and Javascript, but it is not "for" either. It's a general mechanism - you can use it in custom written shell scripts that work with wget if you like, no Javascript, no CSS, still perfectly fine.
If you are confused about what an element type or attribute is for, consult the specification. It is quite clear in stating that it's for "general purpose processing by user-agents".
One of the most fundamental concepts of good UI/GUI design is that you DON'T INTRODUCE NEW THINGS.
Everytime you introduce something new the user has to learn how to use it or what the fuck it is. This is bad. Really bad. You just won't believe how vastly, staggeringly, jaw-droppingly bad it is.
It may seem incredibly anal, stale and anti-progressive but that's the whole point. There's no such thing as an innovative interface because innovation has connotations of something both new and better. In the realm of Human Computer Interaction (HCI) new and better are mutually exclusive. Good UIs are simple, intuitive and introduce absolutely nothing new. Ever.
There are only two truly intuitive interfaces in existance. The nipple and the vagina. The rest you have to learn how to use.
Save the styled checkboxes and radio buttons for other people in your yuppie coffee house. Your average user doesn't want them, won't understand them, won't appreciate them and doesn't care what they look like.
Question everything
Then you're asking your company to be put out of business.
Hmmm. Is Google going to be put out of business if their maps application doesn't work on every (any?) cell phone or PDA? I think not. If your content is the app itself, and that app only works with JavaScript and CSS, then so be it. You're not doing anything wrong by requiring that of your users.
Two Minus Three Equals Negative Fun -Troy McClure
Where, exactly, did he say anything about violating any standards? He said it didn't work on IE, which probably means it is using standards correctly, specifically CSS2.
If corporations are people, aren't stockholders guilty of slavery?
>> the guy who wrote it is either lazy, unprofessional, working to an unrealistic schedule or shit at his job.
Thankfully you put that middle one in there. I was about to cloud up and rain all over your ass.
Many of us want to do, and vocalize the importance of doing the right thing, but our hands are tied. Don't forget that.
Which is why I like to serve XHTML 1.1, and use a xslt script (good for Sablotron, btw) to generate fallback .html versions. Tie with Apache content negotiation and that bad browser will get his plain HTML 4.01 files, while browsers which are cool will ask for nice, valid application/xhtml+xml XHTML 1.1.
XHTML 1.0 is bogus. If you're going to serve text/html tag soup, you might as well serve plain HTML.
Prescriptive grammar:linguistics
When I turn off Javascript, the page stops working properly.
;-)
On what browser/platform?
I highly doubt this is the case because, as the author explains, all 'magic' extras are written AFTER the normal elements have loaded. So without javascript, nothing changes.
What I suspect you have done is disabled Javascript in your browser and then tried to use it - without refreshing the page. I've just tried in this in Firefox and it seems to be the case. I don't think the chances of someone disabling Javascript mid-way through using the page are worth worrying about
Please correct me if I'm wrong though.