Linten van Aangepaste Componenten

Dit artikel geeft een overzicht van het gebruik van Axe DevTools Linter om je aangepaste componenten te linten.

Hoe Het Werkt

Aangepaste componentenslinting mapt een aangepaste component naar een bestaand element. Stel bijvoorbeeld dat je een <custom-image> component hebt die een <img> HTML-element genereert. Je kunt een mapping maken tussen custom-image en img in je configuratie die Axe DevTools Linter vertelt om je aangepaste component te linten alsof het een img element is. In dat geval kan het bijvoorbeeld een ontbrekende alt attribuut detecteren en dat als een toegankelijkheidsfout markeren.

Je kunt een configuratie maken om te koppelen:

• Je aangepaste component aan een ander element
• De attributen van je aangepaste component aan de attributen van het andere element
• Een attribuut in je aangepaste component naar de tekstinhoud van een element (de tekstinhoud binnen het element zoals de tekst binnen button tags: <button> tekstinhoud </button>)
• WAI-ARIA attributen van je aangepaste component met een wildcard-attribuut (aria-*) in plaats van elk ARIA-attribuut afzonderlijk te specificeren.

Analyseren van Overtredingen van Aangepaste Componenten

Naarmate je configuraties voor aangepaste componenten toenemen, kan het moeilijk zijn om te bepalen welke overtredingen in je toegankelijkheidsrapporten voortkomen uit koppelingen van aangepaste componenten in plaats van standaard HTML-elementen. Axe DevTools Linter kan de naam van de aangepaste component toevoegen aan elke overeenkomende overtreding in het rapport, waardoor het gemakkelijker wordt om de impact van je aangepaste koppelingen te identificeren en te analyseren.

• Als je de Axe DevTools Linter Connector gebruikt, gebruik dan de --additional-properties customName optie.
• Als je de REST-eindpunt gebruikt, neem dan "properties": ["customName"] op in je aanvraaglichaam. Zie Linten van Aangepaste Componenten met het REST-eindpunt voor een voorbeeld.

Volgende Stappen

Er zijn twee handleidingen om je te helpen beginnen met het linten van je aangepaste componenten.

1. Als je de Axe Accessibility Linter voor VS Code of de JetBrains-plugin gebruikt, zie Linten van Aangepaste Componenten met de Axe Accessibility Linter-extensie voor VS Code of de JetBrains-plugin.
2. Als je de Axe DevTools Linter REST-endpoint gebruikt, zie Custom Componenten Linters met de Axe DevTools Linter REST-endpoint.

Als je informatie wilt over het linten van React Native-bestanden en het linten van aangepaste React Native-componenten, zie Het Gebruik van Axe DevTools Linter voor React Native.

Voor informatie over de ondersteuning van Axe DevTools Linter voor enkele populaire bibliotheken voor aangepaste componenten, zie Vooraf Geconfigureerde Componentbibliotheken.

Zie Ook

Zie Configureren van Axe DevTools Linter voor informatie over de configuraties die worden gebruikt door de Axe Accessibility Linter voor VS Code, de JetBrains-plugin en de REST-endpoint.