Fallo común Fallos comunes WCAG 2.2 obsoleta
F87Fallo del criterio de conformidad 1.3.1 debido a insertar contenido no decorativo mediante los pseudoelementos ::before y ::after y la propiedad 'content' de CSS
Técnica obsoleta: el W3C ya no la recomienda. Se mantiene traducida como referencia histórica y porque sigue apareciendo en auditorías antiguas. CSS-generated content does not always constitute a failure, as support for it has improved in user agents and screen readers. It may still present other usability issues, such as unselectable text.
En resumen
Este fallo (hoy considerado obsoleto por el W3C) se producía al insertar con CSS, mediante ::before, ::after y la propiedad content, texto que aporta información y no es mera decoración, como nombres de interlocutores o la palabra «Hecho:». Quien desactiva o personaliza las hojas de estilo pierde esa información. Sigue siendo útil para entender por qué conviene poner en el HTML todo lo que tenga significado.
Aplicabilidad
Todas las tecnologías que admiten CSS.
Descripción
Los pseudoelementos ::before y ::after de CSS especifican la ubicación de contenido antes y después del contenido de un elemento en el árbol del documento. La propiedad content, junto con estos pseudoelementos, especifica qué se inserta. Los usuarios que necesitan personalizar la información de estilo para ver el contenido según sus necesidades pueden no tener acceso a la información que se inserta mediante CSS. Por tanto, constituye un fallo usar estas propiedades para insertar contenido no decorativo.
Una forma habitual de probar este criterio es desactivar los estilos CSS para ver si el contenido añadido mediante pseudoelementos sigue siendo visible.
Ejemplos
En el siguiente ejemplo, ::before y ::after se usan para indicar los cambios de interlocutor y para insertar las comillas en un guion.
El CSS contiene:
p.jim::before { content: "Jim: " }
p.mary::before { content: "Mary: " }
q::before { content: open-quote }
q::after { content: close-quote }Se utiliza en este fragmento:
<p class="jim">
<q>Do you think he's going to make it?</q>
</p>
<p class="mary">
<q>It's not looking good.</q>
</p>En este ejemplo, ::before se usa para diferenciar los hechos de las opiniones.
El CSS contiene:
p.fact::before { content: "Fact: "; font-weight: bold; }
p.opinion::before { content: "Opinion: "; font-weight: bold; }Se utiliza en este fragmento:
<p class="fact">The defendant was at the scene of the crime when it occurred.</p>
<p class="opinion">The defendant committed the crime.</p>Pruebas
Procedimiento
Para cada caso de contenido insertado mediante los pseudoelementos ::before y ::after y la propiedad content:
- Comprobar que la información no decorativa que presenta el contenido generado está disponible cuando se anulan los estilos.
Resultados esperados
- Si la comprobación n.º 1 es falsa, se da esta condición de fallo y el contenido falla este criterio de conformidad.
Recursos
- Selectors Level 3: 7. Pseudo-elements (especificación de selectores CSS, apartado sobre pseudoelementos)
Cómo lo comprobamos en ADDAW
Este fallo es uno de los que buscamos en cada auditoría de accesibilidad de ADDAW: lo documentamos con capturas y el código afectado, indicamos el criterio que incumple y la técnica suficiente con la que se corrige. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.
Fuente y licencia
Traducción al español, no oficial, realizada por ADDAW a partir de la técnica F87 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.
