如何让屏幕reader读取属性的值？
How to tell the screen reader to read the value of the attribute?
我希望有人能告诉我伪 类 和 content 对屏幕 readers 产生负面影响的确切修复方法。
例如，如果我的 SASS 文件中有这段代码：
[bag-total]:before{
content: attr(bag-total);
}
我的目的是让屏幕 reader 读取他将要购买的用户购物车中的属性值或总金额。
现在的问题是屏幕 reader 没有读取购物车中的商品总数。
在accessible name" computation as defined here - https://www.w3.org/TR/accname-1.1/#step2中使用了:before和:after伪元素。具体来说，步骤2.F.ii
这个过程看起来很复杂，但如果你想到简单的情况，比如一个按钮，可访问的名称本质上就是按钮的文本标签。但是，显示 "read more" 的按钮可能对有视力的用户有意义，因为他们可以看到按钮周围的上下文，但对于使用屏幕阅读软件的视障用户来说，"read more" 可能不够.可以使用 ARIA attributes 向按钮标签添加更多上下文。额外的上下文不会在视觉上显示，但会在 "accessible name" 计算中使用，这就是该过程看起来很复杂的原因。
如果您的按钮只显示一个图标，情况也是如此。没有可见的文本，但您需要某种方式来描述按钮的图标，以便 "accessible name" 有意义。
如果您使用 :before 和 :after 伪元素向您的元素添加更多上下文，则该额外上下文需要包含在 "accessible name" 计算中。
现在，综上所述，我不确定您要找的是哪种 "fix"。您没有真正说明您要解决的问题。
看起来 CSS 和用户代理规范支持您在这里尝试做的事情，但不一致的浏览器支持最终可能会阻止它正常工作。
我在 Windows 上使用 NVDA 和多个浏览器测试了您的方法，Internet Explorer 是唯一有困难的浏览器。 IE 仍然拥有相当大的用户群，因此如果可以的话，它可能值得支持。
不幸的是，除非您想使用 JavaScript 或服务器端脚本语言，否则我找不到解决您问题的好方法。这两种方法都将内容添加到 DOM，而 CSS 不会。
此页面提供了一些关于伪元素可访问性的有用信息，这些信息似乎证实了我在自己的测试中看到的内容。
https://tink.uk/accessibility-support-for-css-generated-content/
我希望有人能告诉我伪 类 和 content 对屏幕 readers 产生负面影响的确切修复方法。
例如，如果我的 SASS 文件中有这段代码：
[bag-total]:before{
content: attr(bag-total);
}
我的目的是让屏幕 reader 读取他将要购买的用户购物车中的属性值或总金额。
现在的问题是屏幕 reader 没有读取购物车中的商品总数。
在accessible name" computation as defined here - https://www.w3.org/TR/accname-1.1/#step2中使用了:before和:after伪元素。具体来说，步骤2.F.ii
这个过程看起来很复杂，但如果你想到简单的情况，比如一个按钮，可访问的名称本质上就是按钮的文本标签。但是，显示 "read more" 的按钮可能对有视力的用户有意义，因为他们可以看到按钮周围的上下文，但对于使用屏幕阅读软件的视障用户来说，"read more" 可能不够.可以使用 ARIA attributes 向按钮标签添加更多上下文。额外的上下文不会在视觉上显示，但会在 "accessible name" 计算中使用，这就是该过程看起来很复杂的原因。
如果您的按钮只显示一个图标，情况也是如此。没有可见的文本，但您需要某种方式来描述按钮的图标，以便 "accessible name" 有意义。
如果您使用 :before 和 :after 伪元素向您的元素添加更多上下文，则该额外上下文需要包含在 "accessible name" 计算中。
现在，综上所述，我不确定您要找的是哪种 "fix"。您没有真正说明您要解决的问题。
看起来 CSS 和用户代理规范支持您在这里尝试做的事情，但不一致的浏览器支持最终可能会阻止它正常工作。
我在 Windows 上使用 NVDA 和多个浏览器测试了您的方法，Internet Explorer 是唯一有困难的浏览器。 IE 仍然拥有相当大的用户群，因此如果可以的话，它可能值得支持。
不幸的是，除非您想使用 JavaScript 或服务器端脚本语言，否则我找不到解决您问题的好方法。这两种方法都将内容添加到 DOM，而 CSS 不会。
此页面提供了一些关于伪元素可访问性的有用信息，这些信息似乎证实了我在自己的测试中看到的内容。 https://tink.uk/accessibility-support-for-css-generated-content/