Cuando trabajo en el lanzamiento de una web, uno de los aspectos que siempre trato como prioritario —y no como un añadido a última hora— es la accesibilidad. No solo porque cumplir la normativa europea (como la Directiva sobre la accesibilidad de los sitios web y aplicaciones móviles de los organismos del sector público, y la norma EN 301 549) es obligatorio en muchos casos, sino porque una web accesible suele ser una web mejor para el SEO y para la experiencia de usuario en general.

A continuación comparto una checklist práctica y accionable que utilizo en mis proyectos para asegurar que una web cumple requisitos de accesibilidad (WCAG 2.1 AA en la mayoría de los casos), facilita la navegación, y además ayuda al posicionamiento en buscadores. La planteo desde mi experiencia como diseñador y creador de productos digitales: cosas que puedes verificar ahora mismo, herramientas para auditar y pasos para documentarlo correctamente.

Principios básicos que debes tener claros

Antes de entrar en la lista concreta, recuerda estas reglas sencillas que guían todo el trabajo de accesibilidad:

  • Perceptible: la información debe presentarse de forma que todos la puedan percibir (texto alternativo, contraste, subtítulos).
  • Operable: la interfaz debe poder usarse con teclado y sin tiempo límite injustificado.
  • Comprensible: el contenido y la interacción deben ser claros y predecibles.
  • Robusto: el contenido debe ser compatible con tecnologías asistivas actuales y futuras.

    • Checklist práctica: elementos que revisar antes de lanzar

    Voy a separarlo por áreas: contenido, navegación, multimedia, formularios, rendimiento y documentación. En cada punto te doy qué comprobar, por qué importa, y herramientas útiles.

    Contenido y texto

    • Etiquetas semánticas: Usa h1–h6, nav, main, footer correctamente para estructurar la página. Google y las tecnologías asistivas las usan para entender el contenido.
    • Texto alternativo en imágenes: Todas las imágenes informativas deben tener atributo alt descriptivo. Las decorativas deben tener alt="".
    • Contraste de color: Asegura contraste mínimo de 4.5:1 para texto normal y 3:1 para texto grande. Herramientas: Contrast Checker (WebAIM), Chrome Lighthouse.
    • Lenguaje declarado: Declara el idioma principal con lang="es" y cambia el atributo cuando haya fragmentos en otros idiomas.

    Navegación y teclado

    • Acceso por teclado: Toda la web debe poder navegarse con teclado (tab, shift+tab, enter, espacio, flechas). Prueba sin ratón.
    • Orden de tabulación lógico: Asegura que el foco progresa en un orden coherente y visible (estilos de foco claros).
    • Atajos ARIA con cuidado: Usa roles y atributos ARIA solo cuando la semántica HTML no sea suficiente. Evita mal uso de role="presentation" o aria-hidden en elementos interactivos.
    • Salto al contenido: Añade un enlace “Saltar al contenido” al inicio de la página para usuarios de teclado.

    Multimedia

    • Subtítulos y transcripciones: Vídeos informativos deben incluir subtítulos y, si es relevante, una transcripción completa.
    • Alternativas para audio: Proporciona subtítulos y/o transcripciones de contenido sonoro.
    • Controles accesibles: Los controles de media deben ser operables por teclado y anunciados a lectores de pantalla.

    Formularios

    • Etiquetas visibles y asociadas: Usa y atributos id para asociar campos e inputs. Las instrucciones deben ser claras.
    • Mensajes de error accesibles: Errores que se enfoquen al campo con aria-describedby y que expliquen cómo corregir.
    • Validación en tiempo razonable: Evita perder datos ingresados y ofrece feedback claro tanto visual como textual.

    Compatibilidad con lectores de pantalla

    • Pruebas con NVDA/VoiceOver: Comprueba navegación y lectura del contenido con NVDA (Windows) o VoiceOver (Mac/iOS).
    • Roles y estados ARIA: Asegura que componentes dinámicos (menús, modales, tabs) informan cambios de estado correctamente.

    Rendimiento y SEO relacionados

    • Tiempo de carga: Una página rápida mejora la experiencia y reduce abandono. Usa lazy-loading en imágenes, optimiza assets y considera Core Web Vitals.
    • URLs y enlaces descriptivos: Texto de enlace claro (evita “haz clic aquí”). Favorable para accesibilidad y SEO.
    • Contenido indexable: Asegura que contenido relevante no esté excluido por JavaScript mal implementado.

    Herramientas que uso para auditar

    Hay muchas herramientas; estas me ayudan a detectar problemas rápidamente y a priorizar correcciones:

    Chrome LighthouseAudita accesibilidad básica, rendimiento y SEO.
    axe (Deque)Plugins para navegador con reportes detallados y referencias WCAG.
    WAVE (WebAIM)Visualiza problemas de accesibilidad sobre la propia página.
    NVDA / VoiceOverPruebas manuales con lectores de pantalla.

    Documentación y cumplimiento legal

    • Declaración de accesibilidad: Publica una declaración en tu web indicando el nivel de conformidad (p. ej. WCAG 2.1 AA), el estado actual, las excepciones conocidas y cómo reportar problemas.
    • Registro de incidencias: Mantén un registro de problemas y su resolución; es útil para auditorías y para mejorar iterativamente.
    • Política de priorización: Define qué arreglos son críticos, cuáles importantes y cuáles deseables, con tiempos objetivo.

    Errores comunes que debes evitar

    • Depender solo de herramientas automáticas: Estas detectan ~30-40% de los problemas; las pruebas manuales y con usuarios son imprescindibles.
    • No probar con teclado o lectores de pantalla: Ignorar estas pruebas deja pasar problemas críticos.
    • Diseño bonito pero sin foco visible: Un foco personalizado escondido o eliminado es una barrera real.

    Si quieres, puedo generarte una checklist en formato imprimible o un checklist interactivo para integrar en tu proceso de QA. También puedo revisar una URL concreta y hacer un primer reporte con prioridades de corrección —en mis proyectos eso siempre ayuda a tomar decisiones rápidas y efectivas.