Fallo común WCAG 2.2 obsoleta

F87Texto con información insertado con CSS mediante ::before y ::after

Nombre oficial en el W3C: Fallo 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. 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 pocas palabras

Fallo obsoleto. El W3C ya no lo considera un fallo en todos los casos, porque los navegadores y lectores de pantalla actuales leen el texto añadido con CSS. Se refería a insertar con ::before, ::after y content textos con información, no decoración. Aun así, conviene que ese texto esté en el HTML.

Por qué es importante

Con CSS se puede añadir texto antes o después de un elemento, como «Nuevo:» o «Atención:». Hoy la mayoría de lectores de pantalla lo leen. Por eso el W3C retiró el fallo.

Pero siguen existiendo problemas. Ese texto no se puede seleccionar ni copiar. Desaparece si la persona desactiva los estilos o usa los suyos propios, algo habitual con baja visión. Y algunos traductores automáticos no lo traducen.

Cómo evitarlo

Escriba en el HTML todo texto que aporte información: «Plazo cerrado», «Opinión:», «Obligatorio».
Reserve ::before y ::after para adornos: comillas, flechas, viñetas o separadores.
Si un adorno de CSS no aporta nada, evite que el lector de pantalla lo lea. Los navegadores actuales admiten un texto alternativo vacío: content: "→" / "".
Si un icono insertado con CSS sí tiene significado, ponga ese significado también en el HTML, por ejemplo con texto oculto a la vista.

Cómo comprobarlo

Busque en las hojas de estilo las reglas con content dentro de ::before y ::after.
Desactive el CSS de la página. En Firefox, use el menú Ver, Estilo de página, «Sin estilo».
Compruebe si se pierde algún texto con información. Si se pierde, conviene pasarlo al HTML.
Pruebe también con un lector de pantalla que el texto insertado se lee de forma útil y no estorba.

Ejemplo

La palabra «Cerrado:» aporta información, así que es mejor escribirla en el HTML que generarla con CSS.

<style>
  /* Desaconsejado: la palabra solo existe en el CSS */
  .plazo-cerrado::before { content: "Cerrado: "; }
</style>
<p class="plazo-cerrado">Ayudas al comercio local</p>

<!-- Recomendado: el texto con información va en el HTML -->
<p><strong>Cerrado:</strong> Ayudas al comercio local</p>

Ver el texto completo del W3C (traducción al español)

Esta es una traducción no oficial al español de la técnica F87 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.

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 error es uno de los que buscamos en cada auditoría de ADDAW. Se lo entregamos con capturas y la forma de corregirlo.

Solicitar una auditoría

Basado en la técnica F87 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.