Question

我有以下格式的一组单选按钮。我正在使用图例和字段集来对单选按钮进行分组并为其设置标签。我正在设置要隐藏的输入的样式，然后将标签设置为看起来更像按钮的样式。

我的问题：如果我想为其中一个按钮添加更多上下文，那么最方便访问的方法是什么？我当时正在考虑将title属性添加到“ Vote'？”标签上如果您想弃权”。我不介意出现在工具提示中，因此title似乎可以正常工作，我不确定屏幕阅读器如何处理它。

<fieldset>
  <legend>Votes</legend>
  <label>
    <input type="radio" class="hidden" value="0" /> ?
  </label>
  <label>
    <input type="radio" class="hidden" value="1" /> 1
  </label>
  <label>
    <input type="radio" class="hidden" value="2" /> 2
  </label>
  <label>
    <input type="radio" class="hidden" value="3" /> 3
  </label>
</fieldset>

Answer 1

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

<fieldset>
  <legend>Votes</legend>
  <label title="0">
    <input name="r1" type="radio" class="hidden" value="0" /> ?
  </label>
  <label title="1">
    <input name="r1" type="radio" class="hidden" value="1" /> 1
  </label>
  <label title="2">
    <input name="r1" type="radio" class="hidden" value="2" /> 2
  </label>
  <label title="3">
    <input name="r1" type="radio" class="hidden" value="3" /> 3
  </label>
</fieldset>

Answer 2

按照一种常见的做法，类似于bootstrap使用其仅用于屏幕阅读器的帮助程序（仅.sr）的方法，您可以使用CSS来偏移标签内的文本，以使可视用户隐藏该文本，并且仅对可视用户可见。屏幕阅读器。

使用标签上的title属性，您将依赖于特定用户对标签title属性的AT用法。

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

https://getbootstrap.com/docs/3.3/css/#helper-classes-screen-readers

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

Answer 3

某些屏幕阅读器+浏览器组合不支持“隐式”标签（嵌套在标签中的输入字段），因为它们未将标签与其各自的（嵌套的）输入元素相关联。那是他们的错误，但是您应该避免。因此，我要做的第一件事是将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>

注意，您的原始代码没有每个的name属性，因此单选按钮没有以编程方式组合在一起。我将name="myradio"添加到了每个。我还为每个添加了一个ID，现在每个都通过其for属性指向每个。

向每个标签添加其他文本的一种可能方法是使用屏幕阅读器仍然可以使用的视觉隐藏文本。 @jcruz提到了这，这是一种可能性。这是很常见的技术。

另一种解决方案（可能比隐藏文本更简单）是在每个上具有一个aria-label属性。 aria-label不可见。它仅用于屏幕阅读器。 aria-label将覆盖中的所有内容。但是，当同时具有可见文本和aria-label时，请注意，aria-label必须包含与可视标签中相同的文本，并且还可以包含其他文本。这是WCAG 2.1的新指南，称为“ 2.5.3 Label in Name”。因此，您可以在视觉上以“ 2”作为，但是aria-label可以是“ 投票两次以使候选人上任”。在这种情况下，标签中是否包含“ 2”或“ 2”都无关紧要。语音界面用户可以说“单击两次”，然后将选择正确的单选按钮。

（请注意，使用盲文设备会有所不同。一个会显示单词“两个”，另一个会显示数字“ 2”，但是在这种情况下，也可能没关系。）

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

注意，您可能有一个特殊情况，我没有使用语音识别软件进行测试。如上所述，aria-label需要包含标签中的可见文本。有了第一台收音机，这是一个问号。我不确定语音识别是否需要“点击问号”，以及是否需要“？” aria标签中的内容将匹配。

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

3 个答案: