Vai al contenuto

Verifica accessibilità

Risposta breve

Verifica la pagina renderizzata con le regole WCAG 2.1 A e AA controllabili automaticamente, contrasto dei colori compreso. Ogni problema rimanda al suo criterio WCAG e al requisito dell'Atto europeo sull'accessibilità.

Cosa non fa: Le regole automatiche trovano solo una parte dei problemi WCAG: l’uso da tastiera, il significato, i sottotitoli e molti altri criteri richiedono una persona, quindi il risultato non è mai un verdetto di conformità, e i contenuti costruiti da script possono mancare.

Gratuito · Senza registrazione · Funziona nel browser

Verifica la pagina renderizzata rispetto alle regole WCAG 2.1 di Livello A e AA che un software può controllare.

Viene eseguita nel tuo browser. Per un URL, RankProof recupera l'HTML della pagina; il tuo browser carica poi gli stili e le immagini dal sito per misurare contrasto e layout. Gli script della pagina non vengono eseguiti.

Cosa fa

Visualizza la pagina nel tuo browser e la verifica rispetto alle regole WCAG 2.1 di Livello A e AA che un software è in grado di controllare: il contrasto del colore del testo visualizzato, i nomi di pulsanti, link e campi dei moduli, i testi alternativi delle immagini, le intestazioni e i landmark, l'uso di ARIA e la lingua della pagina, tra gli altri. Ogni problema viene classificato per gravità, mostra gli elementi interessati e cosa correggere, e rimanda al criterio di successo WCAG e al requisito dell'Allegato I dell'Atto europeo sull'accessibilità (Direttiva (UE) 2019/882) a cui è collegato. I controlli che richiedono una verifica umana sono elencati separatamente.

Perché è importante

L'Atto europeo sull'accessibilità si applica dal 28 giugno 2025 a molti prodotti e servizi digitali venduti nell'UE, e ogni stato membro stabilisce e applica le proprie sanzioni. Oltre alla legge, i problemi di accessibilità escludono visitatori reali. Un controllo automatico è il modo più rapido per individuare i problemi più evidenti prima di una revisione manuale.

Come funziona

  1. Inserisci l'URL di una pagina, oppure incolla l'HTML della pagina

  2. RankProof recupera l'HTML; il tuo browser lo visualizza con gli stili e le immagini originali del sito, senza eseguire gli script della pagina

  3. Un motore di regole open source verifica la pagina visualizzata rispetto alle regole WCAG 2.1 A e AA

  4. I problemi vengono restituiti in base alla gravità, con gli elementi interessati, cosa correggere e i riferimenti WCAG ed EAA

Esempio di input e output

INPUT
url: https://rankproof.eu
OUTPUT
Analisi di accessibilità (regole WCAG 2.1 A e AA):

Nessun problema rilevabile dalle regole automatiche

Regole superate: 22 · Da verificare manualmente: 1

Da verificare manualmente
  contrasto dei colori · WCAG 1.4.3 · EAA I.2.c

Come leggere il risultato

Riepilogo (nessun problema su rankproof.eu nell'esempio)
Il numero di problemi e di elementi della pagina coinvolti, oppure una riga che dice che le regole automatiche non hanno trovato nulla. Nell'esempio l'analisi non ha trovato problemi su rankproof.eu. Non è un giudizio di conformità: le regole coprono solo una parte delle WCAG 2.1 AA.
Impatto: critico, grave, moderato, minore
Ogni problema porta la valutazione d'impatto del motore di regole stesso, e i più gravi compaiono per primi. Quelli critici e gravi di solito bloccano o rallentano molto alcuni utenti — un pulsante senza nome, un testo troppo chiaro — quindi parti da lì.
Elementi coinvolti
Sotto ogni problema, gli elementi che non superano la regola, mostrati come HTML, con cosa cambiare. Un problema spesso riguarda molti elementi dello stesso modello, quindi una sola correzione può risolverli tutti.
Riferimenti WCAG ed EAA
Ogni problema collega il criterio di successo WCAG 2.1 verificato e il punto della nostra checklist sull'Atto europeo sull'accessibilità a cui appartiene, che indica la parte della direttiva da cui deriva: per il contrasto dei colori, WCAG 1.4.3 ed EAA I.2.c.
Regole superate (22)
Quante regole sono state applicate a questa pagina senza trovare nulla. Il numero cambia da pagina a pagina: una pagina senza modulo non esegue le regole dei moduli.
Da verificare manualmente (1)
Casi che le regole non sono riuscite a decidere da sole, ad esempio testo su un'immagine. Nell'esempio è il contrasto dei colori (WCAG 1.4.3): per un testo il motore non è riuscito a stabilire lo sfondo, quindi quella coppia va controllata a occhio o con il verificatore di contrasto.
Anteprima
La pagina come il tuo browser l'ha resa per l'analisi, senza eseguirne gli script. Se è quasi vuota, la pagina è probabilmente costruita in JavaScript e lo strumento lo segnala: incolla allora l'HTML già reso.

Chi lo usa

  • Titolare di un'attività nell'UE

    Esegui un controllo di base ora che l'EAA si applica, e scopri quali errori WCAG correggere per primi.

  • Consulente di accessibilità

    Ottieni una prima verifica rapida sulla pagina di un cliente, con i problemi raggruppati per gravità e collegati ai requisiti EAA, prima della revisione manuale.

  • Sviluppatore web

    Ripeti il controllo sulle pagine di staging prima di ogni rilascio, per individuare le regressioni di accessibilità prima che raggiungano la produzione.

Problemi comuni e come risolverli

  1. Immagini senza alternativa testuale (WCAG 1.1.1)

    Dai alle immagini informative un alt che dica cosa mostrano o cosa fanno, e a quelle decorative alt="". Un'immagine dentro un link o un pulsante ha bisogno di un alt che nomini la destinazione o l'azione.

    <img src="/signups.png" alt="Bar chart: sign-ups doubled from March to June">
    <img src="/divider.svg" alt="">
  2. Testo con contrasto insufficiente (WCAG 1.4.3)

    Scurisci il testo o schiarisci lo sfondo finché il testo normale raggiunge 4,5:1 e quello grande 3:1. Cambia il colore nel tema e non sui singoli elementi, così tutti i componenti si adeguano.

    :root {
      --text: #1f2937;       /* 14.7:1 on #ffffff */
      --text-muted: #595959; /*  7.0:1 on #ffffff */
    }
  3. Campi dei moduli senza etichetta (WCAG 1.3.1, 4.1.2)

    Collega a ogni campo un <label> visibile con for e id. Un placeholder non è un'etichetta: sparisce appena si inizia a scrivere.

    <label for="email">Email address</label>
    <input id="email" name="email" type="email" autocomplete="email">
  4. Pulsanti e link senza nome (WCAG 4.1.2, 2.4.4)

    Un pulsante con la sola icona ha bisogno di un'alternativa testuale: testo visibile, alt sulla sua immagine o un aria-label. Il testo di un link deve dire dove porta, non «clicca qui».

    <button type="button" aria-label="Close menu">
      <svg aria-hidden="true" focusable="false">…</svg>
    </button>
  5. Nessuna lingua della pagina (WCAG 3.1.1)

    Imposta lang sull'elemento <html> con la lingua della pagina, perché i lettori di schermo la pronuncino correttamente, e lang su ogni passaggio in un'altra lingua.

    <html lang="en">
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
  6. Ciò che le regole non possono verificare

    Usa solo la tastiera per raggiungere e usare ogni comando, controlla che il focus sia visibile, che i video abbiano i sottotitoli e che i messaggi di errore spieghino come correggere il dato. La lista di controlli manuali nella pagina dei requisiti EAA li raccoglie.

Domande frequenti

Cosa sono le WCAG 2.1?
Le Web Content Accessibility Guidelines 2.1 sono lo standard W3C per l'accessibilità web. Nell'UE, lo standard armonizzato EN 301 549 v3.2.1 applica il Livello AA delle WCAG 2.1 ai contenuti web, motivo per cui questo strumento utilizza le regole 2.1 A e AA.
Cos'è l'Atto europeo sull'accessibilità?
La Direttiva (UE) 2019/882 stabilisce i requisiti di accessibilità per molti prodotti e servizi venduti nell'UE, tra cui e-commerce, servizi bancari ed e-book. Si applica dal 28 giugno 2025.
Cosa non riesce a rilevare un controllo automatico?
Molto. Le regole automatiche individuano solo una parte dei problemi: se il testo alternativo è significativo, se l'ordine di lettura ha senso, se i sottotitoli sono accurati. Il report elenca gli elementi che richiedono una verifica umana, e la pagina dei requisiti EAA include un elenco di controlli manuali. Considera la scansione come primo passo, poi esegui test con una tastiera e uno screen reader.
Verifica il contrasto del colore?
Sì, per il testo su sfondi a tinta unita nella pagina visualizzata. Il testo su immagini o sfumature non può essere misurato automaticamente ed è elencato come elemento che richiede una verifica manuale. Per una singola coppia di colori, usa il Verificatore Contrasto Colori.
Funziona su siti realizzati con JavaScript?
Solo in parte. Gli script della pagina non vengono eseguiti, quindi i contenuti che JavaScript aggiunge dopo il caricamento non compaiono nella scansione. Il report ti avvisa quando una pagina viene visualizzata con pochissimo testo.
Qual è la differenza tra WCAG 2.1 e 2.2?
Le WCAG 2.2 aggiungono nove criteri di successo alle 2.1 e ne rimuovono uno (4.1.1 Parsing). I nuovi criteri di Livello AA includono Focus non oscurato (2.4.11), Movimenti di trascinamento (2.5.7), Dimensione del target (2.5.8) e Autenticazione accessibile (3.3.8). I contenuti web dell'UE sono valutati rispetto alle WCAG 2.1 AA tramite lo standard EN 301 549 v3.2.1.

Fonti

La documentazione su cui si basano questo strumento e le spiegazioni di questa pagina.