Los contornos de enfoque, los gran abandonados de la accesibilidad

Los contornos de enfoque resaltan el elemento interactivo activo en una página web. Son cruciales para la accesibilidad, especialmente para los usuarios de teclado y aquellos con discapacidades motoras. Suelen considerarse un requisito puramente técnico, algo que los desarrolladores gestionan mientras los diseñadores y los clientes se centran en los elementos de diseño "reales". Sin embargo, son esenciales para muchos usuarios y pueden ser una parte clave de la identidad visual de su sitio.

Usando :focus-visible en lugar de :focus

:focus-visible es una pseudoclase muy elegante que solo aplica estilos de foco cuando los usuarios navegan con el teclado. De esta manera, los usuarios del mouse no verán un contorno de foco persistente cuando hagan clic en un elemento.

Dato curioso: antes de que :focus-visible se introdujera, muchos desarrolladores simplemente eliminaban los contornos de enfoque por completo outline: none para que no aparecieran al hacer clic con el mouse. 

currentColor

Al usar currentColor esta opción, el color del contorno se corresponde con el color del texto actual. De esta manera, el contorno siempre coincidirá con el color del texto, sin importar dónde se utilice.

Es un buen punto de partida, pero seguramente tendrás que ajustarlo para diferentes elementos o fondos.

Lista de verificación para pruebas rápidas

• Deje el ratón a un lado y navegue por su sitio con el teclado

• Comprueba si siempre puedes ver tu posición actual y si todos los elementos interactivos muestran un contorno

• Pruebe la visibilidad y el contraste del contorno con diferentes fondos

• Busque problemas visuales como bordes irregulares o contornos cortados.

• Comparar formas de contorno en diferentes elementos y contextos.

• Asegúrese de que el diseño del esquema se integre bien con el lenguaje visual de su sitio.

La seguridad en las aplicaciones de los bancos y la accesibilidad una pelea constante

Seamos realistas, independientemente de su nivel de habilidad, la mayoría de las aplicaciones bancarias no son particularmente fáciles de usar. Suelen estar atascados con interfaces difíciles que podrían hacer llorar a un diseñador de UX.

Al utilizar diferentes aplicaciones bancarias, he notado una tendencia inquietante en la que las llamadas características de "seguridad" están haciendo que el sitio web sea una experiencia más hostil para los usuarios discapacitados. A continuación, he reunido algunos de los peores anti patrones para analizar cómo están creando barreras para las personas discapacitadas.

Deshabilitar los administradores de copiar y pegar/contraseñas

Cada vez es más común ver sitios que impiden copiar y pegar en los campos de contraseña. Las pautas de accesibilidad al contenido web (WCAG) 2.2 recientemente formalizadas han agregado el criterio 3.3.8 , que menciona explícitamente el soporte para copiar y pegar, así como administradores de contraseñas, como mecanismos válidos para satisfacer este criterio.( es una excepción, pero mal pensada).

Bloquear copiar y pegar a menudo tiene el efecto de bloquear también los administradores de contraseñas. Estoy seguro de que no necesito entrar en detalles sobre lo frustrante que puede ser esto para los usuarios de administradores de contraseñas, quienes a menudo usan esos administradores de contraseñas para generar contraseñas largas de cadenas alfanuméricas aleatorias que ahora tienen que escribir carácter por carácter. Iniciar sesión, un proceso que debería llevarme 10 segundos como máximo, puede llevar hasta 5 minutos de dolorosa prueba y error.

Para los usuarios de dictado por voz, deshabilitar los administradores de contraseñas es aún más desastroso. El software de dictado de voz Dragon es un software de manos libres que funciona cuando el usuario dicta comandos de voz al software. Un ejemplo aproximado (no en Dragon real) de un comando podría ser algo como 'Haga clic en la extensión [Administrador de contraseñas]' > 'Buscar [Nombre del banco]' > 'Elija el segundo elemento de una lista', lo que rellenaría los campos de nombre de usuario y contraseña automáticamente. . Al desactivar copiar y pegar, el usuario se ve obligado a dictar su contraseña completa en voz alta, lo que significa que un usuario de Dragon debe estar en un lugar donde nadie pueda escucharlo para mantener una expectativa razonable de privacidad.

Lo peor de todo es que, a diferencia de lo que pretendían los autores de la aplicación, deshabilitar copiar y pegar y los administradores de contraseñas puede tener un impacto negativo en la seguridad, ya que fomenta la reutilización de contraseñas. Aunque cada vez hay más conciencia pública sobre por qué la reutilización de contraseñas es mala, es poco probable que las personas cambien su comportamiento hasta que la alternativa sea fácil, y en este momento, no lo es.

