WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Mark-up for mulitple choice tests.

for

From: Birkir R. Gunnarsson
Date: Mar 13, 2015 12:09PM

Sarah

Most screen readers have verbosity settings where users can control
how fieldset/legends are communicated.
If you are interested I can do a quick search for you and see how this
is controlled in the major screen readers.
I generally recommend against creating specific screen reader friendly
markup. if coded correctly, the screen reader is responsible for
communicating the information to the user and give user control over
how they want the information.
You could make the question a heading with an id and then use
aria-labaelledby on the first radiobutton that first announces the
question, and then the first radiobutton choice,, then you could skip
this setup for the rest of the radiobutton choices (user can jump to
previous heading if they want question repeated).
Think
<code>
<h3 id="q22">What is the name of the most expensive city in the world</h3>
<label id="q22opt1" for="q22answer1">Zuerich</span>
<input type="radio" name="q22answers" id="quuanswer1"
aria-labelledby="q22 q22opt1">
<label for="q22opt2">Tokyo</labael>
<input type="radio" name="uqqanswers" id="q22answer2">
...
</code>
(I am sure there are bugs in there .. coding just to show the basic idea).

...

But this quickly gets messy, with a lot of extra ID tags and coding,
and it should not be necessary.
Cheers



On 3/13/15, Bourne, Sarah (ITD) < <EMAIL REMOVED> > wrote:
> 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
>
>
> > > >


--
Work hard. Have fun. Make history.