Configuring check

This user guide will help you to configure the check to scan smaller resolutions in addition to the desktop version of the page. If your web pages have similar page areas such as headers or footers, you can define a scope and get a clearer report.

Checking responsive layout

By default, axe Monitor checks the desktop version of a page. If you also want to check smaller screen resolutions, proceed as follows:

  1. Change to Scans.
  2. Make sure that the correct options are selected in the Organization and Project drop-downs.
  3. Click Edit in the Action column on the right.

Scan Settings page. The Link Edit is highlighted.

Edit scan page

 

  1. Add a Session Establishment Task.
  2. Fill in the Name field (example: responsive).
  3. Activate the checkbox Support for Responsive Design.
  4. Click on Done.

Edit scan page with highlighted options

 

  1. Activate the checkbox Iterate the Scan.
  2. Add Iteration Parameters.
  3. Under Session Establishment Tasks choose the previously defined task, i.e. responsive.
  4. Choose the Screen Height option in the Parameter drop-down.
  5. Add another Iteration Parameter, under Session Establishment Tasks choose the previously defined task again and then the Screen Width option in the Parameter drop-down.
  6. Add the desired number of Iteration Values. It is useful to test a mobile screen, a tablet screen and a desktop screen.
  7. Fill in the Screen Height and Screen Width fields accordingly. The following resolutions are common in Europe:
    Desktop: 1,920 × 1,080 pixel
    Tablet: 768 × 1,024 pixel
    Mobile: 390 × 844 pixel
  8. Confirm the settings with Aktualisieren.

Edit scan settings for different screen resolutions


You must now adjust more settings so that the different resolutions are treated as different pages even though they have the same URL:

  1. Choose Settings – Project and then the Scan Settings tab.
  2. Select the project that you want to configure in the Organization and Project drop-downs.
  3. In the section How to identify unique pages:
    Choose the option Use the page content to determine unique page.
    Activate the checkbox Use the built-in hash function.
  4. Click on Update.

Scan settings with the section „How to identify unique pages“ highlighted

To top

Defining the scope

If the checked pages have similar headers, footers and other page areas, it is worth defining a scope. If errors are found in the header, for example, axe Monitor lists them in the dashboard once under Common Issues and not for each page individually.

Change to Settings – Project – Scope Definitions – Add Scope Definitions.

Create scope definitions page. The fields Name und Selector have to be filled out.


Fill in the Name field (example: Footer) and choose a Selector:

  1. Open the web page that you want to check in the browser.
  2. Open the developer tools of your browser with the F12 key. Alternatively, right-click on the web page you want to check and select Inspect from the context menu.
  3. In the Inspector, find the element that the web pages have in common. In the example screenshot, this is the element <header>.
  4. Right click on the element, in the context menu choose Copy and then CSS Selector.
  5. Paste what you copied into the Selector field.
  6. Click Anlegen.

Context menu in browser. The entries Copy and CSS Selector are highlighted..


You then need to add a page to the Scan Definition and select it as a template:

  1. Make sure that the correct options are selected in the Organization and Project drop-downs in the tab Scans and then click Edit.
  2. Add a task via Add task.
  3. Enter the page address in the URL field – do not select the start page, but a typical content page.
  4. Choose the option Use this as a template.
  5. Click Done and then Update.

Scan settings for Scope Definition

To top