CAPTCHA

Un CAPTCHA es un tipo de prueba empleada por los desarrolladores web para poder saber si el usuario es un humano real o un robot. Hoy en día, es más raro que los usuarios vean CAPTCHA en la naturaleza debido a la adopción generalizada de reCAPTCHA v3, un servicio de Google que afirma ser capaz de detectar actores maliciosos sin necesidad de un desafío interactivo. Dejando de lado por un momento las preocupaciones sobre la privacidad, puede resultar difícil para la heurística basada en el comportamiento distinguir a los usuarios discapacitados de los bots. Por ejemplo, un usuario de lector de pantalla puede parecer un bot debido a que no tiene un movimiento normal del mouse.

Autenticación de dos factores (2FA)

Aunque tienden a ser mejores que los CAPTCHA, las soluciones de autenticación de dos factores (en adelante abreviada como 2FA) a menudo plantean diferentes tipos de desafíos para los usuarios discapacitados. Hay varias formas en las que normalmente funciona 2FA, pero el formato más común con diferencia, con más del 90% de los sitios que utilizan este método, es el SMS, donde se le envía un código a través de un mensaje de texto y usted debe ingresar ese mismo código en la solicitud. El correo electrónico también es común, y las aplicaciones de autenticación especializadas ocupan un distante tercer lugar. Estas soluciones plantean un desafío similar a los usuarios de dictado de voz como se mencionó anteriormente, aunque el riesgo de seguridad se ve mitigado en cierta medida por la naturaleza única de estas contraseñas temporales.

Las soluciones 2FA casi siempre tienen un tiempo estricto, y algunas duran tan solo 20 segundos. Pedir a los usuarios que memoricen cadenas arbitrarias puede suponer un desafío para los usuarios con discapacidades cognitivas, y los cortos límites de tiempo suelen resultar frustrantes para todos los usuarios. Todavía tengo que ver una solución 2FA que permita al usuario extender el tiempo según lo requiere 2.2.1 Temporización ajustable . Tener la opción de generar un nuevo código puede no ser un reemplazo suficiente, ya que el período de tiempo puede ser tan corto que un usuario discapacitado nunca podrá completarlo dentro del tiempo asignado.

El hecho de que estas soluciones 2FA a menudo requieran el uso de múltiples dispositivos puede resultar problemático. Si un usuario ciego está usando una computadora y también necesita usar un dispositivo móvil para recibir un SMS, es posible que deba cambiar sus auriculares al dispositivo móvil para escuchar el código. Además, algunas configuraciones de tecnología de asistencia son tan específicas que los usuarios pueden estar limitados a un dispositivo específico, como ciertos tipos de pantallas Braille que pueden funcionar solo con un dispositivo principal.

Claves de seguridad física

Aunque las claves de seguridad físicas son el método menos popular para 2FA, pueden resultar muy beneficiosas para la accesibilidad. En lugar de requerir que los usuarios memoricen o ingresen cadenas arbitrarias, las llaves de seguridad físicas funcionan permitiendo al usuario presionar un botón en la propia llave. Los usuarios ciegos, han escrito reseñas generalmente positivas de la tecnología, pero señala que existen algunos problemas de accesibilidad que pueden variar desde “algo molestos hasta espectaculares”.

Con estos dispositivos, la accesibilidad depende de un tercero, cuyas aplicaciones no están bajo tu control. Si bien estas aplicaciones pueden ser generalmente accesibles.

Otro inconveniente de esta forma de 2FA es el costo inicial. Aunque las llaves más baratas, que se encuentran por 20 euros, pueden no ser tan costosas para las personas en países con un alto poder adquisitivo, este costo puede ser bastante exorbitante para algunos, y parece injusto obligar a los usuarios discapacitados a comprar algo extra para compensar.

Biometría

La última forma de 2FA está ligada a la biometría de los usuarios. En estas implementaciones, la aplicación se basa en la capacidad incorporada del dispositivo para recopilar verificación biométrica para confirmar la identidad de un usuario. Si elige utilizar esta forma de 2FA, sea indulgente con las formas que acepte. Las huellas dactilares o el reconocimiento facial pueden ser más fáciles para los usuarios que no pueden recordar una cadena arbitraria, pero pueden resultar frustrantes para los usuarios a quienes les faltan extremidades, tienen problemas de movilidad o tienen una apariencia facial que se considera "no estándar". Cualquiera que haya tenido la experiencia de intentar mantener una videollamada con un familiar mayor al que le cuesta poner toda su cara en el encuadre comprenderá que algunas cosas que algunos perciben como fáciles son muy difíciles para otros, dependiendo de su capacidad.

