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?

> 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.
>

Hi Sean, right, unless it contains form controls fieldset is not the right
way to mark it up

The fieldset element represents a set of form controls optionally grouped
> under a common name.
>

>
> On 20 June 2015 at 07:40, Sean Keegan < = EMAIL ADDRESS REMOVED = > wrote:
>
>> 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.
>>
>
> Hi Sean, right, unless it contains form controls fieldset is not the right
> way to mark it up
>
> The fieldset element represents a set of form controls optionally grouped
>> under a common name.
>>
>
> http://www.w3.org/TR/html5/forms.html#the-fieldset-element
>
> --
>
> Regards
>
> SteveF
> Current Standards Work @W3C
> <http://www.paciellogroup.com/blog/2015/03/current-standards-work-at-w3c/&gt;
>

20.06.2015, 10:51, "Steve Faulkner" < = EMAIL ADDRESS REMOVED = >:
> Can you provide an example question? also is it intended that there are
> multiple question on a page?
> anyway here is a stab at code for a single page pre question:

If there are multiple questions on a page I would put them each in a section, get the heading levels right, and you might have enough. Overthinking this might not be the most important accessibility issue to work onâ¦

Agreed with Charles/Steve.
The key is to have consistent heading levels between questions.
If the question itself is the only thin in there, I would put each
question as an h2 actually (assuming the test has some sort of a
headline followed by instructions, its headline would be an h1 ..
though, honestly, as long as the heading pain an accurate picture of
hierarchy I would not stress over the heading levels too much).
Something like:
<h3>What is the state capital of Texas?</h3>

If the question itself is a sub-section of a section including a
heading and some material, make sure that headline is a level above
the heading used to mark up the question.
<h3>State Capitals</h3>
<p>It is important that all pupils know all state capitals, Precisely
why is a mystery to us but we have been told it is important.</p>
<h4>What is the state capital ot Texas?</h4>

The second part is to make sure the question is associated with the
answer input field (or set of fields):
- If this is a single input field, I would imagine using the question
as the label for the answer is the way to go.
<label for="q4"><h3>What is the state capital of Texas?</h3></label>
(I may be mixing those, the label might have to go inside the heading).
If the answer contains multiple inputs, such as radiobuttons, make
sure this is the fieldset/group for that question
<h3 id="q3q">What is the state capital of Texas?</h3>
<div role="group" aria-labelledby="q3q">
<label for="3qa1">Dalas</label>
<input type="radio" name="q3" id="3qa1" aria-required="true">
....
,</div>

As long as people can predictably navigate to sections, to questions,
and as long as they are absolutely sure what question they are
answering, I think you have done your job.
There are several ways to do this depending on the nature of the exam,
hope the answers on this list give you some sort of a framework from
which to start.
Cheers
-B

The number of questions per page is under discussion, but I would expect
anywhere from one to four questions per page.

Thanks for the suggestion. I had not thought of using fieldset with
aria-labelledy. I had considered fieldset and legend to be the required
combination, so this helps in addressing a formatting/display issue.

Questions:
- Should <div role=group> be considered equivalent to a <fieldset> in that
it is for grouping form controls alone? I know how AT will interpret both
functionally, but asking from a conceptual perspective.

- If there were to be multiple questions per page, would is be appropriate
to group each question within a region? E.g., <div role=region
aria-labelledby="the question heading">

If you are going to use aria-labelledby to add the question to the input for the answer selection you will need to also point to the id for the answer selection. When I have tested aria-labelled by overrides any existing bound labels. So it would look like this <input ... aria-labelledby="idOfQuestionHeading idOfAnswerText" ... /> This way a screen reader would read both.

The number of questions per page is under discussion, but I would expect anywhere from one to four questions per page.

Thanks for the suggestion. I had not thought of using fieldset with aria-labelledy. I had considered fieldset and legend to be the required combination, so this helps in addressing a formatting/display issue.

Questions:
- Should <div role=group> be considered equivalent to a <fieldset> in that it is for grouping form controls alone? I know how AT will interpret both functionally, but asking from a conceptual perspective.

- If there were to be multiple questions per page, would is be appropriate to group each question within a region? E.g., <div role=region aria-labelledby="the question heading">

I've worked with Moodle on the semantics of their quiz to make them
accessible. With complex and varied formats for quiz questions, in the
end you come down to a trade off - do you make each question within a
quiz as technically accessible as possible, or do you go for
consistency of semantics between all quiz questions.

In the case of Moodle, we never knew exactly what was going to appear
in each question because of the flexibility the author has in creating
the questions. We went with ensuring consistent structure between all
question types. This is the basic format.

<h2>Question number 1</h2>
<h3>Question status</h3>
<p>question status information goes here, like if it has been
answered, or flagged by the user so they can come back to it, or how
many points it is worth</p>
<h3>Question text</h3>
<p>question text goes here</p>
<h3>Answer</h3>
<p>answer inputs go here</p>

This format gave users a consistent experience between all question
types to help them navigate, understand, and answer the question.

