FAHNZ

MODE

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!