WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Markup for question and answer scenario

for

From: Birkir R. Gunnarsson
Date: Jun 21, 2015 6:49PM

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 REMOVED> < <EMAIL REMOVED> > wrote:
> - faulkner.steve@
>
>
>
> 20.06.2015, 10:51, "Steve Faulkner" < <EMAIL 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 REMOVED> > wrote:
>>
>>>  On 20 June 2015 at 07:40, Sean Keegan < <EMAIL 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 REMOVED> - - - Find more at http://yandex.com
> > > > >


--
Work hard. Have fun. Make history.