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
    • 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
  • Animación
    • No deben flashear a la peña
    • Evita vídeos de fondo. Y si lo haces, debe poder pausarse o pararse.
  • Dispositivos
    • El sitio puede rotarse y verse bien en horizontal o vertical
    • No debe haber scroll horizontal
    • Botones y cosas interactivas con tamaño decente para pulsarse