Nativo o personalizzato: quando scegliere un elemento reale

Per qualsiasi controllo deve fare una scelta: usare un elemento HTML nativo oppure costruirne uno personalizzato. Quello nativo è quasi sempre la soluzione migliore.

Un button nativo può ricevere il focus, essere attivato con mouse, tastiera e tocco e viene annunciato correttamente. Lei scrive un solo tag e la piattaforma fa tutto il resto.

Se applica uno stile a uno span per farlo sembrare un button, continuerà a non avere ruolo, focus o supporto per la tastiera. Inganna solo l'occhio.

Per far funzionare un controllo personalizzato, è necessario aggiungere un role, tabindex e gestori dei tasti per Invio e Spazio. È molto codice per replicare un solo elemento.

Anche i controlli personalizzati più accurati trascurano casi limite: indicatori del focus, stati disabilitati e tocco. L’element nativo gestisce già tutti questi aspetti.

Questo vale per l’intera piattaforma. Un vero select, checkbox o details offre comportamenti e accessibilità che un’imitazione basata su div non riesce mai a replicare completamente.

I controlli nativi dei moduli vengono inviati insieme al form, si convalidano da soli e si associano automaticamente a un’etichetta. Ricostruire tutto manualmente raramente vale la pena.

Scelga una soluzione custom solo quando non esiste alcun elemento nativo per il modello desiderato, ad esempio per un’interfaccia a schede o un albero. In tal caso, segua con attenzione un modello di implementazione collaudato.

Teme che un vero pulsante abbia un aspetto troppo semplice? Può styleizzare ampiamente gli elementi nativi con CSS. Mantenga la semantica e cambi l’aspetto come preferisce.

Scegliere il vero element significa usare meno JavaScript, avere meno bug e disporre di un controllo che continua a funzionare anche con gli aggiornamenti del browser e delle tecnologie assistive, senza alcuno sforzo aggiuntivo.

Lo renda il suo criterio predefinito: prima il nativo, first, e il personalizzato solo come ultima risorsa. La piattaforma web offre un’enorme opportunità di accessibilità: lasci che sia lei a svolgere il lavoro.

Scelga prima il native: un vero pulsante o input offre gratuitamente focus, tasti e semantica. Scelga una soluzione personalizzata solo quando non esiste alcun elemento adatto e stilizzi liberamente gli elementi nativi. 🎉