Simplificando la accesibilidad con Ally.js

 

 

 


Índice
  1. Aspectos destacados de ally.js
    1. ¡Muéstrame algo de código!
  2. Motivación
  3. Ejecución
    1. La investigación es clave
    2. Empieza pequeño
    3. La simplicidad es clave
    4. La colaboración es clave
  4. El futuro
  5. Conclusión
    1. Otras lecturas

Rodney Rehm entendió que ARIA podría ayudarlo a escribir aplicaciones web sin tener que cambiar los nombres de las clases para varios estados. Puede preocuparse por los problemas de accesibilidad sin verse afectado por una discapacidad. En muchos sentidos, hacer que sus aplicaciones y sitios sean accesibles beneficia a todos. ally.js te ayuda a lograrlo. ally.js se está posicionando como un centro de colaboración en funciones relacionadas con la accesibilidad, proporcionando herramientas de bajo nivel a otras bibliotecas y marcos, así como funciones de alto nivel para los desarrolladores. ¡Si empiezan a trabajar juntos, es posible que lleguen a alguna parte!

 

He sido desarrollador web durante 15 años, pero nunca había investigado la accesibilidad. No conocía suficientes personas con discapacidades (graves) para comprender adecuadamente la necesidad de aplicaciones accesibles y ningún cliente me ha pedido nunca que sepa qué es ARIA. Pero de todos modos me involucré con la accesibilidad y esa es la historia que me gustaría compartir con ustedes hoy.

En la Conferencia Fronteers de octubre de 2014 vi a Heydon Pickering dar una charla titulada “ No llegar a ninguna parte con las mejores prácticas de CSS ”. Entre otras cosas, defendió el uso de atributos WAI-ARIA como aria-disabled=“true”en lugar de clases como .is-disabledpara expresar el estado de la aplicación. Me di cuenta en ese momento de que me estaba perdiendo algunos estándares bien preparados, simplemente porque ARIA pertenece a ese espacio de accesibilidad del que no tenía idea.

Después de hablar un poco más con Heydon, finalmente entendí que ARIA podría ayudarme a escribir aplicaciones web sin tener que cambiar los nombres de las clases para varios estados (está deshabilitado, está visible, todavía se está cargando...). La discusión no abordó en absoluto la accesibilidad; simplemente estábamos hablando de cómo hacer que el desarrollo web sea un poquito más sencillo.

 

Decidí que necesitaba profundizar en ARIA; honestamente, no porque me importara mucho la accesibilidad, sino porque no tenía intención de reinventar las ruedas que ya tenían. Una de las primeras cosas que aprenderá al observar ARIA es que admitir la navegación con el teclado es fundamental . Y el primer paso para comprender la navegación con el teclado es comprender qué es el enfoque . Y aquí es donde tropecé, porque nadie sabía (en detalle) qué elementos podían recibir atención y cuáles no.

Habiendo tenido un poco de experiencia probando la compatibilidad del navegador (“ Transiciones CSS3: ¡Gracias a Dios tenemos una especificación! ”), decidí dedicar algo de tiempo a investigar. Se está preparando un libro electrónico que cubre mis hallazgos y estará listo para hacerte perder el foco a principios de 2016. Pero lo más importante es que la variante JavaScript de ese libro está disponible hoy:

Aspectos destacados de ally.js

Antes de explicar por qué y cómo surgió este proyecto, aquí hay una breve lista de cosas en las que puede ayudarle:

  • ally.js corrige errores del navegador relacionados :focuscon Internet Explorer y WebKit .
  • ally.js proporciona herramientas de alto nivel para deshabilitar elementos interactivos y ocultar ramas enteras del DOM de los lectores de pantalla.
  • ally.js proporciona una forma sencilla de evitar que los navegadores desplacen un elemento para mostrarlo cuando está a punto de enfocarse.
  • ally.js ayuda al estilo :focusal proporcionar un :focus-withinpolyfill y la capacidad de distinguir el foco del mouse del foco del teclado .
  • ally.js no solo le ayuda a comprender qué elementos se pueden enfocar y cuáles se pueden enfocar con el teclado , sino también el orden de tabulación .

ally.js incluye algunas correcciones y un polyfill, pero no tiene dependencias importantes. Está diseñado para ser compatible: UMD, AMD, CommonJS, ES6, módulos o paquetes: usted elige .

¡Muéstrame algo de código!

Al hacer que el teclado de su aplicación sea accesible, es importante ocultar los elementos del teclado con los que actualmente no se puede interactuar. Este puede ser el caso cuando un cuadro de diálogo modal está visible o se muestra el menú fuera de la pantalla. Podemos desactivar fácilmente todo lo que esté fuera de nuestro diálogo:

// disable everything that is not a child of #our-dialogvar handle = ally.maintain.disabled({ filter: '#our-dialog',});// re-enable everything that we disabled previouslyhandle.disengage();

