ACCESSIBILE — verifica di accessibilità per siti italiani · fatto in Italia

Report di esempio — scansione reale, pubblicata a scopo dimostrativo. Il tuo report avrà questa stessa forma.

Rapporto di verifica dell'accessibilità

https://it.wikipedia.org/wiki/Pagina_principale · 14 luglio 2026

Riferimenti: European Accessibility Act (Dir. UE 2019/882) · D.Lgs. 82/2022 · EN 301 549 · WCAG 2.1 AA

0/ 100

Criticità gravi e diffuse: il sito richiede una remediation completa.

Questo rapporto tecnico non costituisce una dichiarazione di conformità né un parere legale: la piena conformità richiede anche le verifiche manuali elencate nella matrice di copertura.

1. Violazioni rilevate dalla scansione automatica (axe-core 4.12.1)

Critico Le immagini devono avere un testo alternativo

Assicurati che gli elementi <img> abbiano un testo alternativo o un ruolo none o presentation (8 elementi · regola image-alt)

Riferimento normativo: WCAG 2.1 — 1.1.1 Contenuti non testuali (livello A) · EN 301 549 §9.1.1.1 · D.Lgs. 82/2022

<img src="//upload.wikimedia.o..." decoding="async" width="35" height="35" class="mw-file-element" srcset="//upload.wikimedia.o..." data-file-width="500" data-file-height="500">
<img src="//upload.wikimedia.o..." decoding="async" width="35" height="35" class="mw-file-element" srcset="//upload.wikimedia.o..." data-file-width="500" data-file-height="500">

Grave Gli elementi <dl> devono contenere direttamente solo gruppi <dt> e <dd> ordinati correttamente, <script>, <template> o elementi <div>

Assicurati che gli elementi <dl> siano strutturati correttamente (4 elementi · regola definition-list)

Riferimento normativo: WCAG 2.1 — 1.3.1 Informazioni e correlazioni (livello A) · EN 301 549 §9.1.3.1 · D.Lgs. 82/2022

<dl><dt><a rel="mw:WikiLink" href="//it.wikipedia.org/wiki/L'arte_della_fuga" title="L'arte della fuga">Leggi la voce</a> · <a rel="mw:WikiLink" href="//it.wikipedia.org/wiki/Wikipedia:Vetrina" title="Wikipedia:Vetrina">Tutte le voci in vetrina</a></dt></dl>
<dl>

Grave I collegamenti devono essere distinguibili senza fare affidamento sul colore

Assicurati che i collegamenti siano distinguibili dal testo circostante in un modo che non si basa sul colore (1 elementi · regola link-in-text-block)

Riferimento normativo: WCAG 2.1 — 1.4.1 Uso del colore (livello A) · EN 301 549 §9.1.4.1 · D.Lgs. 82/2022

<a rel="mw:WikiLink" href="//it.wikipedia.org/wiki/Caledonian_MacBrayne?action=edit&redlink=1" title="Caledonian MacBrayne (la pagina non esiste)" class="new" typeof="mw:LocalizedAttrs" data-mw-i18n="{"title":{"lang":"x-page","key":"red-link-title","params":["

Grave I collegamenti devono avere un testo distinguibile

Assicurati che i collegamenti abbiano un testo distinguibile (8 elementi · regola link-name)

Riferimento normativo: WCAG 2.1 — 2.4.4 Scopo del collegamento (nel contesto) (livello A) · EN 301 549 §9.2.4.4 · D.Lgs. 82/2022 — inoltre: WCAG 2.1 — 4.1.2 Nome, ruolo, valore (livello A) · EN 301 549 §9.4.1.2 · D.Lgs. 82/2022

<a href="https://cinquepermille.wikimedia.it/?mtm_campaign=5x1000_2026&mtm_kwd=sitenotice&mtm_source=banner" rel="nofollow">
<a href="https://cinquepermille.wikimedia.it/?mtm_campaign=5x1000_2026&mtm_kwd=sitenotice&mtm_source=banner" rel="nofollow">

Moderato La pagina dovrebbe contenere un'intestazione di livello uno

