Accesibilidad digital

Familiarízate con los estándares actuales. Las WCAG 2.2 introducen 9 nuevos criterios enfocados en discapacidades cognitivas y dispositivos táctiles.

• Revisa los 4 principios: Perceptible, Operable, Comprensible y Robusto.
• Asegúrate de entender el nivel de conformidad AA, que es el estándar legal para la mayoría de las empresas bajo la EAA 2025. Listo, cuando: Has identificado y resumido los 9 nuevos criterios de la versión 2.2.

Optimiza tu entorno de trabajo personal.

• En Windows 11: Ve a Configuración > Accesibilidad y activa 'Subtítulos en vivo' y 'Narrador'.
• En macOS Sequoia: Activa 'VoiceOver' (Cmd + F5) y explora el nuevo 'Seguimiento ocular' si tienes hardware compatible.
• Ajusta el tamaño del texto y el contraste del cursor para reducir la fatiga visual. Listo, cuando: El sistema operativo tiene activado al menos un lector de pantalla y subtítulos automáticos.

Prepara tu kit de auditoría técnica.

• Descarga WAVE Web Accessibility Evaluation Tool para obtener un análisis visual rápido de errores (iconos rojos) y alertas (iconos amarillos).
• Instala Axe DevTools de Deque Systems para realizar pruebas más profundas integradas en la consola de desarrollador de Chrome/Edge. Listo, cuando: Ambas extensiones aparecen en la barra de herramientas de tu navegador y están listas para usarse.

Garantiza que tu texto sea legible para personas con baja visión o daltonismo.

• Usa la herramienta WebAIM Contrast Checker para comparar el color de fondo y el de primer plano.
• El ratio mínimo para texto normal debe ser 4.5:1 (Nivel AA).
• Para texto grande (18pt+ o 14pt en negrita), el ratio debe ser al menos 3:1. Listo, cuando: Todos los elementos de texto de tu proyecto pasan la prueba de contraste Nivel AA.

No uses frases como 'Imagen de...'.

• Describe el contexto y la función de la imagen.
• Si la imagen es puramente decorativa, deja el atributo alt vacío (alt='') para que el lector de pantalla la ignore.
• Ejemplo correcto: 'Perro guía labrador dorado caminando junto a su dueño en un cruce peatonal'. Listo, cuando: Todas las imágenes informativas tienen una descripción precisa y las decorativas están marcadas correctamente.

Los lectores de pantalla navegan saltando de encabezado en encabezado.

• Usa un único H1 para el título principal.
• No saltes niveles (ej. no pases de H2 a H4 directamente).
• No uses negritas para simular encabezados; usa etiquetas HTML reales. Listo, cuando: El esquema del documento (outline) es lógico y jerárquico sin saltos de nivel.

Usa ARIA (Accessible Rich Internet Applications) cuando el HTML nativo no sea suficiente.

• Añade aria-label a botones que solo tienen iconos (ej. un botón con una 'X' debe decir 'Cerrar').
• Usa aria-expanded para menús desplegables o acordeones para indicar su estado.
• Evita el 'redundant ARIA' (no pongas role='button' a un <button>). Listo, cuando: Los elementos interactivos sin texto visible tienen etiquetas descriptivas para lectores de pantalla.

Haz que tus videos sean accesibles para personas sordas o con problemas de audición.

• Usa herramientas como CapCut o Adobe Premiere para generar subtítulos automáticos y revísalos manualmente.
• Proporciona una transcripción completa en texto debajo del video para aquellos que prefieren leer o usan braille. Listo, cuando: El video tiene subtítulos sincronizados y existe una versión en texto del audio.

Ejecuta un escaneo técnico rápido.

• Abre las DevTools de Chrome (F12) > pestaña 'Lighthouse'.
• Selecciona 'Accessibility' y haz clic en 'Analyze page load'.
• Corrige todos los errores que bajen la puntuación de 100. Listo, cuando: La puntuación de accesibilidad en Lighthouse es de 100/100.

Desconecta el ratón y navega por tu sitio o aplicación usando solo la tecla Tab, Enter y las flechas.

• Verifica que el foco visual (el recuadro que indica dónde estás) sea claramente visible en todo momento.
• Asegúrate de que no haya 'trampas de teclado' donde el usuario se quede atrapado. Listo, cuando: Puedes completar todas las acciones críticas (comprar, contactar, leer) sin usar el ratón.

Realiza la prueba de fuego de la accesibilidad.

• Descarga e inicia NVDA (gratuito para Windows).
• Cierra los ojos e intenta navegar por tu contenido escuchando las instrucciones.
• Identifica si el orden de lectura es lógico y si se anuncian todos los cambios de estado. Listo, cuando: Has navegado por toda la página y comprendido el contenido basándote únicamente en el audio del lector.