Pagina's Analyseren Met Spec-bestanden

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard

Hoe de spec- en bulk-spec subcommando's te gebruiken om pagina's te analyseren met spec-bestanden

Not for use with personal data

Een spec-bestand is een JSON- of YAML-bestand dat een lijst met webpagina's en de browseracties definieert die op elke pagina moeten worden uitgevoerd voordat ze op toegankelijkheidsproblemen worden geanalyseerd. Gebruik axe spec om een enkel spec-bestand uit te voeren, of axe bulk-spec om een map met spec-bestanden te verwerken.

Het axe spec Commando 

axe spec <spec-file> <output-dir> [options]

De <output-dir> is waar JSON-resultaten worden opgeslagen. Indien weggelaten, worden de resultaten opgeslagen in de huidige werkdirectory.

Voorbeeldgebruik:

axe spec ./axe-workflow.yaml ./axe-results --format html

Structuur van Spec-bestand

Een spec-bestand definieert een of meer projecten, elk met een lijst van te analyseren pagina's en optionele acties om op elke pagina uit te voeren.

YAML Voorbeeld

projects:
  - name: deque.com
    id: deque.com
    metadata:
      products:
        - CLI
      environment:
        - Prod
    globalActions:
      - dismiss modal "#CybotCookiebotDialog" with close button "#CybotCookiebotDialogBodyButtonAccept"
    pageList:
      - name: Deque search
        url: https://www.deque.com/
        actions:
          - type "axe" into element "#searchform input"
          - click element "#searchform button"
          - wait for element ".m-search-page" to be found
          - analyze
      - name: Axe Dashboard
        url: https://axe.deque.com/

Project

Eigenschap Type Beschrijving
name string Unieke weergavenaam van het project.
id string Unieke identificator van het project.
metadata object Optioneel. Willekeurige metadata voor uw gebruiksdoel (bijvoorbeeld, productnaam, omgeving).
globalActions array Optioneel. Acties die reageren op statuswijzigingen op elke pagina in het project, bijvoorbeeld het sluiten van een cookiebanner of enquêtepop-up. Zie Globale Acties.
pageList array Lijst van te analyseren pagina's. Zie Pagina.

Pagina

Eigenschap Type Beschrijving
name string Weergavenaam van de pagina.
url string URL van de pagina.
actions array Optioneel. Acties om op de pagina uit te voeren voor of na de analyse. Zie Acties.

JSON/YAML-formaat

Spec-bestanden kunnen in YAML of JSON worden geschreven. De volgende tabel toont dezelfde waarden in elk formaat. Merk op dat in JSON, actie-strings die dubbele aanhalingstekens bevatten, deze moeten ontsnappen met een backslash.

YAML JSON
type "axe" into element "#searchform input" "type \"axe\" into element \"#searchform input\""
dismiss modal "#CybotCookiebotDialog" with close button "#CybotCookiebotDialogBodyButtonAccept" "dismiss modal \"#CybotCookiebotDialog\" with close button \"#CybotCookiebotDialogBodyButtonAccept\""

Acties

Acties zijn strings in de actions (of globalActions) array van een spec-bestand. Ze voeren taken uit zoals het klikken op knoppen, invullen van formulieren, sluiten van dialogen, wachten op paginastatussen en uitvoeren van toegankelijkheidsanalyses. Acties worden uitgevoerd in de volgorde waarin ze worden vermeld.

Er zijn twee soorten acties:

  • Paginahandelingen worden in volgorde uitgevoerd op een specifieke pagina. De analyze actie moet ten minste één keer per pagina worden aangeroepen.
  • Globale acties worden op elke pagina in het project uitgevoerd in reactie op statuswijzigingen. Zie Globale acties.

Volledig Actie Voorbeeld

Het volgende voorbeeld logt in bij Deque University en analyseert het dashboard:

projects:
  - name: Deque University login flow
    id: deque-university-login-flow
    pageList:
      - name: homepage
        url: https://dequeuniversity.com/
        actions:
          - click element ".loginLink"
          - wait for element ".loginUsername" to be found
          - type "user@example.com" into element ".loginUsername"
          - type "secretpassword" into element "#loginPassword"
          - click element "input[type=submit]"
          - wait for element ".logoutLink" to be found
          - analyze page

Selectors

Veel acties nemen een selector-argument dat een element op de pagina identificeert. Een selector kan een CSS-selector of XPath-selector zijn, gespecificeerd als een enkele string of een lijst van strings.