Assicurati che la pagina, o almeno uno dei suoi frame, contenga un'intestazione di livello uno (1 elementi · regola page-has-heading-one)

Riferimento normativo: Best practice di accessibilità (non vincolante ai fini EAA, consigliata)

<html class="client-js vector-fea..." lang="it" dir="ltr">

Moderato Tutti i contenuti della pagina dovrebbero essere contenuti nei landmark

Assicurati che tutti i contenuti della pagina siano contenuti nei landmark (2 elementi · regola region)

Riferimento normativo: Best practice di accessibilità (non vincolante ai fini EAA, consigliata)

<div id="centralNotice" data-nosnippet="" class="cn-wle_2026_it">
<div class="mw-dismissable-notice">

Minore Il ruolo ARIA deve essere appropriato per l'elemento

Assicurati che il valore dell'attributo role sia appropriato per l'elemento (3 elementi · regola aria-allowed-role)

Riferimento normativo: Best practice di accessibilità (non vincolante ai fini EAA, consigliata)

<input type="checkbox" id="vector-main-menu-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-main-menu-dropdown" class="vector-dropdown-checkbox " aria-label="Menu principale">
<input type="checkbox" id="vector-page-tools-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-tools-dropdown" class="vector-dropdown-checkbox " aria-label="Strumenti">

Controlli automatici non conclusivi

Axe non è riuscito a determinare l'esito dei seguenti controlli, da verificare manualmente:

2. Valutazione qualitativa (AI)

Valutazione complessiva: La pagina principale di Wikipedia in italiano presenta una struttura semantica complessivamente riconoscibile, ma soffre di problemi significativi nella qualità dei testi alternativi: molte immagini informative, in particolare i loghi dei progetti Wikimedia fratelli, sono prive di alt o hanno alt inutili. La gerarchia dei titoli è compromessa dalla duplicazione di sezioni H2 con testo identico, e diversi link risultano privi di testo accessibile. Si tratta di una pagina con alta complessità strutturale che richiederebbe una revisione sistematica degli attributi alt e dei testi dei link per raggiungere la conformità WCAG 2.1 AA.

Alta Testi alternativi assenti o inutili su immagini informative WCAG 1.1.1

Numerose immagini informative hanno alt null (es. loghi di Commons, Wikiquote, Wikispecies, Wikidata, Wikivoyage, la foto di Durruti, la foto di Belcastel) oppure alt composto da un singolo spazio (' '), che non trasmette alcuna informazione. I loghi dei progetti Wikimedia sono funzionali e richiedono un testo alternativo descrittivo.

Cosa fare: Assegnare a ciascuna immagine informativa un alt che ne descriva il contenuto o la funzione (es. 'Logo Wikimedia Commons', 'Jose Buenaventura Durruti, 1936'). Le immagini puramente decorative devono avere alt="" e non alt=' '.

Media Testi alternativi con istruzioni d'uso invece di descrizione del contenuto WCAG 1.1.1

Tre icone hanno alt del tipo 'Clicca qui per sfogliare l'indice delle voci!', 'Clicca qui per consultare il sommario dei vari argomenti!', 'Clicca qui per navigare tra i portali tematici!'. Questi testi descrivono l'azione anziché il contenuto dell'immagine, e duplicano il testo del link adiacente, creando ridondanza per gli screen reader.

Cosa fare: Poiché le icone sono all'interno di link che già contengono testo descrittivo, renderle decorative con alt="". Se il link non avesse testo, usare un alt sintetico che descriva l'icona, non l'azione.

Media Alt con nome file per logo WLE Austria WCAG 1.1.1

L'immagine del concorso Wiki Loves Earth ha alt='WLE Austria Logo (no text).svg', che è il nome del file e non una descrizione utile del contenuto o del contesto in cui appare l'immagine.

Cosa fare: Sostituire con un alt descrittivo del contesto, ad esempio 'Logo Wiki Loves Earth' oppure, se l'immagine è decorativa rispetto al testo del banner, impostare alt="".

Alta Link senza testo accessibile WCAG 2.4.4

Diversi link hanno testo vuoto o nullo (testo: '', null) e nessun ariaLabel, come rilevato anche da axe. Tra questi figurano link nella barra di notifica e link associati a immagini senza alt. Un utente di screen reader non può capire la destinazione di questi link.

