Search code examples
cssaccessibilityscreen-readers

How to tell the screen reader to read the value of the attribute?

I am hoping someone could enlighten me on exactly what is the fix to pseudo classes and content negatively impacting screen readers.

For example, if I have this piece of code in my SASS file:

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

My intent here is for the screen reader to read the value of the attribute or the total amount in the users' cart that he is about to purchase.

The problem right now is the screen reader is not reading the number of items in total inside the shopping cart.

Solution

  • It looks like the CSS and user-agent specifications support what you're trying to do here, but inconsistent browser support may ultimately prevent it from working well.

    I tested your method using NVDA on Windows with several browsers, and Internet Explorer was the only one that had difficulty. IE still has a fairly sizeable user-base, so it's probably worth supporting if you can.

    Unfortunately, I can't see a good solution to your problem unless you want to use JavaScript or a server-side scripting language. Both of these methods add the content to the DOM, whereby CSS doesn't.

    This page has some good information on the accessibility of pseudo-elements that seemed to confirm what I was seeing in my own testing. https://tink.uk/accessibility-support-for-css-generated-content/