Prüfen benutzerdefinierter Komponenten

Dieser Artikel bietet einen Überblick über die Verwendung von axe DevTools Linter zum Prüfen Ihrer benutzerdefinierten Komponenten.

Wie es funktioniert

Durch die Lintierung benutzerdefinierter Komponenten wird eine benutzerdefinierte Komponente einem vorhandenen Element zugeordnet. Angenommen, Sie haben ein <custom-image> Komponente, die ein \ ausgibt HTML-Element. Sie können in Ihrer Konfiguration eine Zuordnung zwischen custom-image und img erstellen, die axe DevTools Linter anweist, Ihre benutzerdefinierte Komponente zu prüfen, als wäre sie ein img Element. In diesem Fall kann es beispielsweise ein fehlendes alt Attribut erkennen und als Barrierefreiheitsfehler kennzeichnen.

Sie können eine Konfiguration zum Zuordnen von Folgendem erstellen:

• Ihre benutzerdefinierte Komponente zu einem anderen Element
• Die Attribute Ihrer benutzerdefinierten Komponente zu den Attributen des anderen Elements
• Ein Attribut in Ihrer benutzerdefinierten Komponente zum Textinhalt eines Elements (das ist der Textinhalt, der im Element enthalten ist, wie zum Beispiel der Text in Button-Tags : <button> Textinhalt </button>)
• WAI-ARIA Attribute aus Ihrer benutzerdefinierten Komponente mithilfe eines Platzhalterattributs (aria-*), anstatt jedes ARIA-Attribut einzeln anzugeben.

Nächste Schritte

Es gibt zwei exemplarische Vorgehensweisen, die Ihnen den Einstieg in die Lint-Prüfung Ihrer benutzerdefinierten Komponenten erleichtern.

1. Wenn Sie den axe Accessibility Linter für VS Code oder das JetBrains-Plugin verwenden, lesen Sie Linting von benutzerdefinierten Komponenten mit der axe Accessibility Linter-Erweiterung für VS Code oder dem JetBrains-Plugin.
2. Wenn Sie den axe DevTools Linter REST-Endpunkt verwenden, lesen Sie Linting von benutzerdefinierten Komponenten mit dem axe DevTools Linter REST-Endpunkt.

Wenn Sie Informationen zum Linting von React Native-Dateien und benutzerdefinierten React Native-Komponenten wünschen, lesen Sie Verwenden von axe DevTools Linter für React Native.

Informationen zur Unterstützung einiger beliebter benutzerdefinierter Komponentenbibliotheken durch axe DevTools Linter finden Sie unter Vorkonfigurierte Komponentenbibliotheken.

Siehe auch

Informationen zu den vom axe Accessibility Linter für VS Code, dem JetBrains-Plugin und dem REST-Endpunkt verwendeten Konfigurationen finden Sie unter Konfigurieren von axe DevTools Linter .