如何解决哪些 CSS 属性会影响可访问性树？
通过内容和展示的神圣分离，我认为 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 构建。
解决方法
重要的属性：
可见性
关于可见性的 CSS 由屏幕阅读器获取，因为假设您不希望人们与不可见的项目进行交互。否则，屏幕阅读器用户可以看到对“视力正常的用户”隐藏的整个部分，并为他们提供不同的体验。例如：
-
display: none- 普遍支持，如果元素具有此属性，则假定您不希望任何人看到它。 -
visibility: hidden- 相同，但一些非常老的屏幕阅读器可能仍会读取此内容 -
opacity: 0- 不如某些屏幕阅读器有效，但大多数屏幕阅读器可能仍会选择它。 -
visibility: collapse- 在表格上使用，不确定它的支持程度如何，但它应该被浏览器（因此也被可访问性树）解释为visibility: hidden
尺寸
如果某物的高度为 0px 或宽度为 0px，则它是不可见的。出于这个原因，应用了相同的规则，如果“视力正常的用户”看不到它，那么屏幕阅读器用户也不想看到它。
内容属性
这个在不同的浏览器和屏幕阅读器组合中确实不一致。您可能会在辅助功能树中看到它，但这并不意味着它会被屏幕阅读器使用。
从技术上讲，屏幕阅读器应该阅读内容。
现在，由于我们作为开发人员已经将其用于大量样式技巧，因此他们现在改进了 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 之类的东西，但我在规范中找不到任何说明它们是否应该影响可访问性树的内容，而且我的测试很有限！
最后我把“有视力的用户”放在引号中，因为很多屏幕阅读器用户都有合理的视力，有些用户有完美的视力并使用一个来帮助理解，在解释时比较“有视力的”和“无视力的”会更容易原则。
,值得注意的是，这些行为高度依赖于浏览器的实现。它们不会适用于每个浏览器/屏幕阅读器组合。屏幕阅读器的行为因产品而异。
-
background-image属性：当给定图像 URL 时，屏幕阅读器不可见，因为无法添加替代文本。 -
clip-path属性：可用于对视力正常的用户隐藏内容。不从辅助功能树中删除内容。屏幕阅读器和键盘焦点仍可访问该元素。 -
content属性：与伪元素选择器一起使用时，可用于将纯文本内容注入可访问性树中。 -
display属性：设置为none时从无障碍树中删除元素。它对有视力和无视力的访客隐藏。 -
display属性：当设置为flex、block或grid并应用于 {{1} } 元素，可能会强制将表解释为 layout table，而不是数据表。 -
<table>属性：设置为font-size时将对视力正常的访问者隐藏文本，但屏幕阅读器仍可访问。 -
0和/或height属性：当设置为width值时，对于有视力和无视力的访问者隐藏。当这些属性的值设置为 >0时，未显示的区域只会对视力正常的访问者隐藏——屏幕阅读器仍然可以访问它们。0和max-height的行为类似。 -
max-width属性：当设置为list-style时，可能会改变某些屏幕阅读器/浏览器组合如何宣布列表中的项目数量以及当前的访问者正在阅读的项目。 -
none属性：应谨慎使用，因为它会影响阅读顺序，阅读顺序必须遵循 DOM 顺序。 -
position属性：设置为opacity时可用于对视力正常的用户隐藏内容。不从辅助功能树中删除内容。屏幕阅读器和键盘焦点仍可访问该元素。 -
0属性：设置为overflow时可用于对视力正常的用户隐藏内容。不从辅助功能树中删除内容。屏幕阅读器和键盘焦点仍可访问该元素。 -
hidden属性：当设置为text-transform时，可能会导致某些辅助技术在一个字母上读取较短的单词，就好像它是首字母缩略词一样.
为了隐藏某些东西，但不是为了可访问性，您可以使用这些类。使用 1px 的宽度和高度以获得最佳效果。
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
