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

由于内容和表现的神圣分离，我认为CSS被屏幕阅读器忽略了。这种天真的假设是错误的

• 似乎有很多方法可以从CSS中隐藏内容，例如

  display:none或<代码>可见性：隐藏或甚至
  宽度：0；身高：0，从辅助功能树中删除隐藏元素。其内容不可聚焦（例如通过tab键），且屏幕阅读器不可见
  
  [
  旁白：可访问性通常要求隐藏元素，同时让屏幕阅读器可以访问它们：例如，对于跳过链接、替代文本或仅在使用屏幕时才有意义的显示/隐藏机制。要真正做到这一点，您需要，例如将元素从屏幕上大幅度移动。显然，这些通常是agreed方法，由and使用和提倡。例如，还可以查看Google搜索结果页面上跳过链接的CSS。
  ]
  
  

• 我还发现，通过

  content

  属性添加的文本（通常用于附加装饰性字符

  ：：在
  之前或
  ：：在
  元素之后）确实出现在可访问性树中（对我来说，Firefox将其显示为“静态文本”）
  
  [
  旁白：这通常是不需要的，因为添加的文本由无意义的字符组成，这些字符恰好呈现为视觉上漂亮的符号，并具有足够的字体。
  ]
  
  

我的问题在标题中：哪些CSS属性（或值）影响可访问性树？

---

当然，CSS，因为它控制着表达，对大多数视觉障碍（诵读困难、近视、各种色盲……或者对任何人来说都很重要）。但我没想到CSS对盲人用户也很重要。我认为只有HTML提供的语义内容对他们很重要，可访问性树完全是从HTML构建的。

要隐藏某些内容，但不是为了可访问性，可以使用这些类。使用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>

重要的财产：

可见度
屏幕阅读器会获取有关可见性的CSS，因为如果该项目不可见，则假定您不希望人们与该项目交互。否则，对“有眼光的用户”隐藏的整个部分将对屏幕阅读器用户可见，并为他们提供不同的体验。例如：


display:none
-通用支持，如果元素具有此属性，则假定您不希望任何人看到它
visibility:hidden
-相同，但一些真正较老的屏幕阅读器可能仍然会注意到这一点
opacity:0
-效果不如某些屏幕阅读器可能仍会看到这一点，但大多数会忽略
可见性：折叠
-在表上使用，不确定它的支持程度，但浏览器（以及辅助功能树）应将其解释为
可见性：隐藏

大小
如果某物是0px高或0px宽，则不可见。出于这个原因，同样的规则适用于如果“有视力的用户”看不到它，那么屏幕阅读器用户也不想看到它

内容属性
这一点在不同的浏览器和屏幕阅读器组合中是不一致的。您可以在辅助功能树中看到它，但这并不意味着屏幕阅读器将使用它

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

现在，因为我们作为开发人员已经使用了大量的样式技巧，所以他们现在改进了
content
属性，使其具有alt text。屏幕阅读器支持会更差，但最终问题会自行解决

要在这方面领先于曲线，您只需在显示的内容和alt文本之间添加一条斜线：

.myClass:after{
内容：“❤" / "优惠项目”；
}

CSS定位
从技术上讲，这是一种相反的情况，CSS用于更改视觉设计（并使其具有逻辑顺序），但DOM顺序是不正确的

因此，尽管这一个并不是一个影响可访问性树项目的CSS，但它在某种程度上是密切相关的，我想我会提到它

如果使用CSS网格并更改网格项的位置，则最终可能会导致DOM顺序为1,2,3，而视觉顺序为2,1,3

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

同样的原则也适用于
浮动：右
和
弹性方向：反向

负利润率也可能导致一些问题。例如，当试图在视觉上隐藏文本时（当您提到只有屏幕阅读器的文本时），请注意页边空白，这意味着读取内容的顺序错误

如果您正在寻找当前仅为屏幕阅读器用户在视觉上隐藏东西的最佳实践，我建议您阅读

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

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

令人惊讶的是，
transform
，但我在规范中找不到任何说明它们是否应该影响可访问性树的内容，而且我的测试非常有限

最后，我引用了“有视力的用户”，因为很多屏幕阅读器用户都有合理的视力，有些人有完美的视力，并使用视力帮助理解，在解释原理时比较“有视力的”和“无视力的”更容易。
值得注意的是，这些行为高度依赖于浏览器的实现。Th