# Creare Pagine Web Accessibili ![Tutto sull'accessibilità](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.it.png) > Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey title Your Accessibility Learning Adventure section Foundation Understanding Users: 5: You Testing Tools: 4: You POUR Principles: 5: You section Build Skills Semantic HTML: 4: You Visual Design: 5: You ARIA Techniques: 4: You section Master Practice Keyboard Navigation: 5: You Form Accessibility: 4: You Real-world Testing: 5: You ``` ## Quiz Pre-Lettura [Quiz pre-lettura](https://ff-quizzes.netlify.app/web/) > La forza del Web sta nella sua universalità. L'accesso per tutti, indipendentemente dalla disabilità, è un aspetto essenziale. > > \- Sir Timothy Berners-Lee, Direttore W3C e inventore del World Wide Web Ecco qualcosa che potrebbe sorprenderti: quando crei siti web accessibili, non stai solo aiutando le persone con disabilità—stai effettivamente migliorando il web per tutti! Hai mai notato quelle rampe agli angoli delle strade? Originariamente progettate per le sedie a rotelle, ora aiutano anche persone con passeggini, lavoratori delle consegne con carrelli, viaggiatori con bagagli a rotelle e ciclisti. È esattamente così che funziona il design web accessibile—soluzioni che aiutano un gruppo spesso finiscono per beneficiare tutti. Fantastico, vero? In questa lezione, esploreremo come creare siti web che funzionano davvero per tutti, indipendentemente da come navigano sul web. Scoprirai tecniche pratiche già integrate negli standard web, ti cimenterai con strumenti di test e vedrai come l'accessibilità rende i tuoi siti più usabili per tutti gli utenti. Alla fine di questa lezione, avrai la sicurezza di rendere l'accessibilità una parte naturale del tuo flusso di lavoro di sviluppo. Pronto a scoprire come scelte di design ponderate possono aprire il web a miliardi di utenti? Immergiamoci! ```mermaid mindmap root((Web Accessibility)) Users Screen readers Keyboard navigation Voice control Magnification Technologies HTML semantics ARIA attributes CSS focus indicators Keyboard events Benefits Wider audience Better SEO Legal compliance Universal design Testing Automated tools Manual testing User feedback Real assistive tech ``` > Puoi seguire questa lezione su [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)! ## Comprendere le Tecnologie Assistive Prima di iniziare a programmare, prendiamoci un momento per capire come le persone con diverse abilità vivono effettivamente il web. Non è solo teoria—comprendere questi modelli di navigazione reali ti renderà un programmatore molto migliore! Le tecnologie assistive sono strumenti straordinari che aiutano le persone con disabilità a interagire con i siti web in modi che potrebbero sorprenderti. Una volta che capisci come funzionano queste tecnologie, creare esperienze web accessibili diventa molto più intuitivo. È come imparare a vedere il tuo codice attraverso gli occhi di qualcun altro. ### Screen reader I [screen reader](https://en.wikipedia.org/wiki/Screen_reader) sono tecnologie piuttosto sofisticate che convertono il testo digitale in output vocale o braille. Sebbene siano utilizzati principalmente da persone con disabilità visive, sono anche molto utili per utenti con disturbi dell'apprendimento come la dislessia. Mi piace pensare a un screen reader come a un narratore molto intelligente che legge un libro per te. Legge il contenuto ad alta voce in ordine logico, annuncia elementi interattivi come "pulsante" o "link" e fornisce scorciatoie da tastiera per spostarsi rapidamente in una pagina. Ma ecco il punto—i screen reader possono fare la loro magia solo se costruiamo siti web con una struttura adeguata e contenuti significativi. Ed è qui che entri in gioco tu come sviluppatore! **Screen reader popolari su diverse piattaforme:** - **Windows**: [NVDA](https://www.nvaccess.org/about-nvda/) (gratuito e il più popolare), [JAWS](https://webaim.org/articles/jaws/), [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) (integrato) - **macOS/iOS**: [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) (integrato e molto efficace) - **Android**: [TalkBack](https://support.google.com/accessibility/android/answer/6283677) (integrato) - **Linux**: [Orca](https://wiki.gnome.org/Projects/Orca) (gratuito e open-source) **Come i screen reader navigano nei contenuti web:** I screen reader offrono diversi metodi di navigazione che rendono la navigazione efficiente per gli utenti esperti: - **Lettura sequenziale**: Legge il contenuto dall'alto verso il basso, come seguire un libro - **Navigazione per landmark**: Salta tra le sezioni della pagina (header, nav, main, footer) - **Navigazione per heading**: Salta tra i titoli per comprendere la struttura della pagina - **Liste di link**: Genera un elenco di tutti i link per un accesso rapido - **Controlli dei form**: Naviga direttamente tra campi di input e pulsanti > 💡 **Ecco qualcosa che mi ha sorpreso**: Il 68% degli utenti di screen reader naviga principalmente tramite i titoli ([WebAIM Survey](https://webaim.org/projects/screenreadersurvey9/#finding)). Questo significa che la struttura dei tuoi titoli è come una mappa per gli utenti—quando la fai bene, stai letteralmente aiutando le persone a trovare più velocemente il loro percorso nei tuoi contenuti! ### Creare il tuo flusso di lavoro di test Ecco una buona notizia—testare l'accessibilità in modo efficace non deve essere travolgente! Dovrai combinare strumenti automatizzati (sono fantastici per individuare problemi evidenti) con alcuni test manuali. Ecco un approccio sistematico che, secondo me, individua la maggior parte dei problemi senza occupare tutta la giornata: **Flusso di lavoro essenziale per test manuali:** ```mermaid flowchart TD A[🚀 Start Testing] --> B{⌨️ Keyboard Navigation} B --> C[Tab through all interactive elements] C --> D{🎧 Screen Reader Testing} D --> E[Test with NVDA/VoiceOver] E --> F{🔍 Zoom Testing} F --> G[Zoom to 200% and test functionality] G --> H{🎨 Color/Contrast Check} H --> I[Verify all text meets contrast ratios] I --> J{👁️ Focus Management} J --> K[Ensure focus indicators are visible] K --> L[✅ Testing Complete] style A fill:#e3f2fd style L fill:#e8f5e8 style B fill:#fff3e0 style D fill:#f3e5f5 style F fill:#e0f2f1 style H fill:#fce4ec style J fill:#e8eaf6 ``` **Checklist di test passo-passo:** 1. **Navigazione da tastiera**: Usa solo Tab, Shift+Tab, Enter, Space e tasti freccia 2. **Test con screen reader**: Attiva NVDA, VoiceOver o Narrator e naviga a occhi chiusi 3. **Test di zoom**: Prova a livelli di zoom del 200% e 400% 4. **Verifica del contrasto dei colori**: Controlla tutto il testo e i componenti dell'interfaccia utente 5. **Test degli indicatori di focus**: Assicurati che tutti gli elementi interattivi abbiano stati di focus visibili ✅ **Inizia con Lighthouse**: Apri gli strumenti per sviluppatori del tuo browser, esegui un audit di accessibilità con Lighthouse e usa i risultati per guidare le aree di test manuale. ### Strumenti di zoom e ingrandimento Sai quando pizzichi per zoomare sul tuo telefono perché il testo è troppo piccolo, o strizzi gli occhi davanti allo schermo del laptop sotto il sole? Molti utenti si affidano agli strumenti di ingrandimento per rendere leggibile il contenuto ogni singolo giorno. Questo include persone con problemi di vista, anziani e chiunque abbia mai cercato di leggere un sito web all'aperto. Le tecnologie moderne di zoom si sono evolute oltre il semplice ingrandimento. Comprendere come funzionano questi strumenti ti aiuterà a creare design responsivi che rimangano funzionali e attraenti a qualsiasi livello di ingrandimento. **Capacità moderne di zoom nei browser:** - **Zoom della pagina**: Scala tutto il contenuto proporzionalmente (testo, immagini, layout) - questo è il metodo preferito - **Zoom solo testo**: Aumenta la dimensione del font mantenendo il layout originale - **Pinch-to-zoom**: Supporto per gesti mobili per ingrandimenti temporanei - **Supporto nei browser**: Tutti i browser moderni supportano lo zoom fino al 500% senza compromettere la funzionalità **Software di ingrandimento specializzato:** - **Windows**: [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) (integrato), [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) - **macOS/iOS**: [Zoom](https://www.apple.com/accessibility/mac/vision/) (integrato con funzionalità avanzate) > ⚠️ **Considerazione di design**: WCAG richiede che il contenuto rimanga funzionale quando ingrandito al 200%. A questo livello, lo scorrimento orizzontale dovrebbe essere minimo e tutti gli elementi interattivi dovrebbero rimanere accessibili. ✅ **Testa il tuo design responsivo**: Zooma il tuo browser al 200% e 400%. Il tuo layout si adatta in modo elegante? Puoi ancora accedere a tutte le funzionalità senza scorrimenti eccessivi? ## Strumenti Moderni per Testare l'Accessibilità Ora che hai capito come le persone navigano sul web con tecnologie assistive, esploriamo gli strumenti che ti aiutano a costruire e testare siti web accessibili. Pensala così: gli strumenti automatizzati sono ottimi per individuare problemi evidenti (come l'assenza di testo alternativo), mentre i test manuali ti aiutano a garantire che il tuo sito sia piacevole da usare nel mondo reale. Insieme, ti danno la sicurezza che i tuoi siti funzionino per tutti. ### Test del contrasto dei colori Ecco una buona notizia: il contrasto dei colori è uno dei problemi di accessibilità più comuni, ma è anche uno dei più facili da risolvere. Un buon contrasto beneficia tutti—dagli utenti con problemi di vista a chi cerca di leggere il telefono in spiaggia. **Requisiti di contrasto WCAG:** | Tipo di testo | WCAG AA (Minimo) | WCAG AAA (Avanzato) | |---------------|------------------|---------------------| | **Testo normale** (sotto 18pt) | Rapporto di contrasto 4.5:1 | Rapporto di contrasto 7:1 | | **Testo grande** (18pt+ o 14pt+ grassetto) | Rapporto di contrasto 3:1 | Rapporto di contrasto 4.5:1 | | **Componenti UI** (pulsanti, bordi dei form) | Rapporto di contrasto 3:1 | Rapporto di contrasto 3:1 | **Strumenti essenziali per il test:** - [Colour Contrast Analyser](https://www.tpgi.com/color-contrast-checker/) - App desktop con selettore di colori - [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) - Basato sul web con feedback immediato - [Stark](https://www.getstark.co/) - Plugin per strumenti di design come Figma, Sketch, Adobe XD - [Accessible Colors](https://accessible-colors.com/) - Trova palette di colori accessibili ✅ **Crea palette di colori migliori**: Parti dai colori del tuo brand e usa i controlli di contrasto per creare variazioni accessibili. Documenta questi come token di colore accessibili nel tuo sistema di design. ### Audit completo dell'accessibilità Il test di accessibilità più efficace combina diversi approcci. Nessun singolo strumento individua tutto, quindi costruire una routine di test con metodi vari garantisce una copertura completa. **Test basati sul browser (integrati nei DevTools):** - **Chrome/Edge**: Audit di accessibilità con Lighthouse + pannello Accessibilità - **Firefox**: Inspector di accessibilità con vista dettagliata ad albero - **Safari**: Tab Audit in Web Inspector con simulazione VoiceOver **Estensioni professionali per il test:** - [axe DevTools](https://www.deque.com/axe/devtools/) - Test automatizzati standard del settore - [WAVE](https://wave.webaim.org/extension/) - Feedback visivo con evidenziazione degli errori - [Accessibility Insights](https://accessibilityinsights.io/) - Suite di test completa di Microsoft **Integrazione con linea di comando e CI/CD:** - [axe-core](https://github.com/dequelabs/axe-core) - Libreria JavaScript per test automatizzati - [Pa11y](https://pa11y.org/) - Strumento di test di accessibilità da linea di comando - [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) - Scoring automatizzato dell'accessibilità > 🎯 **Obiettivo del test**: Punta a un punteggio di accessibilità Lighthouse di almeno 95 come base. Ricorda, gli strumenti automatizzati individuano solo circa il 30-40% dei problemi di accessibilità—i test manuali sono ancora essenziali! ### 🧠 **Verifica delle Competenze di Test: Pronto a Individuare Problemi?** **Vediamo come ti senti riguardo ai test di accessibilità:** - Quale metodo di test ti sembra più accessibile al momento? - Riesci a immaginare di navigare solo con la tastiera per un giorno intero? - Qual è una barriera di accessibilità che hai personalmente sperimentato online? ```mermaid pie title "Accessibility Issues Caught by Different Methods" "Automated Tools" : 35 "Manual Testing" : 40 "User Feedback" : 25 ``` > **Incoraggiamento**: I tester professionisti di accessibilità usano esattamente questa combinazione di metodi. Stai imparando pratiche standard del settore! ## Costruire l'Accessibilità Fin dall'Inizio La chiave per il successo dell'accessibilità è integrarla nelle fondamenta fin dal primo giorno. So che è allettante pensare "aggiungerò l'accessibilità più tardi," ma è come cercare di aggiungere una rampa a una casa dopo che è già stata costruita. Possibile? Sì. Facile? Non proprio. Pensa all'accessibilità come alla progettazione di una casa—è molto più semplice includere l'accessibilità per le sedie a rotelle nei tuoi piani architettonici iniziali che ristrutturare tutto più tardi. ### I principi POUR: La tua base per l'accessibilità Le Linee Guida per l'Accessibilità dei Contenuti Web (WCAG) si basano su quattro principi fondamentali che formano l'acronimo POUR. Non preoccuparti—non sono concetti accademici noiosi! Sono in realtà linee guida pratiche per creare contenuti che funzionano per tutti. Una volta che hai familiarità con POUR, prendere decisioni sull'accessibilità diventa molto più intuitivo. È come avere una checklist mentale che guida le tue scelte di design. Vediamoli nel dettaglio: ```mermaid flowchart LR A[🔍 PERCEIVABLE
Can users sense it?] --> B[🎮 OPERABLE
Can users use it?] B --> C[📖 UNDERSTANDABLE
Can users get it?] C --> D[💪 ROBUST
Does it work everywhere?] A1[Alt text
Captions
Contrast] --> A B1[Keyboard access
No seizures
Time limits] --> B C1[Clear language
Predictable
Error help] --> C D1[Valid code
Compatible
Future-proof] --> D style A fill:#e1f5fe style B fill:#e8f5e8 style C fill:#fff3e0 style D fill:#f3e5f5 ``` **🔍 Percepibile**: Le informazioni devono essere presentabili in modi che gli utenti possano percepire attraverso i sensi disponibili - Fornisci alternative testuali per contenuti non testuali (immagini, video, audio) - Garantisci un contrasto sufficiente per tutto il testo e i componenti UI - Offri sottotitoli e trascrizioni per contenuti multimediali - Progetta contenuti che rimangano funzionali quando ridimensionati fino al 200% - Usa caratteristiche sensoriali multiple (non solo il colore) per trasmettere informazioni **🎮 Operabile**: Tutti i componenti dell'interfaccia devono essere operabili attraverso i metodi di input disponibili - Rendi tutte le funzionalità accessibili tramite navigazione da tastiera - Fornisci agli utenti tempo sufficiente per leggere e interagire con i contenuti - Evita contenuti che causano crisi epilettiche o disturbi vestibolari - Aiuta gli utenti a navigare in modo efficiente con una struttura chiara e punti di riferimento - Assicurati che gli elementi interattivi abbiano dimensioni adeguate (minimo 44px) **📖 Comprensibile**: Le informazioni e il funzionamento dell'interfaccia devono essere chiari e comprensibili - Usa un linguaggio chiaro e semplice adatto al tuo pubblico - Assicurati che i contenuti appaiano e funzionino in modi prevedibili e coerenti - Fornisci istruzioni chiare e messaggi di errore per l'input dell'utente - Aiuta gli utenti a comprendere e correggere gli errori nei moduli - Organizza i contenuti con un ordine di lettura logico e una gerarchia informativa **💪 Robusto**: I contenuti devono funzionare in modo affidabile su diverse tecnologie e dispositivi assistivi - **Usa HTML valido e semantico come base** - **Assicurati la compatibilità con le tecnologie assistive attuali e future** - **Segui gli standard web e le migliori pratiche per il markup** - **Testa su diversi browser, dispositivi e strumenti assistivi** - **Struttura il contenuto in modo che si degradi gradualmente quando le funzionalità avanzate non sono supportate** ### 🎯 **Verifica dei principi POUR: Fissare i concetti** **Riflessione rapida sui fondamenti:** - Riesci a pensare a una funzionalità di un sito web che non rispetta ciascun principio POUR? - Quale principio ti sembra più naturale come sviluppatore? - In che modo questi principi potrebbero migliorare il design per tutti, non solo per gli utenti con disabilità? ```mermaid quadrantChart title POUR Principles Impact Matrix x-axis Low Effort --> High Effort y-axis Low Impact --> High Impact quadrant-1 Quick Wins quadrant-2 Major Projects quadrant-3 Consider Later quadrant-4 Strategic Focus Alt Text: [0.2, 0.9] Color Contrast: [0.3, 0.8] Semantic HTML: [0.4, 0.9] Keyboard Nav: [0.6, 0.8] ARIA Complex: [0.8, 0.7] Screen Reader Testing: [0.7, 0.6] ``` > **Ricorda**: Inizia con miglioramenti ad alto impatto e basso sforzo. L'HTML semantico e il testo alternativo ti offrono il massimo vantaggio in termini di accessibilità con il minimo sforzo! ## Creare un design visivo accessibile Un buon design visivo e l'accessibilità vanno di pari passo. Quando progetti pensando all'accessibilità, spesso scopri che queste limitazioni portano a soluzioni più pulite ed eleganti che avvantaggiano tutti gli utenti. Esploriamo come creare design visivamente accattivanti che funzionino per tutti, indipendentemente dalle loro capacità visive o dalle condizioni in cui visualizzano il tuo contenuto. ### Strategie di accessibilità visiva e dei colori Il colore è potente per la comunicazione, ma non dovrebbe mai essere l'unico modo per trasmettere informazioni importanti. Progettare oltre il colore crea esperienze più robuste e inclusive che funzionano in più situazioni. **Progettare per le differenze nella visione dei colori:** Circa l'8% degli uomini e lo 0,5% delle donne hanno qualche forma di differenza nella visione dei colori (spesso chiamata "daltonismo"). I tipi più comuni sono: - **Deuteranopia**: Difficoltà a distinguere il rosso e il verde - **Protanopia**: Il rosso appare più scuro - **Tritanopia**: Difficoltà con il blu e il giallo (raro) **Strategie inclusive per i colori:** ```css /* ❌ Bad: Using only color to indicate status */ .error { color: red; } .success { color: green; } /* ✅ Good: Color plus icons and context */ .error { color: #d32f2f; border-left: 4px solid #d32f2f; } .error::before { content: "⚠️"; margin-right: 8px; } .success { color: #2e7d32; border-left: 4px solid #2e7d32; } .success::before { content: "✅"; margin-right: 8px; } ``` **Oltre ai requisiti di contrasto di base:** - Testa le tue scelte di colore con simulatori di daltonismo - Usa motivi, texture o forme insieme alla codifica dei colori - Assicurati che gli stati interattivi rimangano distinguibili senza colore - Considera come appare il tuo design in modalità ad alto contrasto ✅ **Testa l'accessibilità dei tuoi colori**: Usa strumenti come [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/) per vedere come appare il tuo sito agli utenti con diversi tipi di visione dei colori. ### Indicatori di focus e design dell'interazione Gli indicatori di focus sono l'equivalente digitale di un cursore: mostrano agli utenti della tastiera dove si trovano sulla pagina. Indicatori di focus ben progettati migliorano l'esperienza per tutti rendendo le interazioni chiare e prevedibili. **Migliori pratiche moderne per gli indicatori di focus:** ```css /* Enhanced focus styles that work across browsers */ button:focus-visible { outline: 2px solid #0066cc; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.25); } /* Remove focus outline for mouse users, preserve for keyboard users */ button:focus:not(:focus-visible) { outline: none; } /* Focus-within for complex components */ .card:focus-within { box-shadow: 0 0 0 3px rgba(74, 144, 164, 0.5); border-color: #4A90A4; } /* Ensure focus indicators meet contrast requirements */ .custom-focus:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; box-shadow: 0 0 0 6px #000000; } ``` **Requisiti per gli indicatori di focus:** - **Visibilità**: Devono avere un rapporto di contrasto di almeno 3:1 con gli elementi circostanti - **Larghezza**: Spessore minimo di 2px attorno all'intero elemento - **Persistenza**: Devono rimanere visibili finché il focus non si sposta altrove - **Distinzione**: Devono essere visivamente diversi dagli altri stati dell'interfaccia utente > 💡 **Consiglio di design**: Grandi indicatori di focus spesso utilizzano una combinazione di contorno, box-shadow e cambiamenti di colore per garantire visibilità su diversi sfondi e contesti. ✅ **Verifica gli indicatori di focus**: Naviga con il tasto Tab sul tuo sito e nota quali elementi hanno indicatori di focus chiari. Ce ne sono di difficili da vedere o completamente assenti? ### HTML semantico: La base dell'accessibilità L'HTML semantico è come fornire alle tecnologie assistive un sistema GPS per il tuo sito web. Quando usi gli elementi HTML corretti per il loro scopo previsto, stai praticamente fornendo ai lettori di schermo, alle tastiere e ad altri strumenti una mappa dettagliata per aiutare gli utenti a navigare efficacemente. Ecco un'analogia che mi ha davvero colpito: l'HTML semantico è la differenza tra una biblioteca ben organizzata con categorie chiare e segnali utili rispetto a un magazzino dove i libri sono sparsi casualmente. Entrambi i luoghi hanno gli stessi libri, ma in quale preferiresti cercare qualcosa? Esattamente! ```mermaid flowchart TD A[🏠 HTML Document] --> B[📰 header] A --> C[🧭 nav] A --> D[📄 main] A --> E[📋 footer] B --> B1[h1: Site Name
Logo & branding] C --> C1[ul: Navigation
Primary links] D --> D1[article: Content
section: Subsections] D --> D2[aside: Sidebar
Related content] E --> E1[nav: Footer links
Copyright info] D1 --> D1a[h1: Page title
h2: Major sections
h3: Subsections] style A fill:#e3f2fd style B fill:#e8f5e8 style C fill:#fff3e0 style D fill:#f3e5f5 style E fill:#e0f2f1 ``` **Elementi fondamentali per una struttura di pagina accessibile:** ```html

Your Site Name

Article Title

Published on

First Section

Content that relates to this section...

Second Section

More related content...

``` **Perché l'HTML semantico trasforma l'accessibilità:** | Elemento Semantico | Scopo | Beneficio per il lettore di schermo | |--------------------|-------|------------------------------------| | `
` | Intestazione della pagina o sezione | "Banner landmark" - navigazione rapida verso l'alto | | `