可访问的表单输入作为按钮

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"会导致屏幕阅读器宣布它是一个按钮，并且用户期望Space和Enter键在激活该按钮时都起作用。

您可以根据需要创建自己的基于图像的单选按钮，但是同样，您需要对键盘行为进行编码。 所有组合在一起的单选按钮都是一个制表位，并且使用箭头键可以在按钮之间导航。 参见https://www.w3.org/TR/wai-aria-practices/#radiobutton 。