a11y y Lienzos Interactivos

Gracias a todos por venir hoy a ver mi charla sobre accesibilidad y lienzos interactivos. Así que, una introducción muy rápida. Mi nombre es Oli. Soy un exdesarrollador de juegos. He trabajado con LarCraft y Sonic the Hedgehog en el pasado. Gente estupenda, por cierto. Los amo. Gente agradable. Y ahora, trabajo en una empresa de la que quizás hayan oído hablar llamada AG Grid, y trabajo en el equipo que hace el componente de gráficos.

Así que aquí, este es básicamente nuestro sitio web. Les mostraré rápidamente qué es para que todos estemos en la misma página. Así que esencialmente, sí, es una biblioteca agnóstica de frameworks para dibujar gráficos, como gráficos de barras como este. También podemos dibujar gráficos financieros. También tenemos algunos gráficos de mapas aquí. Todos los diferentes tipos de gráficos. Una de las características clave de nuestra biblioteca es que se renderiza usando un lienzo HTML5 en lugar de un SVG, que es lo que la mayoría de las otras bibliotecas de gráficos utilizan. Hay algunas excepciones.

Así que como pueden ver, como esta barra de herramientas aquí, esos son solo botones regulares de HTML5. Pero específicamente para esta charla, me voy a centrar en la parte de renderizado de lienzo de AG charts. Así que el espacio de problemas con el que estamos lidiando es cuando estás renderizando un gráfico, la gran pregunta es, ¿debería usar una imagen SVG o debería usar un lienzo? Estoy seguro de que la mayoría de ustedes ya están familiarizados con el concepto de estos dos, pero solo para asegurarme de que todos entiendan, repasemos rápidamente los pros y los contras. Así que una ventaja del SVG es que, básicamente, es un sistema de renderizado basado en vectores. Es renderizado por tu motor de diseño, como Chrome o Safari. Y tiene una jerarquía XML donde todas las formas y todo están definidas por algunas etiquetas XML. El lienzo, por otro lado, es solo un único elemento HTML. El desarrollador de JavaScript es responsable de escribir toda la lógica de renderizado para realmente dibujar el código. Y así no tienes una jerarquía. Solo tienes ese único elemento. Los dos son básicamente muy, muy similares entre sí. Así que como pueden ver, estas dos imágenes, son exactamente la misma imagen. Una de ellas es renderizada por un SVG donde dices, OK, quiero un círculo aquí, quiero un rectángulo aquí, y quiero un polígono.

Lo mismo aquí con el canvas, pero está escrito en JavaScript en lugar de XML donde quiero un círculo, un rectángulo, un triángulo, y así sucesivamente. Y así, la principal ventaja de un SVG es que, porque tienes estas etiquetas XML dentro de tu DOM, básicamente puedes, como voy a mostrarte aquí mismo, si inspeccionas aquí, puedes establecer algunos atributos adicionales en los elementos. Así que para aquellos que no están familiarizados, existe este concepto llamado ARIA donde básicamente puedes decir, por ejemplo, raw button. Esto le dirá al lector de pantalla que trate este elemento como si fuera un botón regular.

Y vamos a intentar ver qué pasa ahora si activamos el lector de pantalla. VoiceOver en Safari. Comparación. Botón. Menor que. Botón. Tres elementos. Botón. Botón. Botón. Actualmente estás silenciado. Así que como puedes ver, porque ahora he establecido esas reglas en esos atributos XML, el lector de pantalla puede captarlo y dice, OK, estas formas son en realidad botones, así que simplemente los trataré como botones. Luego tienes que añadir otros controladores como el manejo de entrada de teclado y ratón. Pero básicamente puedes decirle al lector de pantalla, sí, estos son los botones.

No podemos hacer eso con el canvas porque es solo ese único elemento. Entonces, ¿cómo lo solucioné? Bueno, básicamente, la solución que encontré fue simplemente ocultar el canvas. Bueno, no ocultarlo completamente, obviamente. Todavía lo dibujamos en la pantalla. Pero hay un atributo llamado area hidden. Lo configuramos en true para decirle al lector de pantalla, simplemente no prestes atención a este canvas. Nada importante aquí. Y luego lo que tenemos es este concepto llamado elementos proxy. Y eso es esencialmente solo algunos elementos HTML sobre el canvas, pero tienen un fondo transparente Básicamente, no están dibujados. Están ahí en el árbol. Están ahí en el DOM.