Cosa fare: Aggiungere un testo visibile o un aria-label descrittivo a ogni link privo di testo. Per i link che contengono solo un'immagine, assicurarsi che l'immagine abbia un alt significativo.

Media Gerarchia dei titoli duplicata e incoerente WCAG 1.3.1

La struttura dei titoli mostra H2 ripetuti con lo stesso testo ('Wikipedia', 'Cosa posso fare?', 'Chi fa Wikipedia?'), probabilmente per via di due colonne o versioni della stessa sezione rese in HTML sequenziale. Questo crea confusione nella navigazione per titoli e non riflette la struttura logica della pagina.

Cosa fare: Rivedere la struttura HTML in modo che ogni sezione logica abbia un titolo unico. Se le sezioni duplicate sono varianti responsive, nascondere quella non attiva agli screen reader con aria-hidden o gestirle con CSS senza duplicare il markup semantico.

Media H1 non percepito correttamente dagli strumenti automatici WCAG 1.3.1

Axe segnala l'assenza di un H1, nonostante nell'estratto sia presente 'Pagina principale' come H1. Ciò suggerisce che l'H1 potrebbe essere nascosto visivamente o implementato in modo non standard, rendendolo non rilevabile dagli strumenti di analisi e potenzialmente dagli screen reader.

Cosa fare: Verificare che l'H1 'Pagina principale' sia un elemento HTML nativo visibile e non mascherato da CSS o ARIA in modo improprio. L'H1 deve essere il primo titolo della pagina e descrivere chiaramente il contenuto principale.

Media Campo di ricerca duplicato senza aria-label nel secondo WCAG 3.3.2

La pagina contiene due campi di ricerca con name='search': il primo ha ariaLabel='Cerca in Wikipedia', il secondo ha ariaLabel null. Il secondo campo (probabilmente nella versione mobile o in un secondo form) non è etichettato, rendendo inaccessibile il campo per gli utenti di tecnologie assistive.

Cosa fare: Aggiungere aria-label='Cerca in Wikipedia' anche al secondo campo di ricerca, oppure associarlo a un elemento <label> visibile.

Bassa Testo visibile con codice JavaScript nel flusso della pagina WCAG 1.3.1

Nel testo visibile della pagina è presente codice JavaScript grezzo (la funzione che inietta il banner dismissibile), che appare nel flusso testuale prima del rendering. Questo può essere letto dagli screen reader come testo privo di senso.

Cosa fare: Assicurarsi che gli script inline non producano testo leggibile nel DOM prima della loro esecuzione. Utilizzare noscript o posizionare gli script in modo che non interferiscano con il contenuto testuale accessibile.

3. Copertura normativa — WCAG 2.1 A/AA, criterio per criterio

7 non conformi
1 da verificare
8 senza problemi rilevati
4 non applicabili
30 solo con verifica manuale

Nessuno strumento automatico può verificare da solo tutti i criteri richiesti dalla normativa: questa matrice dichiara, per ognuno dei 50 criteri WCAG 2.1 A/AA richiamati dalla EN 301 549 (e quindi dal D.Lgs. 82/2022), come è stato verificato (axe-core 4.12.1, checklist AI, checklist manuale) e cosa resta da controllare a mano. È la parte del rapporto difendibile davanti a un auditor.

