Interaktive Elemente Intelligenter Geleiteter Test

Der Interaktive Elemente IGT unterstützt das Testen mehrerer Zustände, ohne die IGTs erneut ausführen zu müssen. Ein interaktives Element ist einfach alles, mit dem der Benutzer auf der Webseite interagiert, wie Schaltflächen, Links, Eingaben, Menüs usw.

Wie es funktioniert

Das Erste, was Sie tun müssen, ist, die Seite in den Zustand zu versetzen, den Sie testen möchten. Danach führen Sie ein paar einfache Fragen durch die erforderlichen Barrierefreiheitstests für jedes der interaktiven Elemente auf der Seite.

Der Interaktive Elemente IGT erstellt Screenshots von jedem interaktiven Element. Während die Screenshots erstellt werden, scrollen oder interagieren Sie bitte nicht mit der Seite.

Schritt 1: Fehlend

Zuerst wird der IGT die Seite (oder Komponente) scannen, um alle interaktiven Elemente zu finden. Wenn Machine Learning aktiviert ist (siehe Einstellungsseite), werden alle Elemente erkannt, die nicht mit interaktiven Attributen (Rollen, Tab-Index usw.) markiert sind, die tatsächlich interaktiv sein könnten.

Schritt 2: Genauigkeit

Next, you can choose which element you would like to test. By default, these elements are grouped "intelligently" using our algorithm to group similar elements. However, you can choose to group them by role or have them presented with no grouping at all using the "Group by" control.

Step 2: Accuracy

Für die Elemente, die Sie testen möchten, werden Sie gebeten, den Namen, die Rolle und den Zustand des Elements zu überprüfen. Der zugängliche Name wird verwendet, um den Zweck der interaktiven Elemente darzustellen, wie z. B. ein Etikett auf einem Formularfeld. Die Rolle zeigt an, mit welchem Steuerungselement der Benutzer interagiert (Schaltfläche, Tab, Link usw.). Der Zustand teilt dem Benutzer mit Hilfe von assistiver Technologie mit, welcher Zustand des Steuerungselements aktuell ist (wie ausgewählt/nicht ausgewählt, aktiviert/deaktiviert).

Zugänglicher Name

Sie werden gebeten zu bestätigen, dass der zugängliche Name den Zweck des interaktiven Elements genau beschreibt.

Rolle

Als Nächstes, wenn der IGT die Rolle erkennen kann, wird sie vorausgewählt. Wenn die erkannte Rolle abweicht, können Sie die Standardauswahl durch eine Auswahl aus einem Dropdown-Menü der verfügbaren Rollen überschreiben.

Zustand(e)

Ausführung im Automatisierten Modus

Running in Automated Mode

Wenn automatisierter IGT-Modus aktiviert ist, umfasst der Interaktive Elemente IGT einen Schritt zur Elementauswahl, bevor die KI mit ihrer Analyse beginnt. Dies gibt Ihnen die direkte Kontrolle über den Umfang Ihres Tests.

Schritt 1: Elemente zum Testen auswählen

Bevor die KI-Analyse beginnt, werden Ihnen alle auf der Seite gefundenen interaktiven Elemente präsentiert — sowohl die automatisch erkannten als auch alle zusätzlichen Elemente, die unsere KI als möglicherweise interaktiv erkennt, die jedoch nicht mit standardmäßigen interaktiven Attributen (Rollen, Tab-Index usw.) markiert sind.

Wählen Sie die Elemente aus, die Sie in Ihren Test einbeziehen möchten, und klicken Sie dann auf Next , um fortzufahren.

Schritt 2: Die KI analysiert Ihre ausgewählten Elemente

Die KI bewertet automatisch den zugänglichen Namen, die Rolle und den Zustand jedes von Ihnen ausgewählten Elements. Sobald die Analyse abgeschlossen ist, gelangen Sie zum Überprüfungsbildschirm, um die Ergebnisse der KI zu inspizieren, Korrekturen vorzunehmen und Ihren Test abzuschließen. Weitere Informationen zur Überprüfung der Ergebnisse, zur Vornahme von Korrekturen und zum Abschluss Ihres Tests finden Sie unter Automatisierte IGTs .

Was getestet wird