Pero no están dibujados. Si te mostrara aquí, básicamente puedo imitar el mismo resultado que tenía antes con el SVG. Si fuera aquí, aquí podemos hacer lo mismo que teníamos antes. Establezcamos el rol como un botón. Ahora hagamos lo mismo también con los otros. Sí, aquí vamos. Y luego aquí también con el triángulo para completar. Genial. Ahora volvamos a pantalla completa y probemos esto. Así que ahí vamos. Ese es el núcleo de ODEON. Eso no es lo que quería hacer. Voiceover off. Bien. Genial. Sí. Así que básicamente, ese es el núcleo de cómo he implementado la accesibilidad en un canvas. Básicamente lo oculto completamente y reimplemento todo el árbol y digo aquí es donde está todo el contenido, básicamente. Así que hablemos un poco más sobre estos elementos proxy. ¿Cuáles son los elementos clave de esto? Así que lo más importante es que no debes establecer la propiedad display en none y no debes establecer la visibilidad en hidden. Porque estas dos propiedades realmente lo eliminan completamente del DOM y lo eliminan del árbol de accesibilidad y luego tu lector de pantalla simplemente lo ignorará completamente. Así que no queremos eso. En su lugar, lo que queremos hacer es establecer un fondo transparente. Así que como opacidad cero o puedes establecer el fondo simplemente en transparente y hacerlo de un color transparente. Luego, otra cosa que quieres hacer es asegurarte de que tus elementos proxy tengan un indicador de enfoque. Esto es importante porque algunos de tus usuarios pueden no estar necesariamente usando un lector de pantalla, pero aún requieren usar el teclado. Puedes pensar en alguien, por ejemplo, que tiene una visión perfecta, pero tiene algún tipo de discapacidad de movilidad. Y por eso es importante asegurarse de que también lo estilizamos para asegurarnos de que tenemos algún indicador de enfoque para decirle al usuario lo que están usando actualmente. Y luego la posición principal que queremos usar es posición absoluta con un contenedor que es común con el canvas. Así es como podemos asegurarnos de que todo se alinee correctamente.

Así que aquí te mostraré un ejemplo. He establecido aquí esta propiedad, focus visible, y eso indica que se muestre cuando estoy usando un teclado, pero no cuando estoy usando el ratón. Así que aquí, si hiciera clic aquí, verás que dice he hecho clic en un cuadrado, he hecho clic en un triángulo, he hecho clic en un círculo. Pero si luego presiono la tecla tab aquí, mi navegador detecta automáticamente, oh, ahora eres un usuario de teclado. Así que comenzó a mostrar el indicador de enfoque alrededor de él. Y si presiono la tecla de espacio, entonces sí, básicamente hace clic como quiero. Y luego, si enciendo el lector de pantalla, también me dice correctamente triángulo, cuadrado, círculo. En este ejemplo, también agregué algo de texto a estos botones para que realmente me diga qué es lo que está sucediendo.

Echemos un vistazo rápido con un gráfico AG. Así que aquí hay un gráfico muy, muy simple. Digo muy, muy simple porque en realidad no es un gráfico. No tiene ningún dato. Pero la razón por la que no tenemos ningún dato es que realmente no usamos esta técnica para los datos. Usamos una técnica ligeramente diferente en la que voy a entrar. Así que usamos esta técnica para la leyenda. Así que eso es lo que voy a demostrar. Como puedes ver, si presiono, básicamente puedo hacer clic en estos y algo sucede. Bueno, realmente no sucede nada. Solo se desvanece. Pero sí, puedo hacer clic en estos botones aquí. También puedo usarlo con el teclado. Como puedes ver, hay un indicador de enfoque que me dice qué elemento estoy usando actualmente. Y también funciona muy bien con el lector de pantalla.

VoiceOver, siguiente botón de página de leyenda. Ahora busca campos de texto. Actualmente estás intentando descargar. Gracias. Eso es confidencial. Buscar texto. Actualmente estás en una misión.

