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

【问题标题】：a11y accessible form inputs as buttonsa11y 可作为按钮访问的表单输入
【发布时间】：2018-10-08 21:04:34
【问题描述】：

我正在尝试通过使我的 JavaScript 测验应用程序 a11y 易于访问，以便用户可以使用键盘导航按钮。答案选项是表单中的单选按钮输入。我看到了一个例子，但是图像被分配了input type="image" 和role="button"，允许用户使用 Tab 滚动图像元素（这个例子中的图像是交互式的）。我可以将相同的策略应用于我的单选按钮吗？

下面是我的代码的 sn-p。它代表表单中的第一个答案选项。

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

【问题讨论】：

如果你使用适当的表单元素，你不需要做任何特别的事情，默认情况下它们是键盘可访问的。 -- 无论如何，请在问题中包含您的标记（一个最小示例）
谢谢，我不知道默认情况下它可以通过键盘访问。我已经更新了一些代码。能否请您看一下并告诉我是否使用了正确的表单元素？

标签： javascript html keyboard radio-button accessibility

【解决方案1】：

正如@unor 所说，如果您使用默认表单元素，它们已经可以通过键盘访问。

如果您使用 ARIA 属性（包括 role 属性），请记住这些属性为屏幕阅读器提供提示，但它们不提供任何行为。您必须自己编写行为代码。在某物上拍role="button" 会导致屏幕阅读器宣布它是一个按钮，并且用户会期望 Space 和 Enter 键在激活该按钮时起作用。

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

【讨论】：