WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Markup for question and answer scenario

for

From: Greg Kraus
Date: Jun 22, 2015 9:55AM

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 REMOVED>
http://go.ncsu.edu/itaccess


On Mon, Jun 22, 2015 at 11:38 AM, Moore,Michael (HHSC)
< <EMAIL 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 REMOVED> ] On Behalf Of Sean Keegan
> Sent: Monday, June 22, 2015 10:22 AM
> To: <EMAIL 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 REMOVED> >
>> To: WebAIM Discussion List < <EMAIL 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/>
>>
>>
> > > > > > >