哪些 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 之类的东西，但我在规范中找不到任何说明它们是否应该或不应该影响可访问性树的内容，而且我的测试受到限制！

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

Answer 2

值得注意的是，这些行为高度依赖于浏览器的实现。并非每个浏览器/屏幕阅读器组合都适用。屏幕阅读器的行为可能因产品而异。

---

• background-image 属性：当给定的图片 URL 对屏幕阅读器不可见时，因为无法添加替代文本。

• clip-path 属性：可用于向有视力的用户隐藏内容。不从可访问性树中删除内容。屏幕阅读器和键盘焦点仍然可以访问该元素。

• content 属性：与伪元素选择器一起使用时，可用于将纯文本内容注入可访问性树。

• display 属性：当设置为 none 时，会从可访问性树中删除元素。它对有视力和无视力的游客是隐藏的。

• display 属性：当设置为flex、block 或grid 并应用于<table> 元素时，可能会强制将表格解释为@ 987654321@，而不是数据表。

• font-size 属性：当设置为 0 时，将对有视力的访问者隐藏文本，但屏幕阅读器仍然可以访问。

• height 和/或width 属性：当设置为0 的值时，对有视力和无视力的访问者是隐藏的。当这些属性的值设置为 > 0 时，未显示的区域只会对有视力的访问者隐藏——屏幕阅读器仍然可以访问它们。 max-height 和 max-width 的行为相似。

• list-style 属性：当设置为 none 时，可能会更改某些屏幕阅读器/浏览器组合宣布列表中项目数量以及访问者正在阅读的当前项目的方式。

• position 属性：应谨慎使用，因为它会影响阅读顺序，阅读顺序必须遵循 DOM 顺序。

• opacity 属性：当设置为 0 时，可用于向有视力的用户隐藏内容。不从可访问性树中删除内容。屏幕阅读器和键盘焦点仍然可以访问该元素。

• overflow 属性：当设置为 hidden 时，可用于向有视力的用户隐藏内容。不从可访问性树中删除内容。屏幕阅读器和键盘焦点仍然可以访问该元素。

• text-transform 属性：当设置为 uppercase 时，可能会导致某些辅助技术以一种字母的形式读取较短的单词，就好像它是首字母缩略词一样。

Answer 3

要隐藏某些内容，但不是为了便于访问，您可以使用这些类。使用 1px 的宽度和高度以获得最佳效果。

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

示例如何在您的 html 中使用它

<nav>
  <ul
    <li class="active">Home <span class="sr-only">is active item</span></li>
    <li>Products</li>
    <li>Contact</li>
  </ul>
</nav>