El mismo principio se aplica a cualquier contenido (no sólo al tipo interactivo) para garantizar que los usuarios de lectores de pantalla no se pierdan . Podemos ocultar fácilmente todo lo que esté fuera de nuestro diálogo:

 

// hide everything that is not a child of #our-dialog by adding aria-hidden="true"var handle = ally.maintain.hidden({ filter: '#our-dialog',});// re-enable everything that we disabled previouslyhandle.disengage();

A veces necesitamos actuar sobre claves específicas como Entery Escape:

var handle = ally.when.key({ enter: function(event) { // handle the enter event }, escape: function(event, disengage) { // handle the escape event… disengage(); }, });// stop listening for keyshandle.disengage();

Motivación

Echemos un vistazo a por qué pensé que era necesario crear algo nuevo en primer lugar. Si bien existen varias razones, estas son las más importantes:

  1. Muchos artículos (especialmente los más antiguos) presentan ejemplos de códigos y enfoques que no son fácilmente comprensibles y promueven prácticas de codificación que según los estándares actuales se considerarían dañinas.
  2. Incluso los buenos artículos normalmente sólo se centran en la accesibilidad, ignorando todo lo demás que es relevante para crear sitios web y aplicaciones atractivos.
  3. Literalmente, ningún artículo ni recurso comparte código. No parece haber mucha colaboración (en el código) fuera de los proyectos individuales, lo que lleva a que se codifique lo mismo una y otra vez.
  4. Muchos problemas no parecen entenderse bien o, para empezar, no considerarse un problema.
  5. En algunos aspectos, la accesibilidad parece indeterminada. Prácticamente en todos los casos relacionados con la semántica nos encontramos en un estado que se parece a principios de la década de 2000: es posible que hayas creado algo que se ajuste a los estándares, pero eso no significa que funcione en todas partes, o incluso en cualquier lugar.

Al final sentí que nos faltaba una caja de herramientas adecuada. Lo mismo que jQuery es conquistar el DOM sin tener que preocuparse mucho por la compatibilidad del navegador, ya sean agujeros o errores sutiles. Como D3 es conquistar la visualización interactiva de datos. O como lo fue RaphaelJS al conquistar SVG hace solo unos años. No pude encontrar nada similar que hiciera el trabajo pesado de accesibilidad, al menos nada completo e independiente del marco. Significado de los nombres

Ejecución

Tengo algunos principios que guían mi forma de trabajar:

  1. Si no comprende el problema, no está creando soluciones. La investigación es clave.
  2. Empiece poco a poco y construya con el tiempo.
  3. Las soluciones complejas no cambian el mundo. La simplicidad es clave.
  4. Una persona no puede hacer mucho. La colaboración es clave.

La investigación es clave

Antes de que puedas escribir una sola línea de código para hacer algo, debes tener una idea bastante clara de lo que se supone que debe hacer esa línea de código. Si sólo resuelves el problema en cuestión, es probable que te estés perdiendo el panorama general. Sin un panorama más amplio frente a usted, crear soluciones duraderas es increíblemente difícil, si no casi imposible.

 

Una vez que me di cuenta de que ni yo ni Internet podíamos responder la simple pregunta de qué elementos pueden enfocarse, solo me quedaba una opción: arremangarme y descubrir qué hacen realmente los navegadores. Esto llevó a una tabla de compatibilidad que detalla lo que los navegadores consideran enfocable, una comparación de estilos de enfoque y una gran cantidad de errores archivados .

Empieza pequeño

A lo largo de los últimos 14 meses logré concentrarme en la navegación con el teclado . No perderme a mí mismo (ni a la biblioteca) en demasiada semántica de ARIA. Hacer una cosa y no empezar nada nuevo hasta terminar no es fácil, especialmente cuando estás aprendiendo una docena de trucos nuevos al día.

Empezar poco a poco también significaba limitar el alcance del navegador. No necesitaba navegadores Internet Explorer y Android más antiguos, por lo que la versión 1.0.0 no admite nada inferior a IE10 y Android 4.4. La versión 1.1.0 agregará soporte para IE9, un segundo paso razonable.

La simplicidad es clave

Si desea que las personas utilicen sus herramientas, debe asegurarse de que ésta tenga sentido para ellos , preferiblemente sin necesidad de un título en ciencia espacial. Pero, ¿cómo se oculta la complejidad interna de una herramienta para que parezca simple?

  • Proporcione una API consistente y memorable.
  • Proporcione documentación que no solo explique cómo utilizar una función, sino también por qué es necesaria en primer lugar.
  • Exponga meticulosamente todos los casos extremos en la documentación para evitar que las personas tengan que depurar su código.
  • Haz que consumir tu herramienta sea muy fácil. AMD y CommonJS se pueden generar desde ES6. Los módulos se pueden agrupar y exponer como UMD .
  • Proporcione tutoriales que expliquen cómo las funciones de su herramienta funcionan juntas para resolver problemas particulares.
  • Proporcione formas de experimentar rápidamente con las funciones de su herramienta sin tener que instalar Internet primero.

La colaboración es clave

Reuní todo mi tiempo libre en los últimos 14 meses y lo dediqué a mis proyectos de código abierto. No os voy a mentir: fue duro y estoy seguro de que no podré seguir así. Para evitar el fracaso de un espectáculo unipersonal, el proyecto necesitará encontrar e involucrar a personas con ideas afines. Pero la colaboración es un tema multifacético.

Los contribuyentes principales son personas que dedican tiempo al proyecto de forma regular. Esta es la forma más rara de contribución, ya que requiere el mayor compromiso. ¡Por eso estoy increíblemente feliz de darle la bienvenida a bordo a Marcy Sutton ! En muchos sentidos, Marcy tiene mucha más experiencia en el mundo de la accesibilidad que yo, por lo que su incorporación al equipo es nuestra primera gran victoria. Para asegurarnos de que más personas puedan participar, todo lo que hacemos está documentado .

Es bastante común que la gente envíe parches más pequeños al código fuente y a la documentación. Debido a que es probable que una sola persona solo contribuya con unos pocos cambios, nos gusta llamarlos contribuyentes no autorizados . Para ellos es importante poder realizar sus cambios de forma rápida y segura. Es por eso que todas las páginas de documentación tienen enlaces convenientes para abrir problemas, editar páginas y señalar recursos relacionados (archivos fuente, documentación, pruebas).

 

Y luego está el grupo de personas que no contribuyen al código del proyecto, ni mucho menos a su éxito. Los integradores son personas muy importantes, ya que se encargan de ampliar otros proyectos agregándoles características de ally.js. Actualmente estamos hablando con la gente de jQuery UI y ngAria de Angular sobre cómo respaldar mejor sus esfuerzos descargando cosas a ally.js. Algunas personas de la comunidad React ya han expresado interés también.

Todo lo que hacemos dentro del espacio ally.js tiene la intención de mejorar el status quo para todos , incluso y especialmente para las personas que no utilizan la biblioteca. Los errores del navegador que estamos reportando y la discusión sobre cómo mejorar nuestros estándares web se basan en la investigación que estamos haciendo para mejorar la biblioteca. Sin embargo, no le sorprenderá descubrir que la biblioteca avanza mucho más rápido que los estándares web en general.

El futuro

De las tres columnas de accesibilidad (soporte de teclado, semántica y interfaz de usuario flexible), ally.js actualmente solo cubre la primera. Con los conocimientos que Marcy trae consigo (y tal vez algunas mentes más) pretendemos sumergirnos en el pilar de la semántica. Comprender ARIA es una cosa, pero comprender qué hacen realmente los navegadores y lectores de pantalla con él es una historia muy diferente.

Buscaremos proporcionar API simples para ARIA para sus necesidades imperiosas. Investigaremos opciones para automatizar la aplicación de semántica como estos " Consejos para crear SVG accesible " en tiempo de ejecución y dentro de su proceso de compilación.

Veremos cómo mejorar su uso de ARIA proporcionándole soporte de teclado extendido para widgets comunes (como el cuadro de lista ).

Conclusión

Puede preocuparse por los problemas de accesibilidad sin verse afectado por una discapacidad. En muchos sentidos, hacer que sus aplicaciones y sitios sean accesibles beneficia a todos . ally.js te ayuda a lograrlo.

ally.js se está posicionando como un centro de colaboración en funciones relacionadas con la accesibilidad , proporcionando herramientas de bajo nivel a otras bibliotecas y marcos, así como funciones de alto nivel para los desarrolladores. Si empezamos a trabajar juntos podríamos llegar a alguna parte...

Otras lecturas

  • API de accesibilidad: una clave para la accesibilidad web
  • Accesibilidad: mejora de la experiencia de usuario para usuarios daltónicos
  • Notas sobre la accesibilidad renderizada por el cliente
  • Accesibilidad: mejora de la experiencia de usuario para usuarios daltónicos

(vf, ml, og, mrn)Explora más en

  • Codificación
  • javascript
  • Accesibilidad





Tal vez te puede interesar:

  1. ¿Deberían abrirse los enlaces en ventanas nuevas?
  2. 24 excelentes tutoriales de AJAX
  3. 70 técnicas nuevas y útiles de AJAX y JavaScript
  4. Más de 45 excelentes recursos y repositorios de fragmentos de código

Simplificando la accesibilidad con Ally.js

Simplificando la accesibilidad con Ally.js

Índice Aspectos destacados de ally.js

programar

es

https://aprendeprogramando.es/static/images/programar-simplificando-la-accesibilidad-con-ally-877-0.jpg

2024-05-20

 

Simplificando la accesibilidad con Ally.js
Simplificando la accesibilidad con Ally.js

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Top 20