2

我正在开发一个投票应用程序，我正在努力使其尽可能易于访问。但我无法理解最好的方法是什么。

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

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

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

4

1 回答 1

1

让我感到震惊的是，为此使用单选按钮可能会更好？

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

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

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

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

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

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

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

要考虑的形式行为

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

这是为了确保您符合指导 G98：让用户能够在提交和指导 G164之前查看和更正答案要求

最后的想法

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

label之前阅读过 任何相关的内容aria-describedby。

因此，目前选择一个广播按钮时，它将读取：

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

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

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

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

我还没有测试过以下内容，但我想它可以正确地为屏幕阅读器宣布，并为不支持的屏幕阅读器提供不错的for=回退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>
于 2021-01-22T13:26:25.323 回答