WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: accessible wizard control

for

From: Vincent Young
Date: Sep 15, 2011 10:06AM

Shouldn't you mark this up in an ordered list? Also, if the active <li> is
marked up as a heading would this be information enough to orient users?

On Thu, Sep 15, 2011 at 4:19 AM, E.J. Zufelt < <EMAIL REMOVED> > wrote:

> I was actually just thinking about this yesterday, as I'm building a
> multi-step form wizard.
>
> The pattern that we used in the Drupal 7 installer is as follows.
>
> <h2>Progress</h2>
> <ul>
> <li class="complete">Step 1 (done)</li>
> <li class="active">Step 2 (active)</li>
> <li>Step 3</li>
> </ul>
>
> I believe that we are hiding the h2, (done) and (active) text off screen.
>
> Obviously we are using more descriptive text than Step 1 ... Step 3.
>
> I don't think that we set focus on page load, so we leave it up to browser
> / assistive tech / user to navigate to the form. Using JAWS I am usually
> taken to the beginning of the unique content on the page for the particular
> step in the form.
>
> HTH,
>
> Everett Zufelt
> http://zufelt.ca
>
> Follow me on Twitter
> http://twitter.com/ezufelt
>
> View my LinkedIn Profile
> http://www.linkedin.com/in/ezufelt
>
>
>
> On 2011-09-15, at 7:02 AM, adam solomon wrote:
>
> > Any ideas on how best to "accessibilize" the wizard control -
> specifically
> > the step list at the top of the page (step 1, step 2, step 3, etc.).
> Usually
> > the current step is indicated by a color difference - how can we do it
> > programmatically?
> > Is the list at the top of the page (assuming we find a programmatic
> solution
> > to mark the current step) enough to let the screen reader users know
> where
> > they are at any given time?
> > When navigating to the next step, where should focus be thrown?
> > Thanks in advance for any input.
> >
> > --
> > adam solomon
> > linkedin <http://il.linkedin.com/pub/adam-solomon/24/449/a4>;
> > blogix <http://adam.blogix.co.il/>;
> >