如何出于可访问性原因忽略装饰文本

Question

我试图找出一种忽略装饰性文字的方法，类似于使用空alt忽略装饰性图像。

示例：

<!-- This is decorative image -->
<img src="example.jpg" alt="">

<!-- This should be decorative text or element -->
<div>
   Some decorative text line
   <div>
      Another decorative text line
   </div>
</div>

CSS没用。

aria-hidden是 - “表示该元素及其所有后代对于作者实施的任何用户都不可见或不可察觉” - 所以它不是选项。

Answer 1

这样做的正确方法是使用aria-hidden="true"，句号。

我同意你引用W3C Spec for Aria-Hidden阅读：

  

任何 用户都无法看到或感知到......

但如果你继续阅读，你会看到：

  

作者 MAY ，谨慎使用aria-hidden来隐藏来自辅助技术的明显呈现内容仅如果隐藏此内容的行为旨在改善体验通过删除冗余或无关内容来辅助技术的用户。使用aria-hidden隐藏屏幕阅读器中可见内容的作者必须确保将相同或等同的含义和功能暴露给辅助技术。

另外，您可以选择的其他路线是将文本内容转换为图像，然后使用空白alt属性来指示它是装饰图像。根据您的具体情况，这可能会或可能不会更好。

Answer 2

文档中最重要的部分是解释

  

某些辅助技术直接通过DOM访问WAI-ARIA信息，而不是通过浏览器支持的平台可访问性。无论用于隐藏它的机制如何，作者必须在未显示的内容上设置aria-hidden="true"。这允许辅助技术或用户代理正确地跳过文档中的隐藏元素。

设置aria-hidden="true"不会在标准浏览器上隐藏屏幕上的元素。这是务实的解决方案。

问题在于你不想做的事情永远无法访问。

只要文字在屏幕上可见，视力不足的具有部分视觉的人就会想要阅读他能够感知为文本的内容。如果你从可访问的树中隐藏这个可感知的文本，这个人将无法实现其他具有完全视觉的人可以做到的事情。