Saltar al contenido principal
Web Accesible - Inicio

Validación

Una lista de comprobaciones básicas para empezar a evaluar si un sitio web es accesible. Si tus páginas cumplen estas pautas, estás en el buen camino hacia la accesibilidad web.

Código HTML válido (W3C)
  • Etiquetas sin cerrar o mal anidadas, pueden provocar que la página se muestre de forma incorrecta o afectar a los lectores de pantalla.
  • Valida el código HTML con una herramienta como el W3C Markup Validation Service.
Idioma
  • El idioma principal de la página debe indicarse en el elemento <html> con el atributo lang.
  • Si hay contenido en otro idioma, también debe indicarse en su elemento correspondiente.
  • Leer más sobre idioma
Título de página
  • Comprueba el título de la página en la pestaña activa del navegador.
  • Verifica que el texto del título describe el contenido o propósito de la página.
  • Confirma que cada página tiene un título único que la identifica.
  • Leer más sobre título de página
Saltar al contenido principal
Orden del contenido
  • Desactiva los estilos CSS y comprueba que el contenido de la página sigue un orden lógico. Este orden es el que mostrarán los lectores de pantalla.
Encabezados
  • Las secciones están identificadas con encabezados.
  • Los encabezados siguen un orden jerárquico sin saltarse niveles.
  • Leer más sobre encabezados
Estructura de página
Estilo tipográfico
  • El tipo de fuente y el tamaño utilizado son fácilmente legibles.
  • Utiliza unidades relativas (em, rem, %).
  • Existe suficiente espacio entre líneas.
  • La longitud de línea está entre 70-90 caracteres.
  • El texto no está justificado.
  • Leer más sobre estilo tipográfico
Color y contraste
  • Visualiza la página en escala de grises y comprueba si los elementos se distinguen claramente y transmiten la misma información que mediante el color.
  • Comprueba que existe suficiente contraste entre el contenido del texto y el fondo.
  • Leer más sobre color y contraste
Enlaces
  • El texto del enlace describe claramente su destino o función.
  • Si los enlaces se distinguen solo por el color (no recomendable), asegúrate de que el contraste con el texto circundante sea de al menos 3:1 y de que se muestre una pista visual al recibir el foco.
  • El contraste con el fondo debe ser de al menos 4.5:1.
  • Leer más sobre enlaces
Ubicación
  • El menú de navegación muestra pistas visuales que indican en qué página se encuentra el usuario.
  • Si hay varios niveles de páginas, asegúrate de que exista una ruta de navegación hasta la página actual.
  • Leer más sobre ubicación
Múltiples vías de navegación
  • Sitios web pequeños: si no hay mapa del sitio ni función de búsqueda, asegúrate de que se pueda acceder a todas las páginas desde el menú de navegación o desde un listado de enlaces.
  • Sitios web grandes: cuando no es posible acceder directamente a todas las páginas desde el menú, verifica que haya un mapa del sitio o una función de búsqueda.
  • Documentos extensos: en páginas con mucho contenido, comprueba que exista una tabla de contenido con enlaces a las diferentes secciones.
  • Leer más sobre múltiples vias de navegación
Navegación por teclado
Diseño adaptable
Imágenes
  • El texto del atributo alt es breve, conciso y descriptivo.
  • Las imágenes decorativas tienen el atributo alt vacío.
  • Las imágenes complejas (mapas, gráficos…) incluyen una descripción larga, ya sea junto a la imagen o mediante un enlace.
  • Leer más sobre imagenes
Audio y vídeo
  • Si la reproducción se inicia automáticamente, puede pausarse o silenciarse.
  • El contenido en audio cuenta con una transcripción como alternativa.
  • En los vídeos con audio se incluyen subtítulos.
  • En los vídeos sin audio se proporciona una audiodescripción.
  • Leer más sobre audio y vídeo
Formularios
  • Las etiquetas están correctamente asociadas a sus campos.
  • Se utiliza el tipo de campo adecuado según los datos a introducir (texto, correo, fecha…).
  • En formularios largos, los campos están agrupados en secciones.
  • Los controles de tipo radio y checkbox están siempre agrupados.
  • Leer más sobre formularios
Tablas
  • Si la tabla tiene título, verifica que se use el elemento <caption>, o una alternativa ARIA, y que describa adecuadamente su contenido.
  • Los encabezados están correctamente marcados (<th>).
  • En tablas complejas, comprueba que las celdas de encabezado estén asociadas a las celdas de datos mediante el atributo <scope>.
  • Leer más sobre tablas