La compañía de tecnología para personas con discapacidad Psykinetic se lanzó en Sydney hoy, dando una idea del futuro de la tecnología de accesibilidad.
La compañía lanzó tres productos emblemáticos diseñados para mejorar las vidas de las personas con discapacidades físicas de alto nivel. Los tres utilizan tecnología de seguimiento ocular para interacciones sin contacto.
Y aunque el hardware de seguimiento ocular existe desde hace un tiempo, el producto Psykinetic demostró una forma más sólida y efectiva para que los usuarios interactúen con la tecnología. La compañía también está trabajando en la integración de interfaces controladas por el cerebro en sus productos.
El primer producto estrella demostrado – ‘Frontier’ – es “el teclado de comunicación más rápido controlado por ojo del mundo”, según la compañía. Los usuarios pueden operar un teclado QWERTY completo para operaciones de texto a voz en lo que la compañía dice que nunca antes se ha visto una velocidad. El software funciona en computadoras personales y utiliza el hardware de seguimiento ocular existente.
La tecnología requiere práctica, pero los usuarios avanzados han grabado velocidades de hasta 44 palabras por minuto. Para poner esto en perspectiva, el dispositivo operado por interruptor utilizado por el fallecido Stephen Hawking operaba entre tres y cinco palabras por minuto.
“Se necesita práctica. Pero es una de esas cosas que crece y se adapta a usted en diferentes niveles “, dijo el Dr. Jordan Nguyen, fundador y CEO de Psykinetic.
Nguyen dijo que los algoritmos de back-end permiten que el software se adapte al comportamiento de los usuarios y a los movimientos oculares. Incluso los usuarios sin entrenamiento estaban registrando las tasas de palabras por minuto en los años veinte, según Nguyen.
“Todos tienen la capacidad de contribuir a la sociedad, mejorar las vidas de los demás y, en última instancia, trabajar por un mundo mejor para las generaciones futuras”, dijo el CEO de Psykinetic.
“Estamos lanzando los puntos de partida de un poderoso movimiento que abrirá un mundo de posibilidades y capacitará a las personas con más herramientas tecnológicas para ayudar a crear ese cambio”.
El campeón Psykinetic, Riley Saban, y el CEO de Psykinetic, Dr. Jordan Nguyen.
Riley Saban, un estudiante de noveno año que nació con parálisis cerebral cerebral demostró la tecnología en el lanzamiento, describiéndolo como un “cambio de juego” para personas con discapacidades.
“Sin las herramientas adecuadas, no podría ni podría estar haciendo lo que soy hoy”, dijo Saban. “Espero trabajar con el equipo de Psykinetic para apoyarlos en el desarrollo de productos más sorprendentes para las personas necesitadas”.
Psykinetic también reveló y demostró ‘Atmosphere’, un dispositivo musical controlado por Eye Tracking, y ‘Stargaze’, la plataforma digital que ofrece y lanza aplicaciones Psykinetic.
Psykinetic es un proveedor de servicios de National Disability Insurance Scheme (NDIS) y Nguyen dijo que espera que la tecnología esté cubierta por el plan.
“Como cualquier versión principal [el NDIS] tenía sus propios problemas iniciales. Pero creo que Australia está haciendo un movimiento masivo para mostrarle al mundo cómo se hace. Cómo podemos trabajar para crear una sociedad más inclusiva, y creo que el NDIS es crucial para eso “.
En el verano de 2018, WCAG 2.0 se actualizará a la versión 2.1 con nuevas pautas para hacer que los sitios web sean aún más accesibles. En este post intentaré dar explicaciones simples de estas pautas junto con pensamientos y consejos sobre cómo seguirlas.
No hay usuarios normales. Seguir WCAG 2.1 mejorará la experiencia del usuario para todas las personas que navegan por los sitios web. Ilustración tomada del juego de herramientas de Microsoft’s toolkit for inclusive design.
WCAG significa Pautas de Accesibilidad para el Contenido Web y es un conjunto internacional establecido de pautas para contenido accesible en Internet. Estas pautas son principalmente para personas con diversas discapacidades, pero también para diferentes dispositivos utilizados para explorar sitios web.
WCAG es mantenido por el World Wide Web Consortium (W3C), la principal organización de estándares para Internet. La versión actual (WCAG 2.0) se publicó en 2008 y se convirtió en norma ISO ( ISO/IEC 40500:2012) en 2012.
En el verano de 2018, WCAG 2.1 se lanzará con diecisiete nuevas pautas que se enfocarán en mejorar la accesibilidad para usuarios con discapacidades cognitivas y para usuarios que navegan por sitios web en dispositivos móviles como tabletas y teléfonos inteligentes.
Descripción general de WCAG 2.0
WCAG 2.0 consta de las siguientes doce pautas divididas en cuatro categorías diferentes:
Perceptible
Proporcionar alternativas de texto para contenido no textual como imágenes
Ofrecer subtítulos o resúmenes de texto para audio y video
Estructura el contenido para que se identifique mediante programación y escríbalo para que se presente de diferentes maneras
Diseñe contenido para que sea fácil de leer y escuchar (buen contraste, control de volumen)
Operable
Toda la funcionalidad debe estar disponible solo con un teclado
Debe haber suficiente tiempo para leer el contenido y realizar tareas deseadas
Evite diseñar contenido que pueda causar convulsiones
Ayude a los usuarios a navegar y encontrar contenido tanto como sea posible
Comprensible
Escribir texto fácil de leer con tecnologías de asistencia en mente
Diseñar contenido y la interfaz para comportarse de maneras predecibles
Ayude a los usuarios a evitar y corregir errores al ingresar información
Robusto
Proporcione compatibilidad máxima con tantos navegadores web como sea posible
Cada una de las pautas en WCAG tiene criterios de éxito medibles divididos en los niveles de A (más bajo), AA y AAA (más alto). Más A es igual a más demandas, pero mejor accesibilidad cuando se cumplen.
Nota: Algunas pautas solo tienen uno o dos niveles de criterios de éxito. Algunos tienen los niveles A y AAA, pero no tienen AA.
Para obtener más información acerca de estas doce directrices, eche un vistazo a WCAG 2.0 at a Glance by W3C.
Nuevas pautas en WCAG 2.1
Antes de explicar las nuevas pautas en WCAG 2.1, debe saber que WCAG 2.1 es compatible con WCAG 2.0. Esto significa que:
Las categorías y directrices anteriores aún se aplican
La numeración aún se aplica
Los principios básicos todavía se aplican
Los tres niveles de criterios de éxito (A, AA, AAA) aún se aplican
Entonces, aquí están las nuevas pautas a partir de febrero de 2018. La documentación detallada del W3C se puede encontrar en w3.org/tr/wcag21
1.3.4 Identificar el propósito común (AA)
Para seguir esta directriz, el significado de cada campo de entrada debe poder determinarse programáticamente. En otras palabras, una parte del código debe poder decir qué se espera que ingrese un usuario o cuál es el significado de una parte de la información ingresada.
Hacer esto correctamente hará posible que el navegador de un usuario complete automáticamente los campos de entrada basados en datos previamente ingresados por el usuario. ¡Estupendo! Tener que ingresar menos entradas siempre es bueno.
Técnicamente, esto tiene que ser cierto si:
La implementación se realiza utilizando tecnologías para identificar el significado esperado de los datos de entrada.
El campo de entrada utiliza el marcado Autofill como en el siguiente fragmento de código
Esta guía mejora la accesibilidad para usuarios con discapacidades cognitivas que les resulta difícil leer e ingresar texto. También mejora la accesibilidad para los usuarios que no conocen bien el idioma del sitio web.
1.3.5 Identificar Propósito (AAA)
Esta guía dice que el propósito de los componentes de la interfaz, los íconos y ciertas secciones debe poder identificarse mediante programación.
Por ejemplo: el usuario no debería simplemente entender que un botón es un botón. Él o ella debe entender lo que hace el botón, cuál es su propósito.
HTML siempre debe escribirse correctamente, de modo que las tecnologías de asistencia, como los lectores de pantalla, puedan hacer cosas como:
Identifique secciones como encabezado, navegación, área de contenido principal, etc. para facilitar la navegación.
Proporcione alternativas de texto a los iconos, que de otra manera pueden sonar raros cuando se leen a los usuarios.
Diferenciar entre diferentes subtítulos como subtítulos H2, H3 y H3 para encontrar contenido deseado más rápido.
Seguir esta guía mejorará la accesibilidad para los usuarios de tecnologías de asistencia, como lectores de pantalla.
1.4.10 Reflow (AA)
Esta guía establece que los usuarios deben poder navegar por un sitio web utilizando una pantalla de 320 píxeles de ancho sin tener que desplazarse horizontalmente. En otras palabras, su sitio web debe ser responsive.
¿Por qué un ancho de 320 píxeles? Probablemente porque este es el ancho de dispositivo más pequeño de una gran cantidad de teléfonos inteligentes populares.
La policía sueca tiene un sitio web no receptivo que falla en esta guía (incluso si ofrecen otro sitio web solo para navegadores en dispositivos móviles). Las capturas de pantalla se tomaron en un iPhone 5S que tiene una pantalla de 320 píxeles de ancho.
Consejo: ¿Curioso acerca de qué tamaños de pantalla son populares? Echa un vistazo ascreensiz.es .
Seguir esta guía mejorará la accesibilidad para todos los usuarios que visiten su sitio web en un teléfono inteligente. También beneficiará a los usuarios con discapacidad visual que definitivamente ampliarán (hasta 400%) en los navegadores de escritorio.
Nota: es aceptable permitir el desplazamiento horizontal de contenido que a menudo lo requiere como mapas, tablas de datos con muchas columnas y diagramas anchos.
El desplazamiento horizontal para contenido como mapas está bien. Por ejemplo, cuando navega por Google Maps en el navegador de un teléfono inteligente. Aquí en Mobile Safari en un iPhone 5S en modo horizontal.
1.4.11 Contraste sin texto (AA)
Tener un alto contraste entre las piezas de texto y sus fondos es una de las mejores y más importantes cosas que puede hacer para garantizar un gran acceso a su sitio web.
En esta guía, el requisito de alto contraste se extiende desde el texto regular de la página hasta el texto en los componentes de la interfaz (botones), así como también los colores utilizados en el contenido no textual (infografías y diagramas).
Medición del contraste de color en leaverou.github.io/contrast-ratio . Asegúrese de mantener esos valores de contraste lo suficientemente altos para alcanzar el nivel AAA.
Seguir esta guía mejorará la accesibilidad para todos los usuarios con diferentes tipos de discapacidad visual.
1.4.12 Espaciado de texto (AA)
Para seguir esta directriz, las distancias entre párrafos, filas, palabras y caracteres deben poder aumentarse a ciertos valores sin que se pierda la funcionalidad o la pérdida de contenido.
Fallar en esto podría resultar en la superposición de fragmentos de texto, por lo que no se puede leer. También podría resultar en que los componentes (enlaces o botones) se muevan a lugares donde no se pueden interactuar (fuera de la ventana gráfica o detrás de otros elementos).
Consejo: Evite establecer alturas fijas en los elementos que contienen texto. Cuando el texto necesita más espacio, debe poder crecer verticalmente y presionar hacia abajo el contenido.
Seguir esta guía mejorará la accesibilidad para usuarios con discapacidad visual y dislexia.
1.4.13 Contenido en vuelo estacionario o enfoque (AA)
Esta guía establece que si los usuarios activan el contenido en forma de ventana modal, información sobre herramientas o un componente similar, deben ser capaces de:
Descarta el contenido sin mover el cursor del mouse o el foco del teclado actual (por ejemplo, presionando la tecla Esc).
Desplácese hasta el contenido (moviendo así el cursor del mouse) sin hacer desaparecer el contenido (cuando se mueve el cursor).
Descartar el contenido únicamente en sus propios términos.
Seguir esta guía mejorará la accesibilidad para los usuarios con discapacidad visual. Especialmente para aquellos usuarios que pueden acercarse cuando navegan por un sitio web y tienen que desplazarse al contenido que aparece fuera de la ventana gráfica.
2.2.6 Tiempos de espera (AAA)
Para seguir esta directriz, los usuarios de su sitio web deben ser informados si cualquier período de inactividad puede conducir a la pérdida de datos. Sin embargo, los usuarios no tienen que ser informados de esto si los datos se guardan por más de 20 horas después de su última interacción.
Seguir esta guía mejorará la accesibilidad para los usuarios con discapacidades cognitivas que necesitan más tiempo para completar las tareas deseadas.
2.2.7 Animación de Interacciones (AAA)
Esta guía establece que las animaciones desencadenadas por la interacción deben poder desactivarse a menos que las animaciones sean esenciales para la funcionalidad o el contenido presentado.
Aunque no se desencadena por la interacción del usuario, el fondo de video en movimiento de mtrexpress.se podría causar incomodidad entre los usuarios sensibles al movimiento en los sitios web. Lamentablemente, no se puede apagar.
Seguir esta guía mejorará la accesibilidad para los usuarios que son susceptibles a las convulsiones debido al movimiento.
2.4.11 Accesos directos de teclas de caracteres (A)
Esta guía dice que si un sitio web admite atajos de teclado en forma de caracteres individuales como letras, símbolos, números o signos de puntuación, se debe cumplir una de las siguientes tres condiciones:
Los accesos directos se pueden desactivar
Los accesos directos se pueden cambiar para requerir también presionar teclas del teclado como Ctrl, Alt y Cmd
Un atajo para un elemento determinado solo está activo cuando ese elemento tiene foco
Seguir esta guía mejorará la accesibilidad para las personas que usan la entrada de voz para navegar en un sitio web. También mejorará la accesibilidad para los usuarios que tienen temblores de manos y presionan fácilmente las teclas equivocadas del teclado.
2.4.12 Etiqueta en Nombre (A)
Para tener éxito con esta guía, el texto que se muestra en los componentes de la interfaz como botones debe ser capaz de:
Leer a los usuarios de tecnologías de asistencia como lectores de pantalla
Activado por comandos de voz de usuarios que aprovechan el software de reconocimiento de voz
Esto es fácil de lograr si usa elementos HTML como etiquetas y botones de anclaje correctamente y escribe etiquetas de texto explicativas.
Consejo: Si reemplaza el texto con un ícono en un componente de la interfaz, aún puede hacer que un lector de pantalla lea el texto a su usuario con la ayuda del atributo aria-label .
Seguir esta guía mejorará la accesibilidad para las personas con discapacidad visual que usan lectores de pantalla. También mejorará la accesibilidad para los usuarios que utilizan la entrada de voz para navegar por un sitio web.
2.5.1 Gestos del puntero (A)
Esta guía establece que las acciones realizadas usando gestos complejos, como el acercamiento y deslizamiento de pellizco, también deben poder realizarse con gestos más simples, como un solo toque, dos toques y presiones largas.
Al usar el deslizador de imagen Flexslider 2 , puede ir y venir entre las imágenes deslizando hacia la izquierda y hacia la derecha. Sin embargo, puede hacer lo mismo con gestos más simples, como tocar los íconos de flecha o las miniaturas de la imagen.
Recuerde: incluso si los usuarios tienen grandes habilidades motoras, la posibilidad de realizar gestos complejos puede no ser obvia para ellos.
Seguir esta guía mejorará la accesibilidad para usuarios con habilidades motoras limitadas o dedos insuficientes (!) Para gestos multitáctiles.
2.5.2 Cancelación del puntero (A)
Esta guía dice que cuando interactúa con una pantalla haciendo clic, tocando y presionando por lo menos una de las siguientes afirmaciones debe ser verdadero:
La funcionalidad disparada no ocurre en el evento hacia abajo.
La funcionalidad se activa en el evento ascendente y es posible cancelarlo antes de que ocurra el evento ascendente o deshacerlo posteriormente.
El evento up cancela lo que sucedió en el evento final.
El desencadenamiento de la funcionalidad en el evento descendente tiene que ocurrir por alguna razón importante.
Un ejemplo del punto 2: si está usando un mouse y presiona un botón para eliminar un archivo en Dropbox, debería poder alejar el cursor del mouse del botón y soltarlo, y no debería pasar nada.
2.5.3 Tamaño objetivo (AAA)
Para tener éxito con esta guía, un elemento seleccionable debe tener un alto y ancho de al menos 44 ⨯ 44 píxeles. Sin embargo, puede ser más pequeño si:
Su funcionalidad se puede lograr a través de otro elemento seleccionable de 44 ⨯ 44 píxeles.
Está ubicado en un bloque de texto, como un enlace subrayado regular.
Su tamaño está determinado por el dispositivo y el navegador que usa el usuario (botones de opción, casillas de verificación).
Debe tener esta apariencia y tamaño en este contexto particular para que tenga sentido.
Seguir esta guía mejorará la accesibilidad para las personas que tienen temblores en las manos, dedos grandes y usan dispositivos móviles con entrada táctil (especialmente con solo una mano).
2.5.4 Mecanismos de entrada simultáneos (AAA)
Esta guía establece que nunca debe desautorizar a los usuarios a usar, cambiar entre o agregar y eliminar diferentes mecanismos de entrada como mouse, teclado, lápiz, entrada táctil o entrada de voz. Incluso si esto significa ignorar el mecanismo más común para interactuar con un cierto contenido.
Seguir esta pauta mejorará la accesibilidad para las personas con habilidades motoras limitadas que prefieren o deben usar un mecanismo de entrada determinado, incluso cuando no es común. Por ejemplo: usar un teclado o mouse al operar una tableta.
2.6.1 Actuación de movimiento (A)
Para seguir esta guía, la funcionalidad que se desencadena moviendo el dispositivo móvil también debe poder activarse al interactuar con componentes de la interfaz como botones y controles deslizantes.
Las respuestas al movimiento (accidental) también deben poder desactivarse, a menos que:
El movimiento es compatible a través de una interfaz accesible.
El movimiento es esencial para la funcionalidad.
La característica de deshacer para usar en las aplicaciones nativas de iOS y Android podría ser muy problemática si tienes temblores en las manos. Afortunadamente, no lo he visto usar en ningún sitio web.
Seguir esta guía mejorará la accesibilidad para los usuarios que montan sus tabletas y teléfonos inteligentes en sus sillas de ruedas o tienen problemas para trasladarlos debido a limitaciones motrices o porque sus manos están ocupadas en este momento.
2.6.2 Orientación (AA)
Esta guía establece que no debe forzar a los usuarios de dispositivos móviles a que mantengan sus dispositivos dentro de ellos ni los giren a una orientación determinada para poder incluir parte del contenido de un sitio web.
Al igual que 2.6.1 Motion Actuation, seguir esta guía mejorará la accesibilidad para los usuarios que montan sus tabletas y teléfonos inteligentes en sus sillas de ruedas o tienen problemas para rotarlos debido a limitaciones motrices o porque sus manos están ocupadas en este momento.
La empresa estatal sueca de juegos Svenska Spel no cumple esta directriz en su sitio web svenskaspel.se . El texto se traduce en “Por favor, vuelva a colocar su dispositivo en posición vertical”.
3.2.6 Cambios de estado (AA)
Para seguir esta directriz, el contenido que se actualiza dinámicamente debe notificarse a los usuarios de tecnologías de asistencia (como lectores de pantalla) sin obtener un enfoque visual.
Por ejemplo: estás navegando en un sitio web de noticias con un feed de Twitter en la parte superior del sitio. Sería exasperante si cada vez que aparece un nuevo tweet, automáticamente se desplaza hacia arriba para ver el nuevo tweet.
Una excelente manera de resolver esto para los usuarios de lectores de pantalla es usar las ARIA Live Regions . Aquí hay tres fragmentos de código que explican cómo funciona:
<div role="status" aria-live="off">
When this text is updated,
users with screen readers
will not be notified at all.
</div>
<div role="status" aria-live="polite">
When this text is updated,
users with screen readers
will be notified if they
aren't doing anything else.
</div>
<div role="status" aria-live="assertive">
When this text is updated,
users with screen readers
will be notified immediately
regardless of what they're doing.
</div>
Seguir esta guía mejorará la accesibilidad para los usuarios con discapacidad visual, especialmente para aquellos que utilizan lectores de pantalla y es probable que amplíen el sitio web.
Wrapping up
Phew, esa fue la última de las nuevas directrices para WCAG 2.1. ¿Mi publicación no está actualizada o contiene algunos errores? Por favor, házmelo saber en la sección de comentarios y lo corregiré.
Finalmente, recuerde que tener una gran accesibilidad en su sitio web mejorará la experiencia del usuario para todos los usuarios.
En cambio, noté cuán desconocida y pasada era para mí la idea de que “accesible significa feo”. ¿Por qué no tuve que lidiar con este tipo de discusiones en los últimos años?
Creo que pasamos de “accesible o hermoso” a “accesible y hermoso” gracias a la ley que convertía los sitios web inaccesibles en ilegales en Noruega.
Ok, entonces que tan ilegal es?
Principalmente, todos los sitios web, ya sea del sector público o privado , que fueron (re) diseñados después de 2014 tienen que seguir casi todos los criterios A y AA en las Pautas de Accesibilidad para el Contenido Web ‘2.0 ( excepto 1.2.3-1.2.5 )
How DIFI explains their work.
Aparentemente, pocos países generalmente requieren que los sitios web del sector privado cumplan con los criterios de WCAG. No estoy seguro de cómo se aplican estas regulaciones en estos países (me encantaría escuchar sobre eso en el campo de comentarios).
Cuando un sitio web no cumple con los criterios en Noruega, puede tener consecuencias reales. La ley es aplicada por la agencia estatal DIFI , que realiza controles aleatorios, generalmente en grandes empresas. El informe se publica en el sitio web de DIFI y la empresa recibe una lista de arreglos con una fecha límite. Pero, ¿y si no cumplen?
Continua inaccesibilidad = mala prensa y multas
En 2017, la principal aerolínea noruega, SAS, lanzó un sitio web rediseñado. En noviembre de 2017 llegó el veredicto de DIFI: SAS falló en tantos criterios que DIFI dijo que el sitio era “imposible de usar”. Si SAS no cumplió, serían multados .
¡De repente, los criterios de WCAG estaban en los titulares! Varios periódicos noruegos importantes escribieron sobre la crítica que recibió SAS.
” El sitio web SAS falla “, es lo que escribió VG, el periódico en línea más grande de Noruega. ” SAS arriesga multas por un nuevo sitio web “, escribió Aftenposten. ” SAS es sacrificado por su nuevo sitio web “, escribió Kampanje.
Mientras tanto, el competidor de SAS Norwegian Airlines estaba teniendo un día de campo. SAS no pudo decir que “bueno, es difícil hacer que los sitios web de las aerolíneas sean accesibles”. El sitio web de Norwegian Airlines parece moderno y ha ganado varios premios de diseño. Pero cuando fueron controlados por DIFI un año antes de SAS, recibieron solo algunos comentarios menores.
El sitio web de Norwegian Airlines es moderno y ha ganado varios premios de diseño. Eso no significa que no consideraron la accesibilidad.
Buena accesibilidad = algo de lo que estar orgulloso
La mala accesibilidad se ha convertido en una mala noticia. Por otro lado, cuando alguien se esfuerza por hacer que algo sea accesible, se enorgullece. La tienda de comestibles en línea Kolonial.no colabora con la Asociación Noruega de Ciegos y Deficientes Visuales, y utiliza la colaboración en su trabajo de relaciones públicas .
En este video, Bjørn Roger Trollness demuestra cómo usa la aplicación Kolonial.no con voz en off. Es un representante de la Asociación Noruega de Ciegos y con visión parcial. El video está en noruego, desafortunadamente no está subtitulado en ningún idioma.
Cuando trabajé con la Asociación Noruega de Ciegos y con Visión Parcial , nuestro objetivo era llegar a tantos criterios AAA como fuera posible, y no solo a los criterios de AA requeridos por la ley. Queríamos mostrar que incluso los criterios de accesibilidad más altos no significarían un sitio web anticuado o aburrido.
Cambió la conversación entre clientes, diseñadores y desarrolladores
¿Cómo puede una ley cambiar la conversación?
En primer lugar, un cliente nunca diría algo como “Bueno, las personas ciegas no están realmente en nuestro grupo objetivo”. Debido a que la ley responsabiliza al cliente, el cliente responsabiliza a las agencias y ahora está solicitando garantías de que el nuevo sitio respeta las normas de accesibilidad.
En segundo lugar, cuando un colega sugiere una solución que no es accesible, no hay más y más cuando se puede decir simplemente “Bueno, eso rompería la ley de accesibilidad”.
La accesibilidad y la estética no se consideran cualidades opuestas. La conversación se desarrolló más bien en la línea de “Sí, pero ¿cómo funcionaría eso con un lector de pantalla?” O “Genial, ¿cómo podríamos hacer eso de forma accesible?”. Y no obtendrás un vistazo como respuesta. Recibirás una sugerencia.
Cuando trabajamos en The Great Norwegian Encyclopedia , hicimos pruebas de usuario de accesibilidad para mejorar el sitio. En el video de arriba, ves a un usuario que tiene una visión del 1% y usa la inversión de colores y el zoom para navegar por el sitio. El video no tiene sonido.
Debido a la ley, la accesibilidad no puede ser una ocurrencia tardía. La accesibilidad se entrelaza con todos los aspectos del diseño web y depende del esfuerzo del equipo (compruebe cómo en Confrere creamos paletas de colores accesibles de cualquier color ).
Preguntar acerca de la accesibilidad nos ha llevado a soluciones más simples, más elegantes y utilizables para todos. Si es complicado hacer algo accesible, eso a menudo es una señal de que el diseño o la idea en sí es demasiado complicado.
El equipo de Confrere en uno de nuestros recorridos de accesibilidad y usabilidad. De izquierda a derecha: Dag-Inge Aas (CTO), yo (CPO), Ingvild Indrebø (desarrollador sénior).
La accesibilidad no es costosa, la inaccesibilidad lo es
La ley de accesibilidad no fue controvertida. Fue apoyado por la industria y las ONG, y un parlamento unánime votó por él, de izquierda a derecha. Incluso las partes antirreglamentarias reconocen que es una economía sensata.
Según las estadísticas noruegas, 15-20% de la población tiene algún tipo de discapacidad. A medida que nuestra población envejece, la proporción será aún mayor. Al mismo tiempo, todo se está volviendo más digital. Los impuestos, boletos, compras y noticias son todos digitales.
Si creas un sistema donde las personas con discapacidad no pueden hacer estas cosas básicas, no solo estás disminuyendo su calidad de vida, sino que también aumentarás los costos tanto para la sociedad como para las empresas privadas. Si las personas no pueden hacerlo en línea, tendrán que llamar a su compañía, o enviar una carta física, o incluso presentarse en su oficina. Eso no es rentable.
Todos están mejor
Para mí, la accesibilidad es simplemente lo correcto, moralmente. Pero incluso para los fríos de corazón, la ley simplemente tiene sentido. Si está creando sitios web para personas que tienen una vista y audición perfectas, y se destacan en los acertijos y nunca hacen borrosas sus pulgares, no está creando sitios web para la mayoría de las personas:
Poder navegar por el sitio con un teclado es excelente para mi madre que tiene Parkinson, pero también es genial para mi hermano cuando tenía tendinitis.
Si subtitulas los videos , son buenas noticias para las personas con discapacidad auditiva, pero también son geniales cuando estoy en el tren sin mis auriculares.
La buena legibilidad es ideal para las personas con discapacidad visual, pero también es algo que agradezco cuando olvidé mis lentes para leer en casa.
Un buen HTML semántico es ideal para el lector de pantalla, pero también para su SEO.
El código limpio y agradable que sigue los estándares funciona mejor con herramientas de accesibilidad, pero también es mucho más a prueba de futuro.
Necesitamos más ejemplos de sitios web comerciales a gran escala que cumplan con estos principios. Pero para llegar allí, creo que la regulación es el camino correcto a seguir.
Usted puede tener la estética y la accesibilidad al mismo tiempo. Es solo una cuestión de enfoque.
El año pasado di una charla sobre CSS y accesibilidad en el encuentro stahlstadt.js en Linz, Austria. Después, un asistente me preguntó por qué estaba interesado en la accesibilidad: ¿Alguna persona en mi vida o yo tuvimos una discapacidad?
Estoy acostumbrado a responder esta pregunta, a lo que la respuesta es no, porque lo entiendo todo el tiempo. Mucha gente parece asumir que una conexión personal es la única razón por la cual a alguien le importaría la accesibilidad.
Esto es un problema. Para que la web sea realmente accesible, todos los que crean sitios web deben preocuparse por la accesibilidad. Tendemos a utilizar nuestras propias habilidades como punto de referencia cuando estamos diseñando y construyendo sitios web. En cambio, debemos tener en cuenta a nuestros diversos usuarios y sus diversas capacidades para asegurarnos de que estamos creando productos inclusivos que no solo estén diseñados para un rango específico de personas.
Otra razón por la que todos deberíamos pensar sobre la accesibilidad es que nos hace mejores en nuestros trabajos. En 2016 participé en 10k Apart , una competencia celebrada por Microsoft y An Event Apart . El objetivo era crear una experiencia web convincente que funcionara sin JavaScript y se pudiera entregar en 10 kB. Además de eso, el sitio debe ser accesible. En ese momento, conocía algunos conceptos básicos de accesibilidad, como el uso de HTML semántico, la descripción de las imágenes y la ocultación visual del contenido . Pero todavía quedaba mucho por aprender.
A medida que profundizaba más, me di cuenta de que había mucho más en accesibilidad de lo que jamás había imaginado, y que hacer sitios accesibles básicamente significa hacer un gran trabajo como desarrollador (o como diseñador, gerente de proyecto o escritor).
La accesibilidad es emocionante
La accesibilidad web no se trata de una determinada tecnología. No se trata de escribir el código más sofisticado o encontrar la solución más inteligente para un problema; se trata de usuarios y si pueden usar nuestros productos.
El enfoque en los usuarios es la razón principal por la que me estoy especializando en accesibilidad en lugar de únicamente en animación, rendimiento, marcos de JavaScript o WebVR. Centrarse en los usuarios significa que tengo que estar al día con casi todas las disciplinas web, porque los usuarios cargarán una página, manejarán el marcado de alguna manera, usarán un diseño, leerán texto, controlarán un componente de JavaScript, verán la animación, recorrerán un proceso, y navega. Lo que todas esas cosas tienen en común es que las realiza alguien frente a un dispositivo. Lo que los hace emocionantes es que no sabemos qué dispositivo será, o qué sistema operativo o navegador. Tampoco sabemos cómo se usará nuestra aplicación o nuestro sitio, quién lo usará, qué tan rápido será su conexión a Internet o cuán poderoso será su dispositivo.
Hacer sitios accesibles te obliga a interactuar con todas estas variables y, en el proceso, te impulsa a hacer un gran trabajo como desarrollador. Para mí, hacer sitios accesibles significa hacer sitios rápidos y resilientes con excelentes UX que son divertidos y fáciles de usar incluso en condiciones que no son ideales.
Lo sé, eso suena desalentador. La buena noticia, sin embargo, es que el último año me he centrado en algunas de esas cosas, y he aprendido varias lecciones importantes que me complace compartir.
1. La accesibilidad es un concepto amplio
Muchas personas, como yo antes de 2016, piensan que hacer que su sitio sea accesible es sinónimo de hacerlo accesible para las personas que usan lectores de pantalla. Eso es muy importante, pero es solo una parte del rompecabezas. Accesibilidad significa acceso para todos:
Si su sitio tarda diez segundos en cargarse en una conexión móvil, no es accesible.
Si su sitio solo está optimizado para un navegador, no es accesible.
Si el contenido de su sitio es difícil de entender, no se puede acceder a su sitio.
No importa quién está usando su sitio web o cuándo, dónde y cómo lo está haciendo. Lo que importa es que puedan hacerlo.
La creencia de que tiene que aprender un nuevo software o incluso hardware para comenzar con la accesibilidad es una barrera para muchos desarrolladores. En algún momento, tendrá que aprender a usar un lector de pantalla si realmente quiere hacerlo todo bien, pero aún queda mucho por hacer. Podemos realizar muchas mejoras que ayudan a todos, incluidas las personas con discapacidad visual, simplemente siguiendo las mejores prácticas.
2. Hay impedimentos permanentes, temporales y situacionales
¿Quién se beneficia de un sitio accesible por teclado? Solo un pequeño porcentaje de usuarios, algunos podrían argumentar. Aaron Gustafson me señaló el kit de herramientas de diseño de Microsoft , que me ayudó a ampliar mi perspectiva. Las personas con discapacidades permanentes no son las únicas que se benefician de la accesibilidad. También hay personas con discapacidades temporales y situacionales que estarían felices de tener una forma alternativa de navegar. Por ejemplo, alguien con un brazo roto, alguien que se tatuó el antebrazo recientemente o un padre que sostiene a su hijo en un brazo mientras tiene que verificar algo en línea. Cuando observas a un desarrollador operar su editor, a veces parece que ni siquiera saben que tienen un mouse. ¿Por qué no le da a los usuarios la oportunidad de usar su sitio web de manera similar?
Al pensar en la variedad de personas que podrían beneficiarse de las mejoras de accesibilidad, el grupo de beneficiarios tiende a crecer mucho más. Como dijo Derek Featherstone: ” Cuando algo funciona para todos, funciona mejor para todos”.
3. El primer paso es hacer de la accesibilidad un requisito
Me han preguntado muchas veces si vale la pena el esfuerzo para arreglar la accesibilidad, cuánto cuesta y cómo convencer a los jefes y colegas. Mi respuesta a esas preguntas es que puede mejorar las cosas significativamente sin siquiera tener que usar nuevas herramientas, gastar dinero extra o pedir permiso a alguien.
El primer paso es hacer que la accesibilidad sea un requisito, si no en papel, al menos en tu cabeza. Por ejemplo, si está buscando un componente deslizante, elija uno que sea accesible. Si está trabajando en un diseño, asegúrese de que los contrastes de color sean lo suficientemente altos . Si está escribiendo una copia, use un lenguaje que sea fácil de entender.
Nos hacemos muchas preguntas cuando tomamos decisiones de diseño y desarrollo: ¿está limpio el código? ¿El sitio se ve bien? ¿El UX es genial? ¿Es lo suficientemente rápido? Está bien documentado?
Como primer paso, agregue una pregunta más a su lista: ¿Es accesible?
4. Hacer sitios accesibles es un deporte de equipo
Otra razón por la cual hacer que los sitios web sean accesibles da miedo a algunos desarrolladores es que existe la creencia de que somos los únicos responsables de hacerlo bien.
El trabajo de un desarrollador consiste en crear un sitio accesible desde la perspectiva de la codificación, pero hay muchas cosas que hay que tener en cuenta antes y después. Los diseños deben ser intuitivos, las interacciones claras y útiles, la copia comprensible y legible. Se deben definir las personas relevantes y los casos de uso, y las pruebas se deben llevar a cabo en consecuencia. Lo que es más importante, el liderazgo y los equipos tienen que ver la accesibilidad como un principio básico y un requisito, lo que me lleva al siguiente punto: la comunicación.
5. La comunicación es clave
Después de hablar con una variedad de personas en reuniones y conferencias, creo que una de las razones por las que la accesibilidad a menudo no consigue el lugar que merece es que no todos saben lo que significa. Muchas veces ni siquiera tienes que convencer a tu equipo, sino simplemente explicar qué es el acceso. Si quieres atraer gente, importa cómo te acerques a ellos.
El primer paso aquí es escuchar. Hable con sus colegas y pregunte por qué toman ciertas decisiones de diseño, desarrollo o administración. Trate de averiguar si no abordan las cosas de una manera accesible porque no quieren, no tienen permitido hacerlo, o simplemente nunca lo pensaron. Tendrás mejores resultados si no te sientes mal, así que no trates de culpar a nadie por nada. Sólo escucha. Tan pronto como sepa por qué hacen las cosas de la manera en que lo hacen, sabrá cómo abordar sus inquietudes.
RESALTA LOS BENEFICIOS MÁS ALLÁ DE LA ACCESIBILIDAD
Puedes hablar de accesibilidad sin mencionarlo. Por ejemplo, hable acerca de la tipografía y los recuentos de personajes ideales por línea y qué hermoso es el texto con la combinación perfecta de tamaño de letra y altura de línea. Demuestre cómo un mejor rendimiento impacta las tasas de conversión y cómo centrarse en la accesibilidad puede promover el pensamiento listo para usar que mejore la usabilidad en general.
DESAFÍA A TUS COLEGAS
A algunas personas les gustan los desafíos. En una reunión, una diseñadora que se especializa en accesibilidad dijo una vez que uno de los principales motivos por los que le encanta diseñar teniendo en cuenta las limitaciones es que exige mucho más de ella que ir por el camino fácil. Pregunte a sus colegas: ¿Podemos alcanzar un índice de velocidad por debajo de 1000? ¿Crees que puedes diseñar ese componente de tal manera que sea accesible desde el teclado? Mi Nokia 3310 tiene un navegador. ¿No sería fantástico si pudiésemos hacer que nuestro próximo sitio web también trabaje en eso?
AYUDA A LAS PERSONAS A IDENTIFICARSE
En su charla “La accesibilidad del sitio web todos los días “, Scott O’Hara señala que puede ser difícil para alguien simpatizar si desconoce con qué se debe sentir empatía. A veces las personas simplemente no saben que ciertas implementaciones pueden ser problemáticas para otros. Puede ayudarlos explicando cómo las personas que son ciegas o que no pueden usar un mouse usan la web. Mejor aún, muestre videos de cómo las personas navegan por la web sin un mouse. Las indicaciones de empatía también son una gran forma de ilustrar las diferentes circunstancias bajo las cuales las personas navegan por la web.
6. Hable de accesibilidad antes de que los proyectos comiencen
Por supuesto, es algo bueno si está solucionando problemas de accesibilidad en un sitio que ya está en producción, pero eso tiene sus limitaciones. En algún momento, los cambios pueden ser tan complicados y costosos que alguien dirá que no vale la pena el esfuerzo. Si todo su equipo se preocupa por la accesibilidad desde el principio, antes de que se dibuje una casilla o se escriba una línea de código, es mucho más fácil, efectivo y rentable hacer un producto accesible.
7. Un conocimiento sólido de HTML resuelve muchos problemas
Es impresionante ver cómo el JavaScript y la forma en que lo usamos han cambiado en los últimos años. Se ha vuelto increíblemente poderoso y más importante que nunca para el desarrollo web. Al mismo tiempo, parece que HTML se ha vuelto menos importante. Hay un debate en curso sobre CSS en JavaScript y si es más eficiente y más limpio que el CSS normal desde una perspectiva de desarrollo. Lo que deberíamos hablar en cambio, es el uso excesivo de <div>y <span>elementos a expensas de otros elementos. Hace una gran diferencia si usamos un enlace o <div>un onclickmanejador . También hay una diferencia entre los enlaces y botones cuando se trata de accesibilidad. Los elementos del formulario necesitan <label>elementos, y un bosquejo del documento sonoro es esencial. Esos son solo algunos ejemplos de conceptos básicos absolutos que algunos de nosotros olvidamos o nunca aprendimos. El HTML semántico es uno de los pilares del desarrollo web accesible. Incluso si escribimos todo en JavaScript, HTML es lo que finalmente se representa en el navegador del usuario.
8. JavaScript no es el enemigo, y a veces JavaScript incluso mejora la accesibilidad
Soy una de esas personas que cree que la mayoría de los sitios web deben ser accesibles incluso cuando JavaScript no se puede ejecutar . Eso no significa que odio JavaScript; por supuesto que no, paga parte de mi alquiler. JavaScript no es el enemigo , pero es importante que lo usemos con cuidado porque de otra manera es muy fácil cambiar la experiencia del usuario para peor.
No hace mucho tiempo, no sabía que JavaScript podría mejorar la accesibilidad. Podemos aprovechar su poder para hacer que nuestros sitios web sean más accesibles para los usuarios de teclado. Podemos hacer cosas como atrapar el foco en una ventana modal , agregar controles clave a componentes personalizados o mostrar y ocultar contenido de una manera accesible.
Existen muchas implementaciones creativas e impresionantes de CSS de widgets comunes, pero a menudo son menos accesibles y proporcionan un UX peor que sus equivalentes de JavaScript. En una publicación sobre cómo crear una ayuda contextual totalmente accesible , Sara Soueidan explica por qué JavaScript es importante para la accesibilidad. “Cada solución no-JS viene con una desventaja muy mala que afecta negativamente a la experiencia del usuario”, escribe.
9. Es un buen momento para conocer CSS y JavaScript Vanilla
Durante mucho tiempo, hemos dependido de bibliotecas, marcos, sistemas de cuadrículas y rellenos múltiples porque exigíamos más navegadores de los que podían proporcionarnos. Naturalmente, nos acostumbramos a muchas de esas herramientas, pero de vez en cuando debemos dar un paso atrás y preguntarnos si realmente todavía las necesitamos. Hubo muchos problemas que Bootstrap y jQuery resolvieron para nosotros, pero ¿esos problemas aún existen, o es más fácil para nosotros escribir en $()lugar de document.querySelector()?
jQuery sigue siendo relevante , pero las incoherencias del navegador no son tan malas como solían ser. El diseño de cuadrícula de CSS es compatible con todos los principales navegadores de escritorio y, gracias a la mejora progresiva , aún podemos ofrecer experiencias para los navegadores heredados. Podemos hacer la detección de características de forma nativa con consultas de características , las pruebas se han vuelto mucho más fáciles, y caniuse y MDN ayúdenos a entender de qué son capaces los navegadores. Muchas personas usan marcos y bibliotecas sin saber qué problemas están resolviendo esas herramientas. Para decidir si tiene sentido agregar el peso extra a su sitio, necesita una sólida comprensión de HTML, CSS y JavaScript. En lugar de aumentar el peso de la página para navegadores antiguos, a menudo es mejor mejorar progresivamente una experiencia. Mejorar progresivamente nuestros sitios web y reducir el número de solicitudes, kilobytes y dependencias hace que sean más rápidos y robustos y, por lo tanto, más accesibles.
10. Sigue aprendiendo sobre accesibilidad y comparte tu conocimiento
Estoy muy agradecido de haber aprendido todo esto en los últimos meses. Anteriormente, fui una parte muy pasiva de la comunidad web durante mucho tiempo. Desde que comencé a participar en línea, asistir y organizar eventos, y escribir sobre temas relacionados con la web, especialmente accesibilidad, las cosas han cambiado significativamente para mí y he crecido tanto personal como profesionalmente.
Comprender la importancia del acceso y la inclusión, ver las cosas desde diferentes perspectivas y desafiar mis decisiones me ha ayudado a ser un mejor desarrollador.
Saber cómo se deben hacer las cosas es genial, pero es solo el primer paso. Verdaderamente cuidado, implementación y lo más importante, compartir su conocimiento es lo que tiene un impacto.
COMPARTE TU CONOCIMIENTO
No tengas miedo de compartir lo que has aprendido. Escribir artículos, hablar en reuniones y talleres internos. La cultura distintiva de compartir el conocimiento es una de las cosas más importantes y bellas de nuestra industria.
IR A CONFERENCIAS Y REUNIONES
Asistir a conferencias y reuniones es muy valioso porque puedes conocer a muchas personas diferentes de las que puedes aprender. Hay varios eventos de accesibilidad dedicados y muchas conferencias que presentan al menos una charla de accesibilidad.
ORGANIZA ENCUENTROS
Dennis Deacon describe su decisión de comenzar y ejecutar una reunión de accesibilidad como una experiencia que cambia la vida. Los grupos de Meetup son muy importantes y valiosos para la comunidad, pero organizar una reunión no solo aporta valor a los asistentes y oradores. Como organizador, puedes conocer a todas estas personas y aprender de ellas. Al escuchar y comprender cómo ven y se acercan a las cosas, y lo que es importante para ellas, puedes ampliar tus horizontes. Usted crece como persona, pero también conoce a otros profesionales, agencias y compañías de las cuales también puede beneficiarse profesionalmente.
INVITA A EXPERTOS A TU REUNIÓN O CONFERENCIA
Si es un organizador de reuniones o de conferencias, puede tener un impacto masivo en la función que desempeña la accesibilidad en nuestra comunidad. Invita a expertos en accesibilidad a tu evento y dale al tema un foro para el debate.
No tiene que ir desde el principio. Si mejora solo una cosa, ya está haciendo un gran trabajo al acercarnos a una mejor web. Solo comienza y sigue trabajando.
Hay muchos recursos por ahí, y tratar de descubrir cómo y dónde comenzar puede ser bastante abrumador. He reunido algunos sitios y libros que me han ayudado; ojalá que te ayuden también. Las siguientes listas no son exhaustivas.
Rob Dodson cubre muchos temas de accesibilidad diferentes en su serie de videos A11ycasts (a11y es la abreviatura de accesibilidad, el número once representa el número de letras omitidas).