Cierra los ojos. {{^}}Cierra los ojos. {{^}}Cierra los ojos. Diálogo entrando en leyenda. Saliendo de la siguiente página. Pero campo de texto de búsqueda. Actualmente estás en búsqueda. De acuerdo. Creo que tiene a alguien. De acuerdo. Básicamente, si presionas el botón de página, eres la siguiente leyenda. Página de leyenda anterior. Ahí lo tienes. Ahí dice. Atenuado. Como puedes ver. Este dice no atenuado. Anteriormente entrando. Y luego vas aquí. Cada vez que presiono. Apagado. Encendido. Apagado. No estoy seguro. Déjame hablar. De acuerdo. Sí. Básicamente, como puedes ver. Creo que has visto el concepto. Cada vez que te mueves, el lector de pantalla habla de manera muy, muy asertiva.

Esto está sucediendo. {{^}}Esto está sucediendo. Pero eso es realmente muy bueno. Porque si alguna vez has visto a una persona ciega usando una computadora. Esta es la locura con la que tienen que lidiar. Así que. Eso es bueno. Eso es agradable. Tenemos un lector de pantalla muy receptivo que responde a la entrada y salida.

Así que eso es muy bueno. Como dije. Ese gráfico no tenía ningún dato. Y la razón de eso es que estos elementos proxy, funcionan bien para componentes de UI que no se actualizan mucho y no se mueven tanto. Y funcionan muy bien para elementos de UI que ya tienen algún tipo de área semántica predefinida en la especificación. Así que ese ejemplo que te mostré. Los elementos de la leyenda. Esos son solo interruptores. Que es un botón que también tiene un estado de encendido y apagado. Y luego el botón de paginación, izquierda, derecha. Esos son solo botones regulares. Así que funciona muy bien para eso.

Espera. Alguien me está enviando un mensaje de Slack. De acuerdo. Conoces a esa persona. Eso no es importante. Así que no funciona muy bien si quieres tener un control completamente personalizado. Esa es una de las ventajas de un canvas. Puedes dibujar lo que sea y crear nuevos controles. Así que déjame mostrarte un ejemplo muy simple.

Así que aquí tengo este nuevo control de UI que he inventado. Se llama la bola. Va hacia la derecha y también va hacia la izquierda. Pero vamos, y eso es básicamente todo lo que hace. Es un control muy, muy simple. Pero veamos qué sucede cuando enciendo el lector de pantalla. Diálogo. Lienzo interactivo. Posición 2. Imagen. Posición uno. Imagen. Voice over. Bien. Es un ejemplo muy, muy sencillo. Pero es bastante genial. Cada vez que la bola se mueve, me dice posición uno. Posición dos. Posición tres. Posición cuatro. Eso es agradable. Eso es agradable. Genial, genial. Es como si cada vez que la bola se mueve, inmediatamente el lector de pantalla me está diciendo qué está pasando. Eso es agradable. Eso es agradable. Entonces, ¿qué está pasando aquí? Básicamente, el truco que estoy usando aquí es que estoy tratando los anuncios del lector de pantalla como si fueran una transmisión de video. Como dije antes, soy un ex desarrollador de juegos. Y así, si no estás familiarizado con cómo funciona la lógica de renderizado de video, típicamente usaremos una estructura de datos llamada cadena de intercambio, que básicamente son solo dos imágenes. Así que una imagen se dibuja en la pantalla, en la pantalla, y otra imagen está oculta en algún lugar en la parte de atrás, y la tarjeta gráfica estará dibujando en esa imagen.

Y luego, cuando el siguiente fotograma está listo, intercambias el propósito de esas dos imágenes. Esa nueva imagen se muestra al frente. Luego, el fotograma antiguo, la imagen antigua, se puede reutilizar, y la tarjeta gráfica puede entonces dibujar el siguiente fotograma. Ese es exactamente el mismo concepto que estoy usando aquí.

Así que tengo dos elementos proxy. Tengo uno que siempre es visible para el lector de pantalla y otro que siempre está oculto, pero está ahí, está listo, puedo actualizar el valor del texto y hacer que ese sea visible cuando quiera. Y el método que uso para intercambiar estos búferes es el método de enfoque.

