Este artículo es acerca de cómo los lectores de pantalla leen el contenido añadido con pseudo elementos CSS :before y :after (en CSS3 son ::before y ::after).
Estoy tratando de aprender a usar tecnología asistiva cuando desarrollo sitios web y recientemente vi como no importa cuanto W3C quiera que usemos ciertos elementos CSS, siempre habrá desarrolladores/diseñadores quienes intentarán probar los límites de las especificaciones.
Mientras que te aconsejo que NO uses pseudo elementos para generar contenido útil (limitate a generar citas o elementos de diseño), sólo en caso de que alguien piense que lo estupendo resida en generar contenido con CSS porque todo lo demás ya es viejo, veamos cómo las personas que usan los lectores de pantalla se “beneficiarán” de la idea.
Un pedazo de código… Ok, quizás dos…
El HTML es realmente simple, un inocente párrafo de texto:
<h1>Example of content added with CSS pseudo-elements</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..and so on.</p>
y el CSS es también algo simple:
#content p:before { content:"This is before the text, you can style it"; } #content p:after{ content:"This is after the text"; }
Escuchemos voces
El vídeo muestra cómo NVDA, Jaws y Window Eyes leen la página – Configuré NVDA para leer a un ritmo más lento para que pudiesen seguirlo, pero los otros 2 están un poco más rápidos.
En conclusión
No hay necesidad de decirles cuán mala es la idea, NO usen pseudo elementos para generar contenido útiles, limiten su uso a generar citas, iconos pequeños, copos de nieve esponjosos o lo que sea. Pero mantenganlo presentable para que otras personas tengan acceso a cosas útiles.
Comments are closed.