Enter The Dragon (Drop): Reordenación de listas accesibles

 

 

 

  • Register!
  • SmashingConf New York 2024

  • Índice
    1. Regiones en vivo
      1. ¿Por qué utilizar regiones en vivo?
    2. Accesibilidad optimizada
      1. ¿Cómo puedo recoger un artículo?
      2. ¿Cómo puedo mover un artículo?
      3. ¿Cómo puedo dejar un artículo?
      4. ¿Cómo sé cuándo se ha reordenado la lista?
      5. ¿Cómo cancelo el reordenamiento?
      6. Interacción del teclado
    3. Ver al dragón en acción
    4. Colocar Dragon Drop en tu aplicación
      1. Instalación
      2. Configuración
    5. Caída del dragón en GitHub
    6. El futuro del dragón
      1. Otras lecturas

    Uno de los desafíos más difíciles que encontró Harris Schneiderman es la lista reordenable de arrastrar y soltar. Si bien una lista reordenable es un widget de uso común con convenciones intuitivas para los usuarios de mouse, no está claro cómo los usuarios de tecnología de asistencia que solo usan teclado pueden realizar esta simple tarea. Dragon Drop busca llenar este vacío proporcionando medios para que todos los usuarios realicen esta tarea algo común. Debido a la ausencia de atributos ARIA compatibles, Dragon Drop utiliza regiones en vivo para transmitir la información necesaria para que todos los usuarios reordenen una lista.

     

    Hay toneladas de módulos de reordenación de listas de arrastrar y soltar hoy en día, muy pocos de ellos están diseñados teniendo en cuenta la accesibilidad. Dragon Drop busca llenar este vacío proporcionando medios para que todos los usuarios realicen esta tarea algo común.

    A lo largo de los años como desarrollador web centrado en la accesibilidad, me he ocupado principalmente de componentes de interfaz de usuario estandarizados y ampliamente adoptados, bien respaldados por tecnologías de asistencia (AT). Para este tipo de widgets, existen prácticas de creación de ARIA concisas , así como excelentes herramientas como axe-core que se pueden utilizar para probar componentes web en busca de problemas de accesibilidad. Crear widgets menos comunes, especialmente aquellos que no tienen convenciones ampliamente adoptadas para la interacción del usuario, puede ser muy complicado.

    Uno de los desafíos más difíciles con los que me he encontrado es la lista reordenable de arrastrar y soltar. Si bien una lista reordenable es un widget de uso común con convenciones intuitivas para los usuarios de mouse, no está claro cómo los usuarios de tecnología de asistencia que solo usan teclado pueden realizar esta simple tarea. Debido a la ausencia de atributos ARIA compatibles, Dragon Drop utiliza regiones en vivo para transmitir la información necesaria para que todos los usuarios reordenen una lista.

    Regiones en vivo

    Las regiones en vivo son elementos HTML equipados con atributos ARIA que se pueden usar para notificar a los lectores de pantalla sobre cambios de contenido. ¡Nos permiten proporcionar un anuncio de lector de pantalla completamente personalizado sin tener que mover el foco! Las regiones en vivo son excelentes para actualizaciones en tiempo real en partes remotas de la página, actualizaciones de estado e información urgente.

    Se usan comúnmente en registros de chat, indicadores de progreso, actualizaciones de resultados deportivos y alertas meteorológicas, pero deben usarse con moderación, ya que pueden crear fácilmente una experiencia demasiado detallada para los usuarios de lectores de pantalla. Si es nuevo en las regiones en vivo o simplemente desea explorar lo que pueden hacer, consulte mi área de juegos de regiones en vivo , que le permite configurar su propia región en vivo personalizada.

    Si desea utilizar regiones en vivo en su aplicación, consulte el módulo Región en vivo en npm .

    div aria-live="assertive" role="log" aria-relevant="additions" aria-atomic="true"/div

    ¿Por qué utilizar regiones en vivo?

    En un mundo ideal, habría podido confiar simplemente en los atributos ARIA de arrastrar y soltar aria-grabbedy aria-dropeffect. Sin embargo, en realidad, la compatibilidad con estos atributos es poco común y, cuando se admite, la experiencia es confusa y contraintuitiva para los usuarios de lectores de pantalla. Además de eso, estos dos atributos han quedado obsoletos desde ARIA 1.1, lo que significa que no veremos crecer el soporte para estos atributos en el futuro.

     

    La conversación del W3C sobre esta desaprobación se puede encontrar aquí . Debido a estos problemas, decidí no usar aria-grabbedy aria-dropeffecten Dragon Drop. La compatibilidad variable con los atributos ARIA dentro de la amplia gama de combinaciones de tecnología de asistencia/navegador es bastante frecuente en el mundo de la accesibilidad. Afortunadamente, los atributos de región en vivo como role, aria-live, aria-relevanty aria-atomicson ampliamente compatibles con lectores de pantalla como JAWS, NVDA y VoiceOver.

    Accesibilidad optimizada

    Dragon Drop es un módulo de reordenamiento de listas altamente configurable que funciona para usuarios de mouse, teclado y tecnología de asistencia. Hace un par de años, cuando decidí escribirlo, varias veces aparecieron listas de reordenamiento accesible en proyectos en los que había estado trabajando, pero aún no había visto una solución que funcionara. De las docenas de complementos de reordenación de listas de arrastrar y soltar que encontré, la mayoría de ellos no fueron diseñados teniendo en cuenta la accesibilidad y, como resultado, eran muy inaccesibles.

    Dragon Drop ha sido probado con VoiceOver, JAWS y NVDA y permite a los usuarios de AT reordenar una lista con éxito.

    Me propuse responder todas las preguntas que cualquier usuario pueda tener al encontrarse con una lista reordenable. Estas preguntas han sido respondidas para los usuarios de ratones videntes mediante convenciones comunes, pero ¿qué pasa con el resto de usuarios?

    ¿Cómo puedo recoger un artículo?

    Al proporcionar un control que transmite el estado capturado de un elemento, junto con algún texto de ayuda de nivel superior, podemos responder esta pregunta. Por ejemplo, un control con el texto accesible (recopilado por AT a través de su nombre, función y valor) "Reordenar elemento 1, botón de alternancia" le dice al usuario que es un botón que, cuando se activa, recogerá el elemento e iniciará un reordenamiento.

    Dragon drop utiliza el aria-pressedatributo para que los usuarios de AT sepan cuándo se "arrastra" un elemento y cuándo no. Se puede configurar para permitir que se pueda arrastrar un elemento completo, o simplemente un "controlador de arrastre" secundario, que en cualquier caso garantiza la presencia de role="button"y .tabindex="0"

    Cuando se activa un elemento de arrastre, aria-pressed="true"se aplica al elemento y se lee un anuncio configurable, como "Elemento 1 capturado" , a los lectores de pantalla a través de la región en vivo. Todo sobre Apple, Mac e Iphone

    ¿Cómo puedo mover un artículo?

    Utilizar aria-describedbypara asociar los controles con texto de ayuda útil como "Active el botón de reordenamiento y use las teclas de flecha para reordenar la lista o use el mouse para arrastrar/reordenar". le dice al usuario cómo hacer para reordenar. Esto permite a los usuarios de lectores de pantalla saber que cuando se presiona un elemento, las teclas de flecha hacia arriba y hacia abajo moverán el elemento hacia arriba y hacia abajo en la lista respectivamente.

    ¿Cómo puedo dejar un artículo?

    Debido a que se utiliza el aria-pressedatributo, los usuarios pueden saber fácilmente cómo soltar un elemento. De alguna manera, forma o forma, todos los lectores de pantalla más utilizados transmiten el estado presionado de un botón de alternancia. El atributo aria-pressed se establece en "falso" cuando se elimina un elemento y se lee a los lectores de pantalla un anuncio personalizado como "Elemento 1 eliminado" .

     

    ¿Cómo sé cuándo se ha reordenado la lista?

    Cada vez que se utilizan las teclas de flecha hacia arriba y hacia abajo para alterar el orden de la lista, debemos asegurarnos de que todos los usuarios sean notificados de este cambio. Para los usuarios no videntes, debemos volver a confiar en las regiones activas. Un anuncio configurable como "La lista se ha reordenado, el elemento 1 ahora ocupa el cuarto lugar en la lista". , se lee en voz alta para transmitir el estado actualizado de la lista reordenada. Esto es importante porque los usuarios videntes tienen retroalimentación visual inmediata del orden alterado y esa misma información debe transmitirse a los usuarios de AT.

    ¿Cómo cancelo el reordenamiento?

    Dado que no podemos confiar en una convención ampliamente adoptada para dicha interacción, simplemente podemos incluir instrucciones como "Presione Escape para cancelar el reordenamiento" dentro del texto de ayuda. Además, utilizamos la región en vivo para proporcionar una lectura personalizada que notifica al usuario sobre la cancelación.

    Interacción del teclado

    Llave Comportamiento
    EnteroSpace Alterna el elemento entre los estados "agarrado" y "soltado".
    "↓" Mueve un elemento "capturado" hacia abajo en la lista
    "↑" Mueve un elemento "capturado" hacia arriba en la lista
    Esc Cancela el reordenamiento y restaura el pedido inicial.

    Ver al dragón en acción

    Consulte la demostración de Dragon Drop en la que experimenta un par de configuraciones diferentes.

    Colocar Dragon Drop en tu aplicación

    Dragon Drop convierte su lista normal en una lista reordenable de arrastrar y soltar totalmente accesible:

    ul liItem 1/li liItem 2/li liItem 3/li/ulscript const dragon = document.getElementById('dragon'); // Enter the dragon new DragonDrop(dragon);/script

    Instalación

    Dragon Drop es un proyecto de código abierto (licencia MIT) y se puede instalar a través de npm:

    $ npm install drag-on-drop

    Se puede utilizar con módulos como browserify o webpack:

    // if you're not down with ES6, you can require('drag-on-drop')import DragonDrop from 'drag-on-drop';

    Dragon Drop también se puede colocar fácilmente en su página con el CDN unpkg :

    script source="https://unpkg.com/drag-on-drop"/scriptscript var dragonDrop = new DragonDrop(listElement);/script

    Configuración

    Para admitir una amplia gama de casos de uso, Dragon Drop es muy configurable.

    A continuación se muestra la configuración predeterminada:

     

    { item: 'li', handle: 'button', activeClass: 'dragon-active', inactiveClass: 'dragon-inactive', announcement: { grabbed: el = `Item ${el.innerText} grabbed`, dropped: el = `Item ${el.innerText} dropped`, reorder: (el, items) = { const pos = items.indexOf(el) + 1; const text = el.innerText; return `The list has been reordered, ${text} is now item ${pos} of ${items.length}`; }, cancel: 'Reordering cancelled' }}

    Anuncios

    La opción de configuración de “anuncio” de Dragon Drop es la más importante porque es la columna vertebral de la experiencia del lector de pantalla que ofrece Dragon Drop. Es un objeto que contiene funciones "grabbed", y que permiten anuncios personalizados de regiones en vivo para todas las interacciones que tienen lugar "dropped"."reorder""cancel"

    Cada una de estas funciones debe devolver una cadena de texto de anuncio que se agrega a la región en vivo cuando ocurre la acción determinada. Un beneficio adicional de utilizar estas funciones es que permite localizar los mensajes de la región en vivo.

    Para facilitar los anuncios, el elemento de la lista en el que tuvo lugar la acción y la matriz de elementos de la lista se pasan como argumentos respectivamente.

    { announcement: { // grabbed is called when an item is picked up grabbed: (targetItem, items) = `${targetItem.innerText} grabbed`, // dropped is called when an item is dropped dropped: (targetItem, items) = `${targetItem.innerText} grabbed`, // reorder is called each time the order of the list is altered reorder: (targetItem, items) = { return `${targetItem.innerText} is now ${items.indexOf(targetItem) + 1} of ${items.length}` }, // cancel is called when a reordering is cancelled (via escape key) cancel: () = 'The initial order has been restored, reordering cancelled' }}

    texto de ayuda

    Es absolutamente vital que proporcione un texto de ayuda que describa cómo utilizar la lista reordenable. Esto es algo que Dragon Drop no hace por usted para ser menos obstinado sobre cómo este texto se pone a disposición de la tecnología de asistencia. La implementación recomendada es utilizar aria-describedbypara asociar el texto de ayuda con los elementos interactivos de esta manera:

    pActivate the reorder button and use the arrow keys to reorder the list or use your mouse to drag/reorder. Press escape to cancel the reordering./pul libutton aria-describedby="dragon-helper"Reorder Item 1/buttonspanItem 1/span /li libutton aria-describedby="dragon-helper"Reorder Item 2/buttonspanItem 2/span /li libutton aria-describedby="dragon-helper"Reorder Item 3/buttonspanItem 3/span /li/ul

    Caída del dragón en GitHub

    Recientemente se lanzó la tercera versión de Dragon Drop. Si está interesado en usarlo, consulte la documentación de Dragon Drop en GitHub . Un agradecimiento especial a los creadores de Dragula , el módulo que Dragon Drop utiliza para la interacción con el mouse, así como a Aaron Pearlman, quien diseñó el increíble logotipo.

    El futuro del dragón

    Si en el futuro se agrega la interacción de arrastrar y soltar a la especificación técnica WAI-ARIA, el hecho de que Dragon Drop se base en una interacción no estándar y en regiones en vivo podría cambiar. Continuaré realizando pruebas para asegurarme de que siga siendo compatible con tantos lectores de pantalla como sea posible y me mantendré actualizado con las últimas especificaciones de ARIA. Además, hay bastantes funciones en proceso, incluida la compatibilidad con pantallas táctiles/dispositivos móviles, así como listas de varias columnas (como tableros de velocidad). Otra característica que se puede agregar en el futuro es un componente Dragon Drop React.

    Vea Pen React Dragon Drop de Harris Schneiderman ( @schne324 ) en CodePen .

    Actualmente, Dragon Drop se puede usar con React, como se muestra en la demostración a continuación, pero no es ideal porque React no detecta los cambios de DOM causados ​​por el reordenamiento de la lista, lo que puede provocar un comportamiento inesperado. Insto a cualquiera que encuentre errores en Dragon Drop, o incluso tenga ideas sobre funciones, a crear un problema en GitHub . ¡Todos los comentarios y contribuciones son bienvenidos y muy apreciados!

    Otras lecturas

    • Cómo los estándares de accesibilidad pueden potenciar un mejor diseño visual de gráficos
    • Principales herramientas de front-end de 2023
    • Una introducción a la componibilidad de pila completa
    • Consejos y trucos útiles de DevTools

    (rb, ra, yk, il, mrn)Explora más en

    • Accesibilidad
    • Herramientas
    • javascript
    • Navegadores





    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

    Enter The Dragon (Drop): Reordenación de listas accesibles

    Enter The Dragon (Drop): Reordenación de listas accesibles

    Register! SmashingConf New York 2024 Índice Regiones en vivo

    programar

    es

    https://aprendeprogramando.es/static/images/programar-enter-the-dragon-drop-reordenacion-de-listas-accesibles-923-0.jpg

    2024-05-20

     

    Enter The Dragon (Drop): Reordenación de listas accesibles
    Enter The Dragon (Drop): Reordenación de listas accesibles

    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