Intelligenter geführter Test für interaktive Elemente

Der intelligente geführte Test (IGT) für interaktive Elemente unterstützt das Testen mehrerer Zustände, ohne dass die Tests erneut durchgeführt werden müssen. Ein interaktives Element ist einfach alles, womit der Benutzer auf der Webseite interagiert, wie Schaltflächen, Links, Eingaben, Menüs usw.

So funktioniert es

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

Klicken Sie auf „START“, wenn Sie bereit sind, den Test durchzuführen.

Schritt 1: Fehlend

Zuerst scannt der IGT die Seite (oder Komponente), um alle interaktiven Elemente zu finden. Wenn das maschinelle Lernen aktiviert ist (siehe Einstellungsseite), erkennt es auch Elemente, die nicht mit interaktiven Attributen (Rollen, Tab-Index usw.) versehen sind, die tatsächlich interaktiv sein könnten.

Bei dieser ersten Frage werden Sie gebeten, alle interaktiven Elemente auszuwählen, die übersehen wurden. Wenn nichts fehlt, klicken Sie einfach auf „WEITER“.

Als Nächstes können Sie das Element auswählen, das Sie testen möchten. Standardmäßig werden diese Elemente „intelligent“ mithilfe unseres Algorithmus gruppiert, um ähnliche Elemente zu gruppieren. Sie können jedoch wählen, sie nach Rolle zu gruppieren oder sie ohne jegliche Gruppierung zu präsentieren, indem Sie die „Gruppieren nach“-Steuerung verwenden.

Schritt 2: Genauigkeit

Für die Elemente, die Sie testen möchten, werden Sie gebeten, den Zugänglichen Namen, die Rolle und den Zustand des Elements zu überprüfen. Der Zugängliche Name wird verwendet, um den Zweck der interaktiven Elemente zu vermitteln, wie z. B. ein Etikett auf einem Formularfeld. Die Rolle gibt an, mit welchem Steuerungselement der Benutzer interagiert (Button, Tab, Link etc.). Der Zustand informiert den Benutzer mit unterstützender Technologie, welcher aktuelle Zustand des Steuerungselements vorliegt (z. B. ausgewählt/nicht ausgewählt, angekreuzt/nicht angekreuzt).

Zugänglicher Name

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

Rolle

Wenn der IGT in der Lage ist, die Rolle zu erkennen, wird sie vorausgewählt. Sie können die Standardeinstellung überschreiben, wenn die Rolle von dem abweicht, was aus einem Dropdown-Menü der verfügbaren Rollen erkannt wurde.

Zustand(e)

Ähnlich wird der IGT vorausgewählte Zustände anzeigen. Für Elemente, bei denen ein Zustand nicht relevant ist, lassen Sie den Zustand auf „Nicht anwendbar“. Nachdem Sie den Zugänglichen Namen, die Rolle und den korrekt vermittelten Zustand bestätigt haben, können Sie einen anderen Zustand desselben Elements testen! Setzen Sie das interaktive Element in den zusätzlichen Zustand, den Sie testen möchten (z. B. ein Kontrollkästchen markieren, einen Tab auswählen usw.). Sobald Sie bereit sind, klicken Sie auf „ZUSTAND DES ELEMENTS PRÜFEN“. Der IGT erkennt den neuen Zustand und Sie können bestätigen, ob der Zustand korrekt vermittelt wird. Dies wird für alle Elemente wiederholt, die Sie zur Prüfung ausgewählt haben. Sobald Sie alle ausgewählten Elemente und deren Zustände getestet haben, die Sie testen möchten, wählen Sie „WEITER“.

Ausführen im automatisierten Modus

Wenn automatisierter IGT-Modus aktiviert ist, beinhaltet der IGT für interaktive Elemente einen Elementauswahlschritt, bevor die KI mit ihrer Analyse beginnt. Dies gibt Ihnen 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 diejenigen, die automatisch erkannt wurden, als auch alle zusätzlichen Elemente, die unsere KI als potenziell interaktiv erkennt, aber nicht mit Standardinteraktiven Attributen (Rollen, Tab-Index, usw.) versehen sind.

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

Schritt 2: KI analysiert Ihre ausgewählten Elemente