Der Interaktive Elemente IGT testet:

• Gültige zugängliche Namen
• Gültige Rollen
• Gültige Zustände

FAQs

Im Folgenden finden Sie eine Aufschlüsselung der verfügbaren Zustände, die im Interaktive Elemente IGT getestet werden sollen.

Below is a breakdown of each of the available states to test in the Interactive Elements IGT.

Deaktiviert

Zeigt an, dass ein Element nicht bearbeitbar oder anderweitig betriebsfähig ist. Wenn es deaktiviert ist, ist ein Element weder bearbeitbar noch fokussierbar. Ein Element kann mit dem nativen HTML- disabled -Eigenschaft (bevorzugt) oder aria-disabled="true".

Deaktivierte Beispiele

Deaktivierter Absende-Button:

<button type="submit" disabled>Submit</button>

Deaktiviertes Eingabefeld:

<form>
  <label for="email">Email</label>
  <input type="text" id="email" disabled />
</form>

Gedrückt

-Attribut verwaltet. Es gibt 3 unterstützte Werte für aria-pressed attribute. There are 3 supported values for aria-pressed:

• "true": zeigt an, dass der Toggle-Button derzeit gedrückt ist
• "false": zeigt an, dass der Toggle-Button derzeit nicht gedrückt ist
• "mixed": zeigt an, dass die Werte von mehr als einem Element, das vom Toggle-Button gesteuert wird, nicht alle denselben Wert haben (Drei-Zustands-Logik)

Gedrückte Beispiele

Ein Pausen-Button, der derzeit nicht gedrückt ist:

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

Ein Stumm-Button, der derzeit gedrückt ist:

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

Erweitert

Gibt an, dass ein Element oder ein weiteres von ihm gesteuertes Gruppenelement derzeit erweitert ist. Der erweiterte Zustand eines Elements wird über das aria-expanded -Attribut verwaltet. Der Wert des aria-expanded -Attributs sollte auf "true" gesetzt werden, wenn das Element (oder das gesteuerte Gruppenelement) erweitert ist, und auf "false".

Erweiterte Beispiele

Ein erweiterter Button:

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

Ausgewählt

-Attribut verwaltet. Der Wert des aria-selected attribute. The value of the aria-selected -Attributs sollte auf "true" gesetzt werden, wenn das Element ausgewählt ist, auf "false" wenn es nicht ausgewählt ist, und auf "mixed" für Drei-Zustands-Kontrollkästchen in einem gemischten ausgewählten Zustand.

Selected examples

Ein einfaches Tab-Panel verwaltet aria-selected auf den role="tab" -Elementen:

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

Markiert

-Attribut (verwendet bei nativen Kontrollkästchen) oder dem checked attribute (used with native checkboxes) or the aria-checked -Attribut verwaltet werden. Wenn aria-checkedverwendet wird, sollte der Attributwert auf "true" gesetzt werden, wenn das Element markiert ist, und auf "false" wenn es nicht markiert ist.

Markierte Beispiele

Ein markiertes natives Kontrollkästchen:

<input id="terms" type="checkbox" checked />
<label for="terms">I agree to the terms and conditions</label>

Ein nicht markiertes ARIA-Kontrollkästchen:

<span
  role="checkbox"
  id="checkbox"
  aria-checked="false"
  tabindex="0"
  aria-labelledby="checkbox-label"
></span>
<label id="checkbox-label">Subscribe to newsletter</label>

Nur lesen

Gibt an, dass ein Element nicht bearbeitbar ist, aber anderweitig bedienbar und fokussierbar ist. Der Nur-Lesen-Zustand eines Elements kann mit dem HTML- readonly Attribut oder das ", "context": "paragraph aria-readonly Attribut. Wenn Sie ", "context": "paragraph aria-readonlyverwenden, sollte der Wert des Attributs auf ", "context": "paragraph "true" gesetzt werden, wenn das Element im readonly-Zustand ist und ", "context": "paragraph "false" , wenn es nicht der Fall ist.", "context": "paragraph

Beispiele für readonly", "context": "heading level 5

Ein readonly Eingabefeld:", "context": "paragraph

<label for="first-name">First Name:</label>
<input name="first-name" type="text" value="Gene" readonly />