CriterioEsitoVerificaVerifica manuale residua
1.1.1 Contenuti non testuali (A) Non conforme
regole: image-alt
AI: Numerose immagini informative hanno alt null, alt con nome file o alt=' ' (spazio singolo), e alcune icone hanno alt che descrivono l'azione anziché il contenuto; i loghi dei progetti Wikimedia fratelli sono tutti privi di testo alternativo.
automatico + AI + manuale Controllare che ogni immagine informativa abbia un testo alternativo che ne trasmetta la funzione (non il nome del file) e che le immagini decorative siano marcate come tali.
1.2.1 Solo audio e solo video (preregistrati) (A) Richiede verifica manuale manuale Individuare contenuti solo-audio o solo-video preregistrati (podcast, animazioni mute) e verificare che esista un'alternativa testuale equivalente.
1.2.2 Sottotitoli (preregistrati) (A) Non applicabile automatico + manuale Riprodurre i video preregistrati e verificare la presenza e la correttezza dei sottotitoli (inclusi i dialoghi e i suoni rilevanti).
1.2.3 Audiodescrizione o tipo di media alternativo (preregistrati) (A) Richiede verifica manuale manuale Per i video preregistrati, verificare che esista un'audiodescrizione o un'alternativa testuale completa delle informazioni visive.
1.2.4 Sottotitoli (in diretta) (AA) Richiede verifica manuale manuale Se il sito trasmette dirette (webinar, streaming), verificare che siano sottotitolate in tempo reale.
1.2.5 Audiodescrizione (preregistrata) (AA) Richiede verifica manuale manuale Per i video preregistrati, verificare l'audiodescrizione delle informazioni trasmesse solo visivamente.
1.3.1 Informazioni e correlazioni (A) Non conforme
regole: definition-list
AI: La gerarchia dei titoli presenta H2 duplicati con testo identico, l'H1 non viene rilevato correttamente dagli strumenti automatici, e axe segnala problemi con le liste di definizione e contenuti fuori dai landmark.
automatico + AI + manuale Verificare che struttura e relazioni visive (titoli, elenchi, tabelle, gruppi di campi) siano espresse anche nel codice: navigare la pagina con uno screen reader.
1.3.2 Sequenza significativa (A) Richiede verifica manuale manuale Con lo screen reader o disattivando i CSS, verificare che l'ordine di lettura del contenuto resti comprensibile.
1.3.3 Caratteristiche sensoriali (A) Richiede verifica manuale manuale Cercare istruzioni che si basino solo su forma, posizione o colore ("premi il pulsante rotondo a destra") e verificare che esista un riferimento testuale.
1.3.4 Orientamento (AA) Richiede verifica manuale manuale Ruotare lo schermo (o ridimensionare la finestra) e verificare che i contenuti funzionino sia in verticale sia in orizzontale.
1.3.5 Identificare lo scopo degli input (AA) Nessun problema rilevato automatico + manuale Nei form che raccolgono dati dell'utente, verificare che i campi comuni (nome, email, indirizzo) abbiano l'attributo autocomplete corretto.
1.4.1 Uso del colore (A) Non conforme
regole: link-in-text-block
automatico + manuale Verificare che nessuna informazione sia veicolata dal solo colore (es. errori di form indicati solo in rosso, link distinti solo dal colore).
1.4.2 Controllo del sonoro (A) Non applicabile automatico + manuale Se un audio parte automaticamente per più di 3 secondi, verificare che esista un comando per fermarlo o regolarne il volume.
1.4.3 Contrasto (minimo) (AA) Da verificare automatico + manuale Verificare a campione il contrasto di testi su immagini, gradienti e stati hover/focus, che gli strumenti automatici non sempre misurano.
1.4.4 Ridimensionamento del testo (AA) Nessun problema rilevato automatico + manuale Impostare lo zoom del browser al 200% e verificare che testo e funzioni restino utilizzabili senza perdita di contenuto.
1.4.5 Immagini di testo (AA) Richiede verifica manuale manuale Cercare testo renderizzato come immagine (loghi esclusi) e verificare che sia sostituibile con testo reale.
1.4.10 Ricalcolo del flusso (reflow) (AA) Richiede verifica manuale manuale Ridurre la finestra a 320px di larghezza (o zoom 400%) e verificare che non compaia scorrimento orizzontale e che nulla si perda.
1.4.11 Contrasto in contenuti non testuali (AA) Richiede verifica manuale manuale Verificare il contrasto (≥3:1) di componenti di interfaccia e grafici informativi: bordi dei campi, icone, stati del focus.
1.4.12 Spaziatura del testo (AA) Nessun problema rilevato automatico + manuale Aumentare la spaziatura del testo (interlinea 1.5, spaziatura lettere 0.12em) con uno stylesheet utente e verificare che nulla si sovrapponga o scompaia.
1.4.13 Contenuto con hover o focus (AA) Richiede verifica manuale manuale Verificare che tooltip e menu che compaiono al passaggio del mouse o al focus siano richiudibili (Esc), raggiungibili col puntatore e persistenti.
2.1.1 Tastiera (A) Nessun problema rilevato automatico + manuale Percorrere TUTTO il sito solo con la tastiera (Tab, Invio, frecce): ogni funzione raggiungibile col mouse deve esserlo anche da tastiera.
2.1.2 Nessun impedimento all'uso della tastiera (A) Richiede verifica manuale manuale Verificare che il focus di tastiera non resti mai intrappolato in un componente (es. modali, player, widget di terze parti).
2.1.4 Tasti di scelta rapida composti da caratteri (A) Richiede verifica manuale manuale Se esistono scorciatoie a tasto singolo, verificare che si possano disattivare o rimappare.
2.2.1 Regolazione tempi di esecuzione (A) Non applicabile automatico + manuale Individuare limiti di tempo (sessioni, carrelli, slideshow) e verificare che l'utente possa estenderli o disattivarli.
2.2.2 Pausa, stop, nascondi (A) Non applicabile automatico + manuale Per contenuti in movimento o auto-aggiornanti (caroselli, ticker), verificare che esista un comando pausa/stop.
2.3.1 Tre lampeggiamenti o inferiore alla soglia (A) Richiede verifica manuale manuale Verificare che nessun contenuto lampeggi più di 3 volte al secondo (video, animazioni, GIF).
2.4.1 Salto di blocchi (A) Nessun problema rilevato automatico + manuale Verificare con la tastiera che esista un meccanismo per saltare i blocchi ripetuti (skip link funzionante, landmark corretti).
2.4.2 Titolazione della pagina (A) Nessun problema rilevato
AI: Il titolo della pagina 'Wikipedia, l'enciclopedia libera' è descrittivo e identifica chiaramente il sito e la pagina principale.
automatico + AI + manuale Verificare che il titolo di OGNI pagina ne descriva argomento o funzione (non un titolo generico uguale ovunque).
2.4.3 Ordine del focus (A) Richiede verifica manuale manuale Navigare con Tab e verificare che l'ordine del focus segua la logica visiva della pagina.
2.4.4 Scopo del collegamento (nel contesto) (A) Non conforme
regole: link-name
AI: Diversi link hanno testo vuoto o null senza aria-label compensativo, rendendo impossibile comprenderne la destinazione fuori contesto; axe conferma 8 link senza nome distinguibile.
automatico + AI + manuale Leggere i testi dei link fuori contesto: devono far capire la destinazione (no "clicca qui" ripetuti).
2.4.5 Differenti modalità (AA) Richiede verifica manuale manuale Verificare che le pagine siano raggiungibili in più modi (menu + ricerca, o mappa del sito).
2.4.6 Intestazioni ed etichette (AA) Non conforme
AI: I titoli di sezione sono in parte duplicati ('Wikipedia', 'Cosa posso fare?', 'Chi fa Wikipedia?' appaiono due volte), riducendo la loro utilità come etichette descrittive per la navigazione.
AI + manuale Verificare che titoli di sezione ed etichette dei campi descrivano davvero il contenuto o la funzione.
2.4.7 Focus visibile (AA) Richiede verifica manuale manuale Navigare con Tab e verificare che l'elemento con il focus sia SEMPRE visibilmente evidenziato.
2.5.1 Movimenti del puntatore (A) Richiede verifica manuale manuale Se esistono gesti complessi (pinch, swipe a due dita), verificare che esista un'alternativa a puntatore singolo.
2.5.2 Cancellazione delle azioni del puntatore (A) Richiede verifica manuale manuale Verificare che le azioni si completino al rilascio del clic/tocco (possibilità di annullare trascinando fuori).
2.5.3 Etichetta nel nome (A) Richiede verifica manuale manuale Per i controlli con etichetta visibile, verificare che il nome accessibile contenga il testo visibile (importante per i comandi vocali).
2.5.4 Azionamento da movimento (A) Richiede verifica manuale manuale Se funzioni si attivano col movimento del dispositivo (scuotere, inclinare), verificare alternativa da interfaccia e possibilità di disattivazione.
3.1.1 Lingua della pagina (A) Nessun problema rilevato
AI: L'attributo lang='it' corrisponde alla lingua principale del contenuto, che è effettivamente in italiano.
automatico + AI + manuale Verificare che la lingua dichiarata nel codice (attributo lang) corrisponda alla lingua reale dei contenuti.
3.1.2 Parti in lingua (AA) Nessun problema rilevato
AI: Nel testo visibile compaiono termini in tedesco ('Die Kunst der Fuge') non marcati con lang, ma non è possibile determinare dall'estratto se esistano marcature lang su altri elementi inline nel DOM completo.
automatico + AI + manuale Individuare brani in lingua diversa dal resto della pagina e verificare che siano marcati con il lang corretto.
3.2.1 Al focus (A) Richiede verifica manuale manuale Verificare che il semplice focus su un elemento non provochi cambi di contesto (nuove finestre, invii di form, spostamenti).
3.2.2 All'input (A) Richiede verifica manuale manuale Verificare che modificare un campo (select, radio) non provochi cambi di contesto senza preavviso.
3.2.3 Navigazione coerente (AA) Richiede verifica manuale manuale Verificare che i meccanismi di navigazione ripetuti (menu, footer) compaiano nello stesso ordine in tutte le pagine.
3.2.4 Identificazione coerente (AA) Richiede verifica manuale manuale Verificare che componenti con la stessa funzione siano identificati allo stesso modo in tutto il sito (es. "Cerca" ovunque, non "Cerca"/"Trova").
3.3.1 Identificazione di errori (A) Richiede verifica manuale manuale Provocare errori nei form e verificare che l'errore sia segnalato in testo, indicando il campo interessato.
3.3.2 Etichette o istruzioni (A) Non conforme
AI: Il secondo campo di ricerca (name='search') ha ariaLabel null e nessuna etichetta associata; gli altri campi form sembrano correttamente etichettati tramite aria-label o etichetta esplicita.
automatico + AI + manuale Verificare che ogni campo abbia etichetta o istruzioni visibili PRIMA dell'uso (il placeholder da solo non basta).
3.3.3 Suggerimenti per gli errori (AA) Richiede verifica manuale manuale Provocare errori nei form e verificare che il messaggio suggerisca COME correggere (non solo "dato non valido").
3.3.4 Prevenzione degli errori (legali, finanziari, di dati) (AA) Richiede verifica manuale manuale Per operazioni legali/finanziarie (ordini, contratti), verificare che l'invio sia annullabile, verificabile o confermabile.
4.1.1 Analisi sintattica (parsing) (A) Richiede verifica manuale manuale Criterio superato (obsoleto nelle WCAG 2.2 e coperto dai parser moderni): verificare solo l'assenza di id duplicati su elementi interattivi.
4.1.2 Nome, ruolo, valore (A) Non conforme
regole: link-name
automatico + manuale Con lo screen reader, verificare che i componenti custom (menu, tab, modali) espongano nome, ruolo e stato corretti.
4.1.3 Messaggi di stato (AA) Richiede verifica manuale manuale Verificare che i messaggi di stato (esito ricerca, aggiunta al carrello, errori) siano annunciati dallo screen reader senza spostare il focus.