Om elementen binnen iframes te targeten, moet u een lijst gebruiken. Alle selectors in de lijst behalve de laatste identificeren opeenvolgende <iframe> elementen om naar binnen te navigeren, en moeten CSS-selectors zijn. De laatste selector in de lijst identificeert het doel-element en kan een CSS of XPath zijn. Elke selector in de lijst wordt geëvalueerd ten opzichte van de documentcontext die door de vorige invoer is vastgesteld: de eerste selector is relatief ten opzichte van het hoofddocument, en elke volgende iframe-selector is relatief ten opzichte van het document binnen het voorgaande iframe.

Een enkele string gebruiken (geen lijst) kan niet in iframes navigeren.

Iframe Selector Voorbeeld

Overweeg deze HTML-structuur:

<body>
  <!-- root document -->
  <iframe class="payment-widget">
    <!-- document inside the payment-widget iframe -->
    <div class="form-wrapper">
      <iframe id="card-fields">
        <!-- document inside the card-fields iframe -->
        <form>
          <input type="text" name="card-number" class="card-input">
        </form>
      </iframe>
    </div>
  </iframe>
</body>

Om in het kaartnummer-invoerveld te klikken, gebruik een selectorlijst. Elke CSS-selector wordt geëvalueerd binnen de documentcontext die door de vorige invoer is vastgesteld:

# "iframe.payment-widget" is evaluated in the root document
# "#card-fields" is evaluated in the document inside iframe.payment-widget
# ".card-input" is evaluated in the document inside #card-fields
click element [ "iframe.payment-widget", "#card-fields", ".card-input" ]

Om XPath te gebruiken voor het uiteindelijke doelelement (de iframe-selectors moeten nog steeds CSS zijn):

click element [ "iframe.payment-widget", "#card-fields", "//input[@name='card-number']" ]

In JSON:

"click element [\"iframe.payment-widget\", \"#card-fields\", \".card-input\"]"

Paginahandelingen

De CLI ondersteunt negen paginahandelingen:

  1. analyze: voer een toegankelijkheidsanalyse uit
  2. change: verander de waarde van een <input>, <textarea>, of <select> via JavaScript
  3. click: klik op een element
  4. dismiss: sluit een popup of modal
  5. eval: evalueer willekeurige JavaScript
  6. press: druk op een toets (met of zonder modifiers)
  7. select: selecteer een optie in een <select>
  8. type: typ in een <input>
  9. wait: wacht op een specifieke status of pauzeer

analyze

De analyze actie voert een toegankelijkheidsanalyse uit. Het moet ten minste één keer per pagina worden aangeroepen. U kunt het meerdere keren aanroepen om een pagina op verschillende punten in een workflow te analyseren (gebruik de with title variant om resultaten te onderscheiden).

De optionele ruleset parameter specificeert welke regels set gebruikt moet worden. De standaard is WCAG 2.1 AA. Beschikbare regelsets:

Regelset-ID Standaard
wcag2 WCAG 2.0 AA
wcag2.1 WCAG 2.1 AA (standaard)
wcag2.2 WCAG 2.2 AA
wcag2aaa WCAG 2.0 AAA
wcag2.1aaa WCAG 2.1 AAA
wcag2.2aaa WCAG 2.2 AAA
508 Sectie 508
ttv5 Trusted Tester v5
en301549 EN 301 549
rgaav4 RGAA v4

Voor informatie over het opnemen of uitsluiten van elementen, zie de axe-core API-documentatie over de Context-parameter.

# Analyze using the WCAG 2.1 AA ruleset (default) — all three forms are equivalent
analyze
analyze the page
analyze page

# Analyze using the Section 508 ruleset
analyze page with ruleset "508"

# Analyze with a custom title (useful when analyzing a page multiple times)
analyze the page with title "after login"

# Analyze only a specific element
analyze only element "#main-content"

# Analyze only specific elements
analyze only element "#idOfElement" and element ".classToAnalyze"

# Analyze everything except images that are immediate children of paragraphs
analyze the page excluding element "p > img"

# Analyze everything except elements inside a frame with a specific class
analyze the page excluding element [ ".classOfFrameToExclude", "#idOfElement" ]

# Save results to a specific directory
analyze the page and save in "./homepage-team/"

# Save a copy to an additional directory while also saving to the default location
analyze the page and save a copy in "./homepage-team/"

# Use the axe-core library's built-in default ruleset
analyze the page with the source default ruleset

Voorbeeld van het combineren van meerdere opties: Analyseer alleen afbeeldingen binnen elementen met de klasse third-party en formulieren die niet worden gevalideerd bij verzending, exclusief elementen met de klasse old-api, gebruik makend van de 508 regelset, met een aangepaste titel en een aangepaste opslaglocatie.

analyze only element [ ".third-party", "img"] and element "form[novalidate]" excluding element ".old-api" with ruleset "508" with title "What is this testing" and save in "Results for Some test"

In JSON:

