Доступные формы ввода в виде кнопок

Question

Я пытаюсь сделать приложение JavaScript-викторины доступным, чтобы пользователи могли перемещаться по кнопкам с помощью клавиатуры. Варианты ответа - это кнопки-переключатели в форме. Я видел пример этого, но с изображениями, которые были назначены input type="image" и role="button", позволяя пользователю прокручивать элементы изображения, используя Tab (изображения в этом примере были интерактивными). Могу ли я применить эту же тактику к своим радио кнопкам?

Ниже приведен фрагмент моего кода. Он представляет первый вариант ответа в форме.

<form class='questionForm'>
 <fieldset role="radiogroup" aria-labelledby="questionText">
   <legend id="questionText">"${STORE[questionNumber].question}" 
   </legend>
   <label for="answer-1" class="answerOption">
   <input id="answer-1" type="radio" role="radio" value="${STORE[questionNumber].answers[0]}" name="answer" aria-required="true">
   <span>${STORE[questionNumber].answers[0]}</span>
   </label>

Answer 1

Как говорит @unor, если вы используете элементы формы по умолчанию, они уже доступны с клавиатуры.

Если вы используете атрибуты ARIA (включая атрибут role), просто помните, что атрибуты предоставляют подсказки для программ чтения с экрана, но они не обеспечивают какое-либо поведение. Вы должны сами кодировать поведение. Нажатие role="button" на что-либо заставит программу чтения с экрана объявить, что это кнопка, и пользователь будет ожидать, что обе клавиши Пробел и Ввод сработают при активации кнопки.

Вы можете создавать свои собственные переключатели на основе изображений, если хотите, но опять же, вам нужно кодировать поведение клавиатуры. Все переключатели, сгруппированные вместе, представляют собой одну позицию табуляции, а перемещение между кнопками осуществляется с помощью клавиш со стрелками. См https://www.w3.org/TR/wai-aria-practices/#radiobutton.