Linting di componenti personalizzati

Questo articolo fornisce una panoramica sull'uso di Axe DevTools Linter per eseguire il linting dei tuoi componenti personalizzati.

Come funziona

Il linting dei componenti personalizzati mappa un componente personalizzato in un elemento esistente. Ad esempio, supponiamo che tu abbia un componente <custom-image> che produce un elemento HTML <img>. Puoi creare una mappatura tra custom-image e img nella tua configurazione per indicare ad Axe DevTools Linter di eseguire il linting del tuo componente personalizzato come se fosse un elemento img. In tal caso, può rilevare, ad esempio, un mancante alt attributo e segnalarlo come un errore di accessibilità.

Puoi creare una configurazione per mappare:

• Il tuo componente personalizzato su un altro elemento
• Gli attributi del tuo componente personalizzato sugli attributi dell'altro elemento
• Un attributo nel tuo componente personalizzato al contenuto di testo di un elemento (che è il contenuto di testo contenuto all'interno dell'elemento, come il testo nei tag button: <button> contenuto di testo </button>)
• WAI-ARIA attributi dal tuo componente personalizzato utilizzando un attributo jolly (aria-*) piuttosto che specificare ciascun attributo ARIA individualmente.

Analizzare le violazioni dei componenti personalizzati

Man mano che le configurazioni dei tuoi componenti personalizzati crescono, può essere difficile determinare quali violazioni nei tuoi report di accessibilità derivano dalle mappature dei componenti personalizzati piuttosto che dagli elementi standard HTML. Axe DevTools Linter può aggiungere il nome del componente personalizzato a ciascuna violazione corrispondente nel report, rendendo più facile identificare e analizzare l'impatto delle tue mappature personalizzate.

• Se utilizzi il Connettore Axe DevTools Linter, usa l'opzione --additional-properties customName.
• Se utilizzi il endpoint REST, includi "properties": ["customName"] nel corpo della tua richiesta. Vedi Linting di componenti personalizzati con l'endpoint REST per un esempio.

Prossimi passi

Ci sono due esercitazioni per aiutarti a iniziare il linting dei tuoi componenti personalizzati.

1. Se usi l'Axe Accessibility Linter per VS Code o il plugin JetBrains, vedi Linting di componenti personalizzati con l'estensione Axe Accessibility Linter per VS Code o il plugin JetBrains.
2. Se usi l'endpoint REST di Axe DevTools Linter, vedi Linting di componenti personalizzati con l'endpoint REST di Axe DevTools Linter.

Se desideri informazioni sul linting dei file React Native e sul linting dei componenti personalizzati React Native, vedi Uso di Axe DevTools Linter per React Native.

Per informazioni sul supporto di Axe DevTools Linter per alcune librerie di componenti personalizzati popolari, vedi Librerie di componenti preconfigurate.

Vedi anche

Vedi Configurazione di Axe DevTools Linter per informazioni sulle configurazioni utilizzate da Axe Accessibility Linter per VS Code, il plugin JetBrains e l'endpoint REST.