What markup should I use for a form confirmation page / last step in wizard?

Question

We have several multistep forms (wizards?), and in the last step it summarizes what you have filled out so you can read through it once more before you actually submit/confirm.

For styling, these were reusing a label-komponent for the "key", while the "value" was just dumped out as text. This seems very wrong, since a label should be connected to an input. So as an easy solution, I've started to display the value instead as a readonly input-field connected to that label. But, now I've come to areas where that doesn't work anymore. Places where for example the dumped out text is a list of selected text, or a long text description of what has been selected.

For example, one question could be:

Do you have children under the age of 18?
[ ] Yes
[x] No

While on the confirm page, this is listed as:

Children
No, I do not have any children under the age of 18

This doesn't really fit in a single line readonly text input. Thought of replacing it with a readonly textarea, but then you get the issue of wrapping text, having to figure out how large it should be, and potentially an awkward scrollbar if it's slightly off.

Either way, is this even a good way to markup a confirmation page to begin with? What really is the correct, or best, way to markup this kind of summary/confirmation page for accessibility? I assume it should not simply be paragraphs of text, but not sure what it then actually should be?

Answer 1

Apparently <dl> might be the markup that fits best for this.

I tried to avoid it, because styling it tends to be a pain, but today I learned it's actually valid markup to wrap <dt> <dd> pairs in <div> elements, which will make styling it much easier.

Answer 2

For me: the confirmation page, should be a copy from question page. Situation: I want to change my answer, I need to infer the answer, to get the question, if I wanna choose.

"Children""No, I do not have any children under the age of 18" -> "Should be, this question"

When you have the question, will be easiest to find answer and change. "Do you have children under the age of 18?""No" -> I want to change, and I know where to go

You can get that in a usability test, ask some user to change a answer in a form, and see their reactions.

Answer 3

I agree with @JulianoBraz that your summary might be a little confusing if you're rewording the question in the summary. It'd be better for the question to be quoted exactly, but that's a side issue.

You mention using a definition list, <dl>, which is probably the most appropriate semantic element to use, but unfortunately, its support by screen readers is woefully lacking and inconsistent so it's not a great accessibility solution. See my answer in StackOverflow regarding definition lists.

If the question is

Do you have children under the age of 18?
[ ] Yes
[x] No

Then the summary should be something like:

Do you have children under the age of 18?
No

Or you can bold the opposite.

Do you have children under the age of 18?
No

With the question in bold, you could mark it as an <h3> (or some appropriate heading level).

Depending on the the layout, it might even be better to use a table with the first column being the original question and the second column being the answer. Tables (when coded properly) are great for screen reader users.

<table>
  <tr>
    <th scope="col">Question</th>
    <th scope="col">Answer</th>
  </tr>
  <tr>
    <td>Do you have children under the age of 18?</td>
    <td>No</td>
  </tr>
</table>

Question	Answer
Do you have children under the age of 18?	No

You could have an "edit" link in the last column to allow the answer to be changed.