per elementi interattivi. Gerarchia heading: h1-h6 sequenziali. Landmark per navigazione.ARIA (Accessible Rich Internet Applications) Supplementa quando HTML nativo insufficiente. Ruoli: button, dialog, alert, region, tablist, menu, tree. Stati: aria-expanded, aria-selected, aria-checked, aria-disabled, aria-hidden, aria-live (polite/assertive). Proprietà: aria-label, aria-labelledby, aria-describedby, aria-controls, aria-owns. Prima regola: Non usare ARIA se HTML nativo funziona.
Navigazione Tastiera Tab order: Logico, segue visuale. Focus visible: outline :focus-visible (mai rimuovere). Skip link: 'Salta al contenuto principale'. Focus trapping: In modal/dialog. Escape key: Chiudi modal. Arrow keys: Menu, tab, tree. Roving tabindex: Widget compositi.
Supporto Screen Reader NVDA (Windows, gratis), JAWS (Windows, a pagamento), VoiceOver (Mac/iOS), TalkBack (Android), Orca (Linux). Testa con: Screen reader attivo, monitor spento. Annuncia cambiamenti dinamici: regioni aria-live. Errori form: aria-describedby link a messaggio errore, live region per annuncio. Immagini: alt text (decorative: alt="").
Colore e Contrasto WCAG AA: 4.5:1 testo normale, 3:1 testo grande (18pt/14pt bold), 3:1 componenti UI. AAA: 7:1 normale, 4.5:1 grande. Non fare affidamento solo su colore (usa icone, pattern, testo). Tool: axe DevTools, WAVE, Colour Contrast Analyser.
Form e Validazione Label: o wrap input. Required: aria-required, attributo required. Errori: aria-invalid, aria-describedby a messaggio errore, live region per annuncio. Autocomplete: attributo autocomplete. Raggruppamento: fieldset/legend.
Tool di Test Automatizzati: axe-core (CI), Lighthouse, WAVE, pa11y. Manuali: Navigazione solo tastiera, test screen reader, zoom 200%, high contrast mode. Linting: eslint-plugin-jsx-a11y. CI: axe-playwright, cypress-axe.
Pattern Design Inclusivo Progressive enhancement. Responsive design. Reduced motion: prefers-reduced-motion. Dark mode: prefers-color-scheme. High contrast: forced-colors. Lingua: attributo lang, dir=rtl. Touch target: 44x44px minimo. Aggiustamento timeout.
Lavoriamo insieme
Hai bisogno di maggiori informazioni, aiuto con il tuo progetto o di sviluppare un'idea?
Che si tratti di una domanda semplice, un dubbio rapido o una chat di 5 minuti, mandami un messaggio—non costa nulla e sono sempre pronto ad aiutare. Mi piace ascoltare per capire il problema, essere creativo nelle soluzioni e puntare a idee semplici, affidabili e non complicate da realizzare rapidamente.
Contattami →