Axe DevTools Linter configureren

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

Een referentiegids voor het configureren van Axe DevTools Linter

Not for use with personal data

Dit artikel biedt een referentie voor de configuratie-opties van Axe DevTools Linter.

Overzicht

De REST API-eindpunt gebruikt JSON voor configuratie en de Axe Accessibility Linter-extensie voor VS Code, de JetBrains-plugin en de Axe DevTools Linter Connector gebruiken YAML voor configuratie. Zowel JSON- als YAML-voorbeelden van Axe DevTools Linter-configuraties worden in deze gids getoond.

Voorbeeldconfiguraties

Het volgende YAML-voorbeeld demonstreert een eenvoudige configuratie die de rules optie gebruikt voor gebruik met de Axe Accessibility Linter-extensie voor VS Code, de JetBrains-plug-in of Axe DevTools Linter Connector:

rules:
  html-has-lang: false

Het volgende voorbeeld demonstreert dezelfde configuratie als een compleet verzoekobject met de rules optie voor de Axe DevTools Linter REST-service, waarbij het ingesloten config object wordt benadrukt:

{
  "source": "<html></html>",
  "filename": "file.html",
  "config": {    "rules": {      "html-has-lang": false    },    "exclude": [],
    "tags": []
  }
}

In beide gevallen zorgen deze configuraties ervoor dat Axe DevTools Linter toegankelijkheidsfouten negeert wanneer het html-element een lang-attribuut mist. (Zie de html-has-lang-regel voor meer informatie.)

note

Voor alle JSON-voorbeelden in dit artikel is het config-object opgenomen om een referentielocatie voor de configuratie te bieden.

De volgende secties beschrijven elke configuratie-optie en geven voorbeelden van hun gebruik.

Volgorde van zoeken naar configuratiebestanden

De Axe Accessibility Linter-extensie voor VS Code, de JetBrains-plug-in en de Axe DevTools Linter Connector (wanneer gebruikt met de --config optie zonder parameter) zullen de huidige map en bovenliggende mappen doorzoeken naar een axe-linter.yml configuratiebestand in de directorystructuur van uw project en het eerste dat ze vinden gebruiken. Een nuttige praktijk is om een configuratiebestand in de hoofdmap van uw project te plaatsen dat uw standaardconfiguratie bevat en het (indien nodig) te vervangen door configuratiebestanden in verschillende submappen. U kunt ook een configuratiebestand in uw thuismap plaatsen dat standaard wordt gebruikt als er geen configuratiebestanden in uw project zijn.

important

Configuratiebestanden worden niet samengevoegd. Het eerste dat gevonden wordt, is het enige dat gebruikt wordt.

De stappen om het te gebruiken axe-linter.yml configuratiebestand te lokaliseren zijn:

Gebruik het configuratiebestand in de huidige directory (de directory met het bestand dat wordt bewerkt met VS Code, een JetBrains IDE of de huidige directory van de opdrachtprompt met Axe DevTools Linter Connector).
Als er geen configuratie wordt gevonden in stap 1, doorzoek dan de bovenliggende mappen totdat een axe-linter.yml configuratiebestand wordt gevonden, en stop in uw thuisfolder als het project zich in uw thuismapstructuur bevindt of de hoofdmap als het zich buiten uw thuisfolder bevindt.
Gebruik een axe-linter.yml configuratiebestand dat zich in uw thuismap bevindt (zelfs als uw project zich in een map buiten uw thuisfolder of op een andere schijf op Windows bevindt). Bijvoorbeeld, dit zijn de typische bestanden die worden gebruikt:
- /home/gebruikersnaam/axe-linter.yml (Linux)
- /Users/gebruikersnaam/axe-linter.yml (macOS)
- C:\Users\gebruikersnaam\axe-linter.yml (Windows)

De zoektocht stopt wanneer het eerste axe-linter.yml-bestand is gevonden.

Samenvatting van Axe DevTools Linter configureren

Product	Type configuratie	Beschrijving
Axe Accessibility Linter-extensie voor VS Code of de JetBrains-plugin	Eén YAML-bestand genaamd `axe-linter.yml`	Zie Volgorde van zoeken naar configuratiebestanden.
Axe Linter Connector	Eén YAML-bestand genaamd `axe-linter.yml`	Volgt de stappen in Volgorde van zoeken naar configuratiebestanden wanneer gebruikt met de `--config` optie zonder parameter.
Axe Linter Connector	Eén YAML-bestand genaamd filenaam	Wanneer gebruikt met `--config` filenaam.
Axe Linter REST API	JSON-configuratieobject	Zie Het configuratieobject.

