Free Trial

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

Free Trial
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:

  1. 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).

  2. 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.

  3. 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

Elke regel is standaard ingeschakeld en gerapporteerd als een fout. Gebruik de optie rules om te wijzigen hoe individuele regels worden behandeld: zet een regel op false om deze uit te schakelen, of op warn om deze als een waarschuwing in plaats van een fout te rapporteren. Het opsommen van een regel beperkt linting niet tot de regels die je opsomt, dus het is niet nodig om de regels die je wilt behouden op te sommen. Om linting te beperken tot een groep regels, gebruik in plaats daarvan tags.

rules:
  some-rule: false      # turn off rule
  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,
      "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

Je kunt regels als een groep selecteren op basis van de toegankelijkheidsstandaard waarmee ze zijn geassocieerd, met behulp van de optie tags. Een regel wordt gecontroleerd als deze een van de tags draagt die je opsomt, en elke regel die geen van die tags draagt, wordt uitgeschakeld:

tags: # Check only WCAG 2.0 A, WCAG 2.0 AA, and best-practice rules.
  - wcag2a
  - wcag2aa
  - best-practice
important

Omdat het opsommen van een tag elke regel uitschakelt die deze niet draagt, schakelt een beperkte set tags de meeste regels uit. De meeste regels die Axe DevTools Linter controleert, dragen wcag2a, dus een configuratie die alleen WCAG 2.1-tags opsomt, laat bijna al deze regels uitgeschakeld. Voor de tags die je kunt gebruiken, zie Tags.

Zie ook

Is this page helpful?

Help us improve this page

Still need help?