WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: accessible wizard control

for

From: E.J. Zufelt
Date: Sep 15, 2011 5:21AM

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/>;
>