¿Qué es el Árbol de Accesibilidad, en realidad?

Rate this content
Bookmark

¿Alguna vez te has preguntado cómo interactúan los lectores de pantalla con los navegadores para proporcionar experiencias accesibles? Es posible que hayas escuchado términos como "APIs de accesibilidad", "árbol de accesibilidad" o "cálculo del nombre accesible". Pero, ¿a qué se refieren realmente?

En esta charla, desmitificaremos el proceso en el que los navegadores generan y actualizan el árbol de accesibilidad. Analizaremos sus elementos clave y cómo los elementos HTML y los atributos ARIA se mapean en él. Por último, exploraremos cómo los desarrolladores web pueden aprovecharlo para una depuración efectiva. ¡Sumérgete en el funcionamiento interno de las interacciones entre lectores de pantalla y navegadores!

This talk has been presented at JSNation 2024, check out the latest edition of this JavaScript Conference.

Mathilde Buenerd
Mathilde Buenerd
19 min
13 Jun, 2024

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta es una presentación sobre accesibilidad y lectores de pantalla. El orador discute la evolución de los lectores de pantalla y cómo se adaptaron a las interfaces gráficas de usuario. Se presentan las APIs de accesibilidad y el árbol de accesibilidad, que permiten a los programas construir una base de datos de texto utilizada por las tecnologías de asistencia. El árbol de accesibilidad puede variar según los navegadores y plataformas, excluyendo elementos que no son relevantes para las tecnologías de asistencia. El estado oculto de ARIA y las propiedades de los elementos juegan un papel en la determinación de la accesibilidad de los elementos, y el nombre accesible se puede derivar del contenido de texto o especificarse utilizando atributos ARIA.

1. Introducción a la Accesibilidad y Lectores de Pantalla

Short description:

Esta es una presentación de un equipo de la Plataforma Google Cloud, que discute el tema de ¿Qué es la Accesibilidad 3? La oradora, Mathilde, comparte algunos antecedentes sobre la importancia de la accesibilidad y la evolución de los lectores de pantalla desde los sistemas operativos basados en texto hasta las interfaces gráficas de usuario. Explica cómo los lectores de pantalla se adaptaron a la complejidad de las interfaces gráficas de usuario mediante la construcción de una base de datos de texto llamada modelo fuera de pantalla.

Esta es una presentación de un equipo de la Plataforma Google Cloud, y estamos en un escenario virtual para mostrarles cómo construir una plataforma realmente poderosa y en rápido crecimiento. Es un gusto verlos a todos, especialmente sé que son las 5 en punto, sé que es tarde, tuvimos un gran día hoy, así que estoy feliz de ver que esta sala está llena y que todos se ven despiertos. Así que gracias por estar aquí. Comencemos. Cometí un error en esta primera diapositiva. Espero que no sea una mala señal para el resto de la presentación. El nombre de esta presentación es ¿Qué es la Accesibilidad 3? Hola, mi nombre es Mathilde, soy una desarrolladora de front-end y una profesional de la accesibilidad. Dejé mi trabajo en Shopify hace un par de semanas, así que ya no trabajo allí. Por mi acento pueden escuchar que soy originaria de Francia, pero vivo en Madrid, España. Así que el tema de hoy es ¿Qué es la Accesibilidad 3? y lo cubriremos, pero antes, me gustaría retroceder un poco en el tiempo y dar algo de contexto sobre por qué la accesibilidad es un tema interesante. En esta diapositiva, podemos ver una imagen de un teclado cuadrado de 18 teclas con nueve dígitos, y las letras A, B, C, D, y las teclas de ayuda y detener. Y por curiosidad, ¿pueden levantar la mano si saben qué es este dispositivo? No veo ninguna mano. En realidad, no me sorprende. Si hubiera visto alguna mano levantada, me habría sorprendido mucho. Pero este dispositivo es de 1988, y es un teclado de lectura de pantalla que fue desarrollado por IBM, y este teclado se acoplaba con un software de lectura de pantalla como parte de uno de los primeros sistemas de lectura de pantalla que se desarrollaron para permitir a las personas con discapacidad visual o ciegas acceder a las computadoras. Pero alguna vez te has preguntado cómo funcionaban los lectores de pantalla en ese entonces? De una manera muy simple, en un sistema operativo basado en texto como MS-DOS, era bastante fácil para los lectores de pantalla acceder a los caracteres que se presentaban en la pantalla, y todo lo que tenían que hacer era convertir este texto en voz. Pero como sabemos, las computadoras evolucionaron rápidamente, y ya a fines de los años 80, los sistemas operativos basados en texto fueron reemplazados por interfaces gráficas de usuario. Y se volvió mucho más complicado para los lectores de pantalla porque una interfaz gráfica de usuario no solo muestra los caracteres. Muestra los píxeles, y la información presentada en la pantalla es mucho más complicada de lo que era. Por ejemplo, el texto puede pertenecer a diferentes ventanas, pero los lectores de pantalla solo deben leer el texto de las ventanas actualmente seleccionadas. Así que tienes diferentes tipos de texto. Tienes menús. Tienes elementos. Tienes botones. Y además de eso, tienes elementos que son puramente visuales como iconos. Entonces, ¿cómo se adaptaron los lectores de pantalla a eso? Bueno, esta es una imagen de un artículo llamado `Haciendo que la GUI hable`, escrito en 1991. Y explica un nuevo enfoque que han estado desarrollando en IBM para hacer que los lectores de pantalla funcionen con interfaces gráficas de usuario. Y la idea era construir una especie de base de datos de texto que modele lo que se muestra en la pantalla. Y a esta base de datos se le llamó modelo fuera de pantalla, y en el artículo anterior, el autor explica que en el modelo fuera de pantalla, las tecnologías de asistencia tenían que hacer suposiciones sobre el rol de las cosas basadas en cómo se dibujan en la pantalla. Por ejemplo, si un texto tiene un borde.

