Agencia de Gobierno Electrónico y Sociedad de la Información y del Conocimiento

Errores más frecuentes encontrados por el Observatorio de Accesibilidad Digital

Guía técnica

El Observatorio de Accesibilidad Digital, a través de su Visualizador, presenta el análisis automático utilizando tres herramientas: Total Validator, W3C Markup Validation Service y W3C CSS Validation Service. Para saber cuáles son los errores más comunes se puede consultar la siguiente lista:

HTML

La World Wide Web Consortium (W3C) establece estándares y recomendaciones para la creación de documentos web, incluyendo HTML. Validar el código HTML según las especificaciones de la W3C es importante para asegurarte de que un sitio web sea interoperable, accesible y se comporte de manera consistente en diferentes navegadores y dispositivos. Los errores más comunes son:

1. Falta de declaración de doctype: todo documento HTML debe comenzar con una declaración de tipo de documento (doctype) para indicar la versión de HTML que se está utilizando.
2. Errores de codificación: asegurarse de que el documento esté codificado correctamente, especificando la codificación en la declaración del meta charset: <meta charset="UTF-8">.
3. Etiquetas no cerradas: se debe chequear que todas las etiquetas HTML se abran y cierren correctamente. Por ejemplo, <div> debe tener un </div> correspondiente.
4. Etiquetas anidadas incorrectamente: las etiquetas deben anidarse de manera adecuada, ya que puede afectar a la semántica de la página.
5. Atributos incorrectos: los atributos de las etiquetas deben ser válidos y estar escritos correctamente. Además, los valores de los atributos deben estar entre comillas.
6. Uso incorrecto de algunas etiquetas: no utilizar etiquetas, como por ejemplo <p> vacías, para generar espacios o márgenes entre elementos. Las separaciones entre los elementos de la pantalla deben darse por estilos.
7. Falta de atributos obligatorios: algunos elementos requieren atributos obligatorios. Por ejemplo, la etiqueta <a> debe incluir un atributo "href".
8. Uso de nombres de etiquetas incorrectos: asegurarse de utilizar nombres de etiquetas HTML válidos y correctamente escritos.
9. Utilizar estilos en línea: evitar el uso de estilos en línea y utilizar en su lugar hojas de estilo externas para diseñar los estilos de las páginas.
10. Uso de etiquetas obsoletas: utilizar etiquetas obsoletas, como <font> o <center>, puede afectar la compatibilidad con los navegadores y lectores de pantalla.

Es importante utilizar herramientas de validación de HTML, como el servicio de validación de la W3C, para identificar y corregir estos errores en el código HTML y asegurarse de que el sitio web cumpla con los estándares web establecidos por la W3C durante el proceso de desarrollo del mismo, así como revisiones periódicas sobre el sitio publicado.

CSS

La validación de CSS (Cascading Style Sheets) también es importante para garantizar que el diseño web sea coherente y se muestre correctamente en varios navegadores y dispositivos. Los 10 errores comunes en la validación de CSS son:

1. Propiedades desconocidas: asegurarse de que todas las propiedades que se utilicen en la hoja de estilo CSS sean válidas y estén escritas correctamente. Los errores de escritura o propiedades no reconocidas pueden causar problemas de rendimiento.
2. Falta de punto y coma: se debe separar cada declaración de estilo con un punto y coma (;). La falta de puntos y comas puede causar errores en la hoja de estilo.
3. Uso incorrecto de selectores: asegurarse de que los selectores CSS estén escritos correctamente y se apliquen a los elementos que se desea estilizar.
4. Valores no válidos: los valores que se asignan a las propiedades deben ser válidos. Por ejemplo, asegurarse de que los valores de colores estén escritos correctamente, como "#FF0000" en lugar de "#FF00".
5. Uso de tamaños en píxeles: muchas propiedades CSS requieren unidades, como "px" para píxeles o "%" para porcentajes. Asegurarse de incluir medidas relativas como em, rem, % y no medidas exactas en px, ya que esto genera inconvenientes para la adaptación del contenido en los diferentes dispositivos.
6. Colisiones de nombres de clases o id: evitar nombrar las clases o id con los mismos nombres que se etiquetan HTML o elementos existentes, ya que esto puede causar conflictos.
7. Mala especificidad: comprender la especificidad de los selectores CSS y evitar usar selectores demasiado específicos o generales, ya que esto puede afectar la cascada de estilos.
8. Uso incorrecto de comentarios: los comentarios en CSS deben estar entre /* y */. No se pueden anidar comentarios, y un comentario no debe interferir con las reglas de estilo.
9. Falta de comillas en valores de cadena: si se están utilizando valores de cadena en la hoja de estilo CSS, asegurarse de envolverlos en comillas, como font-family: "Arial", sans-serif;.
10. Errores de sintaxis en reglas de media queries: si se está utilizando media queries para estilos responsivos, asegurarse de que estén escritas correctamente y de que tengan la sintaxis adecuada.

