html - 内容使用 aria-label 不好吗？

Question

我有一个案例，我想使用 aria-label 让屏幕阅读器访问(CSS 伪)内容。像这样:

[data-pseudo-content]::before {
  content: attr(data-pseudo-content);
}

<h1 aria-label="This is the title" data-pseudo-content="This is the title"></h1>

对内容使用 aria-label 而不是内容标签不好吗？另外，一些屏幕阅读器会阅读 This is the title 两次吗？

Answer 1

据我所知，aria-label 在某些情况下可用于更改或丰富元素的可访问名称(= 将通过语音或盲文输出给用户的文本表示)。aria-label 或 aria-labelledBy 对可访问名称的影响程度取决于节点包含的信息量及其类型或 Angular 色本身。

您的示例(在 Chrome 42 和 Firefox 36 中的 Windows 8.1 上与 NVDA 确认)对屏幕阅读器没有太大影响，因为它将遵循一组规则来确定可访问的名称。根据我的经验，如果其他条件( Angular 色)失败，屏幕阅读器将优先考虑包含的文本。如果该节点恰好为空且其他替代项不可用，则屏幕阅读器会将 aria-labelledBy 或 aria-describedBy 呈现为可访问的名称(如果提供)。否则它将被忽略。

幸运的是，ARIA 标准还涵盖了 :before 和 :after 作为确定可访问名称的算法的一部分。您可以在规范中阅读有关如何计算可访问名称的更多信息:http://www.w3.org/TR/wai-aria/roles#textalternativecomputation

aria-label 或 aria-labelledBy 什么时候用得好？我还在研究这个主题，所以我暂时不能提供 100% 肯定的答案。我知道，但是我知道它对 <input> 这样的元素有影响。 .当没有可用的可见标签时，您应该应用 aria-label 。知道每当 aria-labelledBy 被渲染时，它都将始终放在可访问名称中的第一位，这可能也很有用。这对表单字段很有用，因为 <label>如果给定了许多属性，则可能不会总是首先呈现。当您在元素上使用 contenteditable 属性时，aria-label/aria-labelledBy 也很有用，以确保屏幕阅读器可以访问内容。

这是一个 wiki，其中包含一些如何应用 aria-label/aria-labelledBy 的示例(在页面上搜索这些词):http://www.w3.org/WAI/GL/wiki/Category:ARIA_Techniques

请记住:弄清楚哪些有效，哪些无效的最佳方法是使用屏幕阅读器。我无法使用其他屏幕阅读器进行测试(除了 NVDA 和 iOs VoiceOver 一段时间)，因此在其他屏幕阅读器(如 JAWS)上的实现可能会有所不同。其他已知的屏幕阅读器是 Windows Eyes 和 Supernova(虽然我听说 SN 不适合用 .focus() 替换焦点，所以要小心)。在不同的浏览器中进行测试也可能是个好主意，因为可访问性 API 可能不同并提供略有不同的输出。