在网站上的两个选项之间进行选择，我应该使用按钮还是单选按钮？
Choose between two options on website, should I use buttons or radiobuttons?
我正在开发一个投票应用程序，我正在努力让它尽可能易于访问。但我想不出最好的方法是什么。
我有一个问题，关于问题的解释和两个选项可供选择。我目前构建它的方式是这样的：
<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>
执行此类操作的首选方法是什么？
我突然想到使用单选按钮可能会更好？
这几乎可以肯定是一个单选按钮，因为对于屏幕 reader 用户来说，这将宣布有 2 个选项以及他们选择了哪个选项（如果有）。
如果这些只是按钮，他们将不知道有多少选项可供选择。
执行此类操作的首选方法是什么？
现在，由于单选按钮是 <input>，因此它们 必须 包含在表单中。
这意味着屏幕 reader 用户启用了“表单模式”，这使得导航更容易等。因此他们不应该 自动加载下一页（因为这个不是预期的行为，预期的行为是可访问性的关键）。
相反，一旦选择了一个选项，您应该启用“下一步”按钮，该按钮也应该是表单的“提交”按钮。
因为输入现在应该在一个表单中，所以像按 Enter 提交这样的事情将是自动的，所以你不需要担心实施所有这些。
要考虑的形成行为
最后的考虑是为了符合 WCAG 用户应该能够返回并更改他们的答案，或者稍后编辑他们的答案，或者如果这是一个一旦提交就不能更改的多部分表单的一部分，他们应该在最终提交之前看到他们所有选择的摘要。
这是为了确保您满足guidance G98: Providing the ability for the user to review and correct answers before submitting and 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）。
最后，如果您这样做，就不需要 <label> 元素上的 aria-label。目前这是巨大的矫枉过正。
然而，对于认知障碍的人来说，能够看到“是的，我喜欢苹果”肯定是有益的，所以我建议在 space 允许的情况下将标签文本更改为该文本，稍微冗长一点屏幕 reader 值得权衡。
我没有测试下面的内容，但我想它会在 reader 屏幕上正确地宣布，并使用 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>
我正在开发一个投票应用程序，我正在努力让它尽可能易于访问。但我想不出最好的方法是什么。
我有一个问题，关于问题的解释和两个选项可供选择。我目前构建它的方式是这样的：
<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>
执行此类操作的首选方法是什么？
我突然想到使用单选按钮可能会更好？
这几乎可以肯定是一个单选按钮，因为对于屏幕 reader 用户来说，这将宣布有 2 个选项以及他们选择了哪个选项（如果有）。
如果这些只是按钮，他们将不知道有多少选项可供选择。
执行此类操作的首选方法是什么？
现在，由于单选按钮是 <input>，因此它们 必须 包含在表单中。
这意味着屏幕 reader 用户启用了“表单模式”，这使得导航更容易等。因此他们不应该 自动加载下一页（因为这个不是预期的行为，预期的行为是可访问性的关键）。
相反，一旦选择了一个选项，您应该启用“下一步”按钮，该按钮也应该是表单的“提交”按钮。
因为输入现在应该在一个表单中，所以像按 Enter 提交这样的事情将是自动的，所以你不需要担心实施所有这些。
要考虑的形成行为
最后的考虑是为了符合 WCAG 用户应该能够返回并更改他们的答案，或者稍后编辑他们的答案，或者如果这是一个一旦提交就不能更改的多部分表单的一部分，他们应该在最终提交之前看到他们所有选择的摘要。
这是为了确保您满足guidance G98: Providing the ability for the user to review and correct answers before submitting and 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）。
最后，如果您这样做，就不需要 <label> 元素上的 aria-label。目前这是巨大的矫枉过正。
然而，对于认知障碍的人来说，能够看到“是的，我喜欢苹果”肯定是有益的，所以我建议在 space 允许的情况下将标签文本更改为该文本，稍微冗长一点屏幕 reader 值得权衡。
我没有测试下面的内容，但我想它会在 reader 屏幕上正确地宣布，并使用 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>