WebAIM - Web Accessibility In Mind

E-mail List Archives

Mark-up for mulitple choice tests.

for

From: Bourne, Sarah (ITD)
Date: Mar 13, 2015 11:56AM

How would you mark-up a multiple choice test item in HTML so that the question and choices are both picked up by screen readers?

Here is an example test item:

You are throwing a dinner party. Two guests are vegetarians. One person is allergic to nuts, and another is lactose intolerant. Which dish can you serve?
- Eggplant parmesan
- Yankee Pot Roast
- Trout Almandine
- None of the above

The answers (indicated in the example with a leading dash and space) would be marked up as radio buttons whose labels are the answers. The obvious way to programmatically connect the question paragraph with them is to make the paragraph the legend of a fieldset.

But screen readers would then repeat that legend in front of each answer. Wouldn't the test taker's head explode by the fourth or fifth question? Is there a more elegant, less verbose, but valid and easy to use way of handling things like this?

sb
Sarah E. Bourne
Director of IT Accessibility, MassIT
Commonwealth of Massachusetts
1 Ashburton Pl. rm 1601 Boston MA 02108
617-626-4502
<EMAIL REMOVED>
http://www.mass.gov/MassIT