E-mail List Archives
Thread: How to Properly Code Checkout Progress Bar?
Number of posts in this thread: 1 (In chronological order)
From: Vincent Young
Date: Fri, Sep 09 2011 10:48PM
Subject: How to Properly Code Checkout Progress Bar?
No previous message | No next message
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 ADDRESS REMOVED =
w: http://www.webhipster.com