Html 向收音机或标签添加更多信息的正确标记是什么？

我有一套单选按钮，格式如下。我正在使用图例和字段集对单选按钮进行分组，并为该设置添加标签。我将输入设置为隐藏，然后将标签设置为更像按钮

我的问题: 如果我想为其中一个按钮添加更多上下文，那么最方便访问的方法是什么？我在考虑在“投票”的标签上加上一个标题属性？“如果你想弃权”。我不介意它出现在工具提示中，因此

title

似乎工作正常，我只是不确定屏幕阅读器如何处理它

投票
?
1.
2.
3.

您可以按如下方式进行编辑：

投票
?
1.
2.
3.

遵循一种常见做法，类似于bootstrap如何使用其仅屏幕阅读器辅助工具（.sr only），您可以使用CSS偏移标签中的文本，使其对视觉用户隐藏，并且仅对屏幕阅读器可见

使用标签上的标题属性时，您将依赖于特定用户对标签标题属性的使用

<label for="ir1">
    <input id="ir1" name="r1" type="radio" class="hidden" value="0" /> 
    visual text
    <span class="sr-only">additional screen reader only text</span>
</label>

---

某些屏幕阅读器+浏览器组合不支持“隐式”标签（嵌套在标签中的输入字段），因为它们不将标签与其各自的（嵌套的）输入元素相关联。这是他们这边的一个bug，但是你应该尽量避免。因此，我要做的第一件事是将

for

属性添加到所有元素中

<fieldset>
  <legend>Votes</legend>
  <label for="r1">
    <input name="myradio" id="r1" type="radio" class="hidden" value="0" /> ?
  </label>
  <label for="r2">
    <input name="myradio" id="r2" type="radio" class="hidden" value="1" /> 1
  </label>
  <label for="r3">
    <input name="myradio" id="r3" type="radio" class="hidden" value="2" /> 2
  </label>
  <label for="r4">
    <input name="myradio" id="r4" type="radio" class="hidden" value="3" /> 3
  </label>
</fieldset>

---

注意您可能有一个我没有用语音识别软件测试的特殊情况。如上所述，

aria标签

需要包含标签中的可见文本。你的第一台收音机是个问号。我不确定语音识别是否需要“单击问号”，以及aria标签中的“？”是否匹配。

您所说的“为其中一个按钮添加更多上下文”是什么意思？您只是想在按钮旁边获得更多信息吗？带有问号的按钮可能会有一些额外的文本，如“如果您觉得此主题需要讨论，请选择此选项”

<fieldset>
  <legend>Votes</legend>
  <label for="r1">
    <input name="myradio" id="r1" type="radio" class="hidden" value="0" /> ?
  </label>
  <label for="r2">
    <input name="myradio" id="r2" type="radio" class="hidden" value="1" /> 1
  </label>
  <label for="r3">
    <input name="myradio" id="r3" type="radio" class="hidden" value="2" /> 2
  </label>
  <label for="r4">
    <input name="myradio" id="r4" type="radio" class="hidden" value="3" /> 3
  </label>
</fieldset>

<fieldset>
  <legend>Votes</legend>
  <label for="r1">
    <input name="myradio" id="r1" type="radio" aria-label="Not sure who to vote for?  Abstain" class="hidden" value="0" /> ?
  </label>
  <label for="r2">
    <input name="myradio" id="r2" type="radio" aria-label="Vote one time to be honest" class="hidden" value="1" /> 1
  </label>
  <label for="r3">
    <input name="myradio" id="r3" type="radio" aria-label="Vote two times to get your candidate in office" class="hidden" value="2" /> 2
  </label>
  <label for="r4">
    <input name="myradio" id="r4" type="radio" aria-label="Vote three times if you're really passionate" class="hidden" value="3" /> 3
  </label>
</fieldset>