"analyze only element [\".third-party\", \"img\"] and element \"form[novalidate]\" excluding element \".old-api\" with ruleset \"508\" with title \"What is this testing\" and save in \"Results for Some test\""

change

De change actie wijzigt de waarde van een <input>, <textarea>, of <select> element via JavaScript. Gebruik change wanneer normale DOM-evenementen niet beschikbaar zijn.

# Change the value of an input
change the value of "input[name=song]" to "too many puppies"

click

De click actie klikt op het eerste element dat overeenkomt met de gegeven selector.

# Click a button by class selector
click element ".myButton"

# Click the body element
click "body"

dismiss

De dismiss actie sluit een pop-up of modal door op de sluitknop te klikken. Voorzie een CSS-selector voor de modalcontainer en een andere voor de sluitknop. De actie faalt op een elegante manier als een van beide elementen niet aanwezig is.

note

Deze actie sluit geen native alert() of confirm() dialoogvensters.

# Dismiss a modal using separate selectors for the container and close button
dismiss modal ".myModal" with close button ".myModal .close"

eval

De eval actie voert willekeurige JavaScript uit op de pagina. Gebruik het om de DOM te manipuleren of aangepaste acties uit te voeren.

# Change the page title
eval "document.title = 'hello world'"

# Scroll an element into view
eval "document.querySelector('.someElement').scrollIntoView()"

# Scroll to the bottom of the page
eval "window.scrollTo(0, document.body.scrollHeight)"

press

De press actie stuurt een toetsdruk naar een element (optioneel met modifier-toetsen). Voor ondersteunde toetsengnamen, zie de Selenium toetsdocumentatie.

# Press H on the body element
press "H" on "body"

# Press Shift+Tab on the navigation element
press "shift+tab" on element ".navigation"

# Press Shift+Control+7 on an element
press "shift+control+7" on element ".foo"

select

De select actie selecteert een <option> van een <select> element via zijn zichtbare tekst (niet zijn value attribuut).

Gegeven deze HTML:

<select class="mySelect">
  <option></option>
  <option value="1">dog</option>
  <option value="2">cat</option>
  <option value="3">fish</option>
</select>
# Select by visible option text
select the "dog" option in ".mySelect"
select the "cat" option in element ".mySelect"

type

De type actie typt een tekenreeks in een <input> of <textarea> element. Gebruik het om formulieren in te vullen en zoekvelden te vullen.

# Type into an email input
type "user@example.com" into element "input[type=email]"

# Type into a textarea
type "hello world" into "textarea.Message"

# Type with a delay between keystrokes to simulate human typing
type "sloth" into "input[type=search]" with a 150ms key delay

wait

De wait actie wacht ofwel tot een element een bepaalde toestand bereikt, of pauzeert voor een opgegeven duur.

Ondersteunde elementtoestanden: visible, hidden, selected, enabled, disabled, found.

Voor de duur van de pauze worden numerieke waarden geïnterpreteerd als milliseconden. Tekenreeksen worden geconverteerd met behulp van het ms pakket — bijvoorbeeld, 1m = 60.000 ms, 1s = 1.000 ms.

# Wait for an element to appear
wait for element ".myElement" to be found

# Wait for an element to become hidden
wait for element ".myElement" to be hidden

# Sleep for 1 minute
wait for 1m

# Sleep for 1 second
wait for 1s

# Sleep for 30 milliseconds
wait for 30

Globale Acties

Globale acties worden op elke pagina in een project uitgevoerd als reactie op toestandveranderingen, in plaats van procedureel te worden uitgevoerd zoals pagina-acties. Momenteel wordt slechts één globale actie ondersteund: dismiss modal.

  • Globale acties werken in zowel spec modus als headless URI-modus.
  • Globale acties zijn niet procedureel — ze worden geactiveerd als reactie op pagina-evenementen, niet in een vaste volgorde.
  • De dismiss modal globale actie wacht tot een bepaald modaal venster verschijnt en sluit het voordat pagina-acties doorgaan.

Voeg globale acties toe aan een project na name/id en voor pageList:

projects:
  - id: demo
    name: CLI demo
    globalActions:
      - dismiss modal "#__next .survey" with close button ".survey button.close"
    pageList:
      - name: homepage
        url: https://dequelabs.github.io/aget-demo-site
      - name: popup
        url: https://dequelabs.github.io/aget-demo-site
        actions:
          - wait for element "#__next header nav" to be visible
          - click element "#__next header nav a[href*=popup]"
          - wait for element ".content button" to be found
          - analyze with title "before popup"
          - click element ".content button"
          - analyze with title "with popup"
          - dismiss modal ".ReactModal__Content" with close button ".ReactModal__Content .close"
          - analyze with title "after popup"
      - name: contact
        url: https://dequelabs.github.io/aget-demo-site/contact
        actions:
          - analyze with title "form disabled"
          - wait for element "#__next .toggle" to be found
          - click element ".toggle button"
          - wait for element "input[name=name]" to be enabled
          - analyze with title "form enabled"
          - type "stephen" into element "input[name=name]"
          - type "555-555-5555" into element "input[name=phone]"
          - type "stephen@deque.com" into element "input[name=email]"
          - type "hello world" into element "textarea[name=message]"
          - click element "button[type=submit]"
          - wait for element ".thanks" to be found
          - analyze with title "thanks message"