No existe un método universalmente perfecto para 2FA. Lo mejor que usted, como desarrollador de aplicaciones, puede hacer es permitir que el usuario elija su método de 2FA para que pueda elegir un método que funcione para él.

Bloquear eventos de teclado

Configurar algo como role="application o aria-hidden="true"puede causar fácilmente que una aplicación se rompa por completo o se oculte para los usuarios de lectores de pantalla. De cualquier manera, tenga cuidado al realizar anulaciones drásticas del comportamiento del teclado en toda la aplicación.

Falta de paridad de funciones entre las aplicaciones de escritorio y móviles

(Este punto tiene menos que ver con la seguridad y más con los equipos que intentan reducir la complejidad en diferentes productos digitales,)

Recientemente recibí un correo de HSBC en el que se me informaba que iban a suspender los servicios de la aplicación web y trasladarlos exclusivamente a la aplicación móvil. Como he mencionado anteriormente, algunos tipos de discapacidades requieren tecnologías de asistencia específicas y no siempre es posible para los usuarios puedan cambiar de dispositivo con facilidad. Si es posible, es mejor asegurarse de que las funciones clave estén disponibles en tantas plataformas como sea posible.

Aria-live, para mejorar la navegación

 

Las aplicaciones dinámicas son las que actualizan el contenido de la página sin tener que volver a cargar la página web. Un ejemplo común sería actualizar los resultados de los partidos de futbol, mostrar banners de alerta de éxito o advertencia, nuevos mensajes de chat y muchos más.

 

El atributo aria-live permite que las tecnologías de asistencia, como los lectores de pantalla, transmitan actualizaciones de contenido a un usuario de lector de pantalla, mejorando la experiencia del usuario al mantenerlo informado de los cambios que ocurren en la página.

Descripción del atributo ARIA Live

ARIA, o Accessible Rich Internet Applications, es un conjunto de atributos que definen formas de hacer que el contenido y las aplicaciones web sean más accesibles para las personas con discapacidades.

aria-live se utiliza para definir regiones de una página web que están activas y que deben ser anunciadas por tecnologías de asistencia, como lectores de pantalla, cuando se actualizan o cambian dinámicamente.

Tipos de regiones activas de ARIA

Puede utilizar las siguientes opciones de atributos de ARIA Live en función de la urgencia de cómo se debe anunciar el contenido dinámico a los usuarios. Estas opciones incluyen:

 

·       aria-live="off": De forma predeterminada, está desactivado. Este valor indica que las tecnologías de asistencia no deben anunciar cambios en el contenido dentro de la región.

·       aria-live="polite": Con este valor, los cambios se anuncian al usuario una vez completada la tarea actual. Es útil para actualizaciones no críticas que no interrumpen trabajo del usuario.

·       aria-live="assertive": Este valor indica que los cambios se anuncian inmediatamente, incluso si el usuario está en medio de una tarea. Es adecuado para actualizaciones importantes que requieren atención inmediata. Aria-live assertive se comporta de manera similar a role=" alert" con la única diferencia de que un lector de pantalla agrega la palabra "alerta" al principio. Tenga en cuenta que un anuncio asertivo interrumpirá un lector de pantalla si está en medio de la lectura del texto y leerá el anuncio aria-live. Lo que sea que el lector de pantalla haya estado leyendo se truncará y no continuará automáticamente después del anuncio de aria-live.

Los nuevos accesorios de accesibilidad adaptativa de Microsoft

Microsoft ha cosechado durante mucho tiempo aplausos por su enfoque en la accesibilidad. Es un gran segmento de la población que con demasiada frecuencia se ignora como una ocurrencia tardía cuando se trata de diseño de productos. La compañía ha ofrecido periféricos Xbox centrados en la accesibilidad 

La fuente del texto y la dixlexia

 

No puede predecir cuáles son las necesidades de cada usuario, cuando agregues fuentes a tus productos digitales, asegúrate de tener en cuenta lo siguiente.

Asegúrese de evitar los tipos de letras ornamentadas o escritas a mano, así como los que solo usan mayúsculas y minúsculas. Estos tipos de letras especiales con diseños con cursivas, formas extravagantes o características artísticas como líneas finas, estos pueden verse bien, pero para algunas personas con discapacidades son mucho más difíciles de leer que los tipos de letras comunes.

