# Accessibilità Plugin Entourance - Conformità WCAG 2.1 ## Panoramica Il plugin Entourance è stato ottimizzato per rispettare le linee guida WCAG 2.1 (Web Content Accessibility Guidelines) livello AA, garantendo un'esperienza accessibile a tutti gli utenti, inclusi quelli che utilizzano tecnologie assistive. ## Implementazioni di Accessibilità ### 1. Navigazione da Tastiera #### Skip Links - **Implementazione**: Link di salto per bypassare la navigazione principale - **Posizione**: Inizio di ogni template principale - **Funzionalità**: Permette agli utenti di tastiera di accedere rapidamente al contenuto principale ```html ``` #### Navigazione Tab - **Implementazione**: Supporto completo per navigazione con Tab - **Funzionalità**: - Gestione del focus visibile con outline personalizzato - Navigazione circolare tra elementi interattivi - Supporto per tasti freccia nei carousel ### 2. Attributi ARIA #### Ruoli Semantici - `role="main"` - Contenuto principale - `role="complementary"` - Sidebar con informazioni aggiuntive - `role="tablist"` - Lista di tab - `role="tab"` - Singoli tab - `role="tabpanel"` - Contenuto dei tab - `role="img"` - Mappe interattive #### Attributi ARIA - `aria-label` - Etichette descrittive per elementi interattivi - `aria-describedby` - Riferimenti a descrizioni aggiuntive - `aria-controls` - Controlli associati - `aria-selected` - Stato di selezione - `aria-live` - Annunci dinamici per screen reader - `aria-invalid` - Stato di validazione dei form ### 3. Gestione del Focus #### Focus Visibile - **Colore**: #005fcc (blu accessibile) - **Spessore**: 3px outline + 2px offset - **Ombra**: Box-shadow per maggiore visibilità #### Focus Management - **Modali**: Focus trap automatico - **Carousel**: Navigazione con tasti freccia - **Mappe**: Controlli da tastiera per zoom e pan ### 4. Contrasti e Colori #### Contrasto WCAG AA - **Titoli (h1-h6)**: 12.63:1 su bianco (#212529) - **Testo normale**: 7.43:1 su bianco (#495057) - **Link**: 4.5:1 su bianco (#005fcc) - **Testo piccolo**: 4.54:1 su bianco (#6c757d) - **Testo grande**: Minimo 3:1 - **Elementi interattivi**: Minimo 3:1 #### Palette Colori Accessibili **Modalità Normale:** - Titoli: `#212529` (contrasto 12.63:1) - Testo: `#495057` (contrasto 7.43:1) - Link: `#005fcc` (contrasto 4.5:1) - Testo piccolo: `#6c757d` (contrasto 4.54:1) **Modalità High Contrast:** - Titoli: `#000000` (contrasto massimo) - Testo: `#000000` (contrasto massimo) - Link: `#0000ff` (blu ad alto contrasto) **Modalità Dark Mode:** - **DISABILITATA** - Il dark mode è stato rimosso per evitare problemi di contrasto - Motivo: Causava problemi di leggibilità quando applicato solo ai testi senza modificare gli sfondi #### Supporto High Contrast ```css @media (prefers-contrast: high) { .entourance-plugin h1, .entourance-plugin h2, .entourance-plugin h3, .entourance-plugin h4, .entourance-plugin h5, .entourance-plugin h6 { color: #000000 !important; font-weight: 700; } } ``` ### 5. Supporto Screen Reader #### Contenuto Solo per Screen Reader ```css .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } ``` #### Annunci Dinamici - **Risultati ricerca**: Annuncio automatico del numero di risultati - **Filtri**: Conferma dell'applicazione dei filtri - **Stati di caricamento**: Feedback durante le operazioni - **Errori**: Annunci immediati degli errori ### 6. Form e Input #### Etichette Accessibili - **Label esplicite**: Per tutti i campi di input - **Label nascoste**: Per elementi con placeholder - **aria-describedby**: Per istruzioni aggiuntive #### Validazione - **aria-invalid**: Indicazione dello stato di errore - **Messaggi di errore**: Collegati agli input tramite aria-describedby - **Feedback immediato**: Durante la digitazione ### 7. Immagini e Media #### Immagini - **Alt text**: Obbligatorio per tutte le immagini - **Indicatori visivi**: Per immagini senza alt text - **Immagini decorative**: `aria-hidden="true"` #### Mappe Interattive - **role="img"**: Identificazione come elemento immagine - **aria-label**: Descrizione della funzionalità - **Istruzioni**: Contenuto nascosto con istruzioni per l'uso ### 8. Responsive e Mobile #### Touch Target - **Dimensione minima**: 44x44px per tutti gli elementi interattivi - **Spaziatura**: Adeguata tra elementi cliccabili - **Font size**: Minimo 16px per prevenire zoom su iOS #### Orientamento - **Supporto**: Tutte le orientazioni supportate - **Layout**: Adattivo senza perdita di funzionalità ### 9. Preferenze Utente #### Reduced Motion ```css @media (prefers-reduced-motion: reduce) { .entourance-plugin *, .entourance-plugin *::before, .entourance-plugin *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } ``` #### High Contrast ```css @media (prefers-contrast: high) { .entourance-plugin h1, .entourance-plugin h2, .entourance-plugin h3, .entourance-plugin h4, .entourance-plugin h5, .entourance-plugin h6 { color: #000000 !important; font-weight: 700; } } ``` #### Dark Mode ```css /* DISABILITATO - Il dark mode è stato rimosso per evitare problemi di contrasto */ /* Motivo: Causava problemi di leggibilità quando applicato solo ai testi senza modificare gli sfondi */ /* Il plugin mantiene sempre la modalità chiara per garantire la massima leggibilità */ ``` ## File di Accessibilità ### CSS - `assets/css/accessibility.css` - Stili di accessibilità principali ### JavaScript - `assets/js/accessibility.js` - Funzionalità JavaScript per accessibilità ## Testing e Validazione ### Strumenti Consigliati 1. **WAVE** - Web Accessibility Evaluation Tool 2. **axe DevTools** - Estensione browser per testing 3. **Lighthouse** - Audit di accessibilità integrato 4. **Screen Reader** - NVDA, JAWS, VoiceOver ### Checklist WCAG 2.1 AA #### Percebile - ✅ Alternative testuali per immagini - ✅ Sottotitoli per video - ✅ Contenuto adattabile - ✅ Contrasto sufficiente #### Utilizzabile - ✅ Accessibile da tastiera - ✅ Nessuna crisi epilettica - ✅ Navigabile - ✅ Input modalità #### Comprensibile - ✅ Leggibile - ✅ Prevedibile - ✅ Assistenza input #### Robusto - ✅ Compatibile - ✅ Parsing valido - ✅ Tecnologie assistive ## Best Practices Implementate ### 1. Struttura Semantica - Uso corretto di heading (h1-h6) - Elementi semantici HTML5 - Landmark roles appropriati ### 2. Gestione Errori - Messaggi di errore chiari - Indicazioni per la correzione - Annunci immediati agli screen reader ### 3. Performance - Caricamento progressivo - Feedback durante le operazioni - Gestione degli stati di loading ### 4. Compatibilità - Supporto per tecnologie assistive moderne - Fallback per JavaScript disabilitato - Compatibilità cross-browser ## Note per Sviluppatori ### Aggiungere Nuovi Elementi 1. Assicurarsi che tutti gli elementi interattivi abbiano: - `tabindex` appropriato - `aria-label` o `aria-labelledby` - Focus visibile 2. Per contenuto dinamico: - Usare `aria-live` regions - Annunciare cambiamenti importanti - Gestire stati di loading 3. Per form: - Label esplicite - Validazione accessibile - Messaggi di errore collegati ### Testing Continuo - Testare con screen reader - Verificare navigazione da tastiera - Controllare contrasti con strumenti automatici - Validare con WAVE o axe ## Conclusione Il plugin Entourance rispetta le linee guida WCAG 2.1 livello AA, garantendo un'esperienza accessibile e inclusiva per tutti gli utenti. Le implementazioni sono progettate per essere mantenibili e estendibili per future funzionalità.