Jul 9 2010

Automatically Add/Remove Self-Labeling for Textboxes

This is simple and I’m sure that many have done this (or something similar) already, but I recently had to go through a website and retro-fit all textboxes with jQuery to automatically remove the “self label” value when the user clicks in the box. Instead of doing all of these individually, I came up with this brief jQuery script to add and remove the labels according to the title attribute (which should be there in lieu of a real label for accessibility). Maybe this will be useful to someone else, but at a minimum, I’ll know where to go to grab this again if I need it. =)

$(document).ready(function () {

// Sets textboxes to automatically add (and remove) a 'label' text value based on the title attribute.
// Note that the value should still be present initially so people without JS still can see a label.
function InitSelfLabelTextboxes() {
    $('input:text').each(function () {
        var thisBox = $(this);
        var titleVal = thisBox.attr('title');

        if (titleVal.length > 0) {
            if (thisBox.val().length == 0) thisBox.val(titleVal);

            thisBox.focus(function () {
                var currentVal = thisBox.val();
                if (currentVal == titleVal) thisBox.val('');

            thisBox.blur(function () {
                var currentVal = thisBox.val();
                if (currentVal.length == 0) thisBox.val(titleVal);

Jan 20 2010

Web Standards. Who Cares?

Web standards, accessibility, WCAG, XHTML, CSS, blah, blah, blah… My web pages look just fine. Why should I care about the so-called “web standards”? Well, do you care that your car was built with and tested for safety standards? Do you care that if you buy a DVD, it will just work in the player you have at home? Does it bug you that you can’t just go buy a replacement battery for your digital camera (or it’s exorbitantly expensive) since it’s proprietary?

Having standards solves lots of problems.

What are web standards?

At a minimum your site will have:

  • Valid HTML/XHTML
  • Valid CSS

Hopefully your site meets some basic accessibility standards:

  • Section 508
  • WCAG priority 1

Even more hopefully, your site will meet the more strict accessibility standards (I usually go up to WCAG priority 2):

  • WCAG priority 2
  • WCAG priority 3

Also, just passing these tests isn’t enough. Seems stupid to say this at this point, but you shouldn’t be using table-based layouts and some thought should be given to how your site will degrade in text-based or unknown browsers. Focus on what matters: the content and usability. Do you really need a bunch of Flash animations and fluff on your site? If you do, then chances are good that people won’t hang around long enough for it to be successful anyway.

Adhering to these standards ensures that your pages can be viewed properly on a wide variety of platforms now and well into the future. You’re pretty much guaranteed that new web browsers will be able to view your pages properly, versus a poorly coded page that will probably fall apart visually. Check out your sites on a wide variety of browsers and devices and see what happens. Check it out on your mobile phone or on your PS3 or Wii browser. If you’ve been coding for IE only (thus making your site proprietary) it will be immediately evident.

Not to mention the fact that coding according to web standards can save money. Pages are more likely to work right “out-of-the-gate” on a greater variety of browsers/devices. Less testing plus increased compatibility = win. Standards-compliant code by definition means that developers new to the project should be able understand and maintain what was written.

Popular Validator Links

For More Info…

Aug 24 2009

Rollover Images – CSS versus JavaScript

I seem to always wrestle with this no matter how many times it comes up. When a website design calls for image-based rollovers on the primary navigation, rollover which method to use? CSS or JavaScript. Accessibility for me in this context is that the navigation must be functional if one or any combination of the following is disabled: JavaScript, CSS, images. It also validate as XHTML Strict, CSS level 2WCAG priority 2, and it (obviously) must work with screen readers. Browser compatibility doesn’t factor in heavily here, but it must work in my standard browser list, which includes IE6. I also consider the actual rollover effect itself to be non-essential.

CSS Benefits

  • [Maintenance] Can use one “sprite” based image for all items (changing background position to show the different items)
  • [Accessibility] Works even if JavaScript is disabled
  • [Accessibility] Shows text if images are disabled (via Ryan Rollovers method)

CSS Cons

  • [Maintenance] Funky HTML/CSS needed for full accessibility (the empty span trick of Ryan Rollovers)
  • [Extras] Will probably look bad if printed (since background images don’t print by default)

JS Pros

  • [Accessibility] Can use forground images with alternate text
  • [Maintenance] Simple, clean inline script using “onmouseover” and “onmouseout”
  • [Accessibility] Shows alt text if images are disabled
  • [Extras] Will print foreground images by default so printout should look better

JS Cons

  • [Maintenance] Will have many images to deal with – 2 for each item. If one image changes width, you need to redo all images and rollover states.

Both methods have a potential issue of when images are disabled, then the foreground or alternate text spacing can be tricky. Result can be that even though the text is displayed, it will be difficult to read.

I think that looking at these items summed up shows the direction I should take. As far as I can tell, the simple JavaScript method provides the most benefits with the least amount of potential problems. So it shall be!