Vorkonfigurierte Komponentenbibliotheken

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

Erörtert vordefinierte Zuordnungen für mehrere beliebte Komponentenbibliotheken im Axe DevTools Linter

Not for use with personal data

Axe DevTools Linter bietet integrierte Unterstützung für mehrere beliebte Komponentenbibliotheken. Wenn aktiviert, wird die Verwendung der Komponenten dieser Bibliotheken auf Barrierefreiheit getestet, genauso wie native HTML-Elemente.

Einführung

Die Komponenten, die von den folgenden Paketen definiert sind, werden derzeit unterstützt:

NPM-Paketname	Weitere Informationen
@deque/cauldron-react	Cauldron React: Barrierefreie Komponentenbibliothek
@mui/material	Material UI
react-native	React Native

note

Die vorkonfigurierte Komponentenbibliothek für Material UI umfasst nicht alle in Material UI definierten Komponenten; sie umfasst nur diejenigen, die im @mui/material-Paket definiert sind.

Um die Bibliothekskomponentenüberprüfung zu aktivieren, fügen Sie den NPM-Paketnamen der Bibliothek dem global-libraries-Array in Ihrem axe-linter.yml-Datei hinzu:

global-libraries:
  - '@mui/material'

important

In YAML müssen Zeichenfolgen, die mit @ beginnen, in Anführungszeichen eingeschlossen werden, da @ ein reserviertes Zeichen ist.

Oder die äquivalente JSON-Konfiguration (für den REST-Dienst) wird unten gezeigt:

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

Jede Komponente mit demselben Namen wie eine Komponente aus der globalen Bibliothek wird als diese Bibliothekskomponente behandelt, was das Wiederexportieren und Neudeklarieren von Komponenten ermöglicht, ohne deren Zuordnung zu verlieren.

Cauldron React

Cauldron React Version 4.7.0 und neuer wird derzeit unterstützt.

Cauldron React-Konfiguration

Um die Cauldron-Zuordnungen mit der Axe Accessibility Linter-Erweiterung für VS Code oder der JetBrains-Plugin zu verwenden, fügen Sie die folgenden Zeilen in Ihre axe-linter.yml-Datei ein:

global-libraries:
  - '@deque/cauldron-react'

Cauldron-Beispiel

Das folgende Beispiel zeigt ein Cauldron-Button-Element ohne Textinhalt, was einen Barrierefreiheitsfehler darstellt:

<Button></Button>

In Ihrer IDE (VS Code wird angezeigt), nachdem Sie die Cauldron-Bibliothek in Ihrer Konfiguration aktiviert haben, sehen Sie einen Fehler wie den folgenden:

Material UI

Material UI Version 5.11.15 und neuer wird derzeit unterstützt.

note

Die vordefinierten Zuordnungen umfassen nur die im @mui/material-Paket definierten Komponenten, nicht alle in Material UI definierten Komponenten.

Material UI-Konfiguration

Um die Material UI-Zuordnungen mit der Axe Accessibility Linter-Erweiterung für VS Code oder der JetBrains-Plugin zu verwenden, fügen Sie die folgenden Zeilen in Ihre axe-linter.yml-Datei ein:

global-libraries:
  - '@mui/material'

Material UI-Beispiel

Das folgende Beispiel zeigt einen Barrierefreiheitsfehler, bei dem aria-colindex fälschlicherweise mit der Material UI-Komponente ImageList verwendet wird: