✏️ Suscribirse

https://youtu.be/cAU3CKy4HN0




Repasamos los requisitos de accesibilidad de la WCAG para que tus webs sean más accesibles y puedas optar a desarrollar para Kit Digital o Instituciones.



Qué es la accesibilidad.



Todo aquello que permita a todos los usuarios el entendimiento, el aprendizaje, la navegación y la plena interacción con la web.



Pero claro, todos es todos. Ciudadanos con dificultades motrices, sensoriales o cognitivas deben también poder acceder al contenido correctamente. Y es aquí donde entran las prácticas de accesibilidad.



Niveles según la WCAG (Pautas de Accesibilidad al Contenido en la Web)



Incluyen las Pautas de Accesibilidad para Herramientas de Autor (ATAG) y las Pautas de Accesibilidad para Agentes de Usuario (UAAG)




Nivel A 30 criterios 



Nivel AA 19 criterios 



Nivel AAA 29 criterios 




Para Kit Digital es necesario A y AA



Resumen de criterios de accesibilidad




Contenidos

Botones, labels y enlaces con contexto (nada de "click aquí")



Formato de texto

Alineación LTR o RTL correcta dependiendo del idioma



Si el usuario tiene puesto modo "alto contraste" debe poder seguir leyéndose bien



El ancho no supera los 80 caracteres o glifos.



El texto no está justificado.



El interlineado (interlineado) es al menos de espacio y medio dentro de los párrafos, y el espacio entre párrafos es al menos 1,5 veces mayor que el interlineado.



El texto se puede cambiar de tamaño desde el navegador hasta en un 200 por ciento de una manera que no requiere que el usuario se desplace horizontalmente para leer una línea de texto en una ventana de pantalla completa.







HTML y Código

Debe validar

https://validator.w3.org/nu/





Usar atributo lang en la etiqueta html



Titles únicos para cada página o sección



Viewport zoom NO desactivado



Usar landmark regions para lo importante (nav, main...)



Los links deben llevar etiqueta a. No vale eso de data, etc que hacía JetEngine.



Si vas a usar un link en pestaña nueva, el usuario debe saberlo de antemano



No usar atributo autofocus



No usar atributo de title para hacer tooltips innecesarios (en un iframe, como mucho sí)





Teclado

Que los elementos focus se marquen visualmente



Asegúrate de que cuando navegas con teclado, el elemento seleccionado (focus) se ve (no está dentro de un dropdown, etc)



Intenta que el orden del focus tenga sentido y vaya en consonancia con la web





Imágenes

Deben llevar atributo alt



Las imágenes decorativas no deben llevar alt



Acompaña a las imágenes explicativos tipo gráficos o esquemas, de un texto descriptivo en el contenido.



Si la imagen incluye texto, ese texto debe estar en el alt (Logo de FedEX, alt = FedEx)





Encabezados (H1, H2...)

Úsalos para introducir el contenido que viene después. No para cuestiones de diseño (fondo de letras gigante etc).



Un solo H1 por url



Orden secuencial de encabezados



No te saltes ninguno, no pases del h2 al h4





Listas

Utilizar etiquetas de lista ol, ul, etc para listar contenido.





Tablas

Las tablas son para mostrar contenido tabulado (no maquetar cosas)



Incluir etiqueta th para el encabezado de la tabla (incluso definir su scope vertical u horizontal es recomendable)



Incluye un caption a la tabla para describir de qué va





Formularios

Todos los input con su correspondiente label



Si tiene varias secciones, utiliza fieldset para agrupar los campos



Los mensajes de error, tras el formulario.



Los mensajes de error, descriptivos, no son marcas de color solamente, etc...





Vídeo / Audio

AUTOPLAY jamás.



Cualquier vídeo o audio debe poder ser pausado



Los vídeos no pueden contener más de 3 flashes en menos de 1 segundo.



Usa caption en los vídeos.



Los audios deben poder verse con transcripción





Diseño y maquetación

Texto normal con ratio de contraste entre colores 4.5:1 https://webaim.org/resources/contrastchecker/

Ejemplo: https://res.cloudinary.com/stark-lab/image/upload