La razón por la que esto funciona muy bien es que, bueno, en primer lugar, un canvas, puedes conceptualmente pensar en él como una transmisión de video, porque básicamente dibujas algo, y después de una cierta cantidad de tiempo, tal vez después de unos milisegundos o después de unas horas o lo que sea, dibuja otra imagen. Así que es como una transmisión de video de alguna manera. Así que este mecanismo que estamos usando, se sincroniza muy bien con el patrón de actualización del canvas.

Y otra cosa que noté es que las tecnologías de asistencia como los lectores de pantalla, ellos manejan los cambios de enfoque muy, muy, muy bien. Como había probado diferentes enfoques, como usar una alerta ARIA o tener una etiqueta ARIA que actualizas ocasionalmente, pero siempre había ese navegador extraño que no funcionaba, o ese lector de pantalla extraño o esa plataforma, como que siempre había algo en algún lugar que no funcionaba del todo, pero lo único que encontré que funciona de manera muy, muy confiable son los cambios de enfoque. Esto funciona en todos y cada uno de los navegadores, en todos y cada uno de los lectores de pantalla, y en todos y cada uno de todo lo que he probado.

Así que echemos un vistazo a esta demostración un poco para entender qué está pasando realmente. Así que permíteme guiarte a través del código. Aquí solo tenemos un manejo de entrada, y dibujamos la bola. La lógica de renderizado es importante, así que no la estoy mostrando. Y luego lo que hacemos aquí es el intercambio real. Así que intercambiamos el propósito de estos dos elementos proxy que tenemos. Y luego lo que hago es que el nuevo que está a punto de mostrarse, actualizo el valor del texto, la etiqueta ARIA del anunciador, y lo configuro como visible. Y luego el otro, lo configuro como invisible.

Hagámoslo oculto, y luego hacemos el enfoque, que es realmente el intercambio. Así que veamos qué sucede cuando eso se mueve. Así que lo principal, lo primero que quieres observar es esta propiedad de estilo. Verás que uno de ellos siempre está en display block, lo que significa visible, y el otro está en display none, oculto. Como ves, a medida que me muevo de izquierda a derecha, estos siguen cambiando de un lado a otro. Block, none, block, none, block, none, block, none, block, none, block, none. Lo siguiente que quieres observar es este valor de texto. Así que siempre tengo que actualizar el valor de texto del siguiente que estoy a punto de mostrar. Así que aquí, si quiero ir a la derecha, necesito actualizar esto a la posición dos.

Ahora eso se vuelve visible. Quiero ir a la posición tres. Tengo que actualizar este, posición tres. Pero, oh, presioné el botón equivocado. Por eso. Está bien. Posición tres, luego presionas de nuevo. Ese va a la posición cuatro, y así sucesivamente. Y ese es básicamente el mecanismo que tenemos. Tenemos un flujo de anuncios que seguimos intercambiando de un lado a otro, y así seguirá anunciando cosas de manera asertiva.

Eso es muy genial. Me gusta eso. Eso es agradable. Tenemos un producto realmente bueno aquí. Pero podemos hacerlo mejor. Como he dicho antes, es muy, muy importante asegurarnos de tener un indicador de enfoque. Así que podemos usar esa propiedad focus visible que mencioné hace un tiempo. Solo un recordatorio rápido. Entonces, la clase focus visible, lo que significa es que si lees la especificación, es como un montón y montón de muchas palabras. Pero más o menos lo que significa es ocultar todo esto para un usuario de ratón, pero mostrarlo para un usuario de teclado. Más o menos. Eso es más o menos lo que significa.

Así que vamos a usar esta pseudo clase y agregar algunas cosas allí para mostrar un indicador de enfoque. Y podemos usar cualquier tipo de forma que queramos. Un cuadrado, un rectángulo, un círculo, un Pikachu, lo que queramos. Es increíble. Es genial. Vamos a echar un vistazo a eso. Así que aquí vamos. La misma demostración que antes.

La principal diferencia es que ves que he configurado mis anunciadores para que sean invisibles. Opacidad 1. Sin embargo, cuando el focus visible está habilitado, quiero que sea visible. Luego tengo algo de estilo aquí para un indicador de enfoque. Y lo que he hecho aquí con mis anunciadores, la única diferencia es que he añadido este elemento hijo, que es el indicador de enfoque. Lo que significa que cuando uno de estos anunciadores entra en foco, si es necesario, también mostraremos un indicador de enfoque. Así que básicamente si hiciera clic en esto con el ratón y me moviera a la izquierda y a la derecha, esto es lo mismo que antes, pero realmente no está pasando nada porque estoy usando el ratón.

