Informazioni su Axe DevTools Linter

Che cos'è il Linting?

Il linting è il processo automatizzato di analisi del codice sorgente per trovare problemi prima di eseguirlo. Un linter è un strumento che legge il tuo codice e segnala problemi, da errori di sintassi e refusi a incoerenze stilistiche e potenziali bug.

Il termine deriva da uno strumento Unix chiamato lint, che originariamente controllava i programmi C alla ricerca di costrutti sospetti. Oggi, i linters esistono per praticamente ogni linguaggio di programmazione e servono come prima linea di difesa nella qualità del codice.

Pensa a un linter come a un correttore ortografico per il codice, tranne per il fatto che, invece di rilevare solo i refusi, individua anche errori logici, applica le regole di stile e ti avverte su modelli che potrebbero causare bug.

Che cos'è un Accessibility Linter?

Un accessibility linter controlla le pratiche potenzialmente dannose per l'accessibilità, fornendo feedback durante lo sviluppo piuttosto che dopo che il tuo sito web o applicazione è costruito e funzionante.

Cosa fa Axe DevTools Linter

Axe DevTools Linter esegue un'analisi statica dei tuoi file sorgente. Legge il tuo codice e lo confronta con regole di Deque per identificare modelli che potrebbero causare problemi di accessibilità. Ad esempio, può rilevare:

• Immagini senza testo alternativo
• Campi di input del modulo senza etichette
• Attributi ARIA errati o mancanti
• Problemi nella struttura dei titoli

Poiché analizza il codice sorgente anziché un'applicazione in esecuzione, Axe DevTools Linter può intercettare questi problemi in anticipo, prima che il codice venga unito, distribuito o addirittura compilato.

Questi controlli non sono limitati agli elementi HTML nativi. La maggior parte dei team costruisce interfacce a partire da un sistema di design o dalla propria libreria di componenti, e Axe DevTools Linter può controllare anche questi componenti. Vedi Linting dei Tuoi Componenti qui sotto.

Cosa non può fare Axe DevTools Linter

Poiché Axe DevTools Linter è uno strumento di analisi statica, non può:

• Testare il comportamento di runtime della tua applicazione, come contenuti caricati dinamicamente o modifiche dell'interfaccia utente guidate da JavaScript.
• Rilevare ogni problema di accessibilità; l'analisi statica copre solo un sottoinsieme di difetti rilevabili e alcuni problemi richiedono test nel browser o revisioni manuali.
• Sostituire test manuali di accessibilità o strumenti basati sul browser.
• Controlla il markup incorporato in un file di un tipo diverso. Vedi Tecnologie supportate qui sotto.

Tecnologie supportate

Axe DevTools Linter può controllare i seguenti tipi di file:

Linting dei Tuoi Componenti

I file sorgente in un moderno codebase raramente contengono molto HTML puro. Il markup è scritto in termini di un sistema di design o di una libreria di componenti interna, quindi un file sorgente contiene <DqButton> o <custom-image> dove il browser alla fine riceve un <button> o un <img>. Un linter che comprendesse solo elementi nativi avrebbe ben poco da esaminare.

Axe DevTools Linter controlla questi componenti una volta che gli hai detto come ciascuno mappa a un elemento HTML nativo. Una mappatura è composta da poche linee di configurazione, e può:

• Mappare il tuo componente a un elemento nativo.
• Mappare gli attributi del tuo componente agli attributi di quell'elemento, incluso rinominarli.
• Trasformare uno degli attributi del tuo componente nel contenuto testuale dell'elemento.
• Passare attraverso ogni attributo ARIA con un singolo carattere jolly anziché elencare ciascuno di essi.
• Scegliere quale elemento emettere basato sul valore di un attributo, per componenti che si renderizzano diversamente in situazioni diverse.

Una volta che esiste una mappatura, le regole di accessibilità che si applicano all'elemento nativo si applicano al tuo componente. Un <DqButton> mappato a <button> deve avere un nome accessibile; un <custom-image> mappato a <img> deve avere un testo alternativo.

Deque fornisce mappature preconfigurate per alcune librerie di componenti ampiamente utilizzate, quindi a seconda di cosa costruisci, potresti non avere bisogno di scrivere tu stesso le mappature.

Per iniziare, leggi Linting dei Componenti Personalizzati per una panoramica, quindi segui il walkthrough per VS Code e JetBrains o l'endpoint REST. Librerie di Componenti Preconfigurate elenca le librerie di cui Axe DevTools Linter è già a conoscenza.

Modi per usare Axe DevTools Linter

Axe DevTools Linter può essere utilizzato in vari modi a seconda del tuo flusso di lavoro:

Estensioni IDE forniscono feedback in tempo reale mentre scrivi il codice. La estensione VS Code (disponibile anche per IDE compatibili con VS Code come Cursor e Windsurf) e plugin JetBrains (WebStorm e IntelliJ IDEA Ultimate) indicano problemi di accessibilità direttamente nel tuo editor durante la digitazione.

Il Connettore è uno strumento da riga di comando per l'intercalate di file in batch, in script, o come parte di una pipeline CI/CD. Vedi Utilizzo del Connettore Axe DevTools Linter.

L'Azione GitHub verifica i file che sono stati modificati in una pull request e segnala problemi di accessibilità. Vedi L'Azione GitHub di Axe DevTools Linter.

Altre integrazioni CI/CD comprendono Jenkins, SonarQube e hook pre-commit Git.

Dove Avviene l'Analisi

Linting locale: L'estensione per VS Code, il plugin JetBrains e il Connettore (con l'opzione --local) eseguono l'analisi dell'accessibilità sul tuo computer. I contenuti dei file non lasciano mai il tuo computer.

Linting basato su server: Il Connettore può anche inviare i tuoi file a un server Axe DevTools Linter per l'analisi. Questo è l'approccio utilizzato dall'azione GitHub. Ci sono due opzioni per il server:

• SaaS ospitato da Deque: Il server cloud di Deque. Richiede una chiave API; nessuna configurazione del server necessaria.
• On-premises: Un server che gestisci nella tua infrastruttura. Vedi Installazione e Sicurezza.

Per consigli su come scegliere tra un'intercalate locale e basata su server con il Connettore, vedi Linting Locale.

Panoramica della Documentazione

Scegliere la Giusta Configurazione di Axe DevTools Linter ti aiuta a decidere quale modello di distribuzione, integrazioni e configurazione si adattano al flusso di lavoro del tuo team.

Ottenere una Chiave API di Axe DevTools Linter SaaS ti mostra come ottenere una chiave per accedere al servizio di intercalate basato su cloud di Deque.

Regole di Accessibilità elenca tutte le regole che Axe DevTools Linter verifica, con link a informazioni dettagliate su Deque University.

Configurazione di Axe DevTools Linter copre le opzioni di configurazione disponibili nell'estensione VS Code, nel plugin JetBrains, nel Connettore Axe DevTools Linter e nell'endpoint API REST /lint-source.

Installazione e Sicurezza contiene articoli sull'installazione del server on-premises e sulla sua protezione con NGINX come proxy inverso.

Utilizzo di Axe DevTools Linter copre le varie integrazioni: il plugin JetBrains, estensione VS Code, Connettore CLI, GitHub Action, hook pre-commit, Jenkins e SonarQube.

Linting dei Componenti Personalizzati discute il supporto di Axe DevTools Linter per componenti personalizzati, con guide per utenti di VS Code e JetBrains e utenti di endpoint REST, oltre a un articolo su librerie di componenti preconfigurati.

Sviluppo con le API REST descrive come accedere a Axe DevTools Linter tramite interfaccia REST.

Crediti fornisce attribuzione e informazioni di licenza per il software di terze parti utilizzato da Axe DevTools Linter.

---

Note: It is never necessary to use Deque's software or services in a way that collects, stores, or shares personal data. Do not use the software or services in a manner that collects, stores, or shares personal data.