Accessibilità WCAG 2.2 AA
Vinacta è WCAG 2.2 AA compliant. Screen reader, contrast, keyboard, motion.
3 min lettura
Compliance WCAG 2.2 AA
- axe-core CI workflow (Sprint 86 LIVE): scan 9+ public pages ogni PR
- Lighthouse a11y score ≥ 95 su pagine chiave (Sprint 87 LIVE)
- Manual review sample sprint boundary
Screen reader
- VoiceOver (Mac + iPhone)
- NVDA (Windows free)
- TalkBack (Android)
- JAWS (Windows commercial)
Tutti gli elementi interattivi hanno:
aria-labelsemanticamente correttoroleappropriato (button, link, dialog, ...)- Live region per dynamic updates
- Focus management modale (trap + return)
Keyboard navigation
- Tab order semantico (left-to-right, top-to-bottom)
- Focus visible (default outline + custom focus-ring color)
- Skip links (Skip to main content, Skip to navigation)
- Escape chiude modale + drawer
- Enter/Space activates button
Contrast
- Normal text 4.5:1 (default text on bg)
- Large text 3:1 (heading)
- Interactive elements 3:1 (button border)
Tested con Lighthouse + axe-core automatic.
- Disable transition animations
- Disable scroll-snap auto
- Disable parallax effects
- Mantiene focus indicators + state changes
Text size
- Zoom up to 200% senza horizontal scroll
- Line-height ≥ 1.5
- Paragraph spacing ≥ 2× font-size
Alt text immagini
- Informative: descrizione contenuto (es. "Logo Cantina Roero Piemonte")
- Decorative: alt="" (no screen reader announcement)
- Functional: descrizione azione (es. "Pulsante condividi su WhatsApp")
Form
<label>associato a<input>- Errori chiari + actionable (no "Errore generico")
- Required field marcato + announced screen reader
- Validation immediate + clear
Modal + Drawer
- Focus return a trigger originale on close
- aria-modal="true"
- Click outside per chiudere (configurable)
- Escape per chiudere (sempre)
Video / Audio
- Captions IT/EN/DE/FR/ES
- Audio descriptions (alt audio track)
- Transcript scaricabile
Best practice utente
- Attiva High Contrast theme in /app/settings/branding
- Browser zoom 150% (Vinacta resta usabile)
- Screen reader keyboard mode
Se hai motor disabilities
- Tutti shortcut keyboard funzionano (no mouse)
- Touch targets ≥ 44×44 px su mobile
- Drag & drop ha alternative (Move up/down buttons)
Se hai cognitive disabilities
- Wizard step-by-step (no overwhelming)
- Confirm dialogs per destructive actions
- Auto-save draft (no perdere lavoro)
- Glossario per termini AIS
Report a11y issue
- Browser + assistive tech specifica
- Steps to reproduce
- Aspettava + actual behavior
Risposta entro 7gg working day. Fix in next sprint.
- WAI-ARIA Practices — pattern interattivi
- WCAG 2.2 standard — spec ufficiale