Google fonts

Los tamaños de fuente base (encabezados…) se deben definir con un valor relativo (%, rem o em) para permitir un cambio de tamaño sencillo.

Calculadora de tipografia

Limite la cantidad de variaciones del tipo de letra, como color, negrita , MAYÚSCULAS y cursiva para aumentar la legibilidad. En su lugar, usa métodos para enfatizar palabras, como asteriscos, guiones o destacar una palabra individual.

Siempre que sea posible, use un lenguaje de marcado en lugar de texto en imágenes

. Los lectores de pantalla no pueden leer texto incorporado en imágenes (sin agregar código adicional), y el texto incorporado también puede pixelarse cuando los usuarios con visión reducida lo amplían.

Si bien el tipo de letra, el tamaño de la fuente y el estilo tipográfico son importantes para la tipografía accesible, la estructura y el diseño del texto de una página pueden ser igualmente importantes para la comprensión del usuario.

Los diseños complejos pueden ser un verdadero obstáculo para las personas con visión reducida o problemas de lectura.

Un aspecto importante de los diseños de diseño accesibles es hacer que los elementos fundamentales se distingan entre sí y agrupar elementos similares. Si los elementos están demasiado cerca, puede ser difícil saber dónde comienza y termina un elemento, en especial si tienen un estilo similar.

El espacio entre párrafos, oraciones y palabras también es importante, ya que ayuda a los lectores a mantener su enfoque en el texto y contribuir a la comprensión visual general de la página. Las líneas extensas de texto pueden ser una barrera para los lectores con discapacidades, ya que tienen problemas para mantenerse en un lugar y seguir el flujo del texto.

Otra frustración para muchas personas con discapacidades es leer copias justificadas. El espaciado desigual entre palabras en un texto justificado puede hacer que se formen en la página "ríos de espacio", lo que dificulta la lectura.

La justificación del texto también puede hacer que las palabras se agrupen o estiren de forma poco natural, por lo que los lectores pueden tener dificultades para ubicar los límites de las palabras.

 

La superposición, una solución pésima

 

Cuando se proponga hacer que sus productos sean accesibles, las superposiciones de accesibilidad web (o widgets de accesibilidad) son una posible solución que probablemente encontrará.

Comercializados como una "solución rápida", los proveedores prometen que las superposiciones de accesibilidad realizarán instantáneamente todas las reparaciones necesarias en su sitio web y ayudarán a que sus problemas de conformidad con las WCAG desaparezcan en segundos.

Si está considerando utilizar una superposición de accesibilidad para que su sitio web cumpla con la ADA, no lo haga.

Estas soluciones no resuelven adecuadamente la accesibilidad, a menudo empeoran el UX y aumentarán la probabilidad de que lo demanden . La única manera de mejorar la accesibilidad digital es hacer el trabajo necesario para volverse accesible, y eso no sucederá de la noche a la mañana.

 

¿Qué son las superposiciones de accesibilidad?

Es una herramienta complementaria que detecta problemas de accesibilidad directamente en una página web e intenta "repararlos" en tiempo real, en lugar de hacerlo dentro del código web, como es necesario. Por lo general, obtendrá un fragmento de código JavaScript para conectarlo a su sitio web, que luego intentará solucionar automáticamente los problemas de accesibilidad en segundo plano a medida que se carga la página.

 

Algunas superposiciones/widgets de accesibilidad brindan funciones adicionales para los usuarios, generalmente como un pequeño ícono disponible en la página. Los usuarios pueden hacer clic en el icono para abrir un menú de opciones de accesibilidad con el que pueden interactuar. El menú generalmente se limita a funciones básicas de accesibilidad que ya se incluyen en los lectores de pantalla, por ejemplo, tamaño del texto, contraste de color, lectura de texto en voz alta, detener animación, etc.

 

Esta es una solución tremendamente ineficaz que no logra realizar mejoras de accesibilidad y obliga a los usuarios con discapacidades a aprender otra herramienta de accesibilidad más para poder interactuar con su contenido.

¿Su sitio cumple con la ley?

Esto no sólo perjudica significativamente a los usuarios con discapacidades, sino que plantea una serie de problemas para su organización.

Numerosas brechas de accesibilidad quedarán sin abordar

