El contenido generado desde CSS: un nuevo problema

En CSS, se usan los pseudoelementos :before y :after para generar contenido que aparece en la página web, como si fuera HTML, pero que no está en el HTML. Es un poco raro, y parece que rompe un poco la separación entre HTML y CSS que se debe lograr.

Pero ahí está la clave: se debe emplear esta característica para generar contenido que realmente no es contenido, sino contenido que forma parte del estilo o de la presentación de la página. Por ejemplo, un escenario típico de uso de esta característica es cuando se le da estilo a las citas (q) y se quiere que aparezcan unas comillas especiales al principio y al final de la cita, o cuando se quiere separar una lista de enlaces con algún símbolo (como ":").

Sin embargo, este uso presenta un problema: según el artículo CSS generated content and screen readers, este contenido generado es leído por muchos lectores de pantalla. Es decir, lo sacamos del HTML para que no lo lean los lectores de pantalla porque es un elemento de decoración, y luego resulta que también lo leen en el contenido generado por CSS.

¿Qué podemos hacer? Usarlo con mucho cuidado, porque ni todos los lectores de pantalla lo leen, ni todos los lectores de pantalla no lo leen. En conclusión: no usarlo para contenido que sea imprescindible.