HTML and CSS Reference
In-Depth Information
The <progress> element
You often see complex processes broken into several steps. Buying a
book at Amazon, for instance, usually proceeds through pages for
entering your personal information, entering your credit card details,
and entering the delivery details, among others, before finally confirm-
ing your purchase. If you make a purchase at Amazon you'll notice, at
the top of the screen, a progress indicator.
This follows user interface design best practice: when you're putting a
user through a multistep process, always give them an indication of
how far along they are. This is such a common requirement that
HTML5
adds a special element to support it:
<progress value="5" min="0" max="9">5 out of 9</progress>
WebKit has an initial implementa-
tion in its nightly builds.
The
max
attribute gives the value that represents completion and the
value that indicates how close to completion you are. The
<progress>
element can contain phrasing content—text, inline markup, and
images—but no other
<progress>
elements. You could represent Ama-
zon's progress bar like this:
<progress max="7" value="2">
<img src="order-progress-step-2.png" alt="Step 2 of 7">
</progress>
The
<progress>
element can also be used in applications to give feed-
back on long-running operations like file uploads.
The
<progress>
element has strong native semantics for the
purposes of ARIA. It should be reported automatically as
being in the ARIA
progressbar
role by supporting agents. As
we discussed in chapter 1, this improves the accessibility
of your web apps with no extra effort on your part.
