WebAIM - Web Accessibility In Mind

E-mail List Archives

How to Properly Code Checkout Progress Bar?

for

From: Vincent Young
Date: Sep 9, 2011 10:48PM

I'm wondering how the progress bar in a checkout process should be marked up
and state identified.

Would simple semantic mark-up such as the following suffice?

<ol>
<li>Review</li>
<li>Shipping Information</li>
<li><h1>Billing Information</h1></li>
<li>Confirmation</li>
</ol>

Or do those using screen readers prefer more explicit orientation such as
the following?

<ol>
<li>Review <span class="accessibility-hide">(complete)</span></li>
<li>Shipping Information <span
class="accessibility-hide">(complete)</span></li>
<li><h1>Billing Information <span
class="accessibility-hide">(current)</span></h1></li>
<li>Confirmation <span class="accessibility-hide">(incomplete)</span></li>
</ol>

Please let me know your thoughts. Thanks.

-Vincent
--
WebHipster Interactive, ltd.
Vincent Young - Principal
33 E. Lincoln St.
Columbus, OH 43215
p: 614.607.3400
f: 339-674-3400
e: <EMAIL REMOVED>
w: http://www.webhipster.com