KI beurteilt automatisch den zugänglichen Namen, die Rolle und den Zustand jedes ausgewählten Elements. Sobald die Analyse abgeschlossen ist, werden Sie zum Überprüfungsbildschirm weitergeleitet, um die Ergebnisse der KI zu inspizieren, Korrekturen vorzunehmen und Ihren Test abzuschließen. Siehe Automatisierte IGTs für Details zur Überprüfung der Ergebnisse, zur Durchführung von Korrekturen und zum Abschluss Ihres Tests.

Was getestet wird

Der IGT für interaktive Elemente testet Folgendes:

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

FAQs

Was bedeuten die verfügbaren „Elementzustände“ jeweils?

Im Folgenden finden Sie eine Aufschlüsselung der verfügbaren Zustände, die im IGT für interaktive Elemente getestet werden können.

Deaktiviert

Gibt an, dass ein Element nicht bearbeitbar oder anderweitig bedienbar ist. Wenn ein Element deaktiviert ist, ist es weder bearbeitbar noch fokussierbar. Das Deaktivieren eines Elements kann mithilfe der nativen HTML-disabled-Eigenschaft (bevorzugt) oder aria-disabled="true" erfolgen.

Beispiele für deaktiviert

Deaktivierte Schaltfläche zum Absenden:

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

Deaktiviertes Eingabefeld:

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

Gedrückt

Zeigt an, dass eine Umschalttaste derzeit „gedrückt“ ist. Der gedrückte Zustand eines Elements wird über das aria-pressed-Attribut verwaltet. Es gibt 3 unterstützte Werte für aria-pressed:

• "true": zeigt an, dass der Umschaltknopf derzeit gedrückt ist
• "false": zeigt an, dass der Umschaltknopf derzeit nicht gedrückt ist
• "mixed": zeigt an, dass die Werte von mehr als einem vom Umschaltknopf gesteuerten Element nicht alle denselben Wert haben (Dreistatus)

Beispiele für gedrückt

Eine Pausentaste, die derzeit nicht gedrückt ist:

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

Eine Stummschalttaste, die derzeit gedrückt ist:

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

Erweitert

Zeigt an, dass ein Element oder ein anderes von ihm gesteuertes Gruppierungselement 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 von ihm gesteuerte Gruppierungselement) erweitert ist, und auf "false" gesetzt werden.

Erweiterte Beispiele

Ein erweiterter Knopf:

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

Ausgewählt

Zeigt an, dass sich ein Element derzeit in einem „ausgewählten“ Zustand befindet. Der ausgewählte Zustand eines Elements wird über das aria-selected-Attribut verwaltet. Der Wert des 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 Dreistatus-Kontrollkästchen in einem gemischten angehakten Zustand.

Ausgewählte Beispiele

Ein einfaches Tabellenset, das aria-selected auf den role="tab"-Elementen verwaltet:

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

Angehakt

Zeigt an, dass sich ein Element derzeit in einem „angehakten“ Zustand befindet. Wird häufig in Kontrollkästchen, Radiobuttons und anderen Widgets verwendet. Der angehakte Zustand eines Elements kann mithilfe des HTML-checked-Attributs (verwendet mit nativen Kontrollkästchen) oder des aria-checked-Attributs verwaltet werden. Bei Verwendung von aria-checked sollte der Wert des Attributs auf "true" gesetzt werden, wenn das Element angehakt ist, und auf "false", wenn es nicht angehakt ist.

Angehakte Beispiele

Ein angehaktes natives Kontrollkästchen:

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

Ein nicht angehaktes 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>

Schreibgeschützt

Zeigt an, dass ein Element nicht bearbeitbar ist, aber dennoch bedienbar und fokussierbar ist. Der schreibgeschützte Zustand eines Elements kann mit dem HTML-readonly-Attribut oder dem aria-readonly-Attribut verwaltet werden. Wenn aria-readonly verwendet wird, sollte der Wert des Attributs auf "true" gesetzt werden, wenn das Element im schreibgeschützten Zustand ist, und auf "false", wenn es nicht der Fall ist.

Beispiele für schreibgeschützt

Ein schreibgeschütztes Eingabefeld:

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