Test guiado inteligente con elementos interactivos

Los Elementos Interactivos IGT permiten probar múltiples estados sin tener que volver a ejecutar los 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 quieres probar. Después de esto, unas cuantas preguntas sencillas te guiarán a través de las pruebas de accesibilidad necesarias para cada uno de los elementos interactivos de la página.

Haz clic en “INICIAR” cuando estés listo para realizar la prueba.

Paso 1: Falta

Primero, el [Traducción de IGT] escaneará la página (o componente) para encontrar todos los elementos interactivos. Si el aprendizaje automático está habilitado (consulte la 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 le pide que seleccione cualquier elemento interactivo que se haya pasado por alto. Si no falta nada, simplemente haga clic en "SIGUIENTE".

A continuación, puedes elegir qué elemento deseas probar. De forma predeterminada, estos elementos se agrupan de forma "inteligente" utilizando nuestro algoritmo para agrupar elementos similares. Sin embargo, puedes elegir agruparlos por rol o hacer que se presenten sin ninguna agrupación utilizando el control "Agrupar por".

Paso 2: Precisión

Para los elementos que eliges probar, se te pedirá que verifique el nombre accesible, el rol y el estado del elemento. El nombre accesible se utiliza 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 le dice al usuario mediante tecnología de asistencia cuál es el estado actual del control (por ejemplo, seleccionado/no seleccionado, marcado/no marcado).

Nombre accesible

Se le pedirá que confirme que el nombre accesible describe con precisión el propósito de los elementos interactivos.

Rol

A continuación, si el IGT es capaz de detectar el rol, éste será preseleccionado. Puede anular la selección predeterminada si el rol es diferente al que se detecta en un menú desplegable de roles disponibles.

State(s)

De manera similar, el IGT mostrará estados preseleccionados. Para los elementos donde un estado no es relevante, deje el estado como "No aplicable". ¡Después de haber confirmado que el nombre accesible, el rol y el estado se transmiten correctamente, puede probar otro estado del mismo elemento! Continúe y coloque el elemento interactivo en el estado adicional que desea probar (como marcar una casilla de verificación, seleccionar una pestaña, etc.). Una vez que esté listo, haga clic en "VERIFICAR ESTADO DEL ELEMENTO". El IGT detectará el nuevo estado y usted podrá confirmar si el estado se está transmitiendo correctamente. Esto se repetirá para todos los elementos que seleccionó para realizar pruebas. Una vez que haya terminado de probar todos los elementos seleccionados y sus estados, seleccione "SIGUIENTE".

Qué evalúa

IGT realiza pruebas para los siguientes elementos interactivos:

• Nombres accesibles válidos
• Roles válidos
• Estados válidos

Preguntas frecuentes

¿Qué significa cada uno de los “Estados de elementos” disponibles?

A continuación se muestra un desglose de cada uno de los estados disponibles para probar en el IGT de Elementos Interactivos.

Desactivado

Indica que un elemento no es editable ni operable de otro modo. Cuando está deshabilitado, un elemento no es editable ni enfocable. La desactivación de un elemento se puede realizar mediante la propiedad HTML nativa disabled (preferida) o aria-disabled="true".

Ejemplos desactivados

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". A través del atributo aria-pressed , se gestiona el estado presionado de un elemento. Hay 3 valores admitidos para aria-pressed:

• "true": indica que el botón de alternancia está presionado actualmente
• "false": indica que el botón de alternancia no está presionado actualmente
• "mixed": indica que los valores de más de un elemento controlado por el botón de alternancia no comparten todos el mismo valor (tres estados)

Ejemplos presionados

Un botón de pausa que no está presionado actualmente:

<button aria-pressed="false">Pause</button>

Un botón de silencio que está presionado actualmente:

<button aria-pressed="true">Mute</button>

Expandido

Indica que un elemento, u 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 elemento de agrupación que controla) se expande y se establece en "false".

Ejemplos ampliados

Un botón expandido:

<button aria-expanded="true">options</button>

Seleccionado

Indica que un elemento se encuentra 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 casillas de verificación de tres estados en un estado seleccionado mixto.

Ejemplos seleccionados

Un panel de pestañas simple que administra aria-selected en los role="tab" elementos:

<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>

Comprobado

Indica que un elemento se encuentra actualmente en un estado "marcado". Se utiliza 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 (usado 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 marcados

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 sin marcar:

<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 que por lo demás es operable y enfocable. El estado de solo lectura de un elemento se puede gestionar mediante 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 un estado de solo lectura y en "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 />