Las deficiencias de las superposiciones de accesibilidad son de conocimiento común en la industria de la accesibilidad, y la mayoría de los expertos coinciden en que solo son capaces de detectar entre el 20 y el 30 % de los problemas que ocurren en su sitio web. Esto significa que entre el 70% y el 80% de los problemas ni siquiera serán detectados por una superposición, y mucho menos solucionados.

Estos son solo algunos elementos que no se pueden solucionar con una superposición:

·       Campos de formulario sin etiquetar o mal etiquetados

·       Zoom desactivado

·       Ancho mínimo

·       Uso de tablas para el diseño.

·       Enlaces de texto de anclaje ambiguos

·       Imágenes de texto

·       Orden de enfoque

·       texto alternativo

·       Identificación consistente

·       Uso solo del teclado

·       Prevención de errores

·       sugerencias de errores

·       Trampas de teclado

·       Estructura de encabezado incorrecta

·       Idioma mal identificado

·       Subtítulos

·       Orientación de pantalla

Los proveedores de superposiciones de accesibilidad harán innumerables promesas falsas, garantizarán que su sitio web estará arreglado para cumplir con el 100 % de los requisitos de ADA y WCAG y le permitirán irse pensando que ha hecho lo que la ley, le pedía, cuando en realidad solo ha instalado una interfaz superficial. solución que no logra realizar mejoras significativas en la accesibilidad.

Las correcciones no cumplirán con las WCAG

Cumplir con las WCAG es un proceso que requiere experiencia especializada y pruebas realizadas por expertos, incluidas personas con discapacidades; las superposiciones de accesibilidad simplemente no se pueden comparar. Debido a que son solo códigos colocados en la parte superior de su sitio web, en realidad no se está realizando ningún trabajo de reparación para abordar los problemas de accesibilidad.

 

Si se utilizó una herramienta de escaneo de accesibilidad en su sitio, los resultados serían los mismos con y sin la superposición.

 

 

Las superposiciones no abordan sus propiedades móviles

Ser accesible no termina en su sitio web: la accesibilidad se extiende a todos sus productos digitales. A menos que su sitio web, sitio móvil y aplicaciones digitales sean idénticos en todos los sentidos, debe asegurarse de que todas las propiedades estén completamente remediadas. Dado que cada vez más usuarios dependen de los dispositivos móviles para hacer sus cosas, es un canal que no puede ignorar.

El tráfico móvil representa ahora la mitad del tráfico web en todo el mundo.

No pierda el tiempo en una solución de accesibilidad inútil que solo soluciona parte de su problema.

 

Riesgos de privacidad y rendimiento

No es ningún secreto, cuantas más cosas tengas en tu sitio, más lento podrá funcionar. Las superposiciones son secuencias de comandos y, a menudo, están alojadas en el servidor del proveedor, lo que significa que no tienes control sobre la velocidad o la seguridad.

Si su servidor es pirateado, su sitio web podría ser el siguiente. Si sus servidores o el script de superposición son lentos, es probable que su sitio web se vea afectado.

Dado que la paciencia del cliente ya está baja (el 40% de los consumidores no esperará más de tres segundos a que se cargue una página web ), ¿realmente desea darle a la gente otra razón para abandonarla? Simplemente no vale la pena correr todos los riesgos por una solución de accesibilidad ineficaz.

Superposiciones y demandas de accesibilidad

Los demandantes presentaron 1.519 demandas en tribunales estatales (33%) y 3.086 en tribunales federales (67%). Esto indica que las demandas estatales se están volviendo tan importantes como las demandas federales por accesibilidad digital.

Los sitios web de comercio electrónico son los más citados en las demandas de accesibilidad digital. Las empresas con ubicaciones físicas ocupan un lugar destacado en la lista de objetivos.

En pocas palabras, usar una superposición de accesibilidad es a menudo peor que no hacer nada para solucionar sus problemas de accesibilidad, porque lo engaña haciéndole pensar que ha hecho lo necesario para ser accesible, cuando en realidad apenas ha arañado la superficie.

 

Lograr que sus propiedades digitales cumplan con ADA , AODA , Sección 508 y otras regulaciones globales lleva tiempo y requiere un enfoque continuo.

 

Lograr el cumplimiento de la accesibilidad de esta manera protegerá adecuadamente a su empresa de posibles acciones legales y permitirá a los usuarios con discapacidades interactuar con su sitio web por igual, de una manera que les funcione. Asociarse con un proveedor de accesibilidad confiable que ofrezca soluciones viables hará que el proceso sea mucho más sencillo.