Elemente auswählen
Mehrere Funktionen von axe DevTools fordern Sie auf, bestimmte Elemente auf der Seite auszuwählen. Sie können Elemente mit Ihrer Maus auswählen, indem Sie sie auf der Seite anklicken, oder mit Ihrer Tastatur und unterstützender Technologie mithilfe des „Elementauswählers“. Beide Methoden können innerhalb desselben Schritts austauschbar verwendet werden.
- Wo Sie Elemente auswählen
- Auswahl mit der Maus
- Auswahl mit dem Elementauswähler
- Zwischen hervorgehobenen Elementen wechseln
- Eine Auswahl entfernen
Wo Sie Elemente auswählen
| Funktion | Was Sie auswählen |
|---|---|
| Teilsanalyse der Seite | Ein Element, auf das die Analyse begrenzt ist |
| Manuelle Probleme melden | Ein Element, gegen das das Problem gemeldet wird, sowie beliebig viele verwandte Elemente |
| Intelligente geführte Tests | Hängt von der Frage ab. Einige Fragen erfordern ein Element (zum Beispiel eine Tabelle oder den Auslöser eines Modals), andere beliebig viele Elemente (zum Beispiel Überschriften oder Tabstopps, die noch nicht hervorgehoben wurden) |
Wenn ein Schritt nur ein Element akzeptiert, können Sie erst ein weiteres auswählen, nachdem Sie die aktuelle Auswahl entfernt haben.
Auswahl mit der Maus
Die Mausauswahl wird über den „Mausauswahl“-Schalter gesteuert, der anzeigt, ob sie aktuell „EIN“ oder „AUS“ ist. In den meisten Schritten wird die Mausauswahl automatisch aktiviert.
Während die Mausauswahl aktiv ist:
- Fahren Sie mit der Maus über die Seite. Das Element unter Ihrem Mauszeiger wird umrandet.
- Klicken Sie auf das umrandete Element, um es auszuwählen. Das Element bleibt auf der Seite hervorgehoben, und der Elementauswähler wird erweitert, um es anzuzeigen.
Klicks werden von axe DevTools erfasst, während die Mausauswahl aktiv ist, sodass Links und Schaltflächen auf der Seite nicht aktiviert werden. Um normal mit der Seite zu interagieren (zum Beispiel, um ein Modal zu öffnen, bevor Sie es auswählen), schalten Sie den „Mausauswahl“-Schalter aus und dann wieder ein, wenn Sie bereit sind, auszuwählen.
In einigen Schritten der intelligenten geführten Tests, wie zum Beispiel beim Auswählen eines Modals, nachdem Sie es gestartet haben, beginnt die Mausauswahl deaktiviert, sodass Sie zuerst mit der Seite interagieren können. Schalten Sie den „Mausauswahl“-Schalter ein, wenn Sie bereit sind, auszuwählen.
Auswahl mit dem Elementauswähler
Der Elementauswähler ist eine tastaturzugängliche, bildschirmleserfreundliche Methode, um Elemente ohne Maus auszuwählen. Er erscheint unten im Panel unter der Überschrift „Elementauswähler“ und zeigt das DOM der Seite als erweiterbaren Baum an. Jedes Element zeigt den Tag-Namen des Elements zusammen mit seinen id, class und role Attributen an, wenn diese vorhanden sind.
In den meisten Funktionen beginnt der Elementauswähler im eingeklappten Zustand. Aktivieren Sie die Schaltfläche „Elementauswähler ansehen“ neben der Überschrift, um ihn zu erweitern.
Tastaturnavigation
| Taste | Aktion |
|---|---|
| Pfeil nach unten | Zum nächsten sichtbaren Element wechseln |
| Pfeil nach oben | Zum vorherigen sichtbaren Element wechseln |
| Pfeil nach rechts | Ein eingeklapptes Element erweitern oder zu seinem ersten Kind wechseln, wenn es bereits erweitert ist |
| Pfeil nach links | Ein erweitertes Element einklappen oder zu seinem Elternteil wechseln, wenn es bereits eingeklappt ist |
| Leertaste | Das fokussierte Element auswählen oder, wenn es bereits ausgewählt ist, die Auswahl aufheben |
Während Sie durch den Baum navigieren, wird das fokussierte Element auf der Seite hervorgehoben und in den sichtbaren Bereich gescrollt, sodass Sie bestätigen können, dass Sie sich auf dem richtigen Element befinden, bevor Sie es auswählen.
Sie können auch die Tasten unter dem Baum verwenden:
- „Auswählen“ wählt das fokussierte Element aus
- „Entfernen“ entfernt das fokussierte Element aus Ihrer Auswahl
Ein Klick auf ein Element im Baum klappt es auf oder zu; es wird jedoch nicht ausgewählt. Um ein Element aus dem Baum mit der Maus auszuwählen, klicken Sie auf das Element und dann auf „Auswählen“.
Unterstützung für Bildschirmleser
Wenn ein Element im Baum den Fokus erhält, verkünden Bildschirmleser Details über das Element, wie beispielsweise seinen zugänglichen Namen und seine berechnete Rolle. Elemente geben auch „Ausgewählt“ an, wenn sie Teil Ihrer Auswahl sind, und „Hervorgehoben“ (mit ihrer Position, wie „Hervorgehoben 2 von 5“), wenn sie von axe DevTools hervorgehoben wurden.
Für die vollständige Liste der Eigenschaften und Attribute des fokussierten Elements aktivieren Sie seine Schaltfläche „Weitere Informationen“.
Zwischen hervorgehobenen Elementen wechseln
In einigen Schritten hebt axe DevTools Elemente auf der Seite hervor, damit Sie sie überprüfen können, wie zum Beispiel die überschriften oder Tabstopps, die während eines intelligenten geführten Tests gefunden wurden, oder die bei der Meldung eines manuellen Problems hervorgehobenen. Anstatt den Baum zu durchforsten, um jedes einzelne zu finden, können Sie direkt zwischen ihnen springen.
Wenn es zwei oder mehr hervorgehobene Elemente gibt, verwenden Sie die Tasten „Zum vorherigen Highlight springen“ und "Zum nächsten Highlight springen“ im Elementauswähler. Während ein hervorgehobenes Element fokussiert ist, zeigt ein Zähler (zum Beispiel „2 / 5“) seine Position unter allen hervorgehobenen Elementen an.
Sie können auch Tastenkombinationen verwenden, während der Fokus irgendwo im Elementauswähler liegt, einschließlich auf einem Element im Baum:
| Verknüpfung | Aktion |
|---|---|
| Alt+Umschalt+N (Option+Umschalt+N auf macOS) | Zum nächsten hervorgehobenen Element springen |
| Alt+Umschalt+P (Option+Umschalt+P auf macOS) | Zum vorherigen hervorgehobenen Element springen |
Das Springen erfolgt umlaufend, sodass das Überspringen des letzten hervorgehobenen Elements zum ersten zurückführt, und umgekehrt. Wenn es nur ein hervorgehobenes Element gibt und Sie davon weg navigiert haben, bringt Sie jede der Tastenkombinationen zurück zu diesem.
Eine Auswahl entfernen
Um ein ausgewähltes Element zu entfernen, tun Sie eines der folgenden Dinge:
- Im Element-Selektor das Element fokussieren und Leertaste drücken oder „Entfernen“ aktivieren
- Drücken Sie die Entfernen-Schaltfläche (Mülleimer) neben dem Element in der Liste der ausgewählten Elemente
- In den Intelligent Guided Tests „Alle Auswahl löschen“ aktivieren, um alle Auswahlen im aktuellen Schritt zu entfernen
Wenn Sie ein manuelles Problem melden, ist das erste von Ihnen ausgewählte Element das „Ausgewählte Element“, gegen das das Problem erhoben wird, und jedes weitere Element wird unter „Verwandte Elemente“ aufgeführt.