Accesibilidad y diseño inclusivo
Desarrollo
Para que todas las personas puedan acceder al contenido de un servicio digital, se necesita que el código también esté optimizado para lectores de pantalla. Esto ayudará a que las personas invidentes puedan escuchar el contenido e interactúen con el servicio, ayudadas por el software de su preferencia.
Estos son los requerimientos mínimos en cuanto a desarrollo que se deben incluir en todos los servicios:
Texto alternativo para imágenes
Cuando usas imágenes, las personas invidentes -que usan softwares de lectura de pantalla- necesitan un texto alternativo que les describa lo que está pasando en la foto o imagen. Recuerda solo usar imágenes para aportar información valiosa al usuario (ej.: una ayuda sobre dónde encontrar el dígito verificador del DNI). Si tu imagen es decorativa, no necesita texto alternativo, pero entonces debes revisar si es necesario incluirla.
Indicar el idioma en que se encuentra la página
Para que un software de lectura de pantalla pueda leer adecuadamente la información, la página o servicio debe indicar dentro de su código en qué idioma se encuentra. Esto se logra con el atributo lang, dentro de la etiqueta html.
Utilizar las etiquetas correctas de HTML5 y aria-labels
La estructura de cada página debe tener las etiquetas correctas para identificar títulos, formularios, listas, entre otros. En caso no exista un elemento nativo de HTML para un elemento que uses, debes utilizar aria-labels. Estas etiquetas permiten “nombrar” el elemento para que pueda ser reconocido por los lectores de texto. Los aria-labels también pueden ser empleados para mejorar la interactividad al utilizar lectores de pantalla.
Considerar el orden en que se muestra la información para ordenar el código
En lo posible, estructura el código en el orden en que un usuario va a consumirlo. Es decir, si tienes una foto y el título está debajo, es mejor colocar en el código primero el título y, luego, la imagen.
Elementos interactivos usando el teclado
Asegúrate de que el usuario pueda utilizar su teclado para ir de un elemento interactivo a otro. Debe poder controlar un menú, un acordeón (elementos con opciones desplegables) o un reproductor de video utilizando las teclas.
Usar código CAPTCHA cuando sea necesario
Los captchas se usarán cuando el formulario genere registros spam o si es imperativo proteger las consultas (como la autenticación de DNI). Si necesitas utilizar CAPTCHA, debes implementar uno que sea accesible para personas que navegan con un software de lector de pantalla. Una alternativa es utilizar un reCAPTCHA en español.
Hemos señalado los requerimientos mínimos de desarrollo que debe cumplir tu servicio, pero puedes incluir otras mejoras como las que aparecen en https://www.w3.org/WAI/tips/developing/
Referencias
Henry, S. (2005). Introduction to Web Accessibility. mayo 15, 2020, de Education and Outreach Working Group Sitio web: https://www.w3.org/WAI/fundamentals/accessibility-intro/
White, K. & Henry, S. (2015). Designing for Web Accessibility. mayo 15, 2020, de Education and Outreach Working Group (EOWG) Sitio web: https://www.w3.org/WAI/tips/designing/
White, K., Abou-Zahra, S. & Henry, S. (2015). Developing for Web Accessibility. mayo 16, 2020, de Education and Outreach Working Group (EOWG) Sitio web: https://www.w3.org/WAI/tips/developing/