On Mon, Jun 22, 2015 at 11:38 AM, Moore,Michael (HHSC)
< = EMAIL ADDRESS REMOVED = > wrote:
> Sean,
>
> If you are going to use aria-labelledby to add the question to the input for the answer selection you will need to also point to the id for the answer selection. When I have tested aria-labelled by overrides any existing bound labels. So it would look like this <input ... aria-labelledby="idOfQuestionHeading idOfAnswerText" ... /> This way a screen reader would read both.
>
> Mike Moore
> Accessibility Coordinator
> Texas Health and Human Services Commission
> Civil Rights Office
> (512) 438-3431 (Office)
> (512) 574-0091 (Cell)
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Sean Keegan
> Sent: Monday, June 22, 2015 10:22 AM
> To: = EMAIL ADDRESS REMOVED =
> Subject: Re: [WebAIM] Markup for question and answer scenario
>
> Here's a sample of a question type and this is the basic model as to how a question may be organized (Note - the sample is Flash-based and not very
> accessible):
> http://pages.uoregon.edu/kscalise/taxonomy/item.php?item&type=flash
>
> The number of questions per page is under discussion, but I would expect anywhere from one to four questions per page.
>
> Thanks for the suggestion. I had not thought of using fieldset with aria-labelledy. I had considered fieldset and legend to be the required combination, so this helps in addressing a formatting/display issue.
>
> Questions:
> - Should <div role=group> be considered equivalent to a <fieldset> in that it is for grouping form controls alone? I know how AT will interpret both functionally, but asking from a conceptual perspective.
>
> - If there were to be multiple questions per page, would is be appropriate to group each question within a region? E.g., <div role=region aria-labelledby="the question heading">
>
> Take care,
> Sean
>
>
> From: Steve Faulkner < = EMAIL ADDRESS REMOVED = >
>> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>> Cc:
>> Date: Sat, 20 Jun 2015 09:50:38 +0100
>> Subject: Re: [WebAIM] Markup for question and answer scenario Can you
>> provide an example question? also is it intended that there are
>> multiple question on a page?
>> anyway here is a stab at code for a single page pre question:
>>
>> <h1>Question 4</h1>
>> <p>brief description</p>
>> <p>..</p>
>> <h2 id="question">specific question</h2> <fieldset
>> aria-labelledby="question"> The answer set (e.g., True or False,
>> Multiple Choice, etc.) </fieldset>
>>
>>
>> --
>>
>> Regards
>>
>> SteveF
>> Current Standards Work @W3C
>> <http://www.paciellogroup.com/blog/2015/03/current-standards-work-at-w
>> 3c/>
>>
>>
> > > > > > >

It would be prudent whatever structure is used, that instructions to the
user about the structure and navigation is provided.
Using Greg's scenario - informing users of the structure (headings,
paragraphs, and form controls) lets them know that they will be using
heading navigation, arrow navigation, and perhaps form navigation. All must
be used or the user will miss information/instructions. Unless, you make a
design choice and put tabindex=0 on everything. So, if the user only uses
the tab key to navigate a test (generally large forms), they won't miss
anything.
Jim

It would be prudent whatever structure is used, that instructions to the user about the structure and navigation is provided.
Using Greg's scenario - informing users of the structure (headings, paragraphs, and form controls) lets them know that they will be using heading navigation, arrow navigation, and perhaps form navigation. All must be used or the user will miss information/instructions. Unless, you make a design choice and put tabindex=0 on everything. So, if the user only uses the tab key to navigate a test (generally large forms), they won't miss anything.
Jim

Yes - which is the short answer to the question all of you articulated far
better than I. Consistency and logical navigation is a major aspect I am
working to implement and, as Greg K. pointed out, there can be a trade-off
with the various types of questions that may be created.

@Jim - you answered an unasked question I had considered about providing
additional instructions. To go that route, I believe it would be best to
keep such instructions generic enough so as not to focus on one specific
screen-reader/AT application and describing how content is organized should
provide that starting point.

Thanks for the reminder. It may be best (where possible) to stick with
<label> for the answer inputs to keep the coding simpler. I think
aria-labelledby will work for when the group needs a description and to
avoid concatenating the whole question+answer.

That said, it may come in handy for some question types (e.g., multiple
true/false, reordering/rearrangement).

Thanks,
Sean

From: "Moore,Michael (HHSC)" < = EMAIL ADDRESS REMOVED = >

> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Cc:
> Date: Mon, 22 Jun 2015 15:38:35 +0000
> Subject: Re: [WebAIM] Markup for question and answer scenario
> Sean,
>
> If you are going to use aria-labelledby to add the question to the input
> for the answer selection you will need to also point to the id for the
> answer selection. When I have tested aria-labelled by overrides any
> existing bound labels. So it would look like this <input ...
> aria-labelledby="idOfQuestionHeading idOfAnswerText" ... /> This way a
> screen reader would read both.
>
> Mike Moore
> Accessibility Coordinator
> Texas Health and Human Services Commission
> Civil Rights Office
> (512) 438-3431 (Office)
> (512) 574-0091 (Cell)
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Sean Keegan
> Sent: Monday, June 22, 2015 10:22 AM
> To: = EMAIL ADDRESS REMOVED =
> Subject: Re: [WebAIM] Markup for question and answer scenario
>
> Here's a sample of a question type and this is the basic model as to how a
> question may be organized (Note - the sample is Flash-based and not very
> accessible):
> http://pages.uoregon.edu/kscalise/taxonomy/item.php?item&type=flash
>
> The number of questions per page is under discussion, but I would expect
> anywhere from one to four questions per page.
>
> Thanks for the suggestion. I had not thought of using fieldset with
> aria-labelledy. I had considered fieldset and legend to be the required
> combination, so this helps in addressing a formatting/display issue.
>
> Questions:
> - Should <div role=group> be considered equivalent to a <fieldset> in that
> it is for grouping form controls alone? I know how AT will interpret both
> functionally, but asking from a conceptual perspective.
>
> - If there were to be multiple questions per page, would is be appropriate
> to group each question within a region? E.g., <div role=region
> aria-labelledby="the question heading">
>
> Take care,
> Sean
>

agreed it is not a good practice and also causes problems for some AT users
as interactive elements are
a) supposed to be interactive
b) adding tabindex to without the element exposing the correct role effects
the accessible name calculation of the element. In the absence of an
approriate role, when focused the element may be announced as editable text
and the text within it may not be announced.