E-mail List Archives
Thread: Mark-up for mulitple choice tests.
Number of posts in this thread: 4 (In chronological order)
From: Bourne, Sarah (ITD)
Date: Fri, Mar 13 2015 11:56AM
Subject: Mark-up for mulitple choice tests.
No previous message | Next message →
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 ADDRESS REMOVED =
http://www.mass.gov/MassIT
From: Birkir R. Gunnarsson
Date: Fri, Mar 13 2015 12:09PM
Subject: Re: Mark-up for mulitple choice tests.
← Previous message | Next message →
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 ADDRESS 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 ADDRESS REMOVED =
> http://www.mass.gov/MassIT
>
>
> > > >
--
Work hard. Have fun. Make history.
From: L Snider
Date: Fri, Mar 13 2015 12:09PM
Subject: Re: Mark-up for mulitple choice tests.
← Previous message | Next message →
This is just my 2 cents...I had to mark up a survey once, and it had
similar question formats. I did a heading for each question, and put the
text Question 1, etc. in there-so at least if someone listed them off it
helped get a sense of what was going on. I think I also did fieldsets, but
can't remember how I solved the issue you mentioned below. Would love to
hear what others say about it!
Cheers
Lisa
On Fri, Mar 13, 2015 at 12:56 PM, Bourne, Sarah (ITD) <
= EMAIL ADDRESS 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 ADDRESS REMOVED =
> http://www.mass.gov/MassIT
>
>
> > > >
From: _mallory
Date: Fri, Mar 13 2015 4:35PM
Subject: Re: Mark-up for mulitple choice tests.
← Previous message | No next message
I seem to remember JAWS was specifically the one who always repeated
the legend each control.
And I have used pretty much exactly Birkir's code in the past, and
I agree with him that that could be overkill if people can change
this in their verb settings (I never could get it off in JAWS 9,
but that's a long time ago).
_mallory
On Fri, Mar 13, 2015 at 02:09:31PM -0400, Birkir R. Gunnarsson wrote:
> 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 ADDRESS 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 ADDRESS REMOVED =
> > http://www.mass.gov/MassIT
> >
> >
> > > > > > > >
>
>
> --
> Work hard. Have fun. Make history.
> > >