E-mail List Archives

Search E-mail List Archives for

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

From: Sean Keegan
Date: Sat, Jun 20 2015 12:40AM
Subject: Markup for question and answer scenario
No previous message | Next message →

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

From: Steve Faulkner
Date: Sat, Jun 20 2015 2:36AM
Subject: Re: Markup for question and answer scenario
← Previous message | Next message →

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

From: Steve Faulkner
Date: Sat, Jun 20 2015 2:50AM
Subject: Re: Markup for question and answer scenario
← Previous message | Next message →

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

On 20 June 2015 at 09:36, Steve Faulkner < = EMAIL ADDRESS REMOVED = > wrote:

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

From: chaals
Date: Sun, Jun 21 2015 6:35PM
Subject: Re: Markup for question and answer scenario
← Previous message | Next message →

- faulkner.steve@



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…

I assume that what you really want is reasonable navigation, right?

cheers

> <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-w3c/>;
>
> On 20 June 2015 at 09:36, Steve Faulkner < = EMAIL ADDRESS REMOVED = > wrote:
>
>>  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/>;
>
> > > > --
Charles McCathie Nevile - web standards - CTO Office, Yandex
= EMAIL ADDRESS REMOVED = - - - Find more at http://yandex.com

From: Birkir R. Gunnarsson
Date: Sun, Jun 21 2015 6:49PM
Subject: Re: Markup for question and answer scenario
← Previous message | Next message →

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


On 6/21/15, = EMAIL ADDRESS REMOVED = < = EMAIL ADDRESS REMOVED = > wrote:
> - faulkner.steve@
>
>
>
> 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…
>
> I assume that what you really want is reasonable navigation, right?
>
> cheers
>
>> <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-w3c/>;
>>
>> On 20 June 2015 at 09:36, Steve Faulkner < = EMAIL ADDRESS REMOVED = > wrote:
>>
>>>  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/>;
>>
>> >> >> >> >
> --
> Charles McCathie Nevile - web standards - CTO Office, Yandex
> = EMAIL ADDRESS REMOVED = - - - Find more at http://yandex.com
> > > > >


--
Work hard. Have fun. Make history.

From: Sean Keegan
Date: Mon, Jun 22 2015 9:21AM
Subject: Re: Markup for question and answer scenario
← Previous message | Next message →

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

From: Moore,Michael (HHSC)
Date: Mon, Jun 22 2015 9:38AM
Subject: Re: Markup for question and answer scenario
← Previous message | Next message →

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)

From: Greg Kraus
Date: Mon, Jun 22 2015 9:55AM
Subject: Re: Markup for question and answer scenario
← Previous message | Next message →

Hi Sean,

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.

I hope this helps.

Greg
--
Greg Kraus
University IT Accessibility Coordinator
NC State University
919.513.4087
= EMAIL ADDRESS REMOVED =
http://go.ncsu.edu/itaccess


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

From: Jim Allan
Date: Mon, Jun 22 2015 11:38AM
Subject: Re: Markup for question and answer scenario
← Previous message | Next message →

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

On Mon, Jun 22, 2015 at 10:55 AM, Greg Kraus < = EMAIL ADDRESS REMOVED = > wrote:

> Hi Sean,
>
> 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.
>
> I hope this helps.
>
> Greg
> --
> Greg Kraus
> University IT Accessibility Coordinator
> NC State University
> 919.513.4087
> = EMAIL ADDRESS REMOVED =
> http://go.ncsu.edu/itaccess
>
>
> 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)
> >
> >

From: Moore,Michael (HHSC)
Date: Mon, Jun 22 2015 12:09PM
Subject: Re: Markup for question and answer scenario
← Previous message | Next message →

Of course adding tab index="0" to everything will make the experience more onerous for sighted keyboard users. I would prefer instructions and a judicious use of aria-labelledby and aria-describedby.

Mike Moore
Accessibility Coordinator
Texas Health and Human Services Commission
Civil Rights Office
(512) 438-3431 (Office)
(512) 574-0091 (Cell)

From: Sean Keegan
Date: Tue, Jun 23 2015 2:22AM
Subject: Re: Markup for question and answer scenario
← Previous message | Next message →

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.

Appreciate the ideas,
Sean


From: Jim Allan < = EMAIL ADDRESS REMOVED = >
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Cc:
> Date: Mon, 22 Jun 2015 12:38:55 -0500
> Subject: Re: [WebAIM] Markup for question and answer scenario
> 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
>
> On Mon, Jun 22, 2015 at 10:55 AM, Greg Kraus < = EMAIL ADDRESS REMOVED = > wrote:
>
> > Hi Sean,
> >
> > 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.
> >
> > I hope this helps.
> >
> > Greg
> > --
> > Greg Kraus
> > University IT Accessibility Coordinator
> > NC State University
> > 919.513.4087
> > = EMAIL ADDRESS REMOVED =
> > http://go.ncsu.edu/itaccess
> >
> >
> > 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)
> > >
> > >

From: Sean Keegan
Date: Tue, Jun 23 2015 2:37AM
Subject: Re: Markup for question and answer scenario (Moore, Michael (HHSC))
← Previous message | Next message →

Hi Mike,

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

From: Steve Faulkner
Date: Tue, Jun 23 2015 2:53AM
Subject: Re: Markup for question and answer scenario
← Previous message | No next message

On 22 June 2015 at 19:09, Moore,Michael (HHSC) <
= EMAIL ADDRESS REMOVED = > wrote:

> Of course adding tab index="0"


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.

--

Regards

SteveF
Current Standards Work @W3C
<http://www.paciellogroup.com/blog/2015/03/current-standards-work-at-w3c/>;