我希望有人能使我对伪类的确切解决方法有所启发，并content对屏幕阅读器产生负面影响。
例如，如果我的SASS文件中有这段代码：
[bag-total]:before{
content: attr(bag-total);
}
我的目的是让屏幕阅读器读取他将要购买的属性值或用户购物车中的总量。
现在的问题是屏幕阅读器无法读取购物车中的商品总数。
答案 0 :(得分：0)
accessible name中定义的:before和:after伪元素用于“ https://www.w3.org/TR/accname-1.1/#step2”计算中。具体来说，步骤2.F.ii
该过程看起来很复杂，但是如果您想到简单的情况（例如按钮），则可访问名称实质上是按钮的文本标签。但是，显示“更多信息”的按钮可能对有视力的用户有意义，因为他们可以看到按钮周围的上下文，但是对于使用屏幕阅读软件的视障用户，“更多信息”可能是不够的。可以使用ARIA attributes向按钮标签添加更多上下文。附加上下文不是可视显示的，而是用于“可访问名称”计算中的，这就是为什么该过程看起来很复杂的原因。
如果您的按钮仅显示一个图标，也是如此。没有可见的文本，但是您需要某种方式来描述按钮的图标，这样“可访问的名称”才有意义。
如果您使用:before和:after伪元素向您的元素添加更多上下文，则该其他上下文需要包含在“可访问名称”计算中。
现在，所有这些，我不确定您要寻找哪种“修复”。您并未真正说明要解决的问题。
答案 1 :(得分：0)
看起来CSS和用户代理规范支持您在此处尝试执行的操作，但是不一致的浏览器支持最终可能会阻止它正常运行。
我在Windows上使用多个浏览器使用NVDA测试了您的方法，而Internet Explorer是唯一遇到困难的方法。 IE仍然具有相当大的用户基础，因此，如果可以的话，值得支持。
不幸的是，除非您想使用JavaScript或服务器端脚本语言，否则我看不到解决您问题的好方法。这两种方法都会将内容添加到DOM，而CSS则不会。
此页面上有一些有关伪元素可访问性的良好信息，这些信息似乎可以证实我在自己的测试中看到的内容。 https://tink.uk/accessibility-support-for-css-generated-content/