WCAG 2.1

1. Falta de etiqueta <title> concisa y significativa a la página para describirla: es esencial para proporcionar una descripción clara del contenido de la página. Una etiqueta <title> concisa y significativa ayuda a las personas a comprender de qué trata la página.
2. Falta de texto alternativo en imágenes: este error viola la Pauta 1.1 (texto alternativo) de las WCAG 2.1. El texto alternativo es esencial para proporcionar una descripción textual de las imágenes, lo que permite acceder al contenido completo cuando la imagen no puede ser vista por alguna razón.
3. No se utilizan etiquetas semánticas: organizar el contenido de la página dentro de etiquetas semánticas, tales como header, nav, main, footer, aside, permite al usuario de lector de pantalla identificar rápidamente el contenido importante de la página y las secciones que se encuentran en la misma. Este error incumple el criterio 1.3.1 Información y relaciones.
4. El contraste es insuficiente: el contraste adecuado entre el color del texto y el color de fondo es fundamental para garantizar que las personas con baja visión o con una discapacidad relacionada a la visión puedan leer el contenido sin dificultades. Este error incumple con los criterios 1.4.3 Contraste mínimo y 1.4.6 Contraste mejorado.
5. Se usan unidades absolutas en lugar de relativas: utilizar unidades relativas, como em o porcentaje, en lugar de unidades absolutas como píxeles, permite que el contenido se adapte mejor a diferentes tamaños de pantalla y configuraciones de usuario.
6. Faltan encabezados: el contenido de las páginas webs debe estar organizado mediante encabezados de sección que describan el propósito de los bloques de texto, impidiendo a los usuarios de lector de pantalla poder interpretar el contenido de la página. Este error incumple con los criterios 2.4.6 Encabezados y etiquetas y 2.4.10 Encabezados de sección.
7. Focos no visibles: los elementos interactivos encontrados en las páginas, tales como botones, enlaces o elementos de formulario, deben contar con un foco visible que les permita a los usuarios que utilizan el teclado para navegar saber dónde se encuentran ubicados dentro de la página. Este error incumple con el criterio 2.4.7 Foco visible.
8. Textos no discernibles de botones y enlaces: los botones y enlaces deben contar con un texto discernible que les permita a los usuarios de lector de pantalla identificar el propósito del elemento con tan sólo el texto del mismo.
9. Falta de etiquetas de formulario adecuadas: esta omisión infringe la Pauta 3.3 (entrada de etiqueta o instrucción) de las WCAG 2.1. Etiquetar correctamente los elementos del formulario garantiza que las personas que utilizan lectores de pantalla puedan entender y completar los campos de manera efectiva. 
10. Tablas de datos sin nombre accesible: esta omisión infringe la Pauta 1.3 (Información y relaciones) de las WCAG 2.1. Las tablas de datos deben contar con un título accesible (<caption>) para que los usuarios que navegan con el lector de pantalla puedan entender qué información brindarán las mismas. Este error incumple el criterio 1.3.1 Información y relaciones.
11. Las etiquetas de control de formulario deben ser únicas y no lo son: esta omisión viola la Pauta 3.3 (entrada de etiqueta o instrucción) de las WCAG 2.1. Cada etiqueta de control de formulario debe ser única y claramente asociada con su campo correspondiente para que las personas con discapacidades puedan entender y completar formularios de manera efectiva.
12. Referencia a un 'id' incorrecto o faltante: las referencias a 'id' incorrectos o faltantes en enlaces o elementos pueden impedir la navegación efectiva y la comprensión del contenido. Los 'id' duplicados en una página pueden generar confusión y dificultades en la navegación para las personas que utilizan tecnología de asistencia.

Etiquetas