Interaktive Elemente Intelligenter geführter Test

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

So funktioniert es

Als Erstes müssen Sie die Seite in den Zustand versetzen, den Sie testen möchten. Anschließend leiten einige einfache Fragen Sie durch die erforderlichen Barrierefreiheitstests für jedes der interaktiven Elemente auf der Seite.

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

Schritt 1: Fehlt

Zuerst scannt das IGT die Seite (oder Komponente), um alle interaktiven Elemente zu finden. Wenn maschinelles Lernen aktiviert ist (siehe Einstellungsseite), erkennt es alle Elemente, die nicht mit interaktiven Attributen (Rollen, Registerkartenindex usw.) markiert sind, die jedoch tatsächlich interaktiv sein können.

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

Als nächstes können Sie auswählen, welches Element Sie testen möchten. Standardmäßig werden diese Elemente mithilfe unseres Algorithmus zur Gruppierung ähnlicher Elemente „intelligent“ gruppiert. Sie können sie jedoch auch nach Rolle gruppieren oder mithilfe der Steuerung „Gruppieren nach“ ganz ohne Gruppierung anzeigen lassen.

Schritt 2: Genauigkeit

Für die Elemente, die Sie testen möchten, werden Sie aufgefordert, den Barrierefreier Name, die Rolle (Role) und den Zustand des Elements zu bestätigen. Der Barrierefreier Name wird verwendet, um den Zweck der interaktiven Elemente, beispielsweise einer Beschriftung auf einem Formularfeld, zu vermitteln. Die Rolle (Role) gibt an, mit welchem Steuerelement der Benutzer interagiert (Schaltfläche, Registerkarte, Link usw.). Der Zustand teilt dem Benutzer mithilfe assistiven Technologie mit, was der aktuelle Zustand des Steuerelements ist (z. B. ausgewählt/nicht ausgewählt, aktiviert/nicht aktiviert).

Barrierefreier Name

Sie werden aufgefordert zu bestätigen, dass der zugängliche Name den Zweck der interaktiven Elemente genau beschreibt.

Rolle

Als Nächstes, wenn das IGT die Rolle erkennen kann, wird sie vorab ausgewählt. Sie können die Standardauswahl überschreiben, wenn die Rolle von der in der Dropdown-Liste verfügbarer Rollen erkannten Rolle abweicht.

State(s)

Ebenso zeigt das IGT vorab ausgewählte Zustände an. Belassen Sie für Elemente, bei denen ein Zustand nicht relevant ist, den Zustand auf „Nicht zutreffend“. Nachdem Sie den Accessible Name, die Rolle und die ordnungsgemäße Übermittlung des Zustands bestätigt haben, können Sie einen anderen Zustand desselben Elements testen! Fahren Sie fort und versetzen Sie das interaktive Element in den zusätzlichen Zustand, den Sie testen möchten (z. B. Aktivieren eines Kontrollkästchens, Auswählen einer Registerkarte usw.). Wenn Sie bereit sind, klicken Sie auf „ELEMENTZUSTAND PRÜFEN“. Der IGT erkennt den neuen Status und Sie können bestätigen, dass der Status korrekt übermittelt wird. Dies wird für alle Elemente wiederholt, die Sie zum Testen ausgewählt haben. Wenn Sie mit dem Testen aller ausgewählten Elemente und deren gewünschten Zustände fertig sind, wählen Sie „NÄCHSTER“.

Was wird getestet

Das Interactive Elements IGT testet für:

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

Häufig gestellte Fragen

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

Nachfolgend finden Sie eine Aufschlüsselung aller verfügbaren Zustände, die im Interactive Elements IGT getestet werden können.

Deaktiviert

Zeigt an, dass ein Element nicht bearbeitet oder anderweitig bedient werden kann. Wenn deaktiviert, kann ein Element weder bearbeitet noch fokussiert werden. Das Deaktivieren eines Elements kann mithilfe der nativen HTML-Eigenschaft disabled (bevorzugt) oder aria-disabled="true" durchgeführt werden.

Deaktivierte Beispiele

Deaktivierte Schaltfläche „Senden“:

<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 derzeit eine Umschaltfläche „aktiviert“ 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 aktuell gedrückt ist
• "false": zeigt an, dass der Umschaltknopf derzeit nicht gedrückt ist
• "mixed": zeigt an, dass die Werte mehrerer durch den Umschaltknopf gesteuerter Elemente nicht alle denselben Wert haben (Dreizustands-Wert).

Gedrückte Beispiele

Eine Pausentaste, die aktuell nicht gedrückt ist:

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

Eine aktuell gedrückte Stummschalttaste:

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

Erweitert

Zeigt an, dass ein Element oder ein anderes von ihm gesteuertes Gruppierungselement derzeit ausgeklappt ist. Der ausgeklappte Status 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 wird und auf "false", wenn es zusammengeklappt wird.

Erweiterte Beispiele

Eine aufklappbare Schaltfläche:

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

Ausgewählt

Zeigt an, dass sich ein Element derzeit im Zustand „ausgewählt“ befindet. Der ausgewählte Status 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, "false" wenn es nicht ausgewählt ist und "mixed" für Dreizustands-Kontrollkästchen im gemischten Zustand.

Ausgewählte Beispiele

Ein einfaches Registerkartenfeld, das auf den Elementen aria-selected verwaltet 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>

Überprüft

Zeigt an, dass sich ein Element derzeit im Status „ausgewählt“ befindet. Wird häufig in Kontrollkästchen, Optionsfeldern und anderen Widgets verwendet. Der ausgewählte Status eines Elements kann mit dem HTML-Attribut checked (verwendet mit nativen Kontrollkästchen) oder dem Attribut aria-checked verwaltet werden. Bei Verwendung von aria-checked sollte der Wert des Attributs auf "true" gesetzt werden, wenn das Element ausgewählt ist, und auf "false" , wenn es nicht ausgewählt ist.

Markierte Beispiele

Ein ausgewähltes natives Kontrollkästchen:

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

Ein nicht ausgewähltes 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

Zeigt an, dass ein Element nicht bearbeitet werden kann, ansonsten aber bedienbar und fokussierbar ist. Der schreibgeschützte Status eines Elements kann mit dem HTML-Attribut readonly oder dem Attribut aria-readonly verwaltet werden. Bei Verwendung von aria-readonly sollte der Wert des Attributs auf "true" gesetzt werden, wenn sich das Element im schreibgeschützten Zustand befindet, und auf "false" wenn dies nicht der Fall ist.

Nur-Lese-Beispiele

Eine schreibgeschützte Eingabe:

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