Fallo común WCAG 2.2 obsoleta
F70Etiquetas HTML mal escritas (fallo obsoleto)
Nombre oficial en el W3C: Fallo del criterio de conformidad 4.1.1 debido al uso incorrecto de las etiquetas de apertura y cierre o del marcado de los atributos
Técnica obsoleta: el W3C ya no la recomienda. |
En pocas palabras
Fallo obsoleto desde WCAG 2.2, que eliminó el criterio 4.1.1 de análisis del código. Describía etiquetas mal escritas: sin cerrar, sin la barra de cierre o con comillas sin terminar. Hoy los navegadores corrigen esos errores de forma uniforme, pero validar el código sigue siendo una buena práctica.
Por qué es importante
Antes, cada navegador arreglaba los errores del código a su manera. Lo mismo hacía cada lector de pantalla (programa que lee en voz alta la pantalla). El resultado podía cambiar de uno a otro.
Hoy el estándar HTML fija cómo corregirlos y los navegadores lo siguen. Aun así, un error de código puede romper otras cosas que WCAG sí exige. Por ejemplo, que un campo pierda su etiqueta, que un botón quede sin nombre o que el orden de lectura cambie.
Cómo evitarlo
- Cierre todas las etiquetas que lo necesiten, con su barra:
</p>,</li>. - Ponga siempre los valores de los atributos entre comillas y cierre las comillas.
- Separe los atributos con un espacio.
- Pase el código por un validador de vez en cuando para detectar estos errores.
- Ante un error, compruebe si afecta a nombres, funciones o estructura: eso sí puede incumplir otros criterios.
Cómo comprobarlo
- Pase la página por el validador del W3C (validator.w3.org).
- Revise los errores de etiquetas sin cerrar, comillas desparejadas o atributos pegados.
- Para cada error, compruebe con las herramientas del navegador (F12, pestaña Accesibilidad) si cambia el nombre, la función o la estructura de algún elemento.
- Recuerde: según WCAG 2.2 esto ya no es un fallo por sí mismo, solo si provoca otro problema de accesibilidad.
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 F70 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
Lenguajes de marcado: HTML y otras tecnologías basadas en SGML o XML.
Descripción
El objetivo de este fallo es identificar ejemplos de errores de marcado en las etiquetas de los elementos que podrían impedir que la tecnología de asistencia genere un modelo satisfactorio de la página. Los distintos agentes de usuario pueden aplicar heurísticas diferentes para recuperarse de los errores, lo que da lugar a presentaciones incoherentes de la página entre unos agentes de usuario y otros.
Algunos tipos habituales de problemas con las etiquetas de apertura y cierre que conducen a esta condición de fallo (aunque la lista no es exhaustiva):
- Etiquetas de apertura y cierre a las que les faltan los signos de apertura < y de cierre >.
- Etiqueta de cierre a la que le falta la barra / inicial que indica que es una etiqueta de cierre.
- Valores de atributo que tienen comilla de apertura pero no de cierre. Los valores de atributo deben ir completamente entrecomillados o, en algunos lenguajes de marcado, pueden ir sin comillas.
- Ausencia de espacio en blanco entre atributos.
- Valores de atributo sin comillas que contienen espacios en blanco.
- No proporcionar la etiqueta de cierre en elementos que no admiten la sintaxis de elemento vacío.
Ejemplos
Faltan los signos de mayor y menor
El siguiente código falla porque a la etiqueta de apertura le falta un signo de mayor/menor y el límite previsto de la etiqueta no queda claro.
<p This is a paragraph</p>Falta la barra en la etiqueta de cierre
El siguiente código falla porque a la etiqueta de cierre le falta la barra, lo que hace que parezca en realidad otra etiqueta de apertura.
<p>This is a paragraph<p>Comillas de atributo desequilibradas
El siguiente código falla porque al valor del atributo le falta la comilla de cierre, lo que hace que el límite del par atributo-valor no quede claro.
<input title="name type="text">Ausencia de espacio en blanco entre atributos
El siguiente código falla porque no hay espacio en blanco entre los atributos, lo que hace que el límite entre los pares atributo-valor no quede claro.
<input title="name"type="text">Atributo sin comillas con un valor que contiene espacios
El siguiente código falla porque un valor de atributo no va entrecomillado y contiene espacios en blanco, lo que hace que el límite del par atributo-valor no quede claro.
<input title=Enter name here type=text>Faltan etiquetas de cierre
El siguiente código falla porque falta la etiqueta de cierre del primer párrafo, por lo que no queda claro si el segundo párrafo es hijo o hermano del primero.
<p>This is a paragraph
<p>This is another paragraph</p>Pruebas
Procedimiento
- Comprobar el código fuente de las páginas implementadas en lenguajes de marcado.
- Comprobar si hay etiquetas de apertura, etiquetas de cierre o atributos mal formados.
Resultados esperados
- Si la comprobación n.º 2 es verdadera, se da la condición de fallo y el contenido no cumple este criterio de conformidad.
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.
Basado en la técnica F70 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.