使用aria标签作为内容是否不好？

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而不是对内容使用aria-label是否不好？ 另外，某些屏幕阅读器会两次读取This is the title吗？

Answer 1

据我所知，可以在某些情况下使用aria标签来更改或丰富元素的可访问名称（=将通过语音或盲文输出给用户的文本表示形式）。 aria-label或aria-labeledBy对可访问名称的影响程度取决于节点包含多少信息及其节点的类型或角色本身。

您的示例（已在Chrome 42和Firefox 36的Windows 8.1上通过NVDA确认）对于屏幕阅读器没有太大的不同，因为它将遵循一系列规则来确定可访问的名称。 以我的经验，如果其他条件（角色）失败，屏幕阅读器将优先考虑所包含的文本。 如果该节点碰巧是空的，并且其他替代方法不可用，则屏幕阅读器将提供aria-labelledBy或aria- describeBy作为可访问名称（如果提供）。 否则它将被忽略。

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

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

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

请记住：找出有效的方法和无效的最佳方法是通过使用屏幕阅读器。 我暂时无法使用其他屏幕阅读器（除了NVDA和iOs VoiceOver进行测试），因此在其他屏幕阅读器（如JAWS）上的实现可能有所不同。 其他已知的屏幕阅读器是Windows Eyes和Supernova（尽管我听说SN用.focus（）代替focus不好，所以要小心）。 在不同的浏览器中进行测试可能也是一个好主意，因为可访问性API可能会有所不同，并且输出会略有不同。