Prueba Guiada Inteligente de Elementos Interactivos
El IGT de Elementos Interactivos permite probar múltiples estados sin tener que volver a ejecutar las pruebas. 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 debes hacer es poner la página en el estado que deseas probar. Después de eso, unas pocas preguntas simples 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.
El IGT de Elementos Interactivos captura capturas de pantalla de cada elemento interactivo. Mientras se capturan las capturas de pantalla, por favor no deslices ni interactúes con la página.
Paso 1: Faltantes
Primero, el IGT escaneará la página (o componente) para encontrar todos los elementos interactivos. Si el Aprendizaje Automático está habilitado (ver página de configuración), 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 omitido. Si no falta nada, simplemente haz clic en „SIGUIENTE“.
Luego, puedes elegir qué elemento te gustaría probar. Por defecto, estos elementos se agrupan de manera „inteligente“ usando nuestro algoritmo para agrupar elementos similares. Sin embargo, puedes elegir agruparlos por rol o presentarlos sin ningún agrupamiento usando el control „Agrupar por“.
Paso 2: Precisión
Para los elementos que elijas probar, se te pedirá verificar el Nombre Accesible, Rol y Estado del elemento. El Nombre Accesible se usa para transmitir 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 indica al usuario que utiliza tecnología asistida cuál es el estado actual del control (como seleccionado/deseleccionado, marcado/no marcado).
Nombre Accesible
Se te pedirá confirmar que el Nombre Accesible describe con precisión el propósito del elemento interactivo.
Rol
A continuación, si el IGT es capaz de detectar el rol, se preseleccionará. Puedes anular la selección predeterminada si el rol es diferente de lo detectado desde un menú desplegable de roles disponibles.
Estado(s)
De manera similar, el IGT mostrará los estados preseleccionados. Para los elementos donde un estado no es relevante, deja el estado como „No Aplicable“. Después de haber confirmado que el nombre accesible, el rol y el estado se transmiten correctamente, ¡puedes probar otro estado del mismo elemento! Adelante, pon el Elemento Interactivo en el estado adicional que te gustaría probar (como marcar una casilla, seleccionar una pestaña, etc.). Una vez estés listo, haz clic en „VERIFICAR ESTADO DEL ELEMENTO“. El IGT detectará el nuevo estado y podrás confirmar si el estado se está transmitiendo 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“.
Ejecutando en Modo Automatizado
Cuando modo IGT automatizado está habilitado, el 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 a 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, luego haz clic en Siguiente para continuar.
Limitar tu prueba a un conjunto enfocado de elementos es una de las maneras 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.
- Enfócate en lo que estás cambiando: Cuando trabajas en una función o arreglo de error, selecciona solo los elementos en los componentes que estás tocando: no hay necesidad de 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 aprovechar al máximo tu 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 se complete el análisis, 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, hacer correcciones y completar tu prueba.
Qué evalúa
El IGT de Elementos Interactivos evalúa lo siguiente:
- Nombres accesibles válidos
- Roles válidos
- Estados válidos
Preguntas frecuentes
¿Qué significan cada uno de los "Estados del Elemento" disponibles?
A continuación se presenta un desglose de cada uno de los estados disponibles para probar en el IGT de Elementos Interactivos.
Deshabilitado
Indica que un elemento no es editable ni operable de otro modo. Cuando está deshabilitado, un elemento no es editable ni enfocable. Deshabilitar un elemento se puede realizar utilizando la propiedad nativa de HTML disabled (preferido) o aria-disabled="true".
Ejemplos de deshabilitado
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 a través del atributo aria-pressed. Hay 3 valores compatibles para 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 (triple estado)
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, o otro elemento de agrupación que controla, está actualmente expandido. El estado expandido de un elemento se gestiona a través del atributo aria-expanded. El valor del atributo aria-expanded debe establecerse en "true" cuando el elemento (o el elemento de agrupación que controla) está expandido y establecerse en "false".
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 a través del 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 cuadros de verificación de estado triple en un estado de verificación mixta.
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 que gestiona 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". Comúnmente usado 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 "false" cuando no lo está.
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 es operable y enfocable. El estado de solo lectura de un elemento se puede gestionar utilizando el atributo HTML readonly o el atributo aria-readonly. Si se usa aria-readonly, el valor del atributo debe establecerse en "true" cuando el elemento está en estado de solo lectura y "false" cuando no lo está.
Ejemplos de solo lectura
Una entrada de solo lectura:
<label for="first-name">First Name:</label>
<input name="first-name" type="text" value="Gene" readonly />