165. Haz tus webs más accesibles | Cumple el estándar para Kit Digital y webs institucionales

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 l