WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Markup for question and answer scenario

for

From: Moore,Michael (HHSC)
Date: Jun 22, 2015 12:09PM


Of course adding tab index="0" to everything will make the experience more onerous for sighted keyboard users. I would prefer instructions and a judicious use of aria-labelledby and aria-describedby.

Mike Moore
Accessibility Coordinator
Texas Health and Human Services Commission
Civil Rights Office
(512) 438-3431 (Office)
(512) 574-0091 (Cell)

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Jim Allan
Sent: Monday, June 22, 2015 12:39 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Markup for question and answer scenario

It would be prudent whatever structure is used, that instructions to the user about the structure and navigation is provided.
Using Greg's scenario - informing users of the structure (headings, paragraphs, and form controls) lets them know that they will be using heading navigation, arrow navigation, and perhaps form navigation. All must be used or the user will miss information/instructions. Unless, you make a design choice and put tabindex=0 on everything. So, if the user only uses the tab key to navigate a test (generally large forms), they won't miss anything.
Jim

On Mon, Jun 22, 2015 at 10:55 AM, Greg Kraus < <EMAIL REMOVED> > wrote:

> Hi Sean,
>
> I've worked with Moodle on the semantics of their quiz to make them
> accessible. With complex and varied formats for quiz questions, in the
> end you come down to a trade off - do you make each question within a
> quiz as technically accessible as possible, or do you go for
> consistency of semantics between all quiz questions.
>
> In the case of Moodle, we never knew exactly what was going to appear
> in each question because of the flexibility the author has in creating
> the questions. We went with ensuring consistent structure between all
> question types. This is the basic format.
>
> <h2>Question number 1</h2>
> <h3>Question status</h3>
> <p>question status information goes here, like if it has been
> answered, or flagged by the user so they can come back to it, or how
> many points it is worth</p> <h3>Question text</h3> <p>question text
> goes here</p> <h3>Answer</h3> <p>answer inputs go here</p>
>
> This format gave users a consistent experience between all question
> types to help them navigate, understand, and answer the question.
>
> I hope this helps.
>
> Greg
> --
> Greg Kraus
> University IT Accessibility Coordinator NC State University
> 919.513.4087
> <EMAIL REMOVED>
> http://go.ncsu.edu/itaccess
>
>
> On Mon, Jun 22, 2015 at 11:38 AM, Moore,Michael (HHSC)
> < <EMAIL REMOVED> > wrote:
> > Sean,
> >
> > If you are going to use aria-labelledby to add the question to the input
> for the answer selection you will need to also point to the id for the
> answer selection. When I have tested aria-labelled by overrides any
> existing bound labels. So it would look like this <input ...
> aria-labelledby="idOfQuestionHeading idOfAnswerText" ... /> This way a
> screen reader would read both.
> >
> > Mike Moore
> > Accessibility Coordinator
> > Texas Health and Human Services Commission
> > Civil Rights Office
> > (512) 438-3431 (Office)
> > (512) 574-0091 (Cell)
> >
> > -----Original Message-----
> > From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
> Behalf Of Sean Keegan
> > Sent: Monday, June 22, 2015 10:22 AM
> > To: <EMAIL REMOVED>
> > Subject: Re: [WebAIM] Markup for question and answer scenario
> >
> > Here's a sample of a question type and this is the basic model as to how
> a question may be organized (Note - the sample is Flash-based and not very
> > accessible):
> > http://pages.uoregon.edu/kscalise/taxonomy/item.php?item&type=flash
> >
> > The number of questions per page is under discussion, but I would expect
> anywhere from one to four questions per page.
> >
> > Thanks for the suggestion. I had not thought of using fieldset with
> aria-labelledy. I had considered fieldset and legend to be the required
> combination, so this helps in addressing a formatting/display issue.
> >
> > Questions:
> > - Should <div role=group> be considered equivalent to a <fieldset> in
> that it is for grouping form controls alone? I know how AT will interpret
> both functionally, but asking from a conceptual perspective.
> >
> > - If there were to be multiple questions per page, would is be
> appropriate to group each question within a region? E.g., <div role=region
> aria-labelledby="the question heading">
> >
> > Take care,
> > Sean
> >
> >
> > From: Steve Faulkner < <EMAIL REMOVED> >
> >> To: WebAIM Discussion List < <EMAIL REMOVED> >
> >> Cc:
> >> Date: Sat, 20 Jun 2015 09:50:38 +0100
> >> Subject: Re: [WebAIM] Markup for question and answer scenario Can you
> >> provide an example question? also is it intended that there are
> >> multiple question on a page?
> >> anyway here is a stab at code for a single page pre question:
> >>
> >> <h1>Question 4</h1>
> >> <p>brief description</p>
> >> <p>..</p>
> >> <h2 id="question">specific question</h2> <fieldset
> >> aria-labelledby="question"> The answer set (e.g., True or False,
> >> Multiple Choice, etc.) </fieldset>
> >>
> >>
> >> --
> >>
> >> Regards
> >>
> >> SteveF
> >> Current Standards Work @W3C
> >> <http://www.paciellogroup.com/blog/2015/03/current-standards-work-at-w
> >> 3c/>
> >>
> >>
> > > > > archives at http://webaim.org/discussion/archives
> > > > > > > > > > > > > > >



--
[image: http://www.tsbvi.edu] <http://www.tsbvi.edu>;Jim Allan,
Accessibility Coordinator
Texas School for the Blind and Visually Impaired
1100 W. 45th St., Austin, Texas 78756
voice 512.206.9315 fax: 512.206.9264 http://www.tsbvi.edu/
"We shape our tools and thereafter our tools shape us." McLuhan, 1964