无标签的辅助功能和单选按钮

Question

所以我决定最好让我的小调查表符合生成器可访问性。 对于单个多项选择题，这样做没有问题，无论是使用单选按钮还是复选框，因为每个多项选择本身就是标签。 但是当一个或一组问题都有相同的多个选择时呢？

例如：

我有这个代码：

<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.-如果没有，是设计决策时间，你有这种类型的问题，或者你有很好的可访问性，但不是两者兼而有之？

Answer 1

1. 不，它无法访问。 具有空内容的label元素是无用的或更糟的。 当用户专注于控件时，要求控件的标签并且用户代理按预期支持label元素，这比无用更糟。 然后它将宣布一个空字符串作为标签，增加了用户的困惑。 （辅助功能检查程序执行的测试非常有限。大多数辅助功能问题都无法以编程方式进行检查。）

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

3. 这是一个设计决策，您主要需要决定控件的类型和整体设置。 如果使用select元素而不是每组单选按钮，问题就会消失。 对于那些认为屏幕表格需要模仿纸质表格或其他原因的人来说，这可能是不可接受的。 如果您改为使用文本输入字段，期望用户输入S，M或L，则问题会改变其类型。这将导致潜在的可访问性问题，即用户可能不记得替代方案是什么，即使他们在表格的开头。

Answer 2

您的标签没有内容，因此没有视力的用户将不知道输入代表什么。 我将小，中，大文本放在相关标签中，然后在视觉上隐藏标签。 使用屏幕外或剪辑技术，因此屏幕阅读器软件会选择它，但有视力的用户不必为每个问题重复查看它。

Answer 3

在没有收回我接受的答案的情况下，我正在添加一个答案，因为我已经发现了更完整地回答我的问题的其他信息。 问题是在无线电按钮没有自己的标签的情况下，在可访问性的情况下该怎么做。 如何添加视觉障碍阅读器的标签，但肉眼无法看到？ 合理地说，答案是使用CSS来隐藏后者的标签而不是前者。

事实证明，w3.org在其网站上有一个名为WCAG（Web内容可访问性指南）的部分，在那里我找到了技术H65，“当标签元素无法使用时，使用title属性来识别表单控件。” 它特别提到了一个调查表，它建议使用title属性。

示例4：表单控件的数据表

表单控件的数据表需要将每个控件与该单元格的列和行标题相关联。 如果没有标题（或屏幕外的LABEL），非可视用户很难在通过表格标签时使用他们的辅助技术暂停和查询相应的行/列标题值。

例如，调查表在第一行中有四个列标题：问题，同意，未定，不同意。 每个后续行包含一个问题，每个单元格中的单选按钮对应于三列中的答案选项。 每个单选按钮的title属性是答案选项（列标题）和问题文本（行标题）的连接，连字符或冒号作为分隔符。

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

好的，我希望这有助于某人。 我已经在StackOverflow上回答了很多问题，不是因为我发布了它们，而是因为其他一些人有同样的问题！

Answer 4

1. 你做得很好。

2. 您可以创建值为hidden的输入。 虽然我不知道你的意思是什么，没有被眼睛看到。

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

这可以由服务器看到，但不是用户。