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。

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

1 个答案: