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

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属性，并使用id属性中的每个aria-labelledby属性值对于单选按钮。但对此的支持相当有限;此属性仅对一小部分用户有帮助。

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

Answer 2

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

Answer 3

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

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

  

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

     

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

     

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

     

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

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

Answer 4

1. 你做得很好。

2. 您可以输入值为hidden的输入。虽然我不知道你的眼睛看不到你的意思。

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

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