Configuratie-opties

`element`

De element optie stelt u in staat om het uitgezonden element te wijzigen op basis van de gespecificeerde attribuutwaarde van uw component. U zou bijvoorbeeld een aangepast component een img-element kunnen laten uitzenden in bepaalde gevallen en een button-element in andere gevallen, waardoor complexere toepassingen mogelijk zijn.

De onderstaande configuratie-specifieert dat het as-attribuut op de my-button-component het uitgezonden element kan wijzigen van de standaard button:

YAML:

global-components:
  my-button:
    element: button
    attributes:
      - as: <element>

JSON:

{
  "config": {
    "global-components": {
      "my-button": {
        "element": "button",
        "attributes": [
          {
            "as": "<element>"
          }
        ]
      }
    }
  }
}

Het onderstaande gebruiksvoorbeeld zendt een img-element uit in plaats van het standaard button-element omdat het as-attribuut het uitvoerelement specificeert:

<my-button as="img"></my-button>

Het uitgezonden img-element zal vervolgens worden ge-lint en wordt ontdekt dat er een alt-attribuut ontbreekt.

`exclude`

De exclude optie voorkomt dat overeenkomende bestanden worden ge-lint. U kunt wildcards en globs gebruiken. Het gebruik ervan is voornamelijk voor de VS Code-extensie of JetBrains-plug-in en wordt genegeerd door het REST-eindpunt.

exclude: *.tmp

`enterpriseId`

Het optionele enterpriseId veld accepteert een tekenreeks die wordt gekoppeld aan gebruiksanalyse-evenementen voor ondernemings-toewijzing. De meeste gebruikers hoeven deze waarde niet in te stellen; het kan worden gevraagd door uw Deque-vertegenwoordiger. Dit veld wordt genegeerd bij on-premise implementaties.

enterpriseId: 'acme-corp'

`global-components`

De global-components configuratie-optie instrueert Axe DevTools Linter hoe u uw eigen aangepaste componenten of componenten van derden kunt mappen op native HTML-elementen, zodat u uw componenten kunt linten alsof het native HTML-elementen zijn. Bijvoorbeeld, de volgende configuratie zal alle DqButton-componenten behandelen alsof het native HTML button-elementen zijn. Dit map automatisch elk attribuut op DqButton naar button, waardoor een toegankelijke naam voor alle DqButton-componenten vereist is.

YAML:

global-components:
  DqButton: button

JSON:

{
  "config": {
    "global-components" {
      "DqButton": "button"
    }
  }
}

Als alternatief kunt u voor componenten die niet alle attributen mappen naar native HTML-componenten de vereiste attributen voor toegankelijkheidsconformiteit opgeven met de attributes optie. U kunt zowel attributen opgeven die de component ondersteunt als attributen hernoemen. Er zijn drie speciale waarden:

De aria-* waarde vertelt Axe DevTools Linter dat alle attributen die beginnen met aria- worden gemapt op het native HTML-element zoals het is. Let op dat de waarde eindigt met een asterisk.
De <text> waarde vertelt Axe DevTools Linter dat een eigenschap wordt gebruikt om de inhoud (de waarde tussen de open en sluit tags) van het native HTML-element in te stellen.
De <element> waarde vertelt Axe DevTools Linter dat het uitgezonden element de waarde van dit attribuut kan aannemen, waardoor u het uitgezonden element kunt wijzigen afhankelijk van de waarde van het gespecificeerde attribuut.

Het volgende YAML-voorbeeld laat alle waarden zien die kunnen worden gebruikt met global-components:

global-components:
  DqButton:
    element: button
    # Ignore all attributes on <DqButton> except the following:
    attributes:
      - role # Map the role attribute from <DqButton /> to <button />
      - aria-* # Map all attributes starting with aria-
      - action: type # <DqButton action="submit" /> maps to <button type="submit" />
      - label: <text> #  <DqButton label="ABC" /> emits <button>ABC</button>
      - as: <element> # <DqButton as="img" /> emits <img> instead of <button>. (You don't have to use *as* for the attribute name.)

Een equivalent JSON-versie (binnen het config-object) is als volgt:

{
  "config": {
    "global-components": {
      "DqButton": {
        "element": "button",
        "attributes": [
          "role",
          "aria-*",
          {
            "action": "type"
          },
          {
            "label": "<text>"
          },
          {
            "as": "<element>"
          }
        ]
      }
    }
  }
}