2. APIs de Accesibilidad y el Árbol de Accesibilidad

Short description:

Las APIs de Accesibilidad se introdujeron a finales de los años 90, permitiendo a los programas y aplicaciones construir la base de datos de texto utilizada por las tecnologías de asistencia. Las APIs de Accesibilidad proporcionan una representación en forma de árbol de la interfaz, con objetos que describen los elementos de la interfaz de usuario, sus propiedades, roles, estados y eventos. El árbol de accesibilidad es una representación separada del DOM que se centra en la información relacionada con la accesibilidad. Los navegadores generan el árbol de accesibilidad utilizando el árbol de renderizado, que se basa en el DOM sin los elementos ocultos. Las herramientas de desarrollo se pueden utilizar para ver el árbol de accesibilidad.

o fondo, entonces probablemente está seleccionado. O si hay una barra de inserción parpadeante alrededor de él, probablemente el usuario pueda ingresar texto. Estoy bastante seguro de que pueden imaginar lo complejos que eran los sistemas y lo difícil que era mantenerlos, y había cierta ambigüedad. Entonces, además de eso, cada vez que salía una nueva versión de la interfaz de usuario, los lectores de pantalla tenían que asegurarse de que el modelo fuera de pantalla siguiera siendo preciso. Hora de tomar un trago, disculpen. ¿Cuál es una mejor solución? Bueno, ya a finales de los años 90, se introdujeron las APIs de Accesibilidad, y el papel de las APIs de Accesibilidad era permitir que los programas y aplicaciones construyeran la base de datos de texto que las tecnologías de asistencia construían previamente. Concretamente, permiten a los sistemas operativos describir los elementos de la interfaz de usuario como objetos con nombres y propiedades, para que las tecnologías de asistencia puedan acceder a esos objetos. Y puse APIs de Accesibilidad en forma plural porque hay muchas, son específicas de la plataforma. Hay algunas para Mac, algunas para Windows, algunas para Android, y son prácticamente estándares. Entonces, podrían preguntarse ¿cómo se ve una API de Accesibilidad? Y en la práctica, es una representación en forma de árbol de la interfaz. Por ejemplo, en Mac, una ventana sería una aplicación que contiene dos hijos, una barra de menú, lo que está en la parte superior, y una ventana que contiene la propia aplicación. Luego, la barra de menú también contendría, como hijos, todos los elementos del menú, y la ventana contendría una barra izquierda, un botón de cierre, campos de búsqueda, etc. Para cada elemento de la interfaz de usuario, los desarrolladores generalmente pueden establecer roles, ¿es esa ventana, es ese un menú? Pueden establecer propiedades. ¿Cuál es la posición de esta ventana? ¿Cuál es su tamaño? Pueden establecer estados. ¿Este elemento del menú está seleccionado o no? Y otras propiedades que son útiles para los desarrolladores, como eventos. Bueno, ahora todos sabemos, sabemos todo sobre los lectores de pantalla y las APIs de Accesibilidad, pero ¿qué pasa con el árbol de Accesibilidad entonces? Bueno, el árbol de Accesibilidad es una representación separada del DOM que se centra en la información relacionada con la accesibilidad. Es construido por el navegador que luego pasa esta información a la API de Accesibilidad de la plataforma. Entonces, en resumen, el árbol de Accesibilidad establece el vínculo entre su HTML, la API de Accesibilidad de la plataforma y la tecnología de asistencia. Ahora veamos cómo los navegadores generan este árbol. Si pensamos en una página típica que está destinada a ser interactuada con una pantalla, un mouse y un teclado, una ruta de representación crítica típica se vería así. El navegador crea el DOM y el modelo de objetos CSS, luego crea el árbol de renderizado, que básicamente es el DOM sin algunos elementos que están ocultos por CSS. Cuando el árbol de renderizado está listo, el navegador puede determinar el tamaño y la posición exactos del elemento, realiza el paso de diseño y luego pinta los nodos en la pantalla uno por uno. Y después de eso, el usuario puede interactuar con la página con su mouse, teclado, etc. Ahora, mirando la experiencia desde el punto de vista de un usuario que utiliza tecnología de asistencia, era diferente. Bueno, el paso de diseño y el paso de pintura no son relevantes aquí porque no es algo que las tecnologías de asistencia aprovecharán. Sin embargo, el navegador utilizará el árbol de renderizado, el árbol sin los elementos ocultos, para construir el árbol de Accesibilidad. Luego, el árbol de Accesibilidad pasará la información a la API de Accesibilidad de la plataforma que puede ser consultada por tecnologías de asistencia como lectores de pantalla. Entonces, veamos cómo se ve el árbol. Cómo mostrar el árbol de Accesibilidad. La mejor manera de entenderlo es verlo usando DevTools. Voy a usar las DevTools de Chrome en esta presentación.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Depuración Web Moderna
JSNation 2023JSNation 2023
29 min
Depuración Web Moderna
Top Content
This Talk discusses modern web debugging and the latest updates in Chrome DevTools. It highlights new features that help pinpoint issues quicker, improved file visibility and source mapping, and ignoring and configuring files. The Breakpoints panel in DevTools has been redesigned for easier access and management. The Talk also covers the challenges of debugging with source maps and the efforts to standardize the source map format. Lastly, it provides tips for improving productivity with DevTools and emphasizes the importance of reporting bugs and using source maps for debugging production code.
Depuración de JS
React Summit 2023React Summit 2023
24 min
Depuración de JS
Top Content
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
Accesibilidad en Discord
React Advanced Conference 2021React Advanced Conference 2021
22 min
Accesibilidad en Discord
This Talk discusses the accessibility efforts at Discord, focusing on keyboard navigation and the challenges faced with implementing focus rings and outlines. The speaker showcases a unified focus ring system and a saturation slider to address accessibility concerns. They also highlight the implementation of role colors and the use of CSS filters for accessibility improvements. The Talk concludes with insights on runtime accessibility checking and the development of a performant core runtime system for checking accessibility issues.
De la Fricción al Flujo: Depuración con Chrome DevTools
JSNation 2024JSNation 2024
32 min
De la Fricción al Flujo: Depuración con Chrome DevTools
The Talk discusses the importance of removing frictions in the debugging process and being aware of the tools available in Chrome DevTools. It highlights the use of the 'Emulate a Focus Page' feature for debugging disappearing elements and the improvement of debugging tools and workflow. The Talk also mentions enhancing error understanding, improving debugging efficiency and performance, and the continuous improvement of DevTools. It emphasizes the importance of staying updated with new features and providing feedback to request new features.
Configurando las Pruebas de Accesibilidad de Axe
TestJS Summit 2021TestJS Summit 2021
30 min
Configurando las Pruebas de Accesibilidad de Axe
Top Content
AXe is an accessibility engine for automated web UI testing that runs a set of rules to test for accessibility problems. It can be configured to disable or enable specific rules and run based on tags. Axe provides various options, but axe linter does not support all options. The importance of investing time and resources in accessibility is emphasized, as it benefits not only those with disabilities but improves the web for everyone. Manual testing is also highlighted as a necessary complement to automated tests for addressing accessibility issues.
Depuración con Chrome DevTools
JSNation Live 2021JSNation Live 2021
11 min
Depuración con Chrome DevTools
Here are some tips for better utilizing DevTools, including using the run command, customizing keyboard shortcuts, and emulating the focus effect. Learn how to inspect memory, use the network panel for more control over network requests, and take advantage of console utilities. Save frequently used code as snippets and use local overrides for easy editing. Optimize images by using a more optimized format like AVIF and track changes in the network panel to see the reduced data size.

