¿Qué sucede si les digo a los diseñadores web que hay personas que pueden visitar su sitio web y que no les importa cómo se ve?
Las personas con discapacidad visual navegan por la web por las mismas razones que todos nosotros, para encontrar información, comprar y realizar una gran cantidad de tareas importantes usando aplicaciones basadas en la web. Pero las personas con discapacidad visual experimentan la red de manera diferente y debemos ser sensibles a sus necesidades cuando diseñamos y creamos sitios web.
Según la Oficina del Censo de EE. UU. Y la ONU y el Banco Mundial, más de 47 millones de estadounidenses y hasta 650 millones de personas en todo el mundo tienen algún tipo de discapacidad. Cada visitante de los sitios que diseñe necesita poder encontrar la información que está buscando y realizar las tareas que pretendía realizar, independientemente de cómo se vea la página web o la aplicación. Una gran cantidad de factores diferentes que intervienen en la creación de la página web o la aplicación pueden afectar la accesibilidad.
Tomas la píldora azul: la historia termina, te despiertas en tu cama y crees lo que quieras creer. Tomas la pastilla roja , te quedas en el país de las maravillas y te muestro qué tan profundo es el agujero del conejo. - La matriz
¿Estás listo para pasar por la conectividad de accesibilidad conmigo? Tendremos que profundizar en los aspectos técnicos de las páginas web. HTML es el esqueleto de una página web, mientras que CSS, JavaScript e imágenes mejoran el HTML. A menudo, las personas con discapacidad visual se pierden todas estas mejoras. Aunque la accesibilidad es principalmente una tarea de desarrollador, a veces los requisitos técnicos necesarios para preservar o mejorar la accesibilidad afectarán la apariencia del sitio web. Esto significa que el diseño, la copia, la experiencia del usuario y el desarrollo deben colaborar para garantizar que se pueda acceder a controles de navegación, formularios, botones, encabezados, botones, enlaces y más.
el diseño, la copia, la experiencia del usuario y el desarrollo necesitan colaborar para asegurarse de que los controles de navegación, formularios, botones, encabezados, botones, enlaces y más estén accesibles.
Las personas ciegas, con discapacidad visual, analfabetas o con problemas de aprendizaje usan tecnologías de asistencia para navegar en Internet. Los lectores de pantalla son la tecnología de asistencia más común para la web, estos programas de software intentan interpretar lo que se muestra en la página web y transmitirlo al usuario, generalmente mediante la conversión de texto a voz, pero a veces a través de un dispositivo de salida Braille. Las lupas de pantalla también se usan a menudo junto con un lector de pantalla. Normalmente, un lector de pantalla intentará analizar el HTML desde la parte superior del archivo HTML hasta la parte inferior y hablará de los elementos relevantes para el usuario. Idealmente, el lector de pantalla permitirá al usuario mover con éxito un cursor virtual hacia abajo en la página para completar campos de formulario, hacer clic en botones y realizar selecciones desde menús desplegables y otros controles.
Para probar exhaustivamente la accesibilidad, deberá asegurarse de que el sitio web o la aplicación funcionen bien en cada uno de los muchos lectores de pantalla disponibles. Hay varios lectores de pantalla gratuitos y / o de código abierto populares en cada plataforma, incluidos MANDÍBULAS y NVDA . Los usuarios de Microsoft pueden usar NVDA, mientras que las computadoras Apple y los dispositivos iOS vienen con Narración que puede ampliar los controles del teclado y leer el contenido de la pantalla, y para los dispositivos Unix hay Orca . El navegador Chrome tiene dos complementos de tecnología de asistencia, ChromeVox para leer la pantalla y ChromeVis para la ampliación
La mayoría de los problemas de accesibilidad web ocurren cuando el cursor virtual del lector de pantalla queda atrapado en una forma mal diseñada o se salta un control importante o una pieza importante de información textual. La verificación de que los sitios web son de hecho utilizables es similar a la prueba del navegador porque cada lector de pantalla tiene diferentes requisitos y limitaciones. Esta es la razón por la cual es importante comprender el comportamiento de cada lector de pantalla. Las necesidades de varios lectores de pantalla se pueden acomodar agregando varias etiquetas HTML especiales a los elementos importantes de la página.
La interfaz de usuario web dinámica y moderna puede ser especialmente problemática para la accesibilidad porque los elementos importantes se agregan dinámicamente a la página mediante JavaScript. Los menús desplegables, modales, información sobre herramientas, contenido de acordeón y errores y notificaciones dinámicos pueden ser difíciles de entender para los usuarios de lectores de pantalla debido a un error de comunicación entre HTML, JavaScript y el lector de pantalla. El HTML nativo y JavaScript no tienen forma de comunicar las actualizaciones de la página (Modelo de Objeto del Documento) a los lectores de pantalla. Los desarrolladores deben mover el "foco" (cursor virtual del lector de pantalla) a la parte de la IU que cambió. Cuando se abre un modal, los desarrolladores deben poner el foco del usuario en ese modal para que el lector de pantalla pueda leer ese contenido y el usuario pueda entenderlo e interactuar con él.
WAI-ARIA puede cerrar las brechas entre lo que dice el HTML sin procesar de la página y lo que los usuarios ven
Esto se hace mediante el uso de etiquetas HTML especiales llamadas WAI-ARIA etiquetas. WAI-ARIA (Aplicaciones de Internet enriquecidas accesibles) puede cerrar las brechas entre lo que dice el HTML sin procesar de la página y lo que ven los usuarios al proporcionar una forma estandarizada para que los desarrolladores agreguen significado adicional a los estados, propiedades, relaciones, roles y regiones en vivo que un lector de pantalla de lo contrario no lo entendería. Los desarrolladores pueden usar aria-level para explicar a los lectores de pantalla la jerarquía de cada encabezado en la página. Con aria-label los desarrolladores pueden agregar un encabezado para describir el propósito de un elemento discreto en la página. Esto ayuda a los desarrolladores a crear relaciones claras entre los diferentes elementos. Los desarrolladores también pueden llamar la atención sobre los controles importantes etiquetándolos con etiquetas aria-role, por ejemplo, un botón del menú desplegable se etiquetaría con la siguiente etiqueta: Aria-has popup: true.
Vea la pluma Pestañas simples accesibles por Scott Vinkle ( @svinkle ) en CodePen .
En el HTML del ejemplo anterior, las pestañas se crean utilizando una lista desordenada con clases en cada elemento de la lista. JQuery captura los eventos click cuando se hace clic en una pestaña y agrega 'aria-selected': 'true' y 'tab-widget__tab-content-active' a la pestaña seleccionada y oculta las otras pestañas agregando 'aria-selected': ' falso 'a las pestañas restantes. En la línea 127, se establecen los atributos iniciales para las pestañas, y estos fragmentos ayudan a los lectores de pantalla a reconocer qué pestaña es visible. JavaScript en la línea 35 también agrega compatibilidad con el teclado a las pestañas. El resto del archivo maneja la captura de los eventos de clic y teclado para que jQuery pueda agregar los atributos 'rol' y 'presentación' a la pestaña actualmente seleccionada.
Las etiquetas Aria pueden ayudar a los lectores de pantalla a interpretar controles personalizados como botones de opción cuando el control personalizado está etiquetado con: Aria-role = botón de opción. Cuando una aplicación tiene un área de espacio aislado que comunica retroalimentación o actualizaciones al usuario, puede etiquetarse con una etiqueta de región en vivo: Aria-live. Esto garantiza que cuando el texto de este elemento cambie, se le hablará automáticamente al usuario a través del lector de pantalla.
Las actualizaciones de página son una parte clave de la web para los lectores de pantalla porque cuando se produce una actualización de la página, indica al lector de la pantalla que debe anunciar la nueva página al usuario y volver a leer los contenidos de la página para el usuario. Esto significa que las aplicaciones web de una sola página presentan desafíos especiales para la accesibilidad. En una aplicación de una sola página no se actualiza la página completa, por lo que el lector de pantalla y, por lo tanto, el usuario no recibirán una alerta sobre el contenido actualizado. El resultado será que el usuario no recibe comentarios sobre sus acciones. La mejor solución es emular el comportamiento de actualización de la página nativa. En la vista cargada, actualice el título de la página y anúncielo al usuario.
El W3 mantiene las especificaciones completas de WAI-ARIA, como las especificaciones para el HTML bajo la Iniciativa de accesibilidad web (WAI), pero a veces las pautas pueden ser más útiles que las especificaciones, por lo que aquí hay algunas pautas generales para los diseñadores:
Hay varias decisiones simples que puede tomar al desarrollar un sitio web que hará que el sitio web sea más accesible sin profundizar demasiado en el marcado de accesibilidad especial o las pruebas de lector de pantalla. Al asegurarse de que su HTML transmita el significado a través de su estructura, ayudará a los lectores de la pantalla a procesar la información de la misma forma que aparece en la página para los usuarios que ven. Esto es importante para los usuarios que usan una lupa junto con un lector de pantalla.
El uso de marcas HTML apropiadas para encabezados, listas, tablas y otros elementos permite que el lector de pantalla categorice la estructura de la página para el usuario de una manera familiar. Para diseños más complicados, HTML5 proporciona elementos adicionales, como
Hemos ido muy abajo en este agujero de conejos porque los posibles beneficiarios de todo este trabajo son un grupo más amplio de lo que podrías pensar. Si alguna vez ha tratado de usar una aplicación móvil con una mano porque su otra mano lleva algo, si alguna vez ha intentado usar un mouse con su mano que no es dominante debido a una lesión, se le ha desactivado la situación. ¿Y no es maravilloso cuando tus dedos están pegajosos y aún puedes navegar un sitio web usando un teclado con tus nudillos? Desafortunadamente todos nosotros somos susceptibles a las discapacidades que vienen de envejecer, como la pérdida de memoria, la dificultad auditiva, el deterioro de la visión y el movimiento limitado.
El poder de la Web está en su universalidad. El acceso de todos sin importar la discapacidad es un aspecto esencial. - Tim Berners-Lee, Director del W3C e inventor de la World Wide Web
Imagen destacada, imagen de accesibilidad a través de Shutterstock.