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 al usuario a entender en qué página se encuentra.
• Regiones ¿Se utilizan etiquetas semánticas para designar regiones? Por ejemplo: header, nav, main, section, article, aside, footer. Esto mejora la estructura del contenido.
• Etiquetado de 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.
• Orden de Encabezados ¿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 los elementos interactivos (botones, enlaces, etc.) es claramente visible? Esto ayuda a los usuarios a navegar por el sitio de manera eficiente, especialmente a aquellos que dependen del teclado o tecnologías de asistencia.
• Zoom del navegador ¿El contenido de la página sigue siendo accesible y funcional al aplicar un zoom del 400%? Esto es importante, ya que muchos usuarios con baja visión dependen de esta función para leer y navegar.
• 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 (botones, enlaces, etc.) tienen un tamaño mínimo de entre 24x24 y 44x44 píxeles? Esto asegura una interacción cómoda y accesible 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.