Tabbing order of questions with check boxes for accessiblity

Question

I am creating a page that consists of 6 questions. Each question has accompanying check boxes for the user to choose from. Currently when you use a screen reader you can tab into the first question and then the check boxes and then the next question, all the way down the page.

I am wondering for accessibility, if the person should be able to tab into each question by-passing the check boxes? My thoughts are that if they can't read the accompanying text for each check box, how are they going to know if they should check it or not? What is best practices in this situation? Thanks

Answer 1

While there are different ways of implementation, it seems like your question is around desired behavior. Generally, you will want to read the question and then repeat the question (or a shortened version) with each option. This may be repetitive, but also provides the most clarity.

There is a good example at Accessible forms using WCAG 2.0 that uses "Areas of Interest" and several checkbox options (writing, drawing, painting, pottery) in the section titled "Form 6: Nested Fieldsets". Here, the screen reader reads:

• Areas of Interest [tab]
• Areas of interest, writing checkbox not checked. To check press spacebar [tab]
• Areas of interest, drawing checkbox not checked. To check press spacebar [tab]
• Areas of interest, painting checkbox not checked. To check press spacebar [tab]
• Areas of interest, pottery checkbox not checked. To check press spacebar [tab]

Answer 2

Each question should be marked up as a label and should be explicitly paired with its checkbox by a for attribute on the label equal to the id on the checkbox. Not only does that allow screen readers and other assistive technology to announce the correct label when the field receives focus, it also increases the size of the clickable area for other users.

<input type="checkbox" id="question">
<label for="question">True or false?</label>

You can achieve a similar result by wrapping the checkbox inside the label:

<label><input type="checkbox">True or false?</label>

Answer 3

If your questions are marked as headings, perhaps <h2>, then it's very easy for the screen reader user to jump to each question using the 'H' or '2' quick navigation key. You shouldn't have to make each question a tab stop. You can also have a container around your groups of answers and have that container be aria-labelledby pointing to the question text. Roughly something like this:

<h2 id='q1'>What is your quest?</h2>
<div aria-labelledby='q1'>
  <input type='checkbox' id='q1a1'><label for='q1a1'>To seek the Holy Grail</label>
  <input type='checkbox' id='q1a2'><label for='q1a2'>To search for killer rabbits</label>
</div>
<h2 id='q2'>What is your favorite color?</h2>
<div aria-labelledby='q2'>
  <input type='checkbox' id='q2a1'><label for='q2a1'>Blue</label>
  <input type='checkbox' id='q2a2'><label for='q2a2'>No, yellow</label>
</div>

This allows the user to tab to the checkbox, bypassing a tabstop for the question text itself, but the question will be read before the checkbox label is read because of the aria-labelledby. Then tabbing to the next checkbox answer won't repeat the question. The nice thing about doing this is that if the user Shift+tabs back to the previous question, they'll hear the question read when they shift+tab to the last checkbox in the previous question (again, because of the aria-labelledby).