Titolo di esempio
Una o due righe di descrizione.
La regola Al massimo un bottone primary per vista. Il bottone disabled è meglio evitarlo: è grigio e non risponde, ma non spiega il perché. Chi compila un modulo e trova «Salva» bloccato non sa quale campo manca. Meglio lasciarlo attivo: al clic, il campo da completare si evidenzia con un messaggio che dice cosa scrivere.
Testo di aiuto, sempre visibile.
Inserisci un numero, per esempio 850.
La regola L'etichetta resta sempre visibile: il segnaposto sparisce mentre si scrive. L'errore dice cosa fare, non solo che qualcosa è sbagliato.
La regola Lo stato sta in aria-pressed, non in una classe: quello che si vede e quello che sente lo screen reader non possono andare in disaccordo. La spunta lo rende leggibile anche senza colore.
Una o due righe di descrizione.
Una o due righe di descrizione.
Una o due righe di descrizione.
La regola In una scheda cliccabile non vanno altri link o bottoni: sarebbero coperti dal link principale.
La regola Il testo dice lo stato, il colore lo rinforza. Un badge non si clicca.
Provalo: una sezione aperta alla volta.
Un design system per chi progetta e per gli agenti AI.
Sì: Invio e Spazio aprono e chiudono ogni sezione.
No: è costruito sugli elementi nativi details e summary.
La regola Costruito su details e summary: tastiera, screen reader e ricerca nella pagina funzionano senza codice in più.
La regola In un prototipo i dati che non ci sono ancora si mostrano come segnaposto. Mai numeri inventati, mai le graffe del codice a schermo.