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

Linten van aangepaste componenten koppelt een aangepaste component aan een bestaand element. Stel dat je een <custom-image> component hebt dat een <img> HTML-element uitvoert. Je kunt een koppeling maken tussen custom-image en img in je configuratie die aangeeft dat Axe DevTools Linter je aangepaste component moet 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 aan de tekstinhoud van een element (wat de tekstinhoud is 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 op te geven.

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 de --additional-properties customName optie.
• Als je de REST-eindpuntgebruikt, voeg "properties": ["customName"] toe aan je request body. 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 dan 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 React Native custom componenten, zie dan Het Gebruik van Axe DevTools Linter voor React Native.

Voor informatie over de ondersteuning van Axe DevTools Linter voor enkele populaire custom componentbibliotheken, zie dan 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.