Accesibilidad de los contenidos generados por CSS (element :before y :after )

Uno de los elementos más versátiles (y peligrosos) de las nuevas versiones de CSS son los pseudo-elementos :before y :after que, utilizados junto con la propiedad content, nos permiten añadir contenido a la página sin tener que modificar el código HTML. El código es simple, el siguiente fragmento nos añadiría la palabra "Hola" a todos los párrafos de clase .testclass

p.testclass:after {
  contento: 'Hola';}

¿Pero cómo se comporta este nuevo contenido en los lectores de pantalla? La respuesta es "depende". Algunos lo leerán (VoiceOver, NVDA con Firefox...) y otros no (NVDA con IE, Jaws...). Por tanto, su uso nos supone un problema ya que, si añadimos contenido puramente visual (que, en mi opinión, sería la idea), como unos símbolos para hacer un separador, el lector nos lo puede leer dando lugar a una indescifrable retahíla de "redonda, redonda, flecha arriba, flecha abajo...) que, a pesar de no impedir el uso de la web, es francamente incómodo. En cambio, si añadimos contenido relevante nos podemos encontrar en que algunos usuarios no tengan acceso .

Mi recomendación sería utilizar los pseudo-elementos :before y :after sólo para introducir contenido visual que no suponga una molestia para el usuario ciego, en caso de que sea leído. Por ejemplo, una imagen decorativa. Y, en cualquier caso, tener siempre en mente qué va a pasar para el usuario a quien se le lee y qué va a pasar para lo que no.