Batchverwerking met axe bulk-spec

Om meerdere spec-bestanden in één keer te verwerken, gebruik axe bulk-spec met een map met spec-bestanden. De CLI doorzoekt de map en zijn submappen recursief naar spec-bestanden.

axe bulk-spec <spec-files-directory> <output-directory>

De <output-directory> is optioneel — als deze wordt weggelaten, worden de resultaten opgeslagen in de huidige werkmap.

Voortgangsupdates worden afgedrukt naar stdout tijdens de uitvoering.

Resultaten worden naar de uitvoermap geschreven: één JSON-bestand per analyze actie, plus een logbestand met eventuele spec-bestanden die gefaald hebben en de reden voor falen.

Opties

De volgende opties zijn beschikbaar voor axe spec:

--axe-devhub-api-key <api-key>

Specificeert de Axe Developer Hub API-sleutel. Vereist (samen met --axe-devhub-project-id) om resultaten naar Axe Developer Hub te sturen. Zie Resultaten naar Axe Developer Hub versturen.

--axe-devhub-project-id <project-id>

Specificeert de Axe Developer Hub project-ID. Vereist (samen met --axe-devhub-api-key) om resultaten naar Axe Developer Hub te sturen. Zie Resultaten naar Axe Developer Hub versturen.

--axe-devhub-server-url <url>

Specificeert de URL van de Axe Developer Hub server. Standaardwaarde is https://axe.deque.com. Equivalent aan de AXE_DEVHUB_SERVER_URL omgevingsvariabele. Zie Resultaten naar Axe Developer Hub sturen.

-c, --custom <path>

Specificeert een aangepast regelbestand dat het standaardregelbestand overschrijft.

--descendant-links

Verzamelt de links op elke pagina en voegt ze toe aan de resultaten. Vereist --verbose.

--dismiss-alerts

Sluit automatisch browser alert(), confirm(), en prompt() dialoogvensters voordat er wordt gescand.

--enable-tracking <state>

Maakt het verzenden van gegevens naar de metrics-bibliotheek mogelijk.

--filter <type(s)>

Filtert resultaattypen uit de uitvoer: passes, violations, incomplete, inapplicable. Vereist --format csv.

-f, --format <type(s)>

Rapportformaat/formats: html, junit, csv, of een door komma's gescheiden combinatie. Standaard: html.

--no-git-data

Sluit Git-branch en commit-informatie uit bij het verzenden van resultaten naar Axe Developer Hub. Zie Resultaten naar Axe Developer Hub sturen.

--page-name <name>

Voert alleen de pagina uit met de gespecificeerde naam uit het spec-bestand pageList.

--page-source

Voegt de gescande HTML-bron toe aan resultaten. Vereist --verbose.

--page-title

Voegt de paginatitel toe aan resultaten. Vereist --verbose.

--remote-proxy <proxy-server>

Routet het verkeer via de opgegeven externe proxyserver.

--resume-from <name>

Slaat alle pagina's over vóór de genoemde pagina in het spec-bestand pageList.

--scanned-url

Voegt de basis-URL en huidige scan-URL toe aan gedetailleerde resultaten. Alleen Chrome. Vereist --verbose.

--set-distinct-id <id>

Overschrijft de unieke ID-waarde.

--set-legacy-mode

Schakelt de verouderde legacy scanmodusin, die wordt verwijderd in v5.0.

important

Dit is een laatste redmiddel. Er is gemeld dat het scans toestaat te voltooien op pagina's die window.open()overschrijven, een ontmoedigde praktijk.

--set-tracking-url <url>

Overschrijft de URL waar metrics-gegevens naartoe worden verzonden.

-t, --tags

Filtert het standaardregelset door tag.

--user-agent

Stelt een aangepaste gebruikersagentstring in voor de browser.

--validate

Valideert je spec-bestand zonder het uit te voeren.

-v, --verbose

Bevat extra output: Axe-resultaten en metadata zoals toolnaam, versie en omgeving.

Voor extra configuratieopties, zie Configureren.

Is this page helpful?

Help us improve this page

Still need help?