Piano di remediation

Piano generato automaticamente dalle 7 tipologie di violazione rilevate. 1 intervento è meccanico e applicabile subito; gli altri richiedono una decisione redazionale nei punti segnati [descrivere: …]. Partire dalla priorità 1: sono i blocchi di conformità EAA.

7 interventi
0 → 81 punteggio applicando il piano
~4.5 h di sviluppo stimato

1. Gli elementi <dl> devono contenere direttamente solo gruppi <dt> e <dd> ordinati correttamente, <script>, <template> o elementi <div>

Assicurati che gli elementi <dl> siano strutturati correttamente. Dettaglio axe: Correggi tutti i seguenti: Quando non è vuoto, l'elemento non ha nemmeno un elemento <dt> seguito da almeno un elemento <dd>. Guida completa: https://dequeuniversity.com/rules/axe/4.12/definition-list?application=axeAPI&lang=it

Prima (dal DOM reale)

<dl><dt><a rel="mw:WikiLink" href="//it.wikipedia.org/wiki/L'arte_della_fuga" title="L'arte della fuga">Leggi la voce</a> · <a rel="mw:WikiLink" href="//it.wikipedia.org/wiki/Wikipedia:Vetrina" title="Wikipedia:Vetrina">Tutte le voci in vetrina</a></dt></dl>