Pero notarás que aquí estos límites están siendo actualizados. Y eso es porque estoy actualizando los límites de un indicador de enfoque que actualmente no se muestra. Pero si hago clic aquí y luego presiono la tecla tab, ¡wow! ¡Mira eso! ¡Es un círculo! Y otro círculo. Wow, eso es genial. Así que muevo esto y luego me dice exactamente qué es lo que estoy manipulando. Eso es muy, muy genial. Quiero decir, aquí es un poco inútil porque solo tenemos una bola.

Pero si usaras tu imaginación, ¿y si tuviéramos miles y miles de bolas por todas partes? ¿Cómo sabrías qué bola estás moviendo? No tendrías idea. Pero ahora lo sabemos. Porque tenemos ese pequeño indicador de enfoque alrededor de la bola. Y no es un cuadrado. Es un círculo. Eso es tan genial. Ni siquiera sabía que podíamos hacer eso, pero podemos. Así que sí. Tengamos algunos ejemplos rápidos. Ejemplos de la vida real, no solo una bola aburrida. Veamos qué podemos hacer. Así que aquí vamos a activar el lector de pantalla también. VoiceOver en Safari. Así que espera, primero déjame mostrarte cómo sería sin un lector de pantalla. Así que puedes hacer clic aquí para habilitar, deshabilitar algunas series. Si hago clic en una cosa, me dice que esta cosa ha sido clicada.

Sí. De acuerdo. Y con el lector de pantalla también, puedo hacer lo mismo con el teclado. Si vengo aquí, entonces puedo presionar la tecla de espacio, y actualiza el valor clicado. Y puedo venir aquí y ocultar estas cosas. Y cada vez que me muevo, va. Como dije, lo bueno es que el lector de pantalla es muy, muy asertivo y receptivo. Nunca hay un caso en el que no esté anunciando algo, o esté esperando que algún otro anuncio termine.

Tan pronto como presiono cualquier cosa en el teclado, cortará lo que está haciendo y anunciará cuál es el estado más reciente. Y eso es bueno, porque es exactamente como quieres hacerlo lo más accesible posible, porque como dije, alguien usando un lector de pantalla, simplemente estará yendo por todas partes. Tienes que ser rápido. No tenemos tiempo para esperar. ¿De acuerdo? Así que sí, eso es muy, muy genial.

Probemos otro ejemplo. Así que aquí, a todos nos gusta un buen pastel o un donut, pasteles. Yo soy más de croissant. Soy belga. También decimos cocoa chocolat para los pequeños croissants de pan. No, espera, no croissants de pan. Pan, lo que sea. Eso no es importante. Eso no es importante. Pero básicamente, lo principal que quiero mostrarte aquí es que realmente podemos hacer un indicador de enfoque de cualquier forma que queramos, ¿verdad? Así que si pasara el ratón sobre estas cosas aquí, puedes ver, OK, el canvas está siendo actualizado. Estamos actualizando los marcos, porque puedes ver que el resaltado está cambiando.

OK, eso es genial. Eso es genial. Pero si entro aquí con un teclado, ¡guau, genial, mira lo que está haciendo! Mira ese enfoque. Oh, eso es como una pequeña cosa de sector. Eso es como un pequeño triángulo. Eso es tan genial. Y hacemos esto como un... No, no, no, no, no, no, no. Cállate, cállate, cállate.

Gracias. Hacemos esto también con el mapa. Así que si tienes un mapa de los EE. UU. , el indicador de enfoque irá zhoosh, zhoosh, zhoosh, por todas partes. Y hará lo mismo con Brasil y luego África y todo. Es tan genial.

Cualquier forma que quieras, puedes hacer eso, porque solo estamos usando imagen SVG. Establecemos esa ruta. Así que eso es esencialmente, en resumen, así es como tenemos un lienzo que es accesible. Hay muchos más detalles y pequeños detalles aquí y allá, pero esa es la esencia de cómo funciona. Así que estaría feliz de responder cualquier pregunta que tengas. Ese es el código QR que puedes o no escanear. Depende de ti. Es el código fuente de este conjunto de diapositivas específico que te mostrará exactamente lo que está pasando. El código es un poco desordenado. Pero ¿a quién le importa?

