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

Question

我正在开发一款投票应用程序，并且正在努力使其尽可能易于访问。但我无法弄清楚最好的方法是什么。

我有一个问题、对该问题的解释以及两个可供选择的选项。我目前构建它的方式是这样的:

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

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

Answer 1

我突然意识到使用单选按钮可能会更好？

这几乎肯定应该是一个单选按钮，因为对于屏幕阅读器用户来说，这将宣布有 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 .

因此，目前当选择单选按钮时，它会显示:

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

您不需要使用每个单选按钮读出说明，这样会使事情变得更容易，也许您应该使用 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>