复选框的复合标签
Composite label for checkbox
我有这个页面：
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div>
<label class="Label">Options</label>
</div>
<div>
<input type="checkbox" id="checkbox1" aria-checked="false">
<label for="checkbox1">content 1</label>
</div>
</body>
</html>
看起来像这样：
当我使用 Microsoft 讲述人（检查我的网站可访问性）时，我希望用户知道“内容 1”与“选项”相关联
我尝试使用 aria-label:
<input type="checkbox" id="checkbox1" aria-checked="false" aria-label="options">
<label for="checkbox1">content 1</label>
但是旁白只读了“选项”，跳过了“内容 1”。
我在这里错过了什么？
我希望叙述者在勾选复选框时读出“选项”和“内容 1”。
我使用 VoiceOver，但希望这适用于您选择的 reader 屏幕。
如果我理解正确的话，您希望屏幕 readers 宣布“选项”和“内容 1”，或者以某种方式让屏幕 readers 知道两者是相关的。
选项 1：使用原生语义
可能你最好的选择是依赖语义 HTML:
<html>
<body>
<h1>Form</h1>
<fieldset>
<legend>Options</legend>
<input type="checkbox" name="opts" id="cb1">
<label for="cb1">Content 1</label>
</fieldset>
</body>
</html>
注意：使用一些 CSS 可以删除字段集的默认浏览器样式。
下面是画外音宣布复选框的方式：
选项 2：从页面上的其他元素组成标签
另一种选择是使用 aria-labelledby，它采用 html id 的列表，屏幕 readers 将与相应的 html 元素组成一个句子：
<html>
<body>
<h1>Form</h1>
<div id="group">Options</div>
<div>
<input type="checkbox" name="opts" id="cb1" aria-labelledby="group label1">
<label for="cb1" id="label1">Content 1</label>
</div>
</body>
</html>
旁白是这样宣布的：
附录：不要将 aria-checked 与本机复选框一起使用
如果您依赖本机复选框并且不打算以编程方式控制它们，那么您没有理由使用 aria-checked。让浏览器为您完成工作； screen reader 用户会感谢你 ;)
这是一个作者想要使用 checked="checked" 预选复选框但留下了 aria-checked="false" 属性的示例。
<html>
<body>
<input type="checkbox" id="cb1" checked="checked" aria-checked="false">
<label for="cb1">content 1</label>
</body>
</html>
下面是画外音宣布复选框的方式：
如您所见，屏幕 reader 很困惑，认为复选框未选中。 如果屏幕 reader 用户想要选中它，他们实际上会取消选中该框！
您的错误是 aria-label 替换了任何其他标签关联 而不是完成它。
这就是为什么屏幕阅读器只说“内容 1”而不说“选项”的原因。
更一般地说，aria-labelledby 优先于 aria-label，后者本身优先于与 <label> 的关联。
三者永远不能结合。
如果可以，最好是使用正确的关联<label>。
正如其他答案已经说过的，使用 <fieldset> 和 <legend> 进行分组。
如果要有效宣告的标签来自于几个不同的元素，又没有分组的概念，那么可以使用aria-labelledby。
Aria-labelledby 允许您指定多个 id，它们将被连接起来为屏幕阅读器制作一个标签。
ARIA 的第一条规则是如果你真的不需要，不要使用它，所以在使用 ARIA 之前尽可能多地使用 <label> 和 <legend>。
我有这个页面：
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div>
<label class="Label">Options</label>
</div>
<div>
<input type="checkbox" id="checkbox1" aria-checked="false">
<label for="checkbox1">content 1</label>
</div>
</body>
</html>
看起来像这样：
当我使用 Microsoft 讲述人（检查我的网站可访问性）时，我希望用户知道“内容 1”与“选项”相关联 我尝试使用 aria-label:
<input type="checkbox" id="checkbox1" aria-checked="false" aria-label="options">
<label for="checkbox1">content 1</label>
但是旁白只读了“选项”，跳过了“内容 1”。 我在这里错过了什么？ 我希望叙述者在勾选复选框时读出“选项”和“内容 1”。
我使用 VoiceOver，但希望这适用于您选择的 reader 屏幕。
如果我理解正确的话，您希望屏幕 readers 宣布“选项”和“内容 1”，或者以某种方式让屏幕 readers 知道两者是相关的。
选项 1：使用原生语义
可能你最好的选择是依赖语义 HTML:
<html>
<body>
<h1>Form</h1>
<fieldset>
<legend>Options</legend>
<input type="checkbox" name="opts" id="cb1">
<label for="cb1">Content 1</label>
</fieldset>
</body>
</html>
注意：使用一些 CSS 可以删除字段集的默认浏览器样式。
下面是画外音宣布复选框的方式：
选项 2：从页面上的其他元素组成标签
另一种选择是使用 aria-labelledby，它采用 html id 的列表，屏幕 readers 将与相应的 html 元素组成一个句子：
<html>
<body>
<h1>Form</h1>
<div id="group">Options</div>
<div>
<input type="checkbox" name="opts" id="cb1" aria-labelledby="group label1">
<label for="cb1" id="label1">Content 1</label>
</div>
</body>
</html>
旁白是这样宣布的：
附录：不要将 aria-checked 与本机复选框一起使用
如果您依赖本机复选框并且不打算以编程方式控制它们，那么您没有理由使用 aria-checked。让浏览器为您完成工作； screen reader 用户会感谢你 ;)
这是一个作者想要使用 checked="checked" 预选复选框但留下了 aria-checked="false" 属性的示例。
<html>
<body>
<input type="checkbox" id="cb1" checked="checked" aria-checked="false">
<label for="cb1">content 1</label>
</body>
</html>
下面是画外音宣布复选框的方式：
如您所见，屏幕 reader 很困惑，认为复选框未选中。 如果屏幕 reader 用户想要选中它，他们实际上会取消选中该框！
您的错误是 aria-label 替换了任何其他标签关联 而不是完成它。 这就是为什么屏幕阅读器只说“内容 1”而不说“选项”的原因。
更一般地说，aria-labelledby 优先于 aria-label，后者本身优先于与 <label> 的关联。
三者永远不能结合。
如果可以，最好是使用正确的关联<label>。
正如其他答案已经说过的，使用 <fieldset> 和 <legend> 进行分组。
如果要有效宣告的标签来自于几个不同的元素，又没有分组的概念，那么可以使用aria-labelledby。
Aria-labelledby 允许您指定多个 id，它们将被连接起来为屏幕阅读器制作一个标签。
ARIA 的第一条规则是如果你真的不需要，不要使用它，所以在使用 ARIA 之前尽可能多地使用 <label> 和 <legend>。