Scoping in axe Expert

Definieren Sie einen Scope in der axe Expert-Erweiterung, wenn Sie nur bestimmte Teile einer Seite testen möchten, anstatt die gesamte Seite. Auf vielen Websites gibt es Elemente oder „Template“-Bereiche, die auf vielen Seiten einer Website üblich sind. Dies kann verwendet werden, um spezielle Tests für gemeinsame Template-Komponenten durchzuführen oder um sie zu ignorieren, um sich auf den Inhalt zu konzentrieren, der kein Teil der gemeinsamen Komponenten ist (zum Beispiel Kopfzeile, Fußzeile oder Navigationsabschnitte). Version 1.1 und später der axe Expert-Erweiterung wurden entwickelt und implementiert, um mithilfe von Cascading Style Sheet (CSS)-Selektoren den Scope zu definieren.

XPath-Version Unterstützung

axe Monitor v6.0 oder später unterstützt sowohl CSS-Selektoren als auch XPath-Technologien, da zuvor Version 1.0 von XPath von Version 1.0 der axe Expert-Erweiterung unterstützt wurde. Für weitere Informationen siehe XML Path Language (XPath) Version 1.0 - W3C.

Um eine Duplikation von Verstößen bei der Analyse mehrerer Seiten zu vermeiden, bietet die Scope-Definitionsfunktion der axe Expert-Erweiterung die Möglichkeit, die Analyse auf einen oder mehrere spezifische Abschnitte einer Seite zu beschränken, während der übliche, wiederkehrende Inhalt ignoriert wird, der nicht als Teil des Scopes ausgewählt wurde. Durch die während der skriptgesteuerten Analyse definierten Scope-Definitionen wird der gleiche Effekt wie bei der statischen Analyse erzielt. Mit anderen Worten, nur die definierten Teile der Seite werden in das Skript aufgenommen. Dieser Prozess ist besonders nützlich, wenn nur Scope-Definitionen getestet werden, die die Inhaltsbereiche der Seite abdecken, wodurch die sich wiederholenden Probleme beim Testen von Vorlagen beseitigt werden.

Aktivieren der Scope-Funktionalität ohne Anmeldung bei axe Monitor

Führen Sie die folgenden Schritte aus, um die Anzeige der Scope-Funktionalität im Einstellungsbereich zu aktivieren, ohne sich bei axe Monitor anzumelden:

1. Wählen Sie Scope im Überlaufmenü der axe Expert-Erweiterung, um auf die Registerkarte Einstellungen zuzugreifen:

   

2. Die Erweiterung zeigt den leeren Reiter Scope der axe Expert-Erweiterung beim ersten Zugriff an:

   

   Melden Sie sich NICHT bei axe Monitor an. Stattdessen erstellen Sie einen neuen projektlosen Scope mit den beschriebenen Optionsbeschreibungen und Spaltenbeschreibungen:

   

Aktivieren der Scope-Funktionalität mit Anmeldung bei axe Monitor

Führen Sie die folgenden Schritte aus, um die Anzeige der Scope-Funktionalität im Einstellungsbereich zu aktivieren, während Sie bei axe Monitor angemeldet sind:

1. Melden Sie sich im Einstellungsreiter im axe Expert-Panel bei axe Monitor an. Für vollständige Details siehe Anmelden bei axe Monitor.

   After you sign in, the Project selection section appears on the Settings panel.

2. Wählen Sie ein Projekt aus, indem Sie das Menü 'Projekt auswählen' und die Schaltfläche im Einstellungsbereich verwenden. Für vollständige Details siehe Ein axe Monitor-Projekt auswählen.

   Die Funktion Scope-Definitionen erscheint im Einstellungsbereich unter den Abschnitten Projektauswahl und Problem-Download.

   

Optionsbeschreibungen

Sobald aktiviert, sehen Sie im Einstellungsbereich der axe Expert-Erweiterung den Scope-Bereich, der eine Scope analysieren-Optionsgruppe mit den folgenden drei auswählbaren Optionen anzeigt:

• Ganze Seite: Wählen Sie diese Option, um den definierten Scope bei der Analyse im Analysieren-Panel auf die gesamte im Browser geladene Seite zu verfeinern.
• Nur Inhalte: Wählen Sie diese Option, um den Scope bei der Analyse im Analysieren-Panel auf nur die Inhaltsobjekte zu verfeinern, die kein Teil der im untenstehenden Tisch der Scope-Definitionen definierten Vorlagen sind.
• Nur Vorlagen: Wählen Sie diese Option, um die Analyse im Analysieren-Panel auf alles außer dem Inhalt Definitionen auf der geladenen Seite unter Test zu verfeinern.

Spaltenbeschreibungen

Unter dem Abschnitt der Optionen zum Scope-Analysieren sehen Sie den Bereich der Scope-Definitionstabellen, der eine Tabelle mit den folgenden sechs Informationsspalten anzeigt:

