Linter für benutzerdefinierte Komponenten

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

Funktionsweise

Das Linting benutzerdefinierter Komponenten ordnet eine benutzerdefinierte Komponente einem vorhandenen Element zu. Angenommen, Sie haben eine <custom-image>-Komponente, die ein <img>-HTML-Element ausgibt. Sie können in Ihrer Konfiguration eine Zuordnung zwischen custom-image und img erstellen, die Axe DevTools Linter anweist, Ihre benutzerdefinierte Komponente so zu überprüfen, als wäre es ein img-Element. In diesem Fall kann es beispielsweise ein fehlendes alt-Attribut erkennen und als Barrierefreiheitsfehler markieren.

Sie können eine Konfiguration erstellen, um zuzuordnen:

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

Analyse von Verstößen benutzerdefinierter Komponenten

Wenn Ihre Konfigurationen für benutzerdefinierte Komponenten größer werden, kann es schwierig sein zu bestimmen, welche Verstöße in Ihren Barrierefreiheitsberichten von den Zuordnungen der benutzerdefinierten Komponenten und nicht von standardmäßigen HTML-Elementen stammen. Axe DevTools Linter kann den Namen der benutzerdefinierten Komponente zu jedem übereinstimmenden Verstoß im Bericht hinzufügen, was es einfacher macht, die Auswirkungen Ihrer benutzerdefinierten Zuordnungen zu identifizieren und zu analysieren.

• Wenn Sie den Axe DevTools Linter-Connector verwenden, verwenden Sie die --additional-properties customName-Option.
• Wenn Sie den REST-Endpunkt verwenden, fügen Sie "properties": ["customName"] in Ihren Anfragekörper ein. Siehe Linting benutzerdefinierter Komponenten mit dem REST-Endpunkt für ein Beispiel.

Nächste Schritte

Es gibt zwei Anleitungen, die Ihnen helfen, mit dem Linting Ihrer benutzerdefinierten Komponenten zu beginnen.

1. Wenn Sie den Axe Accessibility Linter für VS Code oder das JetBrains-Plugin verwenden, siehe Linting benutzerdefinierter 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, siehe Linting benutzerdefinierter Komponenten mit dem Axe DevTools Linter REST-Endpunkt.

Wenn Sie Informationen über das Linting von React Native-Dateien und das Linting benutzerdefinierter React Native-Komponenten wünschen, siehe Verwendung von Axe DevTools Linter für React Native.

Für Informationen über die Unterstützung von Axe DevTools Linter für einige beliebte benutzerdefinierte Komponentenbibliotheken, siehe Vorkonfigurierte Komponentenbibliotheken.

Siehe auch

Siehe Konfiguration von Axe DevTools Linter für Informationen über die Konfigurationen, die vom Axe Accessibility Linter für VS Code, dem JetBrains-Plugin und dem REST-Endpunkt verwendet werden.