Entonces, sí, eso es todo. Por favor, siéntete libre de hacerme cualquier pregunta. Entonces, la primera pregunta aquí para ti es ¿por qué necesitamos un elemento HTML adicional para el indicador de enfoque? ¿No podemos dibujar la forma con canvas? Sí. Puedes dibujar el indicador de enfoque con el canvas, pero la ventaja de usar un elemento HTML adicional es que obtienes esa pseudo clase de CSS de enfoque visible. Eso significa que dejas que el navegador decida si necesitas o no dibujar el canvas. De lo contrario, necesitas escribir mucha lógica tú mismo. La mejor manera de saber realmente si se supone que debes usar un indicador de enfoque es usar la pseudo clase incorporada, porque entonces el navegador puede decirte, no, esto es para un usuario de teclado o esto es para un usuario de ratón.

Genial. Aquí hay uno. ¿Por qué no deberíamos usar HTML para componentes de UI relativamente estáticos como el ejemplo del gráfico de acciones? ¿Por qué no deberíamos usar HTML para componentes de UI relativamente estáticos? Entonces, podrías. En teoría, podrías. Entonces, creo que para algunos gráficos, en teoría, podrías tener un solo elemento HTML para todos esos barras, en lugar de solo uno que se actualiza constantemente. La forma más general de hacerlo era tener ese tipo de flujo de anunciador que imita un feed de video.

Porque estamos tratando de manejar diferentes tipos de series, así que, por ejemplo, si tienes una línea con muchas, muchas líneas, eso es lo que funciona mejor para nosotros. Creo que he entendido bien la pregunta, pero si no, siéntete libre de hacer una pregunta de seguimiento. Sí. Aquí hay otra. ¿Por qué estás usando dos elementos con block y none? Ah, esa es una buena pregunta. Sí. Entonces, básicamente, la razón por la que estamos usando dos elementos es que queremos poder llamar a la función de enfoque, porque cuando el lector de pantalla detecta que el enfoque ha cambiado, eso lo obliga a anunciar algo, por lo que necesitamos dos elementos. Porque si solo tienes un elemento y vuelves a llamar al enfoque en algo que ya está en enfoque, no va a pasar nada. Así que, por eso tienes que tener dos de ellos y tienes que alternar el enfoque entre esos dos elementos. Muy bien. ¿Has probado esto con personas realmente con discapacidad visual? Sabes, me encanta esta pregunta y realmente quería probar esto con personas ciegas reales, pero lamentablemente, no. Así que tuve que básicamente leer mucha de la documentación de las guías de Raria y cosas sobre cuáles son las mejores cosas y básicamente solo seguir religiosamente todas las reglas de las guías para asegurarme de que al menos cumplimos con las guías y las recomendaciones para, con suerte, hacerlo lo más utilizable posible. ¿Cuáles son tus pensamientos sobre agregar un lector de pantalla de IA para resumir lo que los usuarios pueden ver en el gráfico? Creo que es una gran idea, de hecho, tener alguna IA que pueda resumir los gráficos.

¿Cuáles son tus pensamientos sobre agregar un lector de pantalla de IA para resumir lo que los usuarios pueden ver en el gráfico? Creo que es una gran idea, de hecho, tener alguna IA que pueda resumir los gráficos. Quizás esté un poco fuera del alcance de nuestra biblioteca porque intentamos mantener nuestra biblioteca lo más ligera posible. Así que, no estoy completamente seguro de si sería trivial integrarlo dentro de nuestra biblioteca, pero es una idea interesante y gracias por el comentario. Sí. Y veamos.

Si renderizas todo en ambos Canvas y SVG para accesibilidad, ¿por qué no usar solo SVG? Esa es una muy buena pregunta. De hecho, olvidé decir por qué usamos Canvas. Muchas gracias por esa pregunta. Entonces, la principal ventaja de usar un Canvas es que te da control sobre la lógica de renderizado. Y eso significa que realmente puedes optimizar el renderizado específicamente para tu caso de uso. Si fueras a usar un SVG, estarías un poco a merced del navegador, que tiene una lógica de renderizado más de propósito general. Así que esa es la principal ventaja de usar un Canvas. Otra ventaja es que si tienes muchos, muchos puntos de datos, con SVG necesitas crear una etiqueta XML para cada uno de esos puntos de datos, y eso puede poner algo de carga en el navegador web también. Mientras que con un Canvas, porque solo hay un elemento y lo estás gestionando tú mismo, puedes optimizar el rendimiento mucho, mucho mejor. Sí. Y eso en realidad responde una de las preguntas, si hay algo que quieras agregar aquí, es cómo hacer accesible el gráfico de líneas si tiene más de 300 puntos de datos.

