You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
259 lines
16 KiB
259 lines
16 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "e6d0f456dfc22afb41bbdefeb5ec179d",
|
|
"translation_date": "2025-10-22T23:24:54+00:00",
|
|
"source_file": "1-getting-started-lessons/3-accessibility/assignment.md",
|
|
"language_code": "it"
|
|
}
|
|
-->
|
|
# Audit completo dell'accessibilità di un sito web
|
|
|
|
## Istruzioni
|
|
|
|
In questo compito, condurrai un audit professionale sull'accessibilità di un sito web reale, applicando i principi e le tecniche che hai appreso. Questa esperienza pratica approfondirà la tua comprensione delle barriere e delle soluzioni legate all'accessibilità.
|
|
|
|
Scegli un sito web che sembri avere problemi di accessibilità: questo ti offrirà maggiori opportunità di apprendimento rispetto all'analisi di un sito già perfetto. I candidati ideali includono siti web più datati, applicazioni web complesse o siti con contenuti multimediali ricchi.
|
|
|
|
### Fase 1: Valutazione manuale strategica
|
|
|
|
Prima di utilizzare strumenti automatizzati, esegui una valutazione manuale completa. Questo approccio centrato sull'utente spesso rivela problemi che gli strumenti non rilevano e ti aiuta a comprendere l'esperienza reale dell'utente.
|
|
|
|
**🔍 Criteri essenziali di valutazione:**
|
|
|
|
**Navigazione e Struttura:**
|
|
- Puoi navigare l'intero sito utilizzando solo la tastiera (Tab, Shift+Tab, Enter, Space, tasti freccia)?
|
|
- Gli indicatori di focus sono chiaramente visibili su tutti gli elementi interattivi?
|
|
- La struttura delle intestazioni (H1-H6) crea un sommario logico dei contenuti?
|
|
- Sono presenti link per saltare direttamente al contenuto principale?
|
|
|
|
**Accessibilità visiva:**
|
|
- C'è un contrasto cromatico sufficiente in tutto il sito (minimo 4.5:1 per il testo normale)?
|
|
- Il sito si basa esclusivamente sul colore per trasmettere informazioni importanti?
|
|
- Tutte le immagini hanno un testo alternativo appropriato?
|
|
- Il layout rimane funzionale quando viene ingrandito al 200%?
|
|
|
|
**Contenuti e Comunicazione:**
|
|
- Ci sono testi di link ambigui come "clicca qui"?
|
|
- È possibile comprendere i contenuti e le funzionalità senza indizi visivi?
|
|
- I campi dei moduli sono correttamente etichettati e raggruppati?
|
|
- I messaggi di errore sono chiari e utili?
|
|
|
|
**Elementi interattivi:**
|
|
- Tutti i pulsanti e i controlli dei moduli funzionano solo con la tastiera?
|
|
- I cambiamenti dinamici dei contenuti vengono annunciati ai lettori di schermo?
|
|
- I dialoghi modali e i widget complessi seguono i modelli di accessibilità corretti?
|
|
|
|
📝 **Documenta i tuoi risultati** con esempi specifici, screenshot e URL delle pagine. Nota sia i problemi che gli aspetti positivi.
|
|
|
|
### Fase 2: Test automatizzati completi
|
|
|
|
Ora valida ed espandi i risultati della tua valutazione manuale utilizzando strumenti di test sull'accessibilità riconosciuti a livello industriale. Ogni strumento ha punti di forza diversi, quindi utilizzarne più di uno ti garantisce una copertura completa.
|
|
|
|
**🛠️ Strumenti di test richiesti:**
|
|
|
|
1. **Lighthouse Accessibility Audit** (integrato in Chrome/Edge DevTools)
|
|
- Esegui l'audit su più pagine
|
|
- Concentrati su metriche e raccomandazioni specifiche
|
|
- Nota il punteggio di accessibilità e le violazioni specifiche
|
|
|
|
2. **axe DevTools** (estensione del browser - standard industriale)
|
|
- Rilevamento di problemi più dettagliato rispetto a Lighthouse
|
|
- Fornisce esempi di codice specifici per le correzioni
|
|
- Testa i criteri WCAG 2.1
|
|
|
|
3. **WAVE Web Accessibility Evaluator** (estensione del browser)
|
|
- Rappresentazione visiva delle funzionalità di accessibilità
|
|
- Evidenzia sia gli errori che gli aspetti positivi
|
|
- Ottimo per comprendere la struttura della pagina
|
|
|
|
4. **Analizzatori di contrasto cromatico**
|
|
- WebAIM Contrast Checker per coppie di colori specifiche
|
|
- Estensioni del browser per analisi su tutta la pagina
|
|
- Testa sia gli standard WCAG AA che AAA
|
|
|
|
**🎧 Test con tecnologie assistive reali:**
|
|
- **Test con lettori di schermo**: Usa NVDA (Windows), VoiceOver (Mac) o TalkBack (Android)
|
|
- **Navigazione solo con tastiera**: Scollega il mouse e naviga l'intero sito
|
|
- **Test di zoom**: Verifica la funzionalità con livelli di zoom al 200% e 400%
|
|
- **Test di controllo vocale**: Se disponibile, prova strumenti di navigazione vocale
|
|
|
|
**📊 Organizza i tuoi risultati** creando un foglio di calcolo principale con:
|
|
- Descrizione e posizione del problema
|
|
- Livello di gravità (Critico/Alto/Medio/Basso)
|
|
- Criteri di successo WCAG violati
|
|
- Strumento che ha rilevato il problema
|
|
- Screenshot e prove
|
|
|
|
### Fase 3: Documentazione completa dei risultati
|
|
|
|
Crea un report professionale sull'audit di accessibilità che dimostri la tua comprensione sia dei problemi tecnici che del loro impatto umano.
|
|
|
|
**📋 Sezioni richieste nel report:**
|
|
|
|
1. **Sintesi esecutiva** (1 pagina)
|
|
- URL del sito web e breve descrizione
|
|
- Livello generale di maturità dell'accessibilità
|
|
- I 3 problemi più critici
|
|
- Impatto stimato sugli utenti con disabilità
|
|
|
|
2. **Metodologia** (½ pagina)
|
|
- Approccio al test e strumenti utilizzati
|
|
- Pagine valutate e combinazioni dispositivo/browser
|
|
- Standard valutati (WCAG 2.1 AA)
|
|
|
|
3. **Risultati dettagliati** (2-3 pagine)
|
|
- Problemi categorizzati per principio WCAG (Percepibile, Operabile, Comprensibile, Robusto)
|
|
- Includi screenshot ed esempi specifici
|
|
- Nota le caratteristiche positive di accessibilità che hai trovato
|
|
- Confronta con i risultati degli strumenti automatizzati
|
|
|
|
4. **Valutazione dell'impatto sugli utenti** (1 pagina)
|
|
- Come i problemi identificati influenzano gli utenti con diverse disabilità
|
|
- Scenari che descrivono esperienze reali degli utenti
|
|
- Impatto aziendale (rischio legale, SEO, espansione della base utenti)
|
|
|
|
**📸 Raccolta di prove:**
|
|
- Screenshot delle violazioni di accessibilità
|
|
- Registrazioni video dei flussi problematici degli utenti
|
|
- Report degli strumenti (salvati in formato PDF)
|
|
- Esempi di codice che mostrano i problemi
|
|
|
|
### Fase 4: Piano di rimedio professionale
|
|
|
|
Sviluppa un piano strategico e prioritario per risolvere i problemi di accessibilità. Questo dimostra la tua capacità di pensare come un professionista del web che affronta vincoli aziendali reali.
|
|
|
|
**🎯 Crea raccomandazioni dettagliate per il miglioramento (minimo 10 problemi):**
|
|
|
|
**Per ogni problema identificato, fornisci:**
|
|
|
|
- **Descrizione del problema**: Spiegazione chiara di cosa non va e perché è problematico
|
|
- **Riferimento WCAG**: Criteri di successo specifici violati (es. "2.4.4 Scopo del link (nel contesto) - Livello A")
|
|
- **Impatto sull'utente**: Come questo problema influisce sulle persone con diverse disabilità
|
|
- **Soluzione**: Modifiche specifiche al codice, modifiche al design o miglioramenti ai processi
|
|
- **Livello di priorità**: Critico (impedisce l'uso di base) / Alto (barriera significativa) / Medio (problema di usabilità) / Basso (miglioramento)
|
|
- **Sforzo di implementazione**: Stima di tempo/complessità (Risultato rapido / Sforzo moderato / Ristrutturazione importante)
|
|
- **Verifica del test**: Come verificare che la correzione funzioni
|
|
|
|
**Esempio di raccomandazione per il miglioramento:**
|
|
|
|
```
|
|
Issue: Generic "Read more" link text appears 8 times on homepage
|
|
WCAG Reference: 2.4.4 Link Purpose (In Context) - Level A
|
|
User Impact: Screen reader users cannot distinguish between links when viewed in link list
|
|
Solution: Replace with descriptive text like "Read more about sustainability initiatives"
|
|
Priority: High (major navigation barrier)
|
|
Effort: Low (30 minutes to update content)
|
|
Testing: Generate link list with screen reader - each link should be meaningful standalone
|
|
```
|
|
|
|
**📈 Fasi di implementazione strategica:**
|
|
|
|
- **Fase 1 (0-2 settimane)**: Problemi critici che bloccano la funzionalità di base
|
|
- **Fase 2 (1-2 mesi)**: Miglioramenti prioritari per una migliore esperienza utente
|
|
- **Fase 3 (3-6 mesi)**: Miglioramenti di priorità media e miglioramenti ai processi
|
|
- **Fase 4 (Continuo)**: Monitoraggio e miglioramento continuo
|
|
|
|
## Rubrica di valutazione
|
|
|
|
Il tuo audit di accessibilità sarà valutato sia per l'accuratezza tecnica che per la presentazione professionale:
|
|
|
|
| Criteri | Eccellente (90-100%) | Buono (80-89%) | Soddisfacente (70-79%) | Da migliorare (<70%) |
|
|
|----------|-------------------|---------------|---------------------|------------------------|
|
|
| **Profondità del test manuale** | Valutazione completa che copre tutti i principi POUR con osservazioni dettagliate e scenari utente | Buona copertura della maggior parte delle aree di accessibilità con risultati chiari e qualche analisi dell'impatto utente | Valutazione di base che copre le aree chiave con osservazioni adeguate | Test limitato con osservazioni superficiali e minima considerazione dell'impatto utente |
|
|
| **Utilizzo e analisi degli strumenti** | Utilizza efficacemente tutti gli strumenti richiesti, incrocia i risultati, include prove chiare e analizza le limitazioni degli strumenti | Utilizza la maggior parte degli strumenti con buona documentazione, qualche incrocio e prove adeguate | Utilizza gli strumenti richiesti con documentazione di base e alcune prove | Utilizzo minimo degli strumenti, documentazione scarsa o prove mancanti |
|
|
| **Identificazione e categorizzazione dei problemi** | Identifica 15+ problemi specifici in tutti i principi WCAG, categorizza accuratamente per gravità, dimostra una profonda comprensione | Identifica 10-14 problemi in molti principi WCAG, buona categorizzazione, mostra solida comprensione | Identifica 7-9 problemi con copertura WCAG adeguata e categorizzazione di base | Identifica <7 problemi con ambito limitato o categorizzazione scarsa |
|
|
| **Qualità e fattibilità delle soluzioni** | 10+ soluzioni dettagliate e attuabili con riferimenti WCAG accurati, tempistiche realistiche e metodi di verifica | 8-9 soluzioni ben sviluppate con riferimenti per lo più accurati e buoni dettagli di implementazione | 6-7 soluzioni di base con qualche dettaglio e approcci generalmente realistici | <6 soluzioni o dettagli insufficienti, implementazioni irrealistiche |
|
|
| **Comunicazione professionale** | Report eccellentemente organizzato, scritto in modo chiaro, include sintesi esecutiva, utilizza linguaggio tecnico appropriato e segue standard di documenti aziendali | Ben organizzato con buona qualità di scrittura, include la maggior parte delle sezioni richieste, tono appropriato | Adeguatamente organizzato con scrittura accettabile, include le sezioni richieste di base | Organizzazione scarsa, scrittura poco chiara o sezioni chiave mancanti |
|
|
| **Applicazione al mondo reale** | Dimostra comprensione dell'impatto aziendale, considerazioni legali, diversità degli utenti e sfide pratiche di implementazione | Mostra buona comprensione delle applicazioni pratiche con qualche contesto aziendale | Comprensione di base delle applicazioni reali | Connessione limitata alle applicazioni pratiche |
|
|
|
|
## Opzioni di sfida avanzata
|
|
|
|
**🚀 Per studenti che cercano una sfida aggiuntiva:**
|
|
|
|
- **Analisi comparativa**: Audita 2-3 siti web concorrenti e confronta il loro livello di maturità sull'accessibilità
|
|
- **Focus sull'accessibilità mobile**: Approfondisci i problemi specifici di accessibilità mobile utilizzando Android TalkBack o iOS VoiceOver
|
|
- **Prospettiva internazionale**: Ricerca e applica standard di accessibilità di diversi paesi (EN 301 549, Section 508, ADA)
|
|
- **Revisione della dichiarazione di accessibilità**: Valuta la dichiarazione di accessibilità esistente del sito (se presente) rispetto ai tuoi risultati
|
|
|
|
## Consegne
|
|
|
|
Invia un report completo sull'audit di accessibilità che dimostri un'analisi di livello professionale e una pianificazione pratica di implementazione:
|
|
|
|
**📄 Requisiti del report finale:**
|
|
|
|
1. **Sintesi esecutiva** (1 pagina)
|
|
- Panoramica del sito web e valutazione della maturità sull'accessibilità
|
|
- Sintesi dei risultati principali con impatto aziendale
|
|
- Azioni prioritarie raccomandate
|
|
|
|
2. **Metodologia e ambito** (1 pagina)
|
|
- Approccio al test, strumenti utilizzati e criteri di valutazione
|
|
- Pagine/sezioni valutate e eventuali limitazioni
|
|
- Quadro di conformità agli standard (WCAG 2.1 AA)
|
|
|
|
3. **Report dettagliato dei risultati** (3-4 pagine)
|
|
- Osservazioni del test manuale con scenari utente
|
|
- Risultati degli strumenti automatizzati con incrocio dei dati
|
|
- Problemi organizzati per principi WCAG con prove
|
|
- Caratteristiche positive di accessibilità identificate
|
|
|
|
4. **Piano strategico di rimedio** (3-4 pagine)
|
|
- Raccomandazioni di miglioramento prioritizzate (minimo 10)
|
|
- Cronologia di implementazione con stime di sforzo
|
|
- Metriche di successo e metodi di verifica
|
|
- Strategia di manutenzione a lungo termine sull'accessibilità
|
|
|
|
5. **Prove di supporto** (Appendici)
|
|
- Screenshot delle violazioni di accessibilità e strumenti di test
|
|
- Esempi di codice che dimostrano problemi e soluzioni
|
|
- Report degli strumenti e sintesi dell'audit
|
|
- Note o registrazioni dei test con lettori di schermo
|
|
|
|
**📊 Requisiti di formato:**
|
|
- **Formato del documento**: PDF (presentazione professionale)
|
|
- **Conteggio parole**: 2.500-3.500 parole (escludendo appendici e screenshot)
|
|
- **Elementi visivi**: Includi screenshot, diagrammi ed esempi lungo tutto il documento
|
|
- **Citazioni**: Riferisci linee guida WCAG e risorse sull'accessibilità in modo appropriato
|
|
|
|
**💡 Consigli per l'eccellenza:**
|
|
- Usa un formato professionale per il report con intestazioni e stile coerenti
|
|
- Includi un indice per una navigazione facile
|
|
- Bilancia l'accuratezza tecnica con un linguaggio chiaro e adatto al contesto aziendale
|
|
- Dimostra comprensione sia dell'implementazione tecnica che dell'impatto sull'utente
|
|
|
|
## Risultati di apprendimento
|
|
|
|
Dopo aver completato questo audit completo sull'accessibilità, avrai sviluppato competenze professionali essenziali:
|
|
|
|
**🎯 Competenze tecniche:**
|
|
- **Padronanza dei test sull'accessibilità**: Competenza con metodi di test manuali e automatizzati riconosciuti a livello industriale
|
|
- **Applicazione WCAG**: Esperienza pratica nell'applicare le linee guida WCAG a scenari reali
|
|
- **Comprensione delle tecnologie assistive**: Esperienza pratica con lettori di schermo e navigazione tramite tastiera
|
|
- **Mappatura problema-soluzione**: Capacità di identificare barriere di accessibilità e sviluppare strategie di rimedio specifiche e attuabili
|
|
|
|
**💼 Competenze professionali:**
|
|
- **Comunicazione tecnica**: Esperienza nella redazione di report professionali sull'accessibilità per diversi stakeholder
|
|
- **Pianificazione strategica**: Capacità di prioritizzare i miglioramenti sull'accessibilità basandosi sull'impatto sull'utente e sulla fattibilità di implementazione
|
|
- **Assicurazione qualità**: Comprensione dei test sull'accessibilità come parte del ciclo di vita dello sviluppo
|
|
- **Valutazione del rischio**: Consapevolezza delle implicazioni legali, aziendali ed etiche della conformità all'accessibilità
|
|
|
|
**🌍 Mentalità di design inclusivo:**
|
|
- **Empatia verso l'utente**: Comprensione profonda delle esigenze di utenti diversi e delle interazioni con le tecnologie assistive
|
|
- **Principi di design universale**: Riconoscimento che il design accessibile avvantaggia tutti gli utenti, non solo quelli con disabilità
|
|
- **Miglioramento continuo**: Struttura per la valutazione e il miglioramento continuo dell'accessibilità
|
|
- **Competenze di advocacy**: Fiducia nel promuovere le migliori pratiche sull'accessibilità nei progetti e nei team futuri
|
|
|
|
**🚀 Preparazione alla carriera:**
|
|
Questo compito rispecchia i progetti di consulenza sull'accessibilità nel mondo reale, offrendoti un'esperienza degna di portfolio che dimostra:
|
|
- Approccio sistematico alla risoluzione dei problemi
|
|
- Attenzione sia ai dettagli tecnici che all'impatto aziendale
|
|
- Comunicazione chiara di concetti tecnici complessi
|
|
- Comprensione delle responsabilità legali ed etiche nello sviluppo web
|
|
|
|
Al termine, sarai pronto a contribuire in modo significativo alle iniziative di accessibilità in qualsiasi ruolo di sviluppo web e a promuovere pratiche di design inclusivo durante tutta la tua carriera.
|
|
|
|
---
|
|
|
|
**Disclaimer**:
|
|
Questo documento è stato tradotto utilizzando il servizio di traduzione AI [Co-op Translator](https://github.com/Azure/co-op-translator). Sebbene ci impegniamo per garantire l'accuratezza, si prega di notare che le traduzioni automatiche possono contenere errori o imprecisioni. Il documento originale nella sua lingua nativa dovrebbe essere considerato la fonte autorevole. Per informazioni critiche, si raccomanda una traduzione professionale umana. Non siamo responsabili per eventuali incomprensioni o interpretazioni errate derivanti dall'uso di questa traduzione. |