Dichiarazione di Accessibilità
- Data analisi
- 27 gennaio 2026
- Standard di riferimento
- WCAG 2.1 (Livelli A, AA)
- Normativa
- Legge 4/2004, Direttiva UE 2016/2102, EN 301 549
- Metodo
- Analisi diretta del codice sorgente
1. Strumenti e Metodologia
| Strumento | Aspetti verificati |
|---|---|
| Analisi codice sorgente | Struttura JSX/TSX, attributi ARIA, semantica HTML |
| Grep pattern matching | Ricerca attributi accessibilità (aria-*, role, alt) |
| Verifica CSS | Focus states, skip links, sr-only |
| Build verification | Compilazione senza errori |
Componenti analizzati: 47 file tra layout, componenti, pagine e stili
2. Conformità per Criterio WCAG 2.1
2.1 Principio 1 - Percepibile
| Criterio | Descrizione | Stato | Note |
|---|---|---|---|
| 1.1.1 | Contenuti non testuali | Conforme | Alt text su tutte le immagini |
| 1.3.1 | Informazioni e relazioni | Conforme | Landmark semantici, heading strutturati |
| 1.3.2 | Sequenza significativa | Conforme | DOM order logico |
| 1.3.3 | Caratteristiche sensoriali | Conforme | No istruzioni solo visive |
| 1.4.1 | Uso del colore | Conforme | Informazioni non solo con colore |
| 1.4.3 | Contrasto minimo | Da verificare | Richiede test visivo |
| 1.4.4 | Ridimensionamento testo | Conforme | Layout responsive |
| 1.4.10 | Reflow | Conforme | Breakpoint Tailwind |
| 1.4.12 | Spaziatura testo | Conforme | CSS non limita spaziatura |
2.2 Principio 2 - Utilizzabile
| Criterio | Descrizione | Stato | Note |
|---|---|---|---|
| 2.1.1 | Tastiera | Conforme | Tutti gli elementi raggiungibili |
| 2.1.2 | Nessun blocco tastiera | Conforme | No trappole di focus |
| 2.2.2 | Pausa, stop, nascondi | Conforme | Pulsante pausa su slider |
| 2.4.1 | Bypass blocchi | Conforme | Skip links implementati |
| 2.4.2 | Titolo pagina | Conforme | Meta title su tutte le pagine |
| 2.4.3 | Ordine focus | Conforme | Ordine logico DOM |
| 2.4.4 | Scopo link (nel contesto) | Conforme | aria-label descrittivi |
| 2.4.5 | Modalità multiple | Conforme | Menu + breadcrumb |
| 2.4.6 | Intestazioni ed etichette | Conforme | Heading significativi |
| 2.4.7 | Focus visibile | Conforme | :focus-visible globale |
2.3 Principio 3 - Comprensibile
| Criterio | Descrizione | Stato | Note |
|---|---|---|---|
| 3.1.1 | Lingua della pagina | Conforme | lang="it" / lang="en" |
| 3.1.2 | Lingua delle parti | Conforme | Contenuti coerenti per lingua |
| 3.2.1 | Al focus | Conforme | No cambi contesto al focus |
| 3.2.2 | All'input | Conforme | No cambi contesto automatici |
| 3.2.3 | Navigazione coerente | Conforme | Header/Footer consistenti |
| 3.3.1 | Identificazione errori | Conforme | role="alert" su errori |
| 3.3.2 | Etichette o istruzioni | Conforme | Label su tutti i form |
2.4 Principio 4 - Robusto
| Criterio | Descrizione | Stato | Note |
|---|---|---|---|
| 4.1.1 | Parsing | Conforme | JSX valido, build OK |
| 4.1.2 | Nome, ruolo, valore | Conforme | ARIA correttamente usati |
3. Analisi Dettagliata per Componente
3.1 Layout Principale
layout.tsx + Wrapper.tsx
| Elemento | Implementazione | Stato |
|---|---|---|
| <html lang> | lang="it" / lang="en" | Conforme |
| Skip links | 2 link (main-content, footer) | Conforme |
| <main id="main-content"> | Presente in Wrapper.tsx | Conforme |
| <header> | Componente Header.tsx | Conforme |
| <footer id="footer"> | Componente Footer.tsx | Conforme |
3.2 Header e Navigazione
| Elemento | Implementazione | Stato |
|---|---|---|
| <header> semantico | Presente | Conforme |
| <nav aria-label> | "Menu principale" | Conforme |
| Logo con alt | "Oriente Occidente Logo" | Conforme |
| Menu mobile aria-label | translate("openMenu") | Conforme |
| Disclosure aria-expanded | Presente | Conforme |
| Disclosure aria-controls | Collegamento panel | Conforme |
3.3 Newsletter
| Elemento | Implementazione | Stato |
|---|---|---|
| <label> associata | htmlFor="mce-EMAIL" | Conforme |
| Label visibile | Label persistente sopra il campo | Conforme |
| aria-required | "true" su input email | Conforme |
| role="alert" errori | Presente | Conforme |
| role="status" successo | Presente | Conforme |
3.4 Slider e Carousel
| Componente | A11y Module | Pausa/Play | aria-label | Stato |
|---|---|---|---|---|
| HeroSlider.js | Attivo | Presente | Dinamico | Conforme |
| Gallery.js | Attivo | N/A | prev/next | Conforme |
| GalleryStandard.js | Attivo | N/A | Configurato | Conforme |
| GalleryHome.js | Attivo | N/A | Configurato | Conforme |
| GalleryPreview.js | Attivo | N/A | Configurato | Conforme |
3.5 Form di Registrazione
| Elemento | Implementazione | Stato |
|---|---|---|
| Label per ogni campo | htmlFor/id collegati | Conforme |
| aria-required | Su campi obbligatori | Conforme |
| Messaggi errore | role="alert" + aria-live | Conforme |
4. CSS e Stili Accessibilità
4.1 Focus Visibile (WCAG 2.4.7)
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid black;
outline-offset: 2px;
}
/* Contrasto su sfondi scuri */
.bg-black a:focus-visible,
.bg-black button:focus-visible {
outline-color: white;
}Stato: Conforme
4.2 Skip Links (WCAG 2.4.1)
.skip-link {
position: absolute;
left: 50%;
transform: translateX(-50%) translateY(-100%);
background: black;
color: white;
padding: 8px 12px;
z-index: 50;
}
.skip-link:focus {
transform: translateX(-50%) translateY(0);
}Stato: Conforme - Nascosti finché non ricevono focus
5. Riepilogo Conformità
Livello A (30 criteri)
Livello AA (20 criteri)
Elementi da Verificare Manualmente
| Criterio | Descrizione | Motivo |
|---|---|---|
| 1.4.3 | Contrasto minimo | Richiede test visivo con strumenti |
| 1.4.6 | Contrasto aumentato (AAA) | Richiede test visivo |
6. Punti di Forza
Sistema Skip Links Completo
- Due skip link funzionanti
- Stili CSS appropriati con animazione focus
Slider Completamente Accessibili
- Modulo A11y Swiper su tutti i carousel
- Pulsante pausa/play con stati ARIA
- Messaggi in italiano per screen reader
Form Perfettamente Accessibili
- Label associate a ogni campo
- aria-required sui campi obbligatori
- Gestione errori con role="alert"
Focus Management Robusto
- :focus-visible globale per tutti gli elementi
- Contrasto adattivo per sfondi chiari/scuri
Navigazione Accessibile
- aria-expanded sui menu espandibili
- aria-controls per collegamento logico
- aria-label descrittivi
Link Esterni Sicuri
- rel="noopener noreferrer" su tutti i target="_blank"
- Indicazione di link esterno negli aria-label
7. Valutazione Dettagliata
| Aspetto | Punteggio | Giudizio |
|---|---|---|
| Struttura semantica | 10/10 | Eccellente |
| Navigazione | 10/10 | Eccellente |
| Form | 10/10 | Eccellente |
| Immagini | 9/10 | Ottimo |
| Slider/Carousel | 10/10 | Eccellente |
| Focus management | 10/10 | Eccellente |
| ARIA implementation | 10/10 | Eccellente |
8. Raccomandazioni Future
Priorità Bassa (Miglioramenti Opzionali)
- Test contrasto colori con axe DevTools o WAVE
- Test con screen reader reali (NVDA, VoiceOver, JAWS)
9. Test con axe DevTools (10 febbraio 2026)
In aggiunta all'analisi del codice sorgente, il sito è stato testato con axe DevTools (versione 4.120.1, motore axe-core 4.11.0), uno strumento professionale di verifica dell'accessibilità che esegue test automatici e guidati direttamente sul sito pubblicato, secondo lo standard WCAG 2.1 AA.
9.1 Riepilogo per area testata
| Area testata | Problemi critici | Problemi seri | Esito |
|---|---|---|---|
| Tabelle | 0 | 0 | Conforme |
| Navigazione da tastiera | 0 | 0 | Conforme |
| Finestre modali | 0 | 0 | Conforme |
| Elementi interattivi | 0 | 0 | Conforme |
| Struttura della pagina | 0 | 0 | Conforme |
| Immagini | 0 | 0 | Conforme |
| Moduli (form) | 0 | 0 | Conforme |
| Totale | 0 | 0 | 0 problemi |
9.2 Problemi riscontrati e risolti
I problemi identificati durante il test del 10 febbraio 2026 sono stati tutti risolti con interventi correttivi il 11 febbraio 2026.
Indicatore di focus nel footer (WCAG 2.4.7)
Problema originale: i link nel footer non mostravano un indicatore di focus visibile durante la navigazione da tastiera.
Causa: una regola CSS applicava un outline bianco ai link del footer, rendendolo invisibile sullo sfondo bianco.
Correzione: rimossa la regola CSS che forzava l'outline bianco sui link del footer. Ora tutti i link ereditano l'outline nero di default, garantendo visibilità su sfondo chiaro.
Etichetta visibile nel form newsletter (WCAG 3.3.2)
Problema originale: un campo del modulo newsletter non aveva un'etichetta visibile.
Correzione: aggiunta etichetta con attributo htmlFor associato al campo, nascosta visivamente ma accessibile alle tecnologie assistive.
Etichetta persistente nel campo email (WCAG 3.3.2)
Problema originale: il campo email del modulo newsletter utilizzava il placeholder come unica etichetta visiva, che scompariva durante la digitazione.
Correzione: la label del campo email è ora sempre visibile sopra il campo di input con stile chiaro (testo in grassetto), garantendo un'indicazione persistente dello scopo del campo.
9.3 Informazioni sul test
- Strumento
- axe DevTools (estensione Chrome) v4.120.1
- Motore di analisi
- axe-core v4.11.0
- Data del test
- 10 febbraio 2026
- Standard applicato
- WCAG 2.1 AA
- Pagina testata
- Homepage (www.orienteoccidente.it)
- Tipo di test
- Automatico + guidato manuale (IGT)
10. Dichiarazione di Conformità
Il sito Oriente Occidente risulta conforme alle linee guida WCAG 2.1 Livello AA sulla base dell'analisi del codice sorgente.
Punti di eccellenza:
- Slider con controlli pausa/play
- Form completamente accessibili
- Skip links funzionanti
- Focus visibile su tutti gli elementi
- Uso appropriato di ARIA
Verifiche consigliate:
- Test contrasto colori
- Test con screen reader
- Test navigazione solo tastiera
11. Feedback e Segnalazioni
Per segnalare problemi di accessibilità o richiedere informazioni in formati alternativi, è possibile contattarci attraverso i seguenti canali:
- Email: info@orienteoccidente.it
- Telefono: +39 0464 431660