Workshops on related topic

Masterclass de Depuración de Rendimiento de React
React Summit 2023React Summit 2023
170 min
Masterclass de Depuración de Rendimiento de React
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Vería una interacción lenta, intentaría una optimización aleatoria, vería que no ayudaba, y seguiría intentando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Haría una grabación en Chrome DevTools o React Profiler, la examinaría, intentaría hacer clic en cosas aleatorias, y luego la cerraría frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos a analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, estaremos cubriendo el rendimiento de la interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
Depuración del Rendimiento de React
React Advanced Conference 2023React Advanced Conference 2023
148 min
Depuración del Rendimiento de React
Workshop
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Veía una interacción lenta, probaba una optimización aleatoria, veía que no ayudaba, y seguía probando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Hacía una grabación en Chrome DevTools o React Profiler, la examinaba, intentaba hacer clic en cosas al azar, y luego la cerraba frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos cómo analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, cubriremos el rendimiento de interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
Accesibilidad web para Ninjas: Un enfoque práctico para crear aplicaciones web accesibles
React Summit 2023React Summit 2023
109 min
Accesibilidad web para Ninjas: Un enfoque práctico para crear aplicaciones web accesibles
Workshop
Asaf Shochet Avida
Eitan Noy
2 authors
En este masterclass práctico, te proporcionaremos las herramientas y técnicas que necesitas para crear aplicaciones web accesibles. Exploraremos los principios del diseño inclusivo y aprenderemos cómo probar nuestros sitios web utilizando tecnología de asistencia para asegurarnos de que funcionen para todos.
Cubriremos temas como el marcado semántico, los roles de ARIA, los formularios y la navegación accesibles, y luego nos sumergiremos en ejercicios de codificación donde podrás aplicar lo que has aprendido. Utilizaremos herramientas de prueba automatizadas para validar nuestro trabajo y asegurarnos de cumplir con los estándares de accesibilidad.
Al final de este masterclass, estarás equipado con el conocimiento y las habilidades para crear sitios web accesibles que funcionen para todos, y tendrás experiencia práctica utilizando las últimas técnicas y herramientas para el diseño inclusivo y las pruebas. ¡Únete a nosotros en este increíble masterclass de codificación y conviértete en un ninja de la accesibilidad web y el diseño inclusivo!
Pruebas automatizadas de accesibilidad con jest-axe y Lighthouse CI
TestJS Summit 2021TestJS Summit 2021
85 min
Pruebas automatizadas de accesibilidad con jest-axe y Lighthouse CI
Workshop
Bonnie Schulkin
Bonnie Schulkin
¿Incluyen tus pruebas automatizadas verificaciones de accesibilidad? Este masterclass cubrirá cómo comenzar con jest-axe para detectar violaciones de accesibilidad basadas en código, y Lighthouse CI para validar la accesibilidad de las páginas completamente renderizadas. Ninguna cantidad de pruebas automatizadas puede reemplazar las pruebas manuales de accesibilidad, pero estas verificaciones se asegurarán de que tus probadores manuales no estén haciendo más trabajo del necesario.
El Masterclass de Clinic.js
JSNation 2022JSNation 2022
71 min
El Masterclass de Clinic.js
Workshop
Rafael Gonzaga
Rafael Gonzaga
Aprende las formas de la suite de herramientas clinic, que te ayudan a detectar problemas de rendimiento en tus aplicaciones Node.js. Este masterclass te guiará a través de varios ejemplos y te proporcionará los conocimientos necesarios para hacer pruebas de rendimiento y solucionar problemas de E/S y del bucle de eventos.
Soluciona el 100% de tus errores: Cómo encontrar problemas más rápido con la Reproducción de Sesiones
JSNation 2023JSNation 2023
44 min
Soluciona el 100% de tus errores: Cómo encontrar problemas más rápido con la Reproducción de Sesiones
WorkshopFree
Ryan Albrecht
Ryan Albrecht
¿Conoces ese molesto error? ¿El que no aparece localmente? Y no importa cuántas veces intentes recrear el entorno, no puedes reproducirlo. Has revisado las migas de pan, leído la traza de pila y ahora estás jugando al detective para unir los tickets de soporte y asegurarte de que sea real.
Únete al desarrollador de Sentry, Ryan Albrecht, en esta charla para aprender cómo los desarrolladores pueden utilizar la Reproducción de Sesiones, una herramienta que proporciona reproducciones de video de las interacciones de los usuarios, para identificar, reproducir y resolver errores y problemas de rendimiento más rápido (sin golpear tu cabeza contra el teclado).