Prueba Guiada Inteligente de Elementos Interactivos
La Prueba Guiada Inteligente (IGT) de Elementos Interactivos permite probar múltiples estados sin tener que ejecutar de nuevo las IGT. Un elemento interactivo es simplemente cualquier cosa con la que el usuario interactúa en la página web, como botones, enlaces, entradas, menús, etc.
Cómo funciona
Lo primero que tendrás que hacer es poner la página en el estado que deseas probar. Después de eso, unas simples preguntas te guiarán a través de las pruebas de accesibilidad requeridas para cada uno de los elementos interactivos de la página.
Haz clic en "INICIAR" cuando estés listo para realizar la prueba.
La IGT de Elementos Interactivos captura capturas de pantalla de cada elemento interactivo. Mientras se capturan las imágenes, por favor no desplaces ni interactúes con la página.
Paso 1: Faltante
Primero, la IGT escaneará la página (o componente) para encontrar todos los elementos interactivos. Si el Aprendizaje Automático está habilitado (ver página de configuraciones), detectará cualquier elemento que no esté marcado con atributos interactivos (roles, índice de pestañas, etc.) que de hecho pueda ser interactivo.
En esta primera pregunta, se te pedirá que selecciones cualquier elemento interactivo que se haya pasado por alto. Si no falta nada, simplemente haz clic en "SIGUIENTE".
Luego, puedes elegir qué elemento te gustaría probar. Por defecto, estos elementos se agrupan "inteligentemente" usando nuestro algoritmo para agrupar elementos similares. Sin embargo, puedes optar por agruparlos por rol o presentarlos sin agrupación alguna utilizando el control "Agrupar por".
Paso 2: Precisión
Para los elementos que eliges probar, se te pedirá que verifiques el Nombre Accesible, Rol y Estado del elemento. El Nombre Accesible se utiliza para comunicar el propósito de los elementos interactivos, como una etiqueta en un campo de formulario. El Rol indica con qué control está interactuando el usuario (botón, pestaña, enlace, etc.). El Estado le dice al usuario que utiliza tecnología asistencial cuál es el estado actual del control (como seleccionado/no seleccionado, marcado/no marcado).
Nombre Accesible
Se te pedirá que confirmes que el Nombre Accesible describe con precisión el propósito de los elementos interactivos.
Rol
A continuación, si la IGT puede detectar el rol, éste se preseleccionará. Puedes modificar la selección por defecto si el rol es diferente de lo que se detecta desde un menú desplegable de roles disponibles.
Estado(s)
De manera similar, la IGT mostrará estados preseleccionados. Para elementos donde un estado no sea relevante, deja el estado como "No aplicable". Después de que hayas confirmado que el nombre accesible, el rol y el estado se están comunicando correctamente, ¡puedes probar otro estado del mismo elemento! Adelante, pon el Elemento Interactivo en el estado adicional que deseas probar (como marcar una casilla, seleccionar una pestaña, etc.). Una vez que estés listo, haz clic en "VERIFICAR ESTADO DEL ELEMENTO". La IGT detectará el nuevo estado y podrás confirmar si el estado se está comunicando correctamente. Esto se repetirá para todos los elementos que seleccionaste para probar. Una vez que hayas terminado de probar todos los elementos seleccionados y sus estados que deseas probar, selecciona "SIGUIENTE".
Ejecución en Modo Automático
Cuando el modo automatizado de IGT está habilitado, la IGT de Elementos Interactivos incluye un paso de selección de elementos antes de que la IA comience su análisis. Esto te da control directo sobre el alcance de tu prueba.
Paso 1: Seleccionar elementos para probar
Antes de que comience el análisis de IA, se te presentarán todos los elementos interactivos encontrados en la página: tanto los detectados automáticamente como cualquier elemento adicional que nuestra IA identifique como potencialmente interactivo pero no marcado con atributos interactivos estándar (roles, índice de pestañas, etc.).
Selecciona los elementos que deseas incluir en tu prueba y luego haz clic en Siguiente para continuar.
Delimitar tu prueba a un conjunto enfocado de elementos es una de las formas más efectivas de probar eficientemente:
- Prueba una instancia por componente: Si tu página tiene 20 botones del mismo tipo, seleccionar una instancia representativa es suficiente para validar el patrón.
- Concéntrate en lo que estás cambiando: Cuando trabajas en una característica o corrección de errores, selecciona solo los elementos en los componentes que estás tocando — no es necesario volver a probar todo.
- Evita el uso innecesario de créditos de IA: Menos elementos probados significa menos créditos de IA consumidos. Delimitar tu prueba ayuda a tu equipo a sacar el máximo provecho de la asignación mensual de créditos.
Paso 2: La IA analiza tus elementos seleccionados
La IA evalúa automáticamente el nombre accesible, el rol y el estado de cada elemento que seleccionaste. Una vez que el análisis está completo, serás llevado a la pantalla de revisión para inspeccionar los hallazgos de la IA, hacer cualquier corrección y finalizar tu prueba. Consulta IGTs Automatizados para obtener detalles sobre cómo revisar los resultados, realizar correcciones y completar tu prueba.
Qué evalúa
La IGT de Elementos Interactivos evalúa:
- Nombres accesibles válidos
- Roles válidos
- Estados válidos
Preguntas Frecuentes
¿Qué significa cada uno de los "Estados de Elemento" disponibles?
A continuación se detalla cada uno de los estados disponibles para probar en la IGT de Elementos Interactivos.
Deshabilitado
Indica que un elemento no es editable o no se puede operar de otra forma. Cuando está deshabilitado, un elemento no es ni editable ni enfocable. La desactivación de un elemento se puede hacer utilizando la propiedad disabled nativa de HTML (preferido) o aria-disabled="true".
Ejemplos deshabilitados
Botón de envío deshabilitado:
<button type="submit" disabled>Submit</button>Campo de entrada deshabilitado:
<form>
<label for="email">Email</label>
<input type="text" id="email" disabled />
</form>Presionado
Indica que un botón de alternancia está actualmente "presionado". El estado presionado de un elemento se gestiona mediante el atributo aria-pressed . Hay 3 valores compatibles para el aria-pressed:
"true": indica que el botón de alternancia está actualmente presionado"false": indica que el botón de alternancia no está actualmente presionado"mixed": indica que los valores de más de un elemento controlado por el botón de alternancia no comparten todos el mismo valor (triestado)
Ejemplos de presionado
Un botón de pausa que no está actualmente presionado:
<button aria-pressed="false">Pause</button>Un botón de silencio que está actualmente presionado:
<button aria-pressed="true">Mute</button>Expandido
Indica que un elemento, u otro elemento agrupador que controla, está actualmente expandido. El estado expandido de un elemento se gestiona mediante el atributo aria-expanded . El valor del atributo aria-expanded debe establecerse en "true" cuando el elemento (o el elemento agrupador que controla) está expandido y en "false"cuando no lo está.
Ejemplos de expandido
Un botón expandido:
<button aria-expanded="true">options</button>Seleccionado
Indica que un elemento está actualmente en un estado "seleccionado". El estado seleccionado de un elemento se gestiona mediante el atributo aria-selected . El valor del atributo aria-selected debe establecerse en "true" cuando el elemento está seleccionado, "false" cuando no lo está y "mixed" para las casillas de verificación de estado mixto en un triestado.
El atributo aria-selected solo debe usarse en elementos con un rol de gridcell, option, row o tab . El estado "seleccionado" no debe confundirse con el estado "marcado" utilizado con las casillas de verificación.
Ejemplos de seleccionado
Un panel de pestañas simple gestionando aria-selected en los elementos role="tab" :
<div role="tablist" aria-label="Simple Tabs">
<div
role="tab"
aria-selected="true"
aria-controls="panel-1"
id="tab-1"
tabindex="0"
>
Tab 1
</div>
<div
role="tab"
aria-selected="false"
aria-controls="panel-2"
id="tab-2"
tabindex="-1"
>
Tab 2
</div>
</div>
<div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
<p>Panel 1 content...</p>
</div>
<div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden>
<p>Panel 2 content...</p>
</div>Marcado
Indica que un elemento está actualmente en un estado "marcado". Se usa comúnmente en casillas de verificación, botones de opción y otros widgets. El estado marcado de un elemento se puede gestionar utilizando el atributo HTML checked (utilizado con casillas de verificación nativas) o el atributo aria-checked . Si se usa aria-checked, el valor del atributo debe establecerse en "true" cuando el elemento está marcado y en "false" cuando no está marcado.
Ejemplos de marcado
Una casilla de verificación nativa marcada:
<input id="terms" type="checkbox" checked />
<label for="terms">I agree to the terms and conditions</label>Una casilla de verificación ARIA no marcada:
<span
role="checkbox"
id="checkbox"
aria-checked="false"
tabindex="0"
aria-labelledby="checkbox-label"
></span>
<label id="checkbox-label">Subscribe to newsletter</label>Solo lectura
Indica que un elemento no es editable, pero de otro modo es operable y focalizable. El estado de solo lectura de un elemento se puede gestionar utilizando el atributo HTML readonly atributo o el ",
"context": "paragraph aria-readonly atributo. Si se utiliza ",
"context": "paragraph aria-readonly, el valor del atributo debe establecerse en ",
"context": "paragraph "true" cuando el elemento está en un estado de solo lectura y ",
"context": "paragraph "false" cuando no lo está.",
"context": "paragraph
Ejemplos de solo lectura", "context": "heading level 5
Un campo de entrada de solo lectura:", "context": "paragraph
<label for="first-name">First Name:</label>
<input name="first-name" type="text" value="Gene" readonly />