无标签的可访问性和单选按钮

4

所以我决定最好让我的小调查表单生成器符合无障碍要求。对于单个多选题目,无论是使用单选按钮还是复选框,都没有问题,因为每个多选项本身就是标签。但是当一系列问题的数组或面板都有相同的多个选择时怎么办呢?

例如:

contrived survey question examle

我有这段代码:

<tr><td></td><td>Small</td><td>Medium</td><td>Large</td></tr>

<tr><td>3. What size Coke do you prefer?</td>
<td><label for="Q3.1"></label><input id="Q3.1" type="radio" name="responses[0]" value="1"></td>
<td><label for="Q3.2"></label><input id="Q3.2" type="radio" name="responses[0]" value="2"></td>
<td><label for="Q3.3"></label><input id="Q3.3" type="radio" name="responses[0]" value="3"></td></tr>

<tr><td>4. What size popcorn do you prefer?</td>
<td><label for="Q4.1"></label><input id="Q4.1" type="radio" name="responses[1]" value="1"></td>
<td><label for="Q4.2"></label><input id="Q4.2" type="radio" name="responses[1]" value="2"></td>
<td><label for="Q4.3"></label><input id="Q4.3" type="radio" name="responses[1]" value="3"></td></tr>

我的问题:

1.- W3.org验证器将代码标记为有效,但它是否真正“可访问”?一个能力很强的网页阅读器是否会正确地将其解释给视觉受损用户?

2.- 如果不行,有没有一种方法可以拥有一种隐藏标签,阅读器可以阅读但对眼睛不可见?

3.- 如果不行,是否需要进行设计决策,要么出现这种类型的问题,要么拥有良好的可访问性,但两者不能兼得?

4个回答

3
  1. 不,这样不可访问。一个没有内容的

  2. 有几种方法可以提供“隐藏的标签”,但这只涵盖了真实标签的某些目的。例如,由于认知障碍,视力正常的用户可能需要知道单选按钮的含义。另一种方法是使用aria-labelledby属性。在这种情况下,您需要为包含文本“Small”、“Medium”和“Large”的元素指定id属性,并将每个id属性值在单选按钮的aria-labelledby属性中使用。但对此的支持相当有限;这个属性只能帮助一小部分用户。

  3. 这是一个设计决策,你需要主要考虑控件类型和整体设置。如果您使用


3

我在不撤回我接受的答案的情况下,添加了一个答案,因为我后来发现了更多的信息,更完整地回答了我的问题。问题是,在无障碍性的情况下,如果单选按钮没有各自的标签,该怎么办?如何添加标签,盲人阅读器可以看到但未经辅助的人眼睛看不到?合理的答案是使用CSS将标签从后者隐藏而不是前者。

事实证明,w3.org网站上有一个名为WCAG(Web内容无障碍性指南)的部分,在那里我找到了技术H65,“在无法使用label元素时使用title属性标识表单控件”。它特别提到了一个调查表格,并推荐使用title属性。

示例4:表单控件的数据表格

表单控件的数据表格需要将每个控件与该单元格的列和行标题相关联。如果没有标题(或屏幕外LABEL),则非视觉用户在通过表单时使用辅助技术暂停并查询相应的行/列标题值会很困难。

例如,调查表单的第一行有四个列标题:问题、同意、未决定、不同意。每个后续行包含一个问题和一个单选按钮,对应于三列中的答案选择。 每个单选按钮的title属性都是答案选择(列标题)和问题文本(行标题)的连结,用连字符或冒号分隔。

http://www.w3.org/TR/WCAG20-TECHS/H65.html

好的,我希望这能帮助到某些人。我在StackOverflow上得到了很多解答,不是因为我发了问题,而是因为其他人有同样的问题!


2
您的标签没有内容,因此视觉障碍用户将不知道输入代表什么。我建议在相关标签中放置“小号”、“中号”、“大号”文本,然后将其在视觉上隐藏。使用离屏或剪切技术,这样屏幕阅读器软件可以捕获到它,但视觉用户不必为每个问题重复看到它。

1
这是一个讨论如何隐藏文本但仍使其对屏幕阅读器软件可用的链接:http://webaim.org/techniques/css/invisiblecontent/ - stringy
谢谢。你的答案没有深入解释,但是你提供的链接非常有价值。这就是我需要的一切。 - RobertSF

-2
  1. 你所做的很好。

  2. 你可以创建一个值为隐藏的输入框。虽然我不知道你所说的“不被眼睛看到”是什么意思。

    <input type="hidden" value="whatever">

这个可以被服务器看到,但用户看不到。


对于任何未来的读者,这个回答事实上是错误的,因为他们所说的并不正确。对于回答者 - 对于问题的#2部分,原帖提问者询问的是关于可访问性和屏幕阅读器的问题,例如,一个盲人用户如何浏览单选按钮 - 如何让这些盲人用户了解这些单选按钮的功能?这就是问题的意思。 :) - maxshuty

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接