Ir al contenido

Lista de verificación de accesibilidad web

Una guía de introducción a la accesibilidad web.

Landmarks

Los ARIA Landmark Roles son atributos útiles que pueden ser utilizados por las tecnologías asistivas (TA) para navegar por un sitio web.

Nota: Cuando validas html usando roles landmark, aparece una advertencia indicando que estos atributos son redundantes. En HTML5 varios de estos roles están implícitos en los elementos estructurales nativos, soportados por la mayoría de navegadores modernos, a excepción de IE y IOS Safari. Por lo tanto, si soportas estos navegadores, querrás usar los landmark roles.

  • <header role="banner">
    Una región que normalmente es la cabecera principal de la página.
  • <nav role="navigation">
    Contiene enlaces de navegación.
  • <main role="main">
    Indica el contenido central del documento. Se utiliza una sola vez.
  • <article role="article">
    Representa un elemento de contenido independiente.
  • <aside role="complementary">
    Sección relacionada con el contenido principal, aunque estén separados.
  • <form role="form">
    Una región que contiene una colección de elementos y objetos que se combinan para crear un formulario.
  • <footer role="contentinfo">
    Contiene información sobre el documento (información de la empresa, derechos de autor, etc).
  • <form role="search">
    Añade el rol 'search' al formulario principal de búsqueda.

Esquema del documento

  • Utiliza encabezados y estructura semánticos.

Enlaces

  • Comprueba que los enlaces tienen el estado :focus.
  • Comprueba que los enlaces son reconocibles (subrayado).
  • Proporciona un enlace de "Ir al contenido".

Imágenes

  • Usa un texto alternativo adecuado.

Javascript

  • JavaScript no intrusivo
    Utiliza JavaScript no intrusivo (nunca uses código en línea).
  • Alternativas sin JS
    Proporciona alternativas para los usuarios con JavaScript desactivado, y en entornos donde JavaScript no está disponible.

Formularios

  • Disposición lógica
    El orden de tabulación del formulario sigue un patrón lógico.
  • Asocia la etiqueta label a todos los controles del formulario
    (Ej: <label for="nombre">Nombre:</label><input id="nombre" type="text">)
  • Comprueba que los atributos placeholder NO se usan en lugar de label.
    Una excepción a esta regla serían los formularios pequeños con uno o dos campos (ej: búsqueda o log in).
  • Agrupa los elementos relacionados del formulario con fieldset y describe el grupo con legend.
    Importante para <input type="radio"> y <input type="checkbox">.

Media (Audio y Vídeo)

Proporcionar alternativas textuales hace que la información de audio sea accesible a las personas sordas o con dificultades auditivas. Esto también vale para los motores de búsqueda que también son sordos o duros de oído.

  • Proporcionar transcripciones de texto
  • Subtítulos sincronizados para vídeos

Color y contraste

  • Comprueba el contraste de color
    Asegurarse de que el color del primer plano y el del fondo tienen suficiente contraste ayudará a que el sitio sea más legible para todos. Contrast Ratio es una herramienta para comprobar el contraste de los colores, tanto para una visión normal como para usuarios con visión deficiente del color.

Comprueba frente a diferentes tipos de daltonismo

  • Deuteranopía
  • Protanopía
  • Tritanopía

Usa una herramienta como Colorblind Web Page Filter o, si estás en un Mac otra opción es Michel Fortin’s, Sim Daltonism color blindness simulator.

Pruebas

Navegar por el sitio usando diversas herramientas, como el teclado o un lector de pantalla, puede ayudar a entender cómo lo experimentará un usuario ciego, con visión reducida o con movilidad reducida.

  • Prueba el sitio usando solo el teclado
  • Prueba el sitio con un lector de pantalla

Nota: Este documento es una traducción de la Web Accessibility Checklist publicada en A11Y Project.

Si quieres conocer más sobre el tema, visita esta guía de accesibilidad web.