Krypton Solid

El valor de la accesibilidad

El valor de la accesibilidad

¿Qué pasaría si les dijera a los diseñadores web que hay personas que pueden visitar su sitio web a las que no les importa cómo se ve?

Las personas con discapacidad visual navegan en la web por las mismas razones que todos nosotros, para encontrar información, comprar y realizar una gran cantidad de tareas importantes utilizando aplicaciones basadas en la web. Pero las personas con discapacidad visual experimentan la web de manera diferente y debemos ser sensibles a sus necesidades cuando diseñamos y construimos 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. Todos los visitantes de los sitios que diseña deben poder encontrar la información que buscan y realizar las tareas que pretendían realizar, independientemente del aspecto de la página web o la aplicación. Muchos 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. Tu tomas el rojo píldora: 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 bajar conmigo por la bodega de accesibilidad? 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 del desarrollador, a veces los requisitos técnicos necesarios para preservar o mejorar la accesibilidad afectarán la apariencia del sitio web. Eso significa que el diseño, la copia, la experiencia del usuario y el desarrollo deben colaborar para asegurarse de que los controles de navegación, formularios, botones, encabezados, botones, enlaces y más sean accesibles.

el diseño, la copia, la experiencia del usuario y el desarrollo deben colaborar para asegurarse de que los controles de navegación, formularios, botones, encabezados, botones, enlaces y más sean accesibles

Las personas ciegas, con discapacidad visual, analfabetas o con problemas de aprendizaje utilizan tecnologías de asistencia para navegar por 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 del texto en voz, pero a veces a través de un dispositivo de salida Braille. Las lupas de pantalla también se utilizan a menudo junto con un lector de pantalla. Por lo general, un lector de pantalla intentará analizar el HTML desde la parte superior del archivo HTML hasta la parte inferior y hablará los elementos relevantes al usuario. Idealmente, el lector de pantalla permitirá al usuario mover con éxito un cursor virtual hacia abajo en la página para completar los campos del formulario, hacer clic en los botones y hacer selecciones en los menús desplegables y otros controles.

Para probar a fondo la accesibilidad, deberá asegurarse de que el sitio web o la aplicación funcionan bien en cada uno de los muchos lectores de pantalla disponibles. Hay varios lectores de pantalla de código abierto y / o gratuitos 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 lectura de pantalla y ChromeVis para aumento.

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. Verificar que los sitios web sean realmente utilizables es similar a las pruebas del navegador porque cada lector de pantalla tiene diferentes requisitos y limitaciones. Por eso es importante comprender el comportamiento de cada lector de pantalla. Las necesidades de varios lectores de pantalla se pueden satisfacer agregando varias etiquetas HTML especiales a los elementos importantes de la página.

La interfaz de usuario web dinámica moderna puede ser particularmente problemática para la accesibilidad porque los elementos importantes se agregan a la página de forma dinámica mediante JavaScript. Los menús desplegables personalizados, los modales, la información sobre herramientas, el contenido de acordeón y los errores y notificaciones dinámicos pueden ser difíciles de entender para los usuarios de lectores de pantalla debido a una falla en la comunicación entre HTML, JavaScript y el lector de pantalla. HTML y JavaScript nativos no tienen forma de comunicar las actualizaciones de la página (modelo de objetos de documento) a los lectores de pantalla. Los desarrolladores deben mover el «foco» (el cursor virtual del lector de pantalla) a la parte de la interfaz de usuario que cambió. Cuando se abre un modal, los desarrolladores deben poner el enfoque del usuario en ese modal para que el lector de pantalla pueda leer ese contenido y el usuario pueda comprenderlo e interactuar con él.

WAI-ARIA puede cerrar la brecha entre lo que dice el HTML sin procesar de la página y lo que ven los usuarios videntes.

Esto se hace mediante el uso de etiquetas HTML especiales llamadas WAI-ARIA etiquetas. WAI-ARIA (Accessible Rich Internet Applications) puede cerrar la brecha entre lo que dice el HTML sin procesar de la página y lo que ven los usuarios videntes al proporcionar una forma estandarizada para que los desarrolladores agreguen un significado adicional a los estados, propiedades, relaciones, roles y regiones activas que un lector de pantalla de otra manera no lo entendería. Los desarrolladores pueden utilizar el nivel de aria para explicar a los lectores de pantalla la jerarquía de cada título de 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 diferentes elementos. Los desarrolladores también pueden llamar la atención sobre controles importantes etiquetándolos con etiquetas aria-role, por ejemplo, un botón de menú desplegable se etiquetaría con la siguiente etiqueta: Aria-has popup: true.

Ver la pluma Pestañas accesibles simples 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 de clic 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’: ‘ false ‘a las pestañas restantes. En la línea 127 se establecen los atributos iniciales para las pestañas, juntos estos fragmentos ayudan a los lectores de pantalla a reconocer qué pestaña es visible. El JavaScript en la línea 35 también agrega soporte de teclado a las pestañas. El resto del archivo maneja la captura de eventos de clic y teclado para que jQuery pueda agregar atributos de ‘rol’ y ‘presentación’ a la pestaña actualmente seleccionada.

Las etiquetas Aria pueden ayudar a los lectores de pantalla a interpretar los controles personalizados como botones de radio cuando el control personalizado está etiquetado con: Aria-role = radio button. Cuando una aplicación tiene un área de espacio aislado que comunica comentarios o actualizaciones al usuario, se puede etiquetar con una etiqueta de región en vivo: Aria-live. Esto asegura 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 página, le indica al lector de pantalla que debe anunciar la nueva página al usuario y volver a leer el contenido de la página al usuario. Esto significa que las aplicaciones web de una sola página plantean desafíos especiales para la accesibilidad. En una aplicación de una sola página, no hay actualizaciones de página completa, por lo que el lector de pantalla y, por lo tanto, el usuario no serán alertados sobre el contenido actualizado. El resultado será que el usuario no reciba 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 anuncielo al usuario.

El W3 mantiene las especificaciones completas para WAI-ARIA como las especificaciones para HTML en el marco de 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:

  • asegúrese de que haya un contraste visual entre el texto y su fondo.
  • no use el color solo para transmitir información;
  • proporcionar a su sitio web una navegación clara y coherente;
  • asegurarse de que los elementos del formulario incluyan claramente las etiquetas asociadas;
  • asegurarse de que los elementos de retroalimentación, como los mensajes de error, se puedan identificar fácilmente;
  • use encabezados y espacios para agrupar contenido relacionado;
  • proporcionar texto alternativo para las imágenes;
  • considere diseñar su sitio web para que todas las funciones sean accesibles a través del teclado.

Hay varias decisiones simples que puede tomar al desarrollar un sitio web que lo harán más accesible sin profundizar demasiado en el marcado especial de accesibilidad o las pruebas de lectores de pantalla. Al asegurarse de que su HTML transmita significado a través de su estructura, ayudará a los lectores de pantalla a procesar la información de la misma manera que aparece en la página para los usuarios videntes. Esto es importante para los usuarios que utilizan una lupa junto con un lector de pantalla.

El uso de marcado HTML apropiado para encabezados, listas, tablas y otros elementos permite al lector de pantalla categorizar la estructura de la página para el usuario de una manera familiar. Para diseños más complicados, HTML5 proporciona elementos adicionales, como

Deja un comentario