WebAIM - Web Accessibility In Mind

E-mail List Archives

Markup for question and answer scenario

for

From: Sean Keegan
Date: Jun 20, 2015 12:40AM

Greetings all,

I have a question about what markup may be appropriate for a
question/answer scenario, such as those used in standardized tests. These
assessment questions usually involve several parts and I can't seem to find
an approach that fits well. Feedback is appreciated.

A question/answer scenario is composed of:
- A question number, such as #4 or Question 4
- A brief description of the problem, sometimes including a data table
and/or images of graphs (such as bar graphs or scatterplots)
- The specific question itself
- The answer set (e.g., True or False, Multiple Choice, etc.)

One attempt involved wrapping the entire question, from the question number
to the answer set in a div element with a role=group and an aria-labelledby
attribute set to the specific question. I also considered setting the
aria-labelledby attribute to the brief description of the problem, or at
least just the text, but that did not seem right either as this is more of
an extended description of the problem and could be served by
aria-describedby.

I tried a variation on the first example in which the question number was
set to a heading and then used a div (with role and aria-labelledby) to
group the remaining content. The answer set would be grouped in a nested
div with aria-labelledby pointing to the specific question and include
aria-describedby pointing to the brief description of the problem.

Another attempt involved wrapping everything in a fieldset with the legend
set as the question number, and then using a nested fieldset or div on the
specific question and answer set. However, that nesting didn't seem quite
right either.

After trying different models, I realized I had grouped and nested
everything far more than was probably necessary and need a fresh
perspective. Ideas?

Take care,
Sean