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)
Para Kit Digital es necesario A y AA
Resumen de criterios de accesibilidad
ContenidosBotones, labels y enlaces con contexto (nada de "click aquí")Formato de textoAlineación LTR o RTL correcta dependiendo del idiomaSi el usuario tiene puesto modo "alto contraste" debe poder seguir leyéndose bienEl 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ódigoDebe validarhttps://validator.w3.org/nu/Usar atributo lang en la etiqueta htmlTitles únicos para cada página o secciónViewport zoom NO desactivadoUsar 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 antemanoNo usar atributo autofocusNo usar atributo de title para hacer tooltips innecesarios (en un iframe, como mucho sí)TecladoQue los elementos focus se marquen visualmenteAsegú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 webImágenesDeben llevar atributo altLas imágenes decorativas no deben llevar altAcompañ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 urlOrden secuencial de encabezadosNo te saltes ninguno, no pases del h2 al h4ListasUtilizar etiquetas de lista ol, ul, etc para listar contenido.TablasLas 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é vaFormulariosTodos los input con su correspondiente labelSi tiene varias secciones, utiliza fieldset para agrupar los camposLos mensajes de error, tras el formulario.Los mensajes de error, descriptivos, no son marcas de color solamente, etc...Vídeo / AudioAUTOPLAY jamás.Cualquier vídeo o audio debe poder ser pausadoLos 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ónDiseño y maquetaciónTexto normal con ratio de contraste entre colores 4.5:1 https://webaim.org/resources/contrastchecker/Ejemplo: https://res.cloudinary.com/stark-lab/image/upload/v1649356359/contrast_levels_explained_47707623da.pngTexto grande y encabezados con ratio de 3:1Separación correcta entre elementos (hacer test straw de proximidad https://scottvinkle.me/blogs/work/proximity-and-zoom)Activar el modo de alto contraste en Windows no debe impedir la legibilidadColores diferenciadores. Si la web estuviera en escala de grises, ¿distinguirías un enlace? ¿Y un mensaje de error?AnimaciónNo deben flashear a la peñaEvita vídeos de fondo. Y si lo haces, debe poder pausarse o pararse.DispositivosEl sitio puede rotarse y verse bien en horizontal o verticalNo debe haber scroll horizontalBotones y cosas interactivas con tamaño decente para pulsarse
View all episodes
