Els pseudo-elements CSS :before i :after amb la propietat content afegeixen contingut que alguns lectors de pantalla llegiran i d'altres no. Es recomana usar-los només per a contingut visual decoratiu que no sigui molest si és llegit, mai per a contingut rellevant per a l'accessibilitat.
Accessibilitat dels contingut generats per CSS ( element :before i :after )
Un dels elements més versàtils (i perillosos) de les noves versions de CSS són els pseudo-elements :before i :after que, utilitzats juntament amb la propietat content, ens permeten afegir contingut a la pàgina sense haver de modificar el codi HTML. El codi és simple, el següent fragment ens afegiria la paraula "Hola" a tots els paràgrafs de classe .testclass
p.testclass:after {
content: 'Hola';
}
Però com es comporta aquest nou contingut en els lectors de pantalla? La resposta és "depèn". Alguns ho llegiran (VoiceOver, NVDA amb Firefox...) i altres no (NVDA amb IE, Jaws...). Per tant, el seu ús ens suposa un problema ja que, si afegim contingut purament visual (que, al meu entendre, seria la idea), com uns símbols per a fer un separador, el lector ens el pot llegir donant lloc a una indesxifrable tirallonga de "rodona, rodona, fletxa amunt, fletxa avall...) que, tot i no impedir l'ús del web, és francament incòmode. En canvi, si afegim contingut rellevant ens podem trobar en què alguns usuaris no hi tinguin accés.
La meva recomanació seria utilitzar els pseudo-elements :before i :after només per a introduir contingut visual que no suposi una molèstia per a l'usuari cec, en cas que sigui llegit. Per exemple, una imatge decorativa. I, en qualsevol cas, tenir sempre en ment què passarà per a l'usuari a qui se li llegeix i què passarà per al que no.