Prüfung konfigurieren

Diese Anleitung hilft Ihnen, die Prüfung zu konfigurieren, um auch kleinere Auflösungen neben der Desktop Version der Seite zu scannen. Sollten Ihre Webseiten ähnliche Seitenbereiche wie Header oder Footer aufweisen, können Sie einen Scope definieren und so einen übersichtlicheren Bericht erhalten.

Responsives Layout prüfen

Standardmäßig prüft axe Monitor die Desktop-Version einer Seite. Wenn Sie auch kleinere Bildschirmauflösungen prüfen möchten, gehen Sie folgendermaßen vor:

  1. Wechseln Sie zu Scans.
  2. Stellen Sie sicher, dass in den Drop-downs Organization und Project die richtigen Optionen ausgewählt sind.
  3. Klicken Sie rechts in der Spalte Action auf Edit.

Scan Settings Seite. Der Edit Link ist hervorgehoben.

Edit Scan Seite mit den Feldern Name, Priorität, Scan Label, User Agent, Single Sign-On und weiteren Optionen

 

  1. Fügen Sie einen Session Establishment Task hinzu.
  2. Füllen Sie das Feld Name aus (Beispiel: responsive).
  3. Aktivieren Sie die Checkbox Support for Responsive Design.
  4. Klicken Sie auf Done.

Edit Scan Seite mit den oben genannten Feldern hervorgehoben.

 

  1. Aktivieren Sie die Checkbox Iterate the Scan.
  2. Fügen Sie Iteration Parameters hinzu.
  3. Wählen Sie unter Session Establishment Tasks den vorher definierten Task, etwa responsive.
  4. Wählen Sie im Drop-down Parameter die Option Screen Height.
  5. Fügen Sie einen weiteren Iteration Parameter hinzu, wählen Sie unter Session Establishment Tasks wieder den vorher definierten Task und anschließend im Drop-down Parameter die Option Screen Width.
  6. Fügen Sie die gewünschte Zahl an Iteration Values hinzu. Es ist sinnvoll, einen mobilen Bildschirm, einen Tablet-Bildschirm und einen Desktop-Bildschirm zu testen.
  7. Füllen Sie die Felder Screen Height und Screen Width entsprechend aus. In Europa sind folgende Auflösungen verbreitet:
    Desktop: 1.920 × 1.080 Pixel
    Tablet: 768 × 1.024 Pixel
    Mobile: 390 × 844 Pixel
  8. Bestätigen Sie die Einstellungen mit Aktualisieren.

Edit Scan Einstellungen für verschiedene Bildschirmauflösungen.


Sie müssen nun noch weitere Einstellungen vornehmen, damit die verschiedenen Auflösungen als unterschiedliche Seiten behandelt werden, obwohl sie die gleiche URL haben:

  1. Wählen Sie Settings – Project und anschließend den Reiter Scan Settings.
  2. Wählen Sie in den Drop-downs Organization und Project das zu konfigurierende Projekt.
  3. Im Abschnitt How to identify unique pages:
    Wählen Sie die Option Use the page content to determine unique page.
    Aktivieren Sie die Checkbox Use the built-in hash function.
  4. Klicken Sie auf Update.

Scan Settings mit dem Bereich „How to identify unique pages“ hervorgehoben.

Nach oben

Scope definieren

Wenn die gescannten Seiten ähnliche Header, Footer und andere Seitenbereiche haben, lohnt es sich einen Scope zu definieren. Werden Fehler etwa im Header gefunden, führt axe Monitor sie im Dashboard einmal unter Common Issues an und nicht für jede Seite einzeln.

Wechseln Sie zu Settings – Project – Scope Definitions – Add Scope Definitions.

Create Scope Definitions Seite. Die Felder Name und Selector sind auszufüllen.


Füllen Sie das Feld Name aus (Beispiel: Footer) und wählen Sie einen Selector:

  1. Öffnen Sie die zu prüfende Webseite im Browser.
  2. Öffnen Sie die Entwickler-Werkzeuge Ihres Browsers mit der F12-Taste. Alternativ führen Sie einen Rechtsklick auf die zu prüfende Webseite aus und wählen Sie im Kontextmenü die Option Untersuchen.
  3. Finden Sie im Inspektor das Element, das die Webseiten gemeinsam haben. Im Beispielscreenshot ist das das Element <header>.
  4. Führen Sie einen Rechtsklick auf das Element aus, wählen Sie im Kontextmenü Kopieren und dann CSS-Selector.
  5. Fügen Sie das Kopierte im Feld Selector ein.
  6. Klicken Sie auf Anlegen.

Kontextmenü im Browser. Die Einträge Kopieren und CSS-Selektor sind hervorgehoben.


Anschließend müssen Sie eine Seite zur Scan Definition hinzufügen und als Template wählen:

  1. Stellen Sie im Reiter Scans sicher, dass in den Drop-downs Organization und Project die richtigen Optionen ausgewählt sind und klicken Sie auf Edit.
  2. Fügen Sie via Add task einen Task hinzu.
  3. Geben Sie im Feld URL die Seitenadresse ein – wählen Sie nicht die Startseite, sondern eine typische Contentseite.
  4. Wählen Sie die Option Use this as a template.
  5. Klicken Sie auf Done und anschließend auf Update.

Scan Einstellungen für Scope Definition

Nach oben