css - 哪些 CSS 属性会影响可访问性树？

Question

通过内容和呈现的神圣分离，我假设屏幕阅读器忽略了 CSS。这个天真的假设是错误的。

• 似乎有很多方法可以从 CSS 中隐藏内容，例如 display:none; 或 visibility:hidden; 甚至 width:0 ; height:0;，从无障碍树中移除隐藏元素。它们的内容不可聚焦，例如通过 Tab 键，屏幕阅读器不可见。

  [旁白:辅助功能通常需要隐藏元素，同时让屏幕阅读器可以访问它们:例如用于跳过链接、替代文本或仅在使用屏幕时才有意义的显示/隐藏机制。要真正做到这一点，您需要 CSS trickery ，例如将元素大幅移出屏幕。显然，这些是普遍认可的方法，由 WebAIM 使用和提倡和 MDN .例如，还可以查看 Google 搜索结果页面上跳过链接的 CSS。]

• 我还发现通过 content 属性添加的文本通常用于附加装饰字符 ::before 或 ::after 一个元素确实出现在可访问性树中(对我来说，Firefox 将其显示为“静态文本”)。

  [旁白:这通常是不受欢迎的，因为添加的文本包含无意义的字符，这些字符恰好呈现为视觉上漂亮的符号，并具有适当的字体。]

我的问题在标题中:哪些 CSS 属性(或值)会影响可访问性树？

当然，CSS，因为它控制着表现，对大多数视觉障碍​​(阅读障碍、近视、各种色盲……或任何人)都很重要。但没想到CSS对盲人用户也很重要。我认为只有 HTML 给出的语义内容对他们来说才是重要的，并且可访问性树完全是从 HTML 构建的。

Answer 1

重要的属性:

可见度

关于可见性的 CSS 由屏幕阅读器获取，因为假设您不希望人们在不可见的情况下与该元素进行交互。否则，对“有视力的用户”隐藏的整个部分将对屏幕阅读器用户可见，并为他们提供不同的体验。例如:

• display: none - 普遍支持，如果元素具有此属性，则假定您不希望任何人看到它。
• visibility: hidden - 相同，但一些非常老的屏幕阅读器可能仍会识别它
• opacity: 0 - 效果不如一些屏幕阅读器，但大多数人会忽略它。
• visibility: collapse - 在表格上使用，不确定它的支持程度如何，但它应该被浏览器解释为 visibility: hidden(因此可访问性树)

大小

如果某物的高度为 0 像素或宽度为 0 像素，则它是不可见的。出于这个原因，应用相同的规则，如果“有视力的用户”看不到它，那么屏幕阅读器用户也不想看到它。

内容属性

这个在不同的浏览器和屏幕阅读器组合中确实不一致。您可能会在辅助功能树中看到它，但这并不意味着它会被屏幕阅读器使用。

从技术上讲，屏幕阅读器应该阅读内容。

现在，因为我们作为开发人员已经将其用于大量样式技巧，所以他们现在改进了 content 属性以包含替代文本。 It only has 70% browser support at the moment屏幕阅读器支持会更差，但最终该问题会自行解决。

要在这方面领先一步，您需要做的就是在显示的内容和替代文本之间添加一条斜线:

.myClass:after{
    content: "❤" / "favourited item";
}

CSS 定位

从技术上讲，这有点相反，CSS 用于更改视觉设计(并使其在逻辑上有序)但 DOM 顺序不正确。

因此，虽然这不是一个影响可访问性树元素的 CSS，但它以我想我会提到的方式密切相关。

如果您使用 CSS 网格并更改网格项的位置，您最终可能会得到 DOM 顺序为 1、2、3 而视觉顺序为 2、1、3 的结果。

现在，如果逻辑阅读顺序是 2、1、3，屏幕阅读器用户可能会非常困惑，因为所有内容都以错误的顺序阅读。

同样的原则适用于 float: right 和 flex-direction: reverse。

负边距也会导致一些问题。例如，当试图在视觉上隐藏文本时要小心边距(当你提到屏幕阅读器的文本时)- some browsers actually tried to correct for negative margins并且意味着内容被乱序读取。

我建议阅读 this answer如果您正在寻找仅针对屏幕阅读器用户的视觉隐藏内容的当前最佳实践!

结论

我想就是这样，但可能还有其他我没有想到的。

本质上，CSS 在这里“泄漏”到 HTML 中的原因是因为 CSS 如何影响页面上的内容，而可访问性背后的一个核心思想是“为使用辅助技术的人提供尽可能相似的体验/信息”。

transform，backface-visibility: hidden; etc. do not seem to have any effect on screen readers 之类的东西令人惊讶, 但我在规范中找不到任何说明它们是否应该或不应该影响可访问性树的内容，而且我的测试是有限的!

最后我把“有视力的用户”用引号引起来，因为很多屏幕阅读器用户的视力是合理的，有些人有完美的视力并使用一个来帮助理解，在解释时比较“有视力的”和“没有视力的”更容易原则。