¿Cómo hacer accesible la línea de un gráfico de líneas? Bien. Correcto. Bien. Esa es una pregunta interesante. ¿Cómo hacer accesible la línea de un gráfico de líneas? Hacemos los marcadores específicos para los puntos de datos específicos. Y si tenemos 300 puntos de datos, podría haber potencialmente alguna mejora que podamos hacer aquí, porque esencialmente, tenemos un enfoque un poco ingenuo donde comenzamos en el primer elemento, y cada vez que presionas escribir, simplemente va al siguiente. Quizás en el futuro, en algún momento, podríamos agregar algunas opciones para saltar un par y saltar por cien o algo así. Así que tenemos un enfoque un poco ingenuo que funciona si tienes más de 300 puntos de datos. Pero aprecio que probablemente aún haya algo de trabajo por hacer en eso. Sí. ¿Y no funcionaría ARIA Live con Assertive de la misma manera que cambiar el enfoque? Esa es una gran sugerencia. De hecho, la implementación inicial de POC que teníamos era usando ARIA Live Assertive. Y luego descubrimos que ARIA Live con Assertive en realidad no es tan asertivo como quieres que sea. Así que cambiar el enfoque es en realidad mucho más confiable que usar un elemento ARIA Live Assertive. ¿Alguna idea de cómo la UE prueba aplicaciones para accesibilidad? ¿Usan herramientas similares? En realidad, no tengo idea de qué es una aplicación de prueba de la UE.

¿Cómo prueba la UE la accesibilidad? Oh, claro. Bien. Sospecho que la UE probablemente tendrá algún tipo de regulaciones de cumplimiento para verificar. No estoy familiarizado con todas ellas, pero la principal que estaba usando al verificar era la conformidad con WCAG. Y esa es la principal que tendría. Y generalmente esa cubre suficientes criterios para cumplir con otros estándares también. Esta ya fue respondida.

¿Cuáles son los beneficios de Canvas sobre SVG para gráficos? Y última pregunta aquí. ¿Qué hay de algo altamente interactivo como un pad de firma en Canvas? Un pad de firma en Canvas. Oh. Esa es complicada. Sí. En teoría, podrías usar las mismas técnicas para un pad de firma. La verdadera pregunta para mí sería... Así que esto probablemente sea más una decisión de diseño que una decisión de ingeniería. ¿Qué tipo de anuncios de texto haces para un pad de firma? Porque podrías curvar de maneras arbitrarias. Así que podrías usar las mismas técnicas, pero no sé si realmente daría buenos resultados.

Bien. Veamos. De hecho, podríamos tener tiempo para algunas más aquí, algunas más están llegando. Sí, adelante. Dispara.

Muy bien. {{^}}Muy bien. {{^}}Muy bien. ¿No tenemos ninguna API directa de lectores de pantalla que podamos activar directamente desde el teclado o eventos de ratón sin usar elementos? No. Simplemente no. Ojalá lo tuviéramos, pero no lo tenemos. No estoy seguro si puedes responder a esta, pero lo veremos aquí. ¿Cómo se compara este desarrollo de ARIA con nosotros usando... ¿Cómo se compara esto con construir una extensión de Chrome que use TransformersJS para hacer conversión de imagen a voz? Y también puedo hablar con... Asumo que pueden hablar con la UI a través de Transformers. Correcto. No estoy familiarizado con lo que es Transformers.js. La última charla. Pero básicamente se trata de poder usar modelos de IA en el navegador. Correcto. Bien. Realmente no he desarrollado esto pensando en IA. No creo que haya nada que te impida, en teoría, simplemente obtener los datos de bitmap del canvas y alimentarlos a una IA. No hay nada que haya escrito que te impida hacer eso. Genial. Muchas gracias. Gracias.