3

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

2

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]
  • That's nice in theory but if you do usability tests with visually impaired test subjects, you'll most likely find they prefer terseness and not things repeated. My two visually impaired co-workers agree, but I'd recommend you test it. Just because they don't see well doesn't mean they don't have a good memory. They know they're on the "areas of interest" section and only need to be told once. – slugolicious Feb 25 '17 at 2:49
  • (my comment was too long...continued here) Also, when you have the extra text at the beginning, it forces them to wait for the important part of the text. What they really want to hear, in order to get to the right choice, is 'writing', 'drawing', 'painting', and 'pottery' at the very beginning of the text so they know quickly whether to skip that choice. – slugolicious Feb 25 '17 at 2:50
1

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>
  • Each question can have multiple checkboxes associated with it. My example is more complex example: How many years in business? checkbox - not in business. checkbox - less than 3 years checkbox - 3 years or more. – tiki16 Feb 20 '17 at 18:33
  • That particular example is not a good case for a checkbox. A checkbox allows multiple answers. Your "business" question should be a radio group. Only one answer is allowed with a radio group. A business can't be "less than 3 years" and "3 years or more", which is what a list of checkboxes would imply. – slugolicious Feb 25 '17 at 2:43
0

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).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.