cmarshall - 1:27 pm on Jul 24, 2007 (gmt 0)

I have a site I'm developing. In the past, I have always eschewed most of the "leading edge" tech in favor of tech that will degrade to older/less capable browsers.

However, recent -dare I say it?- Web 2.0 advancements have raised the bar on usability. In particular, the Google Maps API [google.com] is a wonder.

Okay, so for the new site, I am going to pull out the stops. XSLT/DHTML/AJAX etc. It is running very well. It has increased the usability of our site by a huge degree.

Not so accessibility or degrading to older tech. I often say that the single biggest thing that you can do to improve accessibility is to support older browsers.

Now, it's important to me to put code in to help degrade well.

I have given up on small files. I do my best to keep things efficient, but page size is no longer the #1 driving factor. Usability is #1. Accessibility is #2, and page size is #3. In order to support older browsers, #3 should be closer to #1, but I can't cripple the site for the 5% of users that will hit it with IE5.5/Win98, or IE5.2/MacOS 9. IE6/XP is my big target.

I don't have much trouble with CSS, as long as I keep it fairly mainline CSS 2.

That covers the basic philosophy of the new site. Bells and Whistles oh boy, but qualified bells and whistles.

Now, the tricks:

TRICK #1: Using <noscript> and JavaScript to segregate a <form>.

I have a <form> that has a fancy DHTML set of popup menus that update incestuously (in this case, you select a county, and the towns popup populates to towns in that county).

Of course, if you have no JavaScript, this set of popups won't work, and you need to present an alternative set that won't be quite as slick (I haven't written it yet, but it will be a big-ass popup with a long list of all the counties and towns -yuck).

So, how do you present this alternative?

<noscript>, of course.

But the problem is that the useless DHTML popups will also be displayed, delivering an awkward user experience.

We may be optimized towards fancy browsers, but we don't hate our non-JavaScript users. We are happy to have them here, and we need to show them.

Here's how I get this:

<div id="javascript_stuff" style="display:none"> ...fancy stuff... </div> <noscript> ...non-fancy stuff... </noscript> <script type="text/javascript"> document.getElementById('javascript_stuff').style.display='block'; </script>

TRICK #2: Seed Text

A good accessibility best practice is to "seed" a text input with text, such as "Enter Search Text". The onclick handler removes this, as well as onfocus and onblur. onkeydown is also used, although I don't know if I need it with onfocus. Here's an example (dumbed down to make it easier to understand):

<input type="text" name="text_input" id="text_input" value="Enter Text" onclick="if(this.value=='Enter Text')this.value=''" onfocus="if(this.value=='Enter Text')this.value=''" onkeydown="if(this.value=='Enter Text')this.value=''" onblur="if(this.value=='')this.value='Enter Text'" />

The <form> onsubmit handler will check to see if the contents are "Enter Text", and will not submit if so.

The problem with this, is that it you don't have JavaScript, then you have a text input with valid text in it. The <form> onsubmit handler doesn't get triggered, so you can accidentally search for "Enter Text".

It's very easy to fix. Thusly:

<input type="text" name="text_input" id="text_input" value="" onclick="if(this.value=='Enter Text')this.value=''" onfocus="if(this.value=='Enter Text')this.value=''" onkeydown="if(this.value=='Enter Text')this.value=''" onblur="if(this.value=='')this.value='Enter Text'" /> <script type="text/javascript"> document.getElementById('text_input').value='Enter Text'; </script>

TRICK #3: Using Session Cookies to Tell the Server About the Client

One of the nice things about JavaScript is that it knows all about the client environment. The server, however, is bereft of clues. There's all kinds of code written for servers to read tea leaves to find out about the client.

I won't give demo code here, as it would be too restricting.

Simply declare a session cookie using JavaScript in one of the site landing pages that puts together client information. The server can view this information at its leisure, and use this information to craft its output.

TRICK #4: <noscript> Buttons

This is simple. Many <form> elements are designed so that doing something like selecting a new popup value submits the form.

The problem is that the submit is a JavaScript process, so scriptless browsers are kinda screwed.

Here's how you can deal with that:

<select name="my_switch" onchange="this.form.submit()"> <option selected="selected">Select One</option> <option value="1">First One</option> <option value="2">Second One</option> </select> <noscript><input type="submit" value="GO" /></noscript>

None of these are perfect techniques. A truly determined user can hit the site with NN4 and see a work of cubist wonder, or a Lynx user can be cheesed off at it (I suspect Lynx users spend a great deal of time griping about "kids these days, with all them durn graphics and whatnot.")

They just help, and they are easy. Little things like this can make big differences.