ARIA and Clever Use of HTML4 (24th March 2008)

Mozilla’s #accessibility IRC channel is used by Aaron Leventhal, Marco Zehe and various other Mozilla access developers. For the past couple of days, I’ve been there as well.

ARIA Example

Marco Zehe blogged about using aria-labelledby and aria-describedby, ending with this markup example: 

<form action="post.php">
<div>
<span id="labelShutdown"><label for="shutdownTime">Shut down computer after</label></span></p>
<input name="shutdownTime" id="shutdownTime" type="text" value="10" aria-labelledby="labelShutdown shutdownTime shutdownUnit" aria-describedby="shutdownDescriptor"/>
<span id="shutdownUnit"> minutes</span>
</div>
<div id="shutdownDescriptor">Allows you to specify the number of minutes of inactivity after which your computer should shut down.</div>
</form>

I added a name attribute to make it a successful control and corrected method to action.

The labelling text gets assembled in this order:

  1. Shut down computer after
  2. 10
  3. minutes

With this as a description for the control:

Allows you to specify the number of minutes of inactivity after which your computer should shut down.

An entirely reasonable form design. But rather a lot of fiddly markup?

Clever Use of HTML

The semantics for this example seem available in HTML4. By my reading:

  1. Implicit form labelling lets you put <input> inside <label>.
  2. <fieldset> groups things together.
  3. <p> is for paragraphs.

So how about this markup, without using ARIA: 

<form action="post.php">
<fieldset>
 <label>Shut down computer after <input name="shutdownTime" type="text" value="10"> minutes</label>
 <p>Allows you to specify the number of minutes of inactivity after which your computer should shut down.
</fieldset>
</form>

You could replace the <p> because:

  1. title provides advisory information for humans to read.

So how about this markup, without the <p>: 

<form action="post.php">
<label>Shut down computer after <input name="shutdownTime" type="text" value="10" title="Allows you to specify the number of minutes of inactivity after which your computer should shut down"> minutes</label>
</form>

As the <label> contains all the components a <fieldset> seems unnecessary. Simple, decade-old structures from HTML4 seem fine for the semantics this example needs.

Copy Editing

The descriptive text here seems redundant due to the excellent <label> text:

Allows you to specify...
The <input> is not readonly.
...the number...
A number is already present in the <input>.
...of minutes...
Already in the <label> text.
...of inactivity...
Not made clear from the <label>. We can adjust the <label>, though.
...after which your computer should shut down
Already in the <label> text.

Leaving us with this: 

<form action="post.php">
<label>Shut down computer after <input name="shutdownTime" type="text" value="10"> minutes of inactivity</label>
</form>

But Wait, There’s Less!

type="text" is the default, allowing this: 

<form action="post.php">
<label>Shut down computer after <input name="shutdownTime" value="10"> minutes of inactivity</label>
</form>

As a crude measure of complexity, the ARIA Example uses 490 bytes. This sample takes 135 bytes, 72% less markup.

Thoughts

Full accessibility and usability (apart from browser bugs) can be achieved in this example with simple markup from HTML4. Which is good news for everyone.

Marco has written a follow-up to the ARIA example. I expect there are examples where HTML4 would not be enough and ARIA would fill that gap.