E-mail List Archives
Thread: Mark-up for multiple choice tests.
Number of posts in this thread: 5 (In chronological order)
From: Pratik Patel
Date: Fri, Mar 13 2015 12:08PM
Subject: Mark-up for multiple choice tests.
No previous message | Next message →
Hello Sarah,
Fieldset and legend is useful if the screen reader user is going to be in
"focus mode." But, screen readers no longer require that mode for radio
buttons or checkboxes. For this example, I would suggest that questions be
marked up in headings so that the user can easily navigate from one to the
other. A question followed by the choices should clearly indicate to the
user the relationship between questions and their corresponding choices.
Even if you markup questions via fieldsets and legends, the user should not
encounter verbose repetitions if he/she uses arrow keys to navigate. Tabbing
through choices will, however, present verbose repetitions.
HTH.
Pratik
Pratik Patel
Founder and CEO, EZFire
E: = EMAIL ADDRESS REMOVED = (or = EMAIL ADDRESS REMOVED = )
Follow me on Twitter: @ppatel
Follow me on LinkedIn: http://www.linkedin.com/pub/pratik-patel/9/985/882
Skype: Patel.pratik
-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bourne, Sarah
(ITD)
Sent: Friday, March 13, 2015 1:57 PM
To: WebAIM Discussion List
Subject: [WebAIM] Mark-up for mulitple choice tests.
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:11PM
Subject: Re: Mark-up for multiple choice tests.
← Previous message | Next message →
Well said.
The only followup:
Usually radiobuttons in a radiogroup share a single tabstop so user
would have to use arrow keys in forms/application mode, tab key would
get them out of the radiobutton to the next focusable element.
On 3/13/15, Pratik Patel < = EMAIL ADDRESS REMOVED = > wrote:
> Hello Sarah,
>
> Fieldset and legend is useful if the screen reader user is going to be in
> "focus mode." But, screen readers no longer require that mode for radio
> buttons or checkboxes. For this example, I would suggest that questions be
> marked up in headings so that the user can easily navigate from one to the
> other. A question followed by the choices should clearly indicate to the
> user the relationship between questions and their corresponding choices.
>
> Even if you markup questions via fieldsets and legends, the user should not
> encounter verbose repetitions if he/she uses arrow keys to navigate.
> Tabbing
> through choices will, however, present verbose repetitions.
>
>
> HTH.
>
> Pratik
>
> Pratik Patel
> Founder and CEO, EZFire
> E: = EMAIL ADDRESS REMOVED = (or = EMAIL ADDRESS REMOVED = )
> Follow me on Twitter: @ppatel
> Follow me on LinkedIn: http://www.linkedin.com/pub/pratik-patel/9/985/882
> Skype: Patel.pratik
>
>
> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED =
> [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bourne, Sarah
> (ITD)
> Sent: Friday, March 13, 2015 1:57 PM
> To: WebAIM Discussion List
> Subject: [WebAIM] Mark-up for mulitple choice tests.
>
> 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: Don Mauck
Date: Fri, Mar 13 2015 12:14PM
Subject: Re: Mark-up for multiple choice tests.
← Previous message | Next message →
Sarah --
I'm seeing this technique done more and more in now development.
-----Original Message-----
From: Pratik Patel [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Friday, March 13, 2015 12:09 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Mark-up for multiple choice tests.
Hello Sarah,
Fieldset and legend is useful if the screen reader user is going to be in
"focus mode." But, screen readers no longer require that mode for radio
buttons or checkboxes. For this example, I would suggest that questions be
marked up in headings so that the user can easily navigate from one to the
other. A question followed by the choices should clearly indicate to the
user the relationship between questions and their corresponding choices.
Even if you markup questions via fieldsets and legends, the user should not
encounter verbose repetitions if he/she uses arrow keys to navigate. Tabbing
through choices will, however, present verbose repetitions.
HTH.
Pratik
Pratik Patel
Founder and CEO, EZFire
E: = EMAIL ADDRESS REMOVED = (or = EMAIL ADDRESS REMOVED = )
Follow me on Twitter: @ppatel
Follow me on LinkedIn: http://www.linkedin.com/pub/pratik-patel/9/985/882
Skype: Patel.pratik
-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bourne, Sarah
(ITD)
Sent: Friday, March 13, 2015 1:57 PM
To: WebAIM Discussion List
Subject: [WebAIM] Mark-up for mulitple choice tests.
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: Bourne, Sarah (ITD)
Date: Fri, Mar 13 2015 12:39PM
Subject: Re: Mark-up for multiple choice tests.
← Previous message | Next message →
Thank you, all! Very helpful.
(By the way, I would probably serve a nice vegetarian black bean chili.)
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: Jonathan Avila
Date: Fri, Mar 13 2015 3:34PM
Subject: Re: Mark-up for multiple choice tests.
← Previous message | No next message
> For this example, I would suggest that questions be marked up in headings so that the user can easily navigate from one to the other. A question followed by the choices should clearly indicate to the user the relationship between questions and their corresponding choices.
This is a great question for compliance. Probably would make sense to have WCAG technique ARIA 17<http://www.w3.org/TR/WCAG20-TECHS/aria#ARIA17>; updated to mark its group name text as a heading or have a new multiple choice example. The technique of just using a heading could be a potential issue without a role of group and aria-labelledby.
Jonathan
--
Jonathan Avila
Chief Accessibility Officer
SSB BART Group
= EMAIL ADDRESS REMOVED =
703-637-8957 (o)
Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter
-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Pratik Patel
Sent: Friday, March 13, 2015 2:09 PM
To: 'WebAIM Discussion List'
Subject: Re: [WebAIM] Mark-up for multiple choice tests.
Hello Sarah,
Fieldset and legend is useful if the screen reader user is going to be in "focus mode." But, screen readers no longer require that mode for radio buttons or checkboxes. For this example, I would suggest that questions be marked up in headings so that the user can easily navigate from one to the other. A question followed by the choices should clearly indicate to the user the relationship between questions and their corresponding choices.
Even if you markup questions via fieldsets and legends, the user should not encounter verbose repetitions if he/she uses arrow keys to navigate. Tabbing through choices will, however, present verbose repetitions.
HTH.
Pratik
Pratik Patel
Founder and CEO, EZFire
E: = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = > (or = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >) Follow me on Twitter: @ppatel Follow me on LinkedIn: http://www.linkedin.com/pub/pratik-patel/9/985/882
Skype: Patel.pratik
-----Original Message-----
From: = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bourne, Sarah
(ITD)
Sent: Friday, March 13, 2015 1:57 PM
To: WebAIM Discussion List
Subject: [WebAIM] Mark-up for mulitple choice tests.
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 = <mailto: = EMAIL ADDRESS REMOVED = >
http://www.mass.gov/MassIT