How is CSS pseudo content treated by screen readers?

Question

I've been told to be aware of CSS pseudo content because of the way it is treated by screen readers. Do you have any guidance?

Answer

Generally speaking, web content should be included in HTML files, in a database or coming from an API. It should not be in CSS. However, sometimes CSS is used to add non-text content such as font icons or special characters. This content WILL be read by screen readers and can cause confusion with AT (assistive technology) users. If the content that the CSS is generating is purely presentational, you must make sure to hide it from assistive technology. This can be completed by using the aria-hidden property.