在网站上的两个选项之间进行选择，我应该使用按钮还是单选按钮？

如何解决在网站上的两个选项之间进行选择，我应该使用按钮还是单选按钮？

我正在开发一个投票应用程序，我正在努力使其尽可能易于访问。但我不知道这样做的最佳方法是什么。

我有一个问题，一个问题的解释和两个可供选择的选项。我目前的构建方式是这样的：

<h2>Do you like apples?</h2>
<p>Apples are a type of fruit and can be sweet or sour.<p>

<button aria-pressed="false" aria-role="button" aria-label="Yes,I like apples">yes</button>
<button aria-pressed="false" aria-role="button" aria-label="No,I don't like apples>no</button>

使用一个小脚本，我将确保按下的按钮获得 aria-press="true"。但后来我突然想到，为此使用单选按钮可能会更好？

<h2 id="q-appleTitle" for="q-apple">Do you like apples?</h2>
<p id="q-appleDesc" >Apples are a type of fruit and can be sweet or sour.<p>

<input type="radio" id="qYes" value="yes" aria-describedby="q-appleTitle q-appleDesc">
<label aria-label="Yes,I like apples" for="qYes">Yes</label>

<input type="radio" id="qNo" value="no" aria-describedby="q-appleTitle q-appleDesc">
<label aria-label="No,I don't like apples" for="qNo">No</label>

做这样的事情的首选方法是什么？

解决方法

我觉得使用单选按钮可能会更好？

这几乎肯定是一个单选按钮，因为对于屏幕阅读器用户来说，这将宣布有 2 个选项以及他们选择了哪个选项（如果有）。

如果这些只是按钮，他们将不知道有多少选项可供选择。

做这样的事情的首选方法是什么？

现在单选按钮是<input>，它们必须包含在表单中。

这意味着屏幕阅读器用户启用了“表单模式”，这使得导航更容易等。因此，他们不应该自动加载下一页（因为这不是预期的行为，预期行为是关键到可访问性）。

相反，一旦选择了一个选项，您应该启用“下一步”按钮，该按钮也应该是表单的“提交”按钮。

由于输入现在应该在表单中，因此按 Enter 提交之类的操作将自动进行，因此您无需担心实现所有这些。

要考虑的表单行为

最后的考虑是为了遵守 WCAG 用户应该能够返回并更改他们的答案，或者稍后编辑他们的答案，或者如果这是一个一旦提交就无法更改的多部分表格的一部分，他们应该看到在最终提交之前，他们所有选择的摘要。

这是为了确保您满足guidance G98: Providing the ability for the user to review and correct answers before submitting和guidance G164: Providing a stated time within which an online request (or transaction) may be amended or cancelled by the user after making the request

最后的想法

在带有单选按钮的第二个示例中，您的 aria 属性不太正确。

任何与 label 相关的内容都会在 aria-describedby 之前阅读。

So at present when selecting a radio button it would read:

“是的，我喜欢苹果，你喜欢苹果吗？苹果是一种水果，可以是甜的也可以是酸的。”

您不需要用每个单选按钮读出描述，这样可以使事情变得更容易，也许您应该使用 aria-labelledby 代替并给您的 <label> 一个 ID，因为它会读取任何引用的元素按顺序排列（所以 aria-labelledby="q-appleTitle yourNewLabelID" 而不是您当前的 aria-describedby）。

最后，如果您这样做，您的 aria-label 元素上就不需要 <label>。目前这是巨大的矫枉过正。

然而，对于有认知障碍的人来说，能够看到“是的，我喜欢苹果”肯定是有益的，所以如果空间允许，我建议将标签文本更改为这样，屏幕阅读器稍微额外的冗长是值得的权衡。

我还没有测试过下面的内容，但我想它对于屏幕阅读器来说是正确的，并且使用 for= 来代替 screen readers that don't support aria-labelledby 是一个不错的后备。

<input type="radio" id="qYes" value="yes" aria-labelledby="q-appleTitle q-appleLabel">
<label id="q-appleLabel" for="qYes">Yes,I like Apples</label>