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