La accesibilidad web es clave para que toda persona pueda navegar de manera efectiva. Sin embargo, un error frecuente en el desarrollo web es la inserción de contenido significativo utilizando los pseudoelementos ::before y ::after junto con la propiedad content en CSS. Este fallo incumple el Criterio de Conformidad 1.3.1 (Información y relaciones) de WCAG 2.1, ya que los lectores de pantalla y otras tecnologías de asistencia pueden no interpretar correctamente el contenido generado con CSS.
En este artículo, exploraremos el Fallo F87, su impacto en la accesibilidad y cómo corregirlo con las mejores prácticas.
Acerca de este fallo
El Fallo F87 ocurre cuando se usa CSS para insertar contenido no decorativo, como etiquetas, prefijos, sufijos o información estructural en una página web. Dado que el contenido generado mediante ::before y ::after no se encuentra en el árbol DOM, muchas tecnologías de asistencia no lo detectan, lo que dificulta su acceso para ciertos usuarios.
El Criterio 1.3.1 de WCAG 2.1 establece que la estructura y las relaciones dentro de un contenido deben estar programáticamente disponibles. Cuando se usa CSS para agregar contenido semántico en lugar de HTML, se impide que algunas personas accedan a la información.
Escenarios comunes en los que ocurre este fallo:
- Añadir texto con
::beforey::afteren lugar de incluirlo en el HTML. - Usar
::beforepara indicar el inicio de diálogos en un guion o chat. - Incorporar etiquetas como «Hecho», «Importante» o «Opinión» mediante CSS en lugar de HTML
- Añadir símbolos como comillas, asteriscos o iconos funcionales con pseudoelementos sin una alternativa accesible.
Ejemplos
Ejemplo incorrecto 1: Uso de ::before para indicar cambios de hablante
Este código usa ::before para agregar el nombre de los personajes en un diálogo, lo que genera problemas de accesibilidad:
<p class=»jim»>¿Crees que logrará llegar a tiempo?</p>
<p class=»mary»>No lo sé, la situación es difícil.</p>
p.jim::before {
content: «Jim: «;
font-weight: bold;
}
p.mary::before {
content: «Mary: «;
font-weight: bold;
}
🔴 Problema: Los lectores de pantalla no detectarán los nombres «Jim» y «Mary», ya que están insertados mediante CSS y no forman parte del HTML. Esto confunde a los usuarios con discapacidad visual.
Solución correcta: Usar etiquetas <span> dentro del HTML
<p><span class=»speaker»>Jim:</span> ¿Crees que logrará llegar a tiempo?</p>
<p><span class=»speaker»>Mary:</span> No lo sé, la situación es difícil.</p>
.speaker {
font-weight: bold;
}
✅ ¿Qué mejora?: Ahora los nombres de los personajes están en el HTML y pueden ser interpretados por los lectores de pantalla correctamente.
Ejemplo incorrecto 2: Uso de ::before para diferenciar hechos de opiniones
<p class=»fact»>El acusado estaba en la escena del crimen.</p>
<p class=»opinion»>El acusado es culpable.</p>
p.fact::before {
content: «Hecho: «;
font-weight: bold;
}
p.opinion::before {
content: «Opinión: «;
font-weight: bold;
}
🔴 Problema: Los prefijos «Hecho» y «Opinión» no serán detectados por tecnologías de asistencia, lo que puede generar malentendidos en usuarios con discapacidades visuales.
Solución correcta: Incluir la información en HTML
<p><strong>Hecho:</strong> El acusado estaba en la escena del crimen.</p>
<p><strong>Opinión:</strong> El acusado es culpable.</p>
✅ ¿Qué mejora?: Ahora los lectores de pantalla podrán interpretar correctamente la diferenciación entre hechos y opiniones.
Ejemplo correcto: Solución ideal
En este caso, en lugar de usar ::before, se emplean etiquetas semánticas para añadir significado al contenido sin comprometer la accesibilidad.
✔️ Beneficios:
- El contenido es accesible para lectores de pantalla.
- La información es comprensible sin necesidad de CSS.
- Se mantiene la semántica del HTML sin depender de pseudoelementos.
Errores comunes y cómo evitarlos
Errores frecuentes:
- Usar
::beforeo::afterpara insertar texto funcional como etiquetas, nombres o instrucciones. - Incluir iconos funcionales (ej. «✔», «❌») con CSS sin proporcionar alternativas en HTML.
- Añadir prefijos en listas o párrafos mediante pseudoelementos sin alternativa accesible.
Cómo evitar estos errores:
- Usa HTML semántico para añadir contenido estructural.
- Si un icono o prefijo es crucial, inclúyelo dentro del HTML con
<span>. - Para elementos decorativos, usa
aria-hidden="true"para ocultarlos de los lectores de pantalla. - Usa herramientas como WAVE o axe DevTools para probar accesibilidad.
Preguntas frecuentes sobre el fallo F87
¿Por qué ::before y ::after afectan la accesibilidad?
Los pseudoelementos no están en el DOM y, por lo tanto, no son detectables por muchas tecnologías de asistencia.
¿Cuándo es aceptable usar ::before y ::after?
Cuando se usa solo para decoración visual, como añadir flechas o fondos estilizados sin significado funcional.
¿Cómo verificar si un contenido CSS es accesible?
Puedes desactivar los estilos CSS en el navegador para ver si el contenido sigue siendo comprensible.
¿Es válido usar aria-label para mejorar la accesibilidad del contenido en pseudoelementos?
No, ya que aria-label no puede aplicarse a pseudoelementos. Es mejor incluir la información en HTML.
¿Cómo afecta este fallo a los usuarios de lectores de pantalla?
Los usuarios pueden perder información crucial o recibir datos confusos al no interpretar los textos generados con CSS.
¿Qué herramientas puedo usar para detectar este problema?
- WAVE (Web Accessibility Evaluation Tool)
- axe DevTools
- Web Developer Toolbar (permite desactivar CSS)
Recursos relacionados
- Guía oficial WCAG 2.1 para el fallo común F87: Fallo del Criterio de Conformidad 1.3.1 debido a la inserción de contenido no decorativo mediante el uso de pseudoelementos ::before y ::after y la propiedad ‘content’ en CSS
- Esta técnica no se menciona en ningún documento de comprensión.
- Selectores Nivel 3: 7. Pseudoelementos
- Guía sobre pseudoelementos en MDN
Pruebas y validación
Procedimiento
- Desactivar CSS en el navegador y verificar si el contenido sigue siendo comprensible.
- Utilizar lectores de pantalla para comprobar si la información generada por CSS es accesible.
- Analizar el código con herramientas como WAVE o axe DevTools.
- Revisar si la información estructural está en HTML y no depende de pseudoelementos.
Resultados esperados
- ✅ Si todo el contenido relevante está presente en HTML y es accesible, el sitio cumple con WCAG 2.1.
- ❌ Si al desactivar CSS se pierde información importante, el sitio falla el criterio 1.3.1 y debe corregirse.
Usar ::before y ::after para insertar contenido no decorativo puede afectar la accesibilidad de tu sitio web. Para garantizar que todos los usuarios puedan acceder a la información, asegúrate de incluir texto estructural en HTML y usa CSS solo para mejorar el diseño.
👉 ¡Optimiza tu web para la accesibilidad y mejora la experiencia de todos los usuarios! 🚀