Alleen attributen die relevant zijn voor toegankelijkheid hoeven in de attributes lijst te staan. Elementnamen zijn hoofdlettergevoelig. Kameelletters, zoals hierboven weergegeven, worden vaak gebruikt met .jsx-bestanden, maar streepjes worden (die worden gebruikt in Vue, Angular en HTML-aangepaste elementen) kunnen ook worden gebruikt.

Voor stapsgewijze handleidingen over het gebruik van de aangepaste component-mapping, zie Linting van aangepaste componenten.

`global-libraries`

Axe DevTools Linter biedt ingebouwde ondersteuning voor verschillende populaire componentbibliotheken en -frameworks.

De volgende bibliotheken worden momenteel ondersteund:

react-native
@mui/material
@deque/cauldron-react

Om linting van bibliotheekcomponenten in te schakelen, voegt u de NPM-pakketnaam van de bibliotheek toe aan de global-libraries lijst voor YAML-configuratiebestanden:

global-libraries:
  - '@mui/material'
  - '@deque/cauldron-react'
  - react-native

note

U moet @mui/material en @deque/cauldron-react tussen aanhalingstekens zetten in YAML omdat @ wordt geïnterpreteerd als een gereserveerd teken.

Of de equivalente JSON-configuratie wordt hieronder getoond:

{
  "config": {
    "global-libraries": [
      "@mui/material"
    ]
  }
}

Elke component met dezelfde naam als een component uit de globale bibliotheek wordt behandeld als die bibliotheekcomponent, waardoor het mogelijk is componenten opnieuw te exporteren en te herdeclareren zonder hun toewijzing te verliezen.

Voor meer informatie, zie Vooraf geconfigureerde Componentbibliotheken.

`overrides`

U kunt aanpassen hoe Axe DevTools Linter per bestand is geconfigureerd door gebruik te maken van de overrides configuratie-optie. Meerdere overschrijvingen op hetzelfde bestand worden in volgorde opgelost. Dat wil zeggen, de laatste overwriting in de lijst heeft de hoogste prioriteit.

Momenteel wordt alleen de linter overschrijving ondersteund en wordt gebruikt om de linter te wijzigen die op de overeenkomende bestanden wordt gebruikt.

overrides:
  - files: # An array or single string of filename(s) or glob pattern(s) that match this override setting
      - vue/**/*.html
    linter: vue # Specify that all files that match the pattern should be linted as Vue
  - files: php/**/*.html
    linter: null # Disable Axe Linter for these files

`rules`

U kunt regels individueel toestaan of verbieden met de rules optie in uw configuratie. Elke regel kan worden ingesteld op true (ingeschakeld, gerapporteerd als een fout — de standaard), false (uitgeschakeld), of warn (ingeschakeld, gerapporteerd als een waarschuwing):

rules:
  some-rule: false   # turn off rule
  other-rule: true   # turn on rule (default)
  color-contrast: warn  # report violations as warnings instead of errors

Of in het config object in uw JSON REST-verzoek:

{
  "config": {
    "rules": {
      "some-rule": false,
      "other-rule": true,
      "color-contrast": "warn"
    }
  }
}

Voor informatie over het gebruik van rules met de REST API, zie De eigenschap regels. Als u rules wilt gebruiken met de Axe DevTools Linter-connector, zie Configuratiebestand. Om de regels te zien die Axe DevTools Linter volgt, zie Toegankelijkheidsregels. Zie tags hieronder voor meer informatie over het gebruik van de tags optie om verzamelingen van regels van verwerking uit te sluiten.

Om regels voor specifieke regels in een bronbestand te onderdrukken zonder dit configuratiebestand te wijzigen, zie Lintregels onderdrukken met inline-directieven.

`tags`

U kunt regels als een groep verbieden op basis van de WCAG-standaard waarmee ze zijn geassocieerd door gebruik van de tags optie:

tags: # Disallow all rules other than WCAG 2.1 A, WCAG 2.1 AA, and best practices.
  - wcag21a
  - wcag21aa
  - best-practices

Zie ook

Voor een verwijzing naar de REST API's die worden geleverd door Axe DevTools Linter, zie De referentie van de Axe DevTools Linter REST API.
Voor stapsgewijze handleidingen voor het creëren van aangepaste component-mappingen, zie Linting van aangepaste componenten.
Om de extensie voor VS Code te downloaden, zie Axe Accessibility Linter.
Voor meer informatie over de JetBrains-plug-in, zie De plug-in gebruiken met JetBrains IDE's.