Richiede una decisione: Regola senza fix automatico: seguire la guida axe collegata.

2. Aggiungere il testo alternativo alle immagini senza alt +18 punti

Ogni immagine informativa deve avere un attributo alt che ne descriva contenuto e funzione (WCAG 1.1.1). Le immagini puramente decorative vanno marcate con alt="".

Prima (dal DOM reale)

<img src="//upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Wikimedia-logo-blackandwhite.png/40px-Wikimedia-logo-blackandwhite.png?utm_source=it.wikipedia.org&amp;utm_campaign=parser&amp;utm_content=thumbnail" decoding="async" width="35" height="35" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Wikimedia-logo-blackandwhite.png/120px-Wikimedia-logo-blackandwhite.png?utm_source=it.wikipedia.org&amp;utm_campaign=parser&amp;utm_content=thumbnail 2x" data-file-width="500" data-file-height="500">

Dopo (da incollare)

<img src="//upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Wikimedia-logo-blackandwhite.png/40px-Wikimedia-logo-blackandwhite.png?utm_source=it.wikipedia.org&amp;utm_campaign=parser&amp;utm_content=thumbnail" decoding="async" width="35" height="35" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Wikimedia-logo-blackandwhite.png/120px-Wikimedia-logo-blackandwhite.png?utm_source=it.wikipedia.org&amp;utm_campaign=parser&amp;utm_content=thumbnail 2x" data-file-width="500" data-file-height="500" alt="[descrivere: soggetto e funzione dell’immagine]">

