Test con gli screen reader
Usare VoiceOver e NVDA per verificare le implementazioni ARIA
Test con gli screen reader è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.
Perché testare con i lettori di schermo?
Gli strumenti automatizzati rilevano solo il 30-40% dei problemi di accessibilità. I test con lettori di schermo reali fanno emergere problemi che i controlli automatizzati non individuano:
- Ordine di lettura confuso
- Annunci ARIA poco utili
- Gestione del focus assente
- Pattern interattivi confusi
VoiceOver su Mac
VoiceOver è integrato in macOS: non è necessaria alcuna installazione:
<!-- Activate: Cmd+F5 (or System Settings → Accessibility → VoiceOver) -->
<!-- Key commands:
VO = Control+Option
VO+Right Arrow = Next element
VO+Left Arrow = Previous element
VO+Space = Activate element
VO+U = Open rotor (landmark navigation)
VO+H = Next heading
Tab = Next focusable element
Shift+Tab = Previous focusable
-->VoiceOver su iOS
Testate l'esperienza con il lettore di schermo mobile usando VoiceOver su iPhone/iPad:
<!-- Activate: Settings → Accessibility → VoiceOver
Or: triple-click side button if set up -->
<!-- Gestures:
Swipe right = next element
Swipe left = previous element
Double-tap = activate element
Two-finger scrub = back
Three-finger swipe up/down = scroll
-->NVDA su Windows
NVDA è un lettore di schermo gratuito e open source per Windows:
<!-- Download: nvaccess.org -->
<!-- Key commands:
NVDA key = Insert (or Caps Lock)
NVDA+N = NVDA menu
H = next heading
K = next link
B = next button
F = next form field
D = next landmark
Insert+F7 = element list (links, headings, landmarks)
-->Checklist per i test con lettori di schermo
Che cosa verificare con un lettore di schermo:
- Il titolo della pagina viene annunciato al caricamento
- Le intestazioni creano una struttura di navigazione logica
- Tutte le immagini hanno un testo alt significativo o vuoto
- Tutti i campi del modulo hanno etichette
- Pulsanti e link hanno nomi descrittivi
- Il focus trap delle finestre modali funziona correttamente
- Gli aggiornamenti del contenuto dinamico vengono annunciati
Problemi comuni dei lettori di schermo
Problemi che i test automatizzati non rilevano:
<!-- 1. Reading order differs from visual order -->
<!-- CSS flex/grid order ≠ DOM order for screen readers -->
<!-- 2. aria-label doesn't match visible text -->
<!-- Voice control users say visible text to click -->
<!-- 3. Focus disappears after dialog closes -->
<!-- Programmatically return focus to trigger -->
<!-- 4. Dynamic content not in a live region -->
<!-- New items added silently, no announcement -->Test con priorità alla tastiera
Prima di usare un lettore di schermo, testate prima la tastiera da sola:
- Scollegate il mouse o il trackpad
- Spostatevi nell'intera pagina usando solo Tab
- Verificate che ogni elemento interattivo sia raggiungibile
- Verificate che tutte le azioni possano essere eseguite con la tastiera
Strumenti automatizzati per i test di accessibilità
Affiancate ai test manuali gli strumenti automatizzati:
- axe DevTools — estensione per Chrome; il controllo automatizzato più accurato
- WAVE — wavebooth.com; sovrapposizione visiva sulla pagina
- Lighthouse — Chrome DevTools; audit di prestazioni e accessibilità
- pa11y — strumento CLI; ideale per le pipeline CI/CD
Riferimento ai pattern ARIA
La W3C ARIA Authoring Practices Guide (APG) fornisce implementazioni di riferimento:
- Accordion, Alert, Alert Dialog
- Breadcrumb, Button, Carousel
- Checkbox, Combobox, Dialog
- Disclosure, Feed, Grid
- Listbox, Menu, Menubar
- Tab, Tooltip, Treeview
URL: w3.org/WAI/ARIA/apg/
Integrazione continua dell'accessibilità
Integrate i test di accessibilità nel vostro flusso di lavoro:
// Jest + axe-core for unit tests:
import { axe, toHaveNoViolations } from 'jest-axe';
expect.extend(toHaveNoViolations);
test('Button is accessible', async () => {
const results = await axe('<button>Click me</button>');
expect(results).toHaveNoViolations();
});
// pa11y in CI pipeline:
// pa11y https://example.com --standard WCAG2AARiepilogo dei test
Una strategia completa per i test di accessibilità:
- Progettazione — verificate il contrasto dei colori e le dimensioni delle aree attivabili tramite tocco
- Sviluppo — testate la tastiera ed eseguite una scansione automatizzata con axe
- Revisione — eseguite test con lettori di schermo (VoiceOver + NVDA)
- CI/CD — usate pa11y o axe nella pipeline automatizzata
- Produzione — usate Lighthouse e controlli manuali a campione
Verifica rapida
Quale percentuale dei problemi di accessibilità possono rilevare in modo affidabile gli strumenti automatizzati?
Riepilogo: test con lettori di schermo
Elementi essenziali dei test:
- VoiceOver (Mac/iOS) e NVDA (Windows) sono gratuiti ed essenziali
- Testate prima usando solo la tastiera, poi aggiungete il lettore di schermo
- Strumenti automatizzati: axe, WAVE, Lighthouse, pa11y
- I test automatizzati rilevano solo circa il 30-40% dei problemi
- Fate riferimento ai pattern APG per implementare correttamente ARIA
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 40
- Lezioni
- 159
Domande Frequenti
La lezione «Test con gli screen reader» è gratuita?
Sì — il testo completo di «Test con gli screen reader» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.
Cosa imparerò in «Test con gli screen reader»?
Usare VoiceOver e NVDA per verificare le implementazioni ARIA Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare HTML Academy?
Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Test con gli screen reader»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione HTML Academy?
Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- aria-expanded e aria-controls per i toggle
- aria-selected e pattern delle schede
- Regioni live: aria-live aria-atomic aria-relevant
- Test con gli screen reader