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
97/100
Punteggio Complessivo - ECCELLENTE
WCAG 2.1 Livello AA - CONFORME
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 sr-only | className="sr-only" | 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,
footer a: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)
Conforme29 (97%)
Da verificare1 (3%)
Non conforme0 (0%)
Livello AA (20 criteri)
Conforme18 (90%)
Da verificare2 (10%)
Non conforme0 (0%)
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)
- Aggiungere aria-current="page" sui link della pagina attiva
- Considerare prefers-reduced-motion per animazioni
9. 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
10. 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