E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 4 (In chronological order)

From: adam solomon
Date: Thu, Sep 15 2011 5:00AM
Subject: accessible wizard control
No previous message | Next message →

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

From: E.J. Zufelt
Date: Thu, Sep 15 2011 5:21AM
Subject: Re: accessible wizard control
← Previous message | Next message →

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

From: adam solomon
Date: Thu, Sep 15 2011 6:57AM
Subject: Re: accessible wizard control
← Previous message | Next message →

Thanks, this helped.

On Thu, Sep 15, 2011 at 2:19 PM, E.J. Zufelt < = EMAIL ADDRESS 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/>;
> >

From: Vincent Young
Date: Thu, Sep 15 2011 10:06AM
Subject: Re: accessible wizard control
← Previous message | No next message

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