Volver

Accesibilidad

Lista de verificación

lang ¿Está configurado correctamente el atributo lang para el idioma de la página? Por ejemplo, 'es' para español o 'en' para inglés. Esto ayuda a los lectores de pantalla a interpretar correctamente el contenido.
title ¿Está presente el elemento title? ¿tiene entre 30 y 60 caracteres? ¿Es único en cada página? Esto ayuda a entender en qué página estamos.
Regiones ¿Se utilizan etiquetas semánticas para designar regiones? Por ejemplo: header, nav, main, section, article, aside, footer. Esto mejora la estructura del contenido.
Secciones ¿Se utiliza aria-label para etiquetar secciones de la página (section)? Esto proporciona más contexto a los lectores de pantalla.
H1 ¿Se utiliza un solo H1 por página? Esto ayuda a los usuarios a entender el tema principal de la página.
Encabezados - jerarquía ¿Se respetan los niveles jerárquicos en los encabezados (H1, H2, H3, etc.) sin saltos innecesarios? Esto facilita la comprensión del contenido.
Navegación con teclado ¿El sitio es navegable con teclado? Esto beneficia a usuarios que prefieren o necesitan usar el teclado.
Foco visible ¿El foco en elementos interactivos es visible? Esto ayuda a identificar dónde está el usuario en la página.
alt ¿Las imágenes importantes tienen una descripción alternativa (alt)? Esto ofrece contexto a usuarios de lectores de pantalla que no pueden verlas.
alt vacío ¿Las imágenes decorativas tienen alt vacío (alt="")? Esto asegura que el lector de pantalla no las anuncie.
aria-hidden ¿Los íconos decorativos, formas o separadores visuales tienen aria-hidden=true? Esto asegura que el lector de pantalla no los anuncie.
Enlaces que abren una nueva pestaña ¿Se informa al usuario cuando un enlace abre una nueva pestaña? Esto puede hacerse mediante un mensaje explícito en el texto del enlace, o mediante el atributo title, aria-label o aria-describedby.
Enlaces alrededor del texto ¿Los enlaces alrededor del texto son distinguibles mediante color, subrayado u otro estilo visible? Esto asegura que los usuarios los puedan identificar fácilmente.
Botones y enlaces de íconos ¿Los botones y enlaces de íconos tienen el atributo aria-label? Esto asegura una descripción precisa para el lector de pantalla.
Botones y enlaces de imagen ¿Los botones y enlaces de imagen tienen el atributo aria-label? Esto asegura una descripción precisa para el lector de pantalla.
label ¿Se utiliza la etiqueta label junto a input (de cualquier tipo), select y textarea? Esto permite a los usuarios entender la función de cada campo.
Contraste entre texto y fondo ¿El contraste cumple con la proporción mínima de 4.5:1 para texto normal y 3:1 para texto grande? Esto asegura que el texto sea legible para usuarios con baja visión o daltonismo.
Objetivos táctiles ¿Los objetivos táctiles tienen un tamaño mínimo de 44x44 píxeles? Esto facilita la interacción en dispositivos móviles.
Íconos en mensajes ¿Se procura utilizar íconos para acompañar ciertos mensajes informativos? Esto mejora la percepción y claridad del mensaje.
Lenguaje claro ¿Se utiliza un lenguaje claro y fácil de entender para la mayoría de usuarios? Esto permite que se comprenda el contenido rápidamente.
Fuente flexible ¿Se utiliza la unidad 'rem' para tamaños de fuente? Esto permite que el texto se ajuste a las preferencias del usuario.
Modal ¿Se siguen las mejores prácticas al crear un modal? (1) Cuando el modal se abre, el foco se debe trasladar al primer elemento interactivo. (2) Debe existir una trampa de foco que no permita salir del modal hasta que se cierre. (3) El modal se debe poder cerrar con la tecla Escape. (4) Cuando el modal se cierre, el foco se debe devolver al elemento que lo abrió.
Carrusel ¿Se siguen las mejores prácticas al crear un carrusel? (1) Los botones de avanzar y retroceder tienen que tener aria-label. (2) Tiene que ser navegable con teclado. (3) Las diapositivas que no están visibles tienen que tener aria-hidden para no ser anunciadas por el lector de pantalla.
Subtítulos en video ¿Todos los videos cuentan con subtítulos para usuarios con discapacidad auditiva? Esto ayuda a entender el contenido.
Controles en video ¿Los controles de reproducción, pausa y volumen del video son accesibles y navegables con teclado? Esto ayuda a controlar el video sin depender del mouse.
Reproducción automática ¿La reproducción automática se puede desactivar fácilmente? Esto evita la distracción y le otorga control al usuario.
Omitir navegación ¿Se incluye un enlace oculto que permita saltar la navegación? Esto ayuda a los usuarios de teclado a acceder rápidamente al contenido principal.
Navegador - tamaño de fuente ¿Se realizan pruebas para comprobar qué sucede si se achica o agranda el tamaño de fuente base desde el navegador? Esto asegura que el contenido se ajuste correctamente cuando los usuarios cambian el tamaño de la fuente.
Extensiones y sitios exclusivos ¿Se realizan pruebas regulares con extensiones y sitios especializados en Accesibilidad? Esto ayuda a detectar problemas.
Lectores de pantalla ¿Se realizan pruebas regulares con lectores de pantalla como NVDA, Jaws, TalkBack, VoiceOver? Esto garantiza que el contenido sea anunciado correctamente.