Seleccionar elementos
Varias funciones de axe DevTools te piden que indiques elementos específicos en la página. Puedes seleccionar elementos con el ratón haciendo clic en ellos, o con el teclado y la tecnología de asistencia usando el «Selector de Elementos». Ambos métodos pueden usarse indistintamente dentro del mismo paso.
- Dónde seleccionar elementos
- Seleccionar con el ratón
- Seleccionar con el Selector de Elementos
- Saltar entre elementos resaltados
- Eliminar una selección
Dónde seleccionar elementos
| Función | Qué seleccionas |
|---|---|
| Exploración Parcial de Página | Un elemento al que se limita la exploración |
| Levantar Problemas Manuales | Un elemento contra el que se levanta el problema, más cualquier número de elementos relacionados |
| Pruebas Guiadas Inteligentes | Depende de la pregunta. Algunas preguntas piden un elemento (por ejemplo, un tabla o el activador de un modal), otras piden cualquier número de elementos (por ejemplo, encabezados o puntos de tabulación que no fueron resaltados previamente) |
Cuando un paso acepta solo un elemento, no puedes seleccionar otro hasta que elimines la selección actual.
Seleccionar con el ratón
La selección con el ratón está controlada por el interruptor de «Selección con el Ratón», que muestra si está actualmente «ENCENDIDO» o «APAGADO». En la mayoría de los pasos, la selección con el ratón se activa automáticamente.
Mientras la selección con el ratón está activada:
- Desplaza el ratón sobre la página. El elemento bajo tu puntero está marcado.
- Haz clic en el elemento marcado para seleccionarlo. El elemento sigue resaltado en la página, y el Selector de Elementos se expande para mostrarlo.
axe DevTools captura los clics mientras la selección con el ratón está activada, por lo que los enlaces y botones en la página no se activarán. Para interactuar con la página normalmente (por ejemplo, para abrir un modal antes de seleccionarlo), apaga el interruptor de «Selección con el Ratón», y vuelve a encenderlo cuando estés listo para seleccionar.
En algunos pasos de Pruebas Guiadas Inteligentes, como al seleccionar un modal después de haberlo lanzado, la selección con el ratón empieza desactivada para que puedas interactuar con la página primero. Activa el interruptor de «Selección con el Ratón» cuando estés listo para seleccionar.
Seleccionar con el Selector de Elementos
El Selector de Elementos es una forma accesible con teclado y compatible con lectores de pantalla para seleccionar elementos sin un ratón. Aparece en la parte inferior del panel, debajo del encabezado «Selector de Elementos», y muestra el DOM de la página como un árbol expandible. Cada elemento muestra el nombre de su etiqueta junto con sus atributos id, class y role, si están presentes.
En la mayoría de las funciones, el Selector de Elementos está inicialmente colapsado. Activa el botón «Ver selector de elementos» junto al encabezado para expandirlo.
Navegación por teclado
| Tecla | Acción |
|---|---|
| Flecha Abajo | Moverse al siguiente elemento visible |
| Flecha Arriba | Moverse al elemento visible anterior |
| Flecha Derecha | Expandir un elemento colapsado, o moverse a su primer hijo si ya está expandido |
| Flecha Izquierda | Colapsar un elemento expandido, o moverse a su padre si ya está colapsado |
| Espacio | Seleccionar el elemento enfocado, o deseleccionarlo si ya está seleccionado |
A medida que te mueves a través del árbol, el elemento enfocado se resalta en la página y se desplaza para que puedas confirmar que estás en el elemento correcto antes de seleccionarlo.
También puedes usar los botones debajo del árbol:
- «Seleccionar» selecciona el elemento enfocado
- «Eliminar» elimina el elemento enfocado de tu selección
Hacer clic en un elemento del árbol lo expande o colapsa; no lo selecciona. Para seleccionar un elemento del árbol con el ratón, haz clic en el elemento y luego en «Seleccionar».
Compatibilidad con lectores de pantalla
Cuando un elemento del árbol recibe el foco, los lectores de pantalla anuncian detalles sobre el elemento, como su nombre accesible y su rol calculado. Los elementos también anuncian «Seleccionado» cuando son parte de tu selección, y «Resaltado» (junto con su posición, como «Resaltado 2 de 5») cuando axe DevTools los ha resaltado.
Para ver la lista completa de las propiedades y atributos del elemento enfocado, activa su botón de «Más información».
Saltar entre elementos resaltados
En algunos pasos, axe DevTools resalta elementos en la página para que los revises, como los encabezados o puntos de tabulación encontrados durante una Prueba Guiada Inteligente, o los problemas resaltados al levantar un problema manual. En lugar de navegar por el árbol para encontrar cada uno, puedes saltar directamente entre ellos.
Cuando hay dos o más elementos resaltados, usa los botones «Saltar al Resaltado Anterior» y «Saltar al Siguiente Resaltado» en el Selector de Elementos. Mientras un elemento resaltado está enfocado, un contador (por ejemplo, «2 / 5») muestra su posición entre todos los elementos resaltados.
También puedes usar atajos de teclado mientras el foco está en cualquier parte del Selector de Elementos, incluyendo en un elemento del árbol:
| Atajo | Acción |
|---|---|
| Alt+Shift+N (Opción+Shift+N en macOS) | Saltar al siguiente elemento destacado |
| Alt+Shift+P (Option+Shift+P en macOS) | Saltar al elemento destacado anterior |
El salto se reinicia, por lo que pasar más allá del último elemento destacado regresa al primero, y viceversa. Si solo hay un elemento destacado y te has alejado de él, cualquiera de los atajos te llevará de vuelta a él.
Eliminar una selección
Para eliminar un elemento seleccionado, haga cualquiera de lo siguiente:
- En el Selector de Elementos, enfoca el elemento y presiona Espacio o activa „Eliminar“
- Activa el botón de eliminar (papelera) junto al elemento en la lista de elementos seleccionados
- En Pruebas Guiadas Inteligentes, activa „Eliminar todas las selecciones“ para borrar todas las selecciones en el paso actual
Cuando levantas un problema manual, el primer elemento que seleccionas es el „Elemento Seleccionado“ al que se asocia el problema, y cada elemento después de eso se lista bajo „Elementos Relacionados“.