I'm working on a wizard where users go through a sequence of screens:

enter image description here

On the left-hand side I show the title of the wizard, 'Add a foo', above an ordered list of steps. In the main content area, I have the title of the step.

For accessibility, should I make the step title, 'Create a foo' the H1 of the page? Or should the H1 be the title of the whole wizard? Does it matter?

  • This is a bit of an implementation question... – Charles Wesley Feb 3 '15 at 16:37

In the HTML5 world, it is no longer true that you need a single H1 tag for an entire page.

Depending on what elements you wrap your various sections in, multiple H1 tags will be interpreted within their context.

So if you have different portions of your wizard wrapped by section tags, for example, a H1 within each section would be appropriate.

You can add further accessibility support by using aria-label attributes to the section tag to give screen readers additional context.


Of course, it depends upon what the wizard does, what your user's expectations are and how often they use the wizard and how complex it is.

When I did a task/wizard based system, I found it useful to have an "Introduction" step which showed what the wizard would do and the data that would be entered. Also, I had a "Summary" step at the end to allow the user to review the changes that would happen if the clicked Finish.

This worked really well, but even better when I allowed individual users to skip the Introduction and/or Summary steps for wizards that they used a lot.

In this way, novice users got a lot of support and even users who were advanced on most tasks, but not familiar with seldom used ones found it good. On the other hand, the system allowed expert users who executed the same task several times per day to skip the repetitive screens, which they no longer needed, yielding a corresponding increase in productivity and user-satisfaction with the system.

Not the answer you're looking for? Browse other questions tagged or ask your own question.