WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Mark-up for multiple choice tests.

for

From: Jonathan Avila
Date: Mar 13, 2015 3:34PM

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



703-637-8957 (o)

Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter





-----Original Message-----
From: <EMAIL REMOVED> [mailto: <EMAIL 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 REMOVED> <mailto: <EMAIL REMOVED> > (or <EMAIL REMOVED> <mailto: <EMAIL 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 REMOVED> <mailto: <EMAIL REMOVED> >

[mailto: <EMAIL 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 REMOVED> <mailto: <EMAIL REMOVED> >

http://www.mass.gov/MassIT