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 zijn in deze gids te zien.

Voorbeeldconfiguraties

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

rules:
  html-has-lang: false

Het volgende voorbeeld toont dezelfde configuratie als een compleet verzoekobject met de rules optie voor de Axe DevTools Linter REST-dienst met het ingesloten config object gemarkeerd:

{
  "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 inbegrepen om een referentielocatie voor de configuratie te bieden.

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

Meerdere configuratiebestanden

De Axe Accessibility Linter-extensie voor VS Code, de JetBrains-plugin en de Axe DevTools Linter Connector (wanneer gebruikt met de --config optie zonder parameter) zoeken in de huidige directory en bovenliggende directories naar axe-linter.yml configuratiebestanden in uw projectdirectorystructuur en gebruiken het eerste dat ze vinden. Een nuttige praktijk is om een configuratiebestand in de hoofdmap van uw project te plaatsen met uw standaardconfiguratie en deze (indien nodig) te overschrijven met 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.

De stappen om axe-linter.yml configuratiebestanden 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 in stap 1 geen configuratie wordt gevonden, doorzoek dan bovenliggende directories totdat er een axe-linter.yml configuratiebestand wordt gevonden, en stop bij uw thuisfolder als het project zich in uw thuisdirectoryboom bevindt of de rootdirectory als het buiten uw thuisfolder is.
Gebruik een axe-linter.yml configuratiebestand in uw thuismap (zelfs als uw project zich in een map buiten uw thuismap bevindt of op een andere schijf op Windows). 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 zoekopdracht stopt zodra het eerste axe-linter.yml bestand wordt gevonden.

Samenvatting van Axe DevTools Linter configureren

Product	Type configuratie	Beschrijving
Axe Accessibility Linter-extensie voor VS Code of de JetBrains-plugin	Een of meer YAML-bestanden genaamd `axe-linter.yml`	Zie Meerdere configuraties.
Axe Linter Connector	Een of meer YAML-bestanden genaamd `axe-linter.yml`	Volgt de stappen in Meerdere configuraties bij gebruik 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 je in staat om het uitgegeven element te veranderen op basis van de opgegeven attribuutwaarde van je component. Bijvoorbeeld, je zou een aangepast component een img element kunnen laten uitgeven in bepaalde gevallen en een button element in andere gevallen, waardoor meer complexe gebruikssituaties mogelijk worden.

De voorbeeldconfiguratie hieronder specificeert dat het as attribuut op het my-button component het uitgegeven element kan veranderen 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 laat een img element uitgeven in plaats van de standaard button element omdat het as attribuut het uitvoerelement specificeert:

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

Het uitgegeven img element zal vervolgens gelint worden en als ontbrekend een alt attribuut worden beschouwd.

`exclude`

De exclude optie voorkomt dat overeenkomende bestanden gelint worden. Je kunt wildcards en globs gebruiken. Het gebruik is voornamelijk voor de VS Code extensie of JetBrains-plugin en wordt genegeerd door het REST-eindpunt.

exclude: *.tmp

`global-components`

De global-components configuratie-optie leidt de Axe DevTools Linter hoe je eigen aangepaste componenten of componenten van derden te koppelen aan native HTML-elementen, waardoor je je componenten kunt linten alsof het native HTML-elementen zijn. Bijvoorbeeld, de volgende configuratie zal alle aangepaste DqButton componenten behandelen alsof ze native HTML button elementen zijn. Dit mappt 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, voor componenten die niet alle attributen naar native HTML-componenten toewijzen, kunt u de vereiste attributen voor toegankelijkheidsconformiteit opsommen met behulp van de attributes optie. U kunt attributen die de component ondersteunt opsommen en attributen hernoemen. Er zijn drie speciale waarden:

De aria-* waarde geeft Axe DevTools Linter aan dat alle attributen die beginnen met aria- worden zoals ze zijn toegewezen aan het native HTML-element. Let op dat de waarde eindigt met een asterisk.
De <text> waarde geeft Axe DevTools Linter aan dat een eigenschap wordt gebruikt om de inhoud (de waarde tussen de open- en sluitlabels) van het native HTML-element in te stellen.
De <element> waarde geeft Axe DevTools Linter aan dat het uitgezonden element de waarde van dit attribuut kan aannemen, wat u in staat stelt het uitgezonden element te wijzigen afhankelijk van de waarde van het opgegeven attribuut.

Het volgende YAML-voorbeeld toont alle waarden 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. Camel case, zoals hierboven getoond, wordt vaak gebruikt met .jsx-bestanden, maar kebab case (wat wordt gebruikt in Vue, Angular en HTML-custom elementen) kan ook worden gebruikt.

Voor doorlopen die laten zien hoe je de aangepaste componenttoewijzing gebruikt, zie Linting 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 componentlint van bibliotheken in te schakelen, voegt u de NPM-pakketnaam van de bibliotheek toe aan de global-libraries array voor YAML-configuratiebestanden:

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

note

U moet @mui/material en @deque/cauldron-react citeren 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 per bestand wijzigen hoe Axe DevTools Linter is geconfigureerd door gebruik te maken van de overrides configuratie-optie. Meerdere overschrijvingen op hetzelfde bestand worden in volgorde opgelost. Dat wil zeggen, de laatst genoemde overschrijving 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 toegepast.

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 afzonderlijk toestaan of niet toestaan met behulp van de rules optie in uw configuratie. Elke regel kan worden ingesteld op true (ingeschakeld, gerapporteerd als een fout — de standaardwaarde), 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 wilt gebruiken rules 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 collecties van regels uit te sluiten van verwerking.

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

`tags`

U kunt groepen regels uitsluiten op basis van de WCAG-standaard waarmee ze geassocieerd zijn door gebruik te maken 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 referentie naar de REST API's die door Axe DevTools Linter worden aangeboden, zie De referentie van de Axe DevTools Linter REST API.
Voor doorlopen van het maken van aangepaste componenttoewijzingen, zie Linting van aangepaste componenten.
Om de extensie voor VS Code te downloaden, zie Axe Accessibility Linter.
Voor meer informatie over de JetBrains-plugin, zie De plug-in gebruiken met JetBrains IDE's.