Keyboard & accessibility navigation issues

[arpadgabor]

Just checked out your questionnaire demo, there are some (rather serious) navigation issues.

1. Pressing tab does not focus the buttons (don't use <a> tags, use <button type="button">)
2. Multi-select is also not accessible.
3. Up/down arrow are also only accessible with a mouse, keyboard arrows should also send you to the next/prev section.
4. Sometimes tab takes me to the next section instead of navigating the current section.

e.g.

<a href="#" role="button" aria-label="Press to continue" class="animate fade-in-up f-enter">
  <div class="o-btn-action"><span>OK</span></div><span class="f-enter-desc">Press ENTER</span>
</a>

should be

<div class="flex">
  <button type="button" class="o-btn-action">
    OK
  </button>
  <span>
    Press <span class="f-enter-desc uppercase">Enter</span>
  </span>
</div>

Also for accessibility, please style the :focus state of everything that is focusable, so a keyboard user will know where he is situated on the screen.

As you can see, chrome also detects buttons as generic and non-keyboard focusable.

Also a small note: screen readers will read ENTER as E N T E R, while Enter with uppercase css styling will be read like normal.

[EkaterinaVu]

Thank you for your feedback, we made a few modifications regarding accessibility and keyboard navigation based on your suggestions:

• Main step controls are now buttons
• Fixed an issue regarding getting back to focus with tab on some questions
• Added additional element focus styles
• Removed upper case from HTML

Related commit links:

• a59f30d
• 733e566
• f863077

Your other suggestions are all valid, and where discussed in the development process. The current tab and focus behavior is intentional and is the essential concept of this form experience. This is a question per question form and the objective is to reduce unnecessary interaction.

The tab is used to move the focus from field to field, like in standard forms. On MultipleChoice questions, you can select/unselect your options by pressing the keys on the keyboard, and there are multiple helper text options for explanation purposes that can be used.