# Creare Pagine Web Accessibili
> Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac)
## 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 del 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 sui marciapiedi agli angoli delle strade? Originariamente sono state progettate per le sedie a rotelle, ma ora aiutano anche le persone con passeggini, i corrieri con carrelli, i viaggiatori con bagagli a rotelle e persino i 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 funzionino davvero per tutti, indipendentemente da come navigano sul web. Scoprirai tecniche pratiche già integrate negli standard web, potrai sperimentare strumenti di test e vedrai come l'accessibilità renda i tuoi siti più utilizzabili 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 possano aprire il web a miliardi di utenti? Iniziamo!
> 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 strumenti tecnologici piuttosto sofisticati 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 difficoltà di apprendimento come la dislessia.
Mi piace pensare a un screen reader come a un narratore molto intelligente che ti legge un libro. Legge il contenuto ad alta voce in ordine logico, annuncia elementi interattivi come "pulsante" o "link" e fornisce scorciatoie da tastiera per navigare 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 molto 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 capace)
- **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 il contenuto 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 seguendo un libro
- **Navigazione per punti di riferimento**: Salta tra le sezioni della pagina (header, nav, main, footer)
- **Navigazione per intestazioni**: Salta tra le intestazioni per comprendere la struttura della pagina
- **Liste di link**: Genera un elenco di tutti i link per un accesso rapido
- **Controlli dei moduli**: Naviga direttamente tra i campi di input e i pulsanti
> 💡 **Ecco qualcosa che mi ha sorpreso**: il 68% degli utenti di screen reader naviga principalmente tramite le intestazioni ([WebAIM Survey](https://webaim.org/projects/screenreadersurvey9/#finding)). Questo significa che la struttura delle tue intestazioni è come una mappa per gli utenti—quando la fai bene, stai letteralmente aiutando le persone a orientarsi più velocemente nel tuo contenuto!
### Creare il tuo flusso di lavoro di test
Ecco una buona notizia—testare l'accessibilità in modo efficace non deve essere complicato! Dovresti combinare strumenti automatici (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 i test manuali:**
```mermaid
graph 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]
```
**Checklist passo-passo per i test:**
1. **Navigazione con tastiera**: Usa solo Tab, Shift+Tab, Enter, Space e i 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 utilizza i risultati per guidare le aree di focus dei tuoi test manuali.
### Strumenti di zoom e ingrandimento
Sai quando pizzichi per ingrandire sul tuo telefono perché il testo è troppo piccolo o strizzi gli occhi davanti allo schermo del laptop sotto la luce del sole? Molti utenti si affidano agli strumenti di ingrandimento per rendere leggibile il contenuto ogni 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 proporzionalmente tutto il contenuto (testo, immagini, layout) - questo è il metodo preferito
- **Zoom solo testo**: Aumenta la dimensione del carattere mantenendo il layout originale
- **Pinch-to-zoom**: Supporto per gesti mobili per ingrandimenti temporanei
- **Supporto del 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**: Le linee guida WCAG richiedono 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**: Ingrandisci il tuo browser al 200% e al 400%. Il tuo layout si adatta in modo elegante? Puoi ancora accedere a tutte le funzionalità senza scorrimenti eccessivi?
## Strumenti Moderni per il Test dell'Accessibilità
Ora che hai capito come le persone navigano sul web con le tecnologie assistive, esploriamo gli strumenti che ti aiutano a costruire e testare siti web accessibili.
Pensala così: gli strumenti automatici sono ottimi per individuare problemi evidenti (come la mancanza 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 è utile per tutti—dalle persone 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 i 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 moduli) | 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 varianti accessibili. Documenta questi colori come token accessibili nel sistema di design.
### Audit completo dell'accessibilità
Il test di accessibilità più efficace combina approcci multipli. Nessun singolo strumento rileva tutto, quindi costruire una routine di test con metodi diversi garantisce una copertura completa.
**Test basati su browser (integrati negli strumenti per sviluppatori):**
- **Chrome/Edge**: Audit di accessibilità con Lighthouse + pannello Accessibilità
- **Firefox**: Inspector di accessibilità con vista dettagliata ad albero
- **Safari**: Scheda Audit in Web Inspector con simulazione VoiceOver
**Estensioni professionali per il test:**
- [axe DevTools](https://www.deque.com/axe/devtools/) - Test automatico 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 automatici
- [Pa11y](https://pa11y.org/) - Strumento di test di accessibilità da linea di comando
- [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) - Valutazione automatica dell'accessibilità
> 🎯 **Obiettivo del test**: Punta a un punteggio di accessibilità Lighthouse di almeno 95 come base. Ricorda, gli strumenti automatici rilevano solo circa il 30-40% dei problemi di accessibilità—i test manuali sono ancora essenziali!
## Costruire l'Accessibilità dalle Basi
La chiave per il successo nell'accessibilità è integrarla fin dall'inizio. 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 pianificazione di una casa—è molto più semplice includere l'accessibilità per le sedie a rotelle nei tuoi piani architettonici iniziali che adattare tutto in seguito.
### 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 assimilato i principi POUR, prendere decisioni sull'accessibilità diventa molto più intuitivo. È come avere una lista mentale che guida le tue scelte di design. Vediamoli nel dettaglio:
**🔍 Percepibile**: Le informazioni devono essere presentate in modi che gli utenti possano percepire attraverso i sensi disponibili
- Fornisci alternative testuali per contenuti non testuali (immagini, video, audio)
- Garantisci un contrasto di colore sufficiente per tutto il testo e i componenti dell'interfaccia utente
- Offri sottotitoli e trascrizioni per i 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 con tastiera
- Fornisci agli utenti tempo sufficiente per leggere e interagire con il contenuto
- 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 l'operazione dell'interfaccia devono essere chiare e comprensibili
- Usa un linguaggio chiaro e semplice adatto al tuo pubblico
- Assicurati che il contenuto appaia e operi 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 il contenuto con un ordine di lettura logico e una gerarchia informativa
**💪 Robusto**: Il contenuto deve 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 elegantemente quando le funzionalità avanzate non sono supportate
## Creare Design Visivi Accessibili
Un buon design visivo e l'accessibilità vanno di pari passo. Quando progetti con l'accessibilità in mente, spesso scopri che questi vincoli portano a soluzioni più pulite ed eleganti che beneficiano tutti gli utenti.
Esploriamo come creare design visivamente accattivanti che funzionino per tutti, indipendentemente dalle loro capacità visive o dalle condizioni in cui stanno visualizzando il tuo contenuto.
### Strategie di colore e accessibilità visiva
Il colore è uno strumento 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à nel distinguere rosso e verde
- **Protanopia**: Il rosso appare più opaco
- **Tritanopia**: Difficoltà con blu e giallo (raro)
**Strategie inclusive per il colore:**
```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 per daltonismo
- Usa pattern, texture o forme insieme alla codifica dei colori
- Assicurati che gli stati interattivi siano distinguibili anche senza colore
- Considera come il tuo design appare 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 che utilizzano la tastiera dove si trovano sulla pagina. Indicatori di focus ben progettati migliorano l'esperienza per tutti rendendo le interazioni chiare e prevedibili.
**Migliori pratiche per gli indicatori di focus moderni:**
```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 intorno 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**: I migliori indicatori di focus spesso utilizzano una combinazione di contorno, ombreggiatura e cambiamenti di colore per garantire la visibilità su diversi sfondi e contesti.
✅ **Verifica gli indicatori di focus**: Naviga con il tasto Tab sul tuo sito web e nota quali elementi hanno indicatori di focus chiari. Ce ne sono alcuni 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 utilizzi 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 segnaletica utile rispetto a un magazzino dove i libri sono sparsi casualmente. Entrambi i luoghi hanno gli stessi libri, ma in quale preferiresti cercare qualcosa? Esattamente!
**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 | "Landmark banner" - navigazione rapida verso l'inizio |
| `