Brain on Fire » Blog Tim McCormack says words

Due to a lawsuit by Eolas against Microsoft, Internet Explorer (both 6 and 7) is not allowed to auto-load movies, flash, and other plugins. The effect is that users must click an empty area with a gray outline to load the content or start interacting with it. The standard approach to route around this usability fiasco is to dynamically load the <object> and <embed> tags with javascript. Here I present an easier, more readable, and unobtrusive technique for embedding content in IE6 and IE7.

I'm having difficulty deciding what is the best approach to returning from a POST request to one's web app. I'd like to deliver messages to the user about the results of the request, I want to avoid some nasty POST-related browser behavior, and proper bookmarking would be sweet, too. Unfortunately, it seems I can only have 2 out of the 3 with any given strategy.

Underspecified CSS is the name I am giving this sort of code:

h2 span
{
	color: black;
}

I'll show you why this code is the bane of large sites.

Problem

There is no accessible, standards-compliant way to code radio buttons in XHTML, because the label association mechanism conflicts with name and id attributes in radio buttons.

Solution

Replace the radio buttons with a select element.

Explanation

Form elements create key-value pairs through the use of name and value attributes. The form is serialized as an ampersand-delimited string of fields, where each field takes the form of name=value. This is fine for text input fields and checkboxes, which have a single-source structure in the HTML. However, radio buttons present a special problem. Each radio button in a group has the same name and a different value, indicating that they are the possible values a field can take.

Recall that label depends on the id of the form element with which it is associated, as well as the requirement that the name and id not differ on an element.

<label for="address">Address</label>
<input type="text" id="address" name="address" value="" />

How, then, does one code radio buttons with labels? Since all the radio buttons in a set will need the same name, each element with a label will need an id, and the id must match the name, the radio buttons will have identical ids. This is not in compliance with the W3 specifications, however, leading some web designers to choose accessiblity over compliance by appending an index digit to the id of each radio button.

There are further accessiblity issues that I will not explore here, such as visibility of the radio button itself, association of a label with the entire radio set, and visual interference between multiple radio sets.

A better solution is to scrap the radio buttons altogether in favor of the select element. The dropdown list is far more accessible, supports internal grouping of options, and consumes less real estate, yet preserves the data structure of the radio buttons.

Resources

• Alternatives to radio buttons: How to decide on a solution and refactor the associated text.

Update: KimDaBa is now known as KPhotoAlbum.

Problem

KimDaBa doesn't always have the clearest interfaceKimDaBa, despite being a wonderful program, still has a few interface issues left to work on. Notably, the gallery creation tool, "HTML Export", requires quite a bit of trial-and-error before it can be used successfully. I could not find any useful documentation on the "Destination" tab's fields, so I write it here today.

Solution

The philosophy behind the KimDaBa HTML Export dialog is that you will have a series of galleries in the same folder. The "Base URL" is the publicly accessible base directory, while the "Base directory" is the location you want to store the actual files to. "URL for final destination" is the most confusing of all; it refers to the address of the main page of the gallery. I use index.html, but you can use an absolute address instead, if you want. "Output directory" is appended to the "Base URL" and "Base directory" to form the full directory path.

Enough with the philosophy, here's an example. I want to publish a set of photos, accessible at http://brainonfire.net/gallery/party/index.html. Let's say brainonfire.net runs off of my local machine, to make this easier. The server is located at /var/www, and has a directory called gallery. Here are the proper field values:

Base directory

file:///var/www/gallery

Base URL

http://brainonfire.net/gallery

URL for final destination

index.html

Output directory

party

You can publish to an ftp server as well, or over various other protocols. I won't go into that here.