• Name: Ein Texteingabefeld, das verwendet wird, um der Scope-Definition einen klaren und aussagekräftigen Namen zu geben (zum Beispiel „Header“).
• Kategorie: Ein Dropdown-Menüfeld, das verwendet wird, um den Typ des Geltungsbereichs zu bestimmen. Optionen umfassen 'Vorlage 1-4' (ganze Seite) und 'Inhalt 1-4' (Seitenkörper). Diese können verwendet werden, um verwandte Geltungsbereichsdefinitionen zusammenzufassen, sodass sie leicht sortiert werden können.
• URL-Muster: Ein Textfeld, das dazu verwendet wird, einen Teil oder Teile einer Website anzugeben, die ein anderes Vorlagenset als der Hauptteil der Website verwenden (zum Beispiel einen Einkaufsbereich oder einen sicheren Mitgliederbereich), definiert mit einer Textzeichenfolge, die unmittelbar nach dem Domainnamen in der Seitenadresse erscheint, für ein Muster, das eine Platzhalterübereinstimmung verwendet (zum Beispiel würde '/products' sowohl '/products' als auch jede nachfolgende Textzeichenfolge abgleichen).
• CSS-Selektor(en): Ein Textfeld, das verwendet wird, um den Locator des Inhalts anzugeben, der gezielt werden soll (zum Beispiel /html/body für den Dokumentenkörper oder html, um die gesamte Seite anzugeben). Im Allgemeinen müssen Sie das id des Elements kennen, das Sie auswerten möchten. Zum Beispiel:
  • **/section[@id='content']** identifiziert ein section-Tag mit einem id von "content": <section id="content">
  • **/div[@id='header-panel']** identifiziert ein div mit einem id von "header-panel": <div id="header-panel">
  • **/div[@id='right-column']** identifiziert ein div mit einem id von "right-column": <div id="right-column">
  • **/html/body/section/div[2]/div[3]** identifiziert ein Element ohne ein id: das dritte div innerhalb des zweiten div innerhalb des section-Tags innerhalb des body des html
• + Rahmen: Klicken Sie, um eine neue Zeile darunter hinzuzufügen, die ein Textfeld bereitstellt, in das Sie einen ausgewählten CSS-Selektor-Locator (die DOM-Knotenbereichsdaten) eingeben können, falls sich der Bereich innerhalb eines Rahmens befindet. Das Pluszeichen wird zu einem Minuszeichen, um anzuzeigen, dass es möglich ist, die Zeile zu entfernen, nachdem sie hinzugefügt wurde.
• Aktionen: Innerhalb einer leeren Zeile erscheint die Speichern-Schaltfläche in der Aktionsspalte, die es Ihnen ermöglicht, Ihre Auswahl/Eingaben als neue Geltungsbereichsdefinitionszeile hinzuzufügen. Nachdem eine Zeile hinzugefügt wurde, erscheinen die Bearbeiten- und Löschen-Schaltflächen.

Eine Geltungsbereichsdefinition hinzufügen

Befolgen Sie dieses Verfahren, wenn Sie den Teil der Seite, den Sie analysieren, auf einen durch Inhalt, Vorlage oder die gesamte Seite kategorisierten CSS-Selektor oder URL-Muster beschränken oder einschränken möchten. Das Hinzufügen einer Geltungsbereichsdefinition besteht aus der Eingabe von fünf Informationsspalten in der Tabelle im Abschnitt „Bereich“ auf dem Einstellungsfenster in axe Expert und dann dem Auswählen der Speichern-Schaltfläche.

Geltungsbereichsdefinitionen und automatische Zuordnung zu axe Monitor-Projekten

Der Bereichsabschnitt des Settings-Panels erscheint nur, nachdem eine Verbindung mit axe Monitor hergestellt und ein Projekt ausgewählt wurde. Eine Geltungsbereichsdefinition zu definieren und abzuspeichern, indem Sie dieses Verfahren befolgen, fügt die Geltungsbereichsdefinition dem ausgewählten Projekt in axe Monitor hinzu, sodass, wenn Sie das Projekt dann erneut im axe Expert-Zusatz auswählen, die bestehenden Geltungsbereichsdefinitionen automatisch auf der Settings-Registerkarte geladen werden. Jedes Mal, wenn Sie das Projekt auswählen, wird diese Geltungsbereichsdefinition automatisch in den axe Expert-Zusatz von axe Monitor heruntergeladen.

Hinzugefügte Geltungsbereichsdefinitionen verfeinern die Analyse, die im Analyse-Panel des Axe Expert Zusatzes auf die Bereiche der geladenen Seite durchgeführt wird, die mit dem Geltungsbereich übereinstimmen.

Bevor Sie beginnen, ist es wichtig zu verstehen, wie Sie die Funktionalität zur Definition der Geltungsbereiche aktivieren und den Zweck jeder Option und Tabellenfeldspalte verstehen.

1. Geben Sie im Bereichsabschnitt des Einstellungsfensters sinnvollen Text in der Name-Spalte ein (zum Beispiel 'Header').

2. Greifen Sie in der Category-Spalte auf die Dropdown-Menüoptionen zu und wählen Sie dann einen Eintrag in der Liste aus (zum Beispiel 'Template 1').

   Die Category-Dropdown-Liste schließt sich und Ihre Auswahl wird im Feld angezeigt.

3. Geben Sie im URL pattern-Feld die Textzeichenfolge nach dem Domainnamen ein, falls gewünscht (zum Beispiel '/html/head').

4. Optional können Sie + Frame auswählen, um ein neues, leeres CSS-Selektor-Feld auf einer neuen Zeile darunter anzuzeigen, und dann den Selektor für die Komponente eingeben, falls sie in einem Rahmen enthalten ist.

   

5. Geben Sie im CSS Selector(s)-Feld den Selektor ein, den Sie mit Ihrem bevorzugten Werkzeug ausgewählt haben (zum Beispiel über right-click > Copy > Copy selector in den Chrome DevTools, nachdem Sie den Quellcode im Elements-Tool hervorgehoben haben).

6. Wählen Sie in der Aktionsspalte Save aus.

   

Der hinzugefügte Bereich erscheint als neue Zeile in der Tabelle, und die Aktionsspalte zeigt Schaltflächen an, die es ermöglichen, ihn entweder zu bearbeiten oder zu löschen. Zusätzlich erscheint eine neue, leere Zeile unter Ihrer gespeicherten Bereichszeile, die es Ihnen erlaubt, einen weiteren zu spezifizieren und zu speichern usw.

Sie können nun die gewünschte Option im Analyze scope-Abschnitt über der Tabelle auswählen und dann eine Analyse der geladenen Seite durchführen, die durch den von Ihnen angegebenen Bereich definiert ist.

Eine Geltungsbereichsdefinition bearbeiten

Bearbeiten Sie eine Geltungsbereichsdefinition, wenn Sie eine bestehende Geltungsbereichsdefinition ändern möchten, indem Sie eines oder mehrere der fünf Informationsfelder ändern. Die Auswahl von Edit in der Actions-Spalte der Scope-Abschnittstabelle auf dem Einstellungsfenster in axe Expert ermöglicht es Ihnen, den Bereich dessen zu ändern, was bei der Analyse der geladenen Seite auf dem Analyse-Panel gezielt wird. Dies ändert entsprechend auch, was in axe Monitor gespeichert ist.

1. Aktivieren Sie Edit in der Actions-Spalte der Scope-Abschnittstabelle.

   

   Die Felder in jeder Spalte werden bearbeitbar, und die Actions-Spalte zeigt eine Save- und eine Cancel-Schaltfläche an.

2. Nehmen Sie die gewünschten Änderungen an einem oder mehreren Spaltenfeldern vor und aktivieren Sie dann Save in der Actions-Spalte.

   

Die von Ihnen gespeicherten Änderungen werden als schreibgeschützte Zeile in der Tabelle angezeigt und automatisch mit axe Monitor synchronisiert.

Neu in der Attest Browser Extension v2.8: Die ANALYZE AGAIN-Schaltfläche ist deaktiviert, wenn der Analysebereich nicht gespeichert ist.

Es ist leicht zu übersehen, ob ein Benutzer den Bereich der aktuellen Analyse gespeichert hat, bevor er auf ANALYZE AGAIN klickt.

Um dies zu lösen, haben wir die Save-Schaltfläche neben die ANALYZE AGAIN- und Back-Schaltflächen verschoben. Die ANALYZE AGAIN-Schaltfläche ist deaktiviert und die Save-Schaltfläche ist aktiviert, wenn ein Benutzer eine neue Bereichszeile schreibt. Die ANALYZE AGAIN-Schaltfläche wird wieder aktiviert und die Save-Schaltfläche deaktiviert, wenn der Benutzer den neuen Bereich speichert. Diese beiden Schaltflächen werden nie gleichzeitig im axe Expert Zusatz aktiviert sein.

Eine Geltungsbereichsdefinition löschen

Löschen Sie eine Geltungsbereichsdefinition, um eine Zeile aus der Scope-Abschnittstabelle auf dem Settings-Panel zu entfernen. Diese Aktion entfernt auch die Geltungsbereichsdefinition aus axe Monitor.

Wählen Sie in der Actions-Spalte in der Zeile der bestehenden Geltungsbereichsdefinition, die Sie löschen möchten, Delete aus.

Die Zeile wird aus der Tabelle im Abschnitt Bereichsdefinitionen entfernt.