css - 如何告诉屏幕阅读器读取属性的值？

Question

我希望有人能告诉我究竟是什么修复了伪类和 content 对屏幕阅读器产生负面影响。

例如，如果我的 SASS 文件中有这段代码:

[bag-total]:before{
        content: attr(bag-total);
      }

我的目的是让屏幕阅读器读取属性值或用户购物车中他将要购买的总金额。

现在的问题是屏幕阅读器无法读取购物车中的商品总数。

Answer 1

:before 和 :after 伪元素用于此处定义的“accessible name”计算 - https://www.w3.org/TR/accname-1.1/#step2 .具体来说，步骤2.F.ii

这个过程看起来很复杂，但如果您考虑简单的情况，例如按钮，可访问的名称本质上就是按钮的文本标签。但是，显示“阅读更多”的按钮对于有视力的用户来说可能有意义，因为他们可以看到按钮周围的上下文，但对于使用屏幕阅读软件的视力受损的用户来说，“阅读更多”可能还不够。可以使用 ARIA attributes 向按钮标签添加更多上下文.附加上下文不会以可视方式显示，但会用于“可访问名称”计算，这就是该过程看起来很复杂的原因。

如果您的按钮只显示一个图标，情况也是如此。没有可见的文本，但您需要某种方式来描述按钮的图标，以便“可访问的名称”有意义。

如果您使用 :before 和 :after 伪元素向您的元素添加更多上下文，则该额外上下文需要包含在“可访问名称”计算中。

现在，综上所述，我不确定您正在寻找哪种“修复”。您没有真正说明您要解决的问题是什么。