Adding semantics to jquery-ui’s progress bar

Monday 18th January

Or ‘Adding functionality to the CSS progress bar’

Last year, I wrote about my suggested method of how to markup and style a progress bar using HTML and CSS. Leaving aside the thorny issue of whether a dl is appropriate in this case (which, of course, it is …), I’d like to pick up on a comment from Eddie van Dorland:

Looks good and works great, just a bit concerned about the fact it doesn’t move due to no variables?!? 23% & 77%?!? How do I get it to move?

Of course, the progress bar was behaving (or not behaving) as intended: it was merely a demonstration of the styling that could be applied to structured content representing progress of a task. I suggested a combination of jQuery’s progress bar with my structure + CSS and left it at that.

Then I thought: stop being lazy and do it yourself. And here it is.

Although jQuery is an excellent library, and the jquery-ui extension provides some great interface elements to go alongside it, the structure of the resulting markup leaves a lot to be desired. For example, here’s the markup of the progress bar with non-semantic attributes removed:

<div role="progressbar" aria-valuemin="0" aria-valuemax="100"
  aria-valuenow="37">
    <div class="ui-progressbar-value ui-widget-header
      ui-corner-left"></div>
</div>

and here’s the resultant progress bar:

Kudos to the jquery-ui guys: they’ve used ARIA attributes in, I assume, the correct way to ensure users of screen reader software can still get feedback from the element. However, accessibility is not just for screen readers, so let’s take a look at what happens when we disable CSS:

Er, ... hello? It’s pretty obvious from the original markup that we’ve got nothing in the way of content here — just elements and attributes — so nothing meaningful displays without CSS, quite a no-no in today’s bulletproof world. How about we fix that with some behind-the-scenes modifications.

Here’s the markup, taken straight from my earlier article, which can simply be applied within the appropriate jquery-ui code:

<dl class="progress">
	<dt>Completed:</dt>
	<dd style="width: 37%;">37%</dd>
	<dt>Remaining:</dt>
	<dd class="remain" style="width: 63%;">63%</dd>
</dl>

The result still looks like a standard jQuery progress bar:

but, I hope you’ll agree, it’s much more semantic. Without CSS enabled, we get the following:

and, before you ask, yes, it does work just the same (click the button to set a random progress and note both the CSS and non-CSS versions updating):

If you want to improve your jQuery progressbar’s semantics, you can download the progressbar.js script and the progressbar.css stylesheet. This should give you an exact drop-in replacement for the standard jquery-ui version. The javascript file can either be used in isolation, or included after any existing jquery-ui code.

Comments

Leave a comment