WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Markup for question and answer scenario

for

From: Moore,Michael (HHSC)
Date: Jun 22, 2015 9:38AM

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