Richiede una decisione: Decidere per ogni immagine se è informativa (alt descrittivo) o decorativa (alt vuoto).

3. Dare un nome accessibile ai link senza testo +4 punti

Un link senza testo (es. che avvolge solo un’icona o un’immagine lazy-load) è invisibile agli screen reader (WCAG 2.4.4). Soluzione strutturale: alt descrittivo sull’immagine interna; soluzione rapida: aria-label sul link.

Prima (dal DOM reale)

<a href="https://cinquepermille.wikimedia.it/?mtm_campaign=5x1000_2026&amp;mtm_kwd=sitenotice&amp;mtm_source=banner" rel="nofollow"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Wikimedia-logo-blackandwhite.png/40px-Wikimedia-logo-blackandwhite.png?utm_source=it.wikipedia.org&amp;utm_campaign=parser&amp;utm_content=thumbnail" decoding="async" width="35" height="35" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Wikimedia-logo-blackandwhite.png/120px-Wikimedia-logo-blackandwhite.png?utm_source=it.wikipedia.org&amp;utm_campaign=parser&amp;utm_content=thumbnail 2x" data-file-width="500" data-file-height="500"></a>

Dopo (da incollare)

<a href="https://cinquepermille.wikimedia.it/?mtm_campaign=5x1000_2026&amp;mtm_kwd=sitenotice&amp;mtm_source=banner" rel="nofollow" aria-label="[descrivere: destinazione del link]"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Wikimedia-logo-blackandwhite.png/40px-Wikimedia-logo-blackandwhite.png?utm_source=it.wikipedia.org&amp;utm_campaign=parser&amp;utm_content=thumbnail" decoding="async" width="35" height="35" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Wikimedia-logo-blackandwhite.png/120px-Wikimedia-logo-blackandwhite.png?utm_source=it.wikipedia.org&amp;utm_campaign=parser&amp;utm_content=thumbnail 2x" data-file-width="500" data-file-height="500"></a>

Richiede una decisione: Usare come etichetta il titolo reale della pagina o del contenuto collegato.

4. Distinguere i link nel testo anche senza colore

I link distinguibili solo dal colore non sono percepibili da chi non distingue i colori (WCAG 1.4.1): la sottolineatura è il fix più semplice e robusto.

Prima (dal DOM reale)

<a rel="mw:WikiLink" href="//it.wikipedia.org/wiki/Caledonian_MacBrayne?action=edit&amp;redlink=1" title="Caledonian MacBrayne (la pagina non esiste)" class="new" typeof="mw:LocalizedAttrs" data-mw-i18n="{&quot;title&quot;:{&quot;lang&quot;:&quot;x-page&quot;,&quot;key&quot;:&quot;red-link-title&quot;,&quot;params&quot;:[&quot;Caledonian MacBrayne&quot;]}}">Caledonian MacBrayne</a>

Dopo (da incollare)

/* CSS */
p a { text-decoration: underline; }

5. Aggiungere un H1 alla pagina

Ogni pagina deve avere un titolo principale H1 che ne dichiari l’argomento (best practice WCAG): è il primo punto di riferimento per chi usa uno screen reader.

Prima (dal DOM reale)

<!-- nessun <h1> presente nella pagina -->

Dopo (da incollare)

<h1>[descrivere: argomento principale della pagina]</h1>

Richiede una decisione: Scegliere il titolo editoriale principale della pagina.

6. Portare tutti i contenuti dentro i landmark

2 blocchi di contenuto si trovano fuori dai landmark semantici: chi naviga per regioni non li incontra mai. Una volta introdotto <main> (vedi intervento dedicato), la maggior parte rientra automaticamente.

Prima (dal DOM reale)

<div id="centralNotice" data-nosnippet="" class="cn-wle_2026_it"><div style="background:var(--background-color-neutral-subtle, #f8f9fa); border:1px solid #339966; margin: 0 auto 1em auto; font-size: 120%; overflow: hidden; text-align: center; padding: 0.5ex;"><div id="cn-toggle-box" style="float:right;" valign="middle"><a href="#" title="Riduci" onclick="mw.centralNotice.hideBanner();return false;"><img border="0" src="//upload.wikimedia.org/wikipedia/foundation/2/20/CloseWindow19x19.png" alt="Riduci"></a></div>
<div style="margin-top: 13px"><center>
<div class="floatleft" style="float: left;"><a href="http://www.wikilovesearth.it/" class="image"><img alt="WLE Austria Logo (no text).svg" src="https://upload.wikimedia.org/wikipedia/donate/thumb/b/b6/WLE_Austria_Logo_%28no_text%29_local.svg/60px-WLE_Austria_Logo_%28no_text%29_local.svg.png" width="60" height="60" style="margin-top:-10px;"></a></div><span class="plainlinks"><a href="http://www.wikilovesearth.it/" class="extiw" title="Wiki Loves Earth 2026 in Italy">Wiki Loves Earth Italia è il concorso fotografico dedicato alle aree naturali protette italiane.</a></span><br><span class="plainlinks"><a href="http://www.wikilovesearth.it/" class="extiw" title="Wiki Loves Earth 2026 in Italy">Dal 15 giugno fai una foto, promuovi il territorio, aiuta Wikipedia e vinci!</a></span></center>
</div></div><div style="clear:both;"></div></div>

Dopo (da incollare)

<!-- spostare il blocco dentro <main>, <nav>, <header> o <footer> a seconda della funzione -->

Richiede una decisione: Verificare, blocco per blocco, il landmark di appartenenza corretto.

7. Il ruolo ARIA deve essere appropriato per l'elemento

Assicurati che il valore dell'attributo role sia appropriato per l'elemento. Dettaglio axe: Correggi uno dei seguenti: Il ruolo ARIA button non è consentito per l'elemento dato. Guida completa: https://dequeuniversity.com/rules/axe/4.12/aria-allowed-role?application=axeAPI&lang=it

Prima (dal DOM reale)

<input type="checkbox" id="vector-main-menu-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-main-menu-dropdown" class="vector-dropdown-checkbox " aria-label="Menu principale">

Richiede una decisione: Regola senza fix automatico: seguire la guida axe collegata.

Vuoi questo report per il tuo sito?

Scansione gratuita in 60 secondi, report completo come questo con lo sblocco Pro.

Scansiona il tuo sito →