Attributo HTML Autofocus
Informazioni sull'attributo HTML autofocus: sintassi, elementi supportati, esempi pratici e considerazioni sull'accessibilità.
L'attributo HTML autofocus è un attributo boolean che indica al browser di spostare automaticamente il focus della tastiera su un elemento non appena la pagina (o la finestra di dialogo che lo contiene) viene caricata. L'utente può iniziare a digitare o interagire con quell'elemento immediatamente, senza dover fare clic o usare il tasto Tab.
L'attributo autofocus è stato introdotto in HTML5 ed è ora supportato da tutti i browser moderni (Chrome, Firefox, Safari ed Edge lo hanno implementato ampiamente a partire dal 2020 circa).
Questa pagina tratta la sintassi, gli elementi a cui si applica, il caso d'uso moderno più comune (un <dialog>), e i compromessi in termini di accessibilità da valutare prima di utilizzarlo.
Sintassi
autofocus è un attributo boolean, quindi la sua semplice presenza lo attiva — non è necessario alcun valore.
<input autofocus>| Si applica a | Qualsiasi elemento HTML che può ricevere il focus. Viene utilizzato più comunemente sui controlli di modulo come <input>, <button>, <select> e <textarea>. Anche un <dialog> aperto con showModal() e un elemento <details> aperto partecipano alla gestione dell'autofocus. |
|---|
Un solo autofocus per documento
L'attributo autofocus può essere impostato su un solo elemento per documento. Se lo si aggiunge a più elementi, i browser lo applicano al primo elemento con l'attributo nell'ordine del documento e ignorano gli altri. Non è quindi possibile usare autofocus per mettere a fuoco più di un campo contemporaneamente — il focus è, per definizione, un punto singolo.
Esempio di base
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document.</title>
</head>
<body>
<h1>Example of the HTML "autofocus" attribute.</h1>
<form action="#">
Name: <input type="text" name="fname" autofocus /><br />
Surname: <input type="text" name="lname" /><br />
<input type="submit" />
</form>
</body>
</html>Quando la pagina si carica, il campo "Name" è attivato e il cursore lampeggia al suo interno, pronto per l'inserimento.
Autofocus su altri elementi
autofocus non è limitato agli input di testo. Funziona su qualsiasi controllo che può ricevere il focus. Il browser mette a fuoco l'elemento; per un <select> o un <button> ciò significa che viene evidenziato e pronto per la tastiera, mentre per un <textarea> il cursore viene posizionato al suo interno.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Autofocus on different controls</title>
</head>
<body>
<!-- A button can receive autofocus -->
<button type="button" autofocus>Start here</button>
<!-- A select can receive autofocus -->
<label>Country:
<select name="country">
<option>United States</option>
<option>Germany</option>
<option>France</option>
</select>
</label>
<!-- A textarea can receive autofocus -->
<label>Message:
<textarea name="message" rows="4"></textarea>
</label>
</body>
</html>Ricorda la regola del singolo autofocus: solo il <button> sopra riceverà il focus, perché è il primo elemento che porta l'attributo.
Autofocus in un <dialog> (utilizzo moderno più comune)
L'uso più chiaro e giustificato di autofocus è all'interno di un <dialog> modale. Quando un utente apre deliberatamente una finestra di dialogo, spostare il focus sul primo controllo rilevante al suo interno è il comportamento atteso — mantiene l'utente che usa la tastiera all'interno della finestra di dialogo, pronto ad agire.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dialog with autofocus</title>
</head>
<body>
<button id="openBtn">Open dialog</button>
<dialog id="myDialog">
<form method="dialog">
<p>
<label>Your name:
<input type="text" name="name" autofocus />
</label>
</p>
<button value="ok">OK</button>
<button value="cancel">Cancel</button>
</form>
</dialog>
<script>
const dialog = document.getElementById("myDialog");
document.getElementById("openBtn")
.addEventListener("click", () => dialog.showModal());
</script>
</body>
</html>Poiché la finestra di dialogo si apre in risposta a un'azione dell'utente, spostare il focus al suo interno non è disorientante — è esattamente quello che l'utente ha richiesto. Per questo motivo, autofocus su un controllo di dialogo è molto più sicuro che autofocus su un campo in una pagina appena caricata.
Quando usare (e quando evitare) l'autofocus
L'autofocus risparmia un clic e indica dove iniziare, ma si appropria anche del controllo della tastiera dall'utente. Utilizzalo quando:
- La pagina o la vista esiste per il solo scopo di quell'input — una pagina di ricerca dedicata, una schermata di login, o un passaggio a singola domanda.
- Il focus si sposta in risposta a un'azione dell'utente, come l'apertura di un
<dialog>modale.
Evitalo quando:
- L'elemento si trova sotto la piega della pagina o a metà di una pagina ricca di contenuti. Metterlo a fuoco costringe il browser a scorrere, il che risulta fastidioso e salta i contenuti precedenti.
- La pagina contiene contenuti significativi che l'utente dovrebbe leggere prima (un articolo con una casella dei commenti, ad esempio). Attivare il focus automatico sulla casella dei commenti porta il lettore oltre l'articolo.
Considerazioni sull'accessibilità
autofocus influisce direttamente sugli utenti di tecnologie assistive, quindi va gestito con attenzione.
- Interruzione per i lettori di schermo. I lettori di schermo normalmente iniziano a leggere dall'inizio del documento. Quando il focus viene forzato su un elemento a metà pagina, il lettore potrebbe saltare direttamente a quel controllo, ignorando silenziosamente il titolo, la navigazione e l'introduzione — l'utente si ritrova "a metà pagina" senza alcun contesto su dove si trova.
- WCAG 2.4.3 (Ordine del focus). Questo criterio di successo richiede che l'ordine del focus preservi il significato e l'operatività. Spostare il focus su un controllo arbitrario al caricamento può violare l'ordine di lettura e tabulazione atteso dall'utente. Riserva l'autofocus ai casi in cui l'elemento focalizzato è genuinamente il punto di partenza logico.
- Cambio di contesto inaspettato. Spostare improvvisamente il focus e far scorrere il viewport può disorientare gli utenti con disabilità cognitive o ipovedenti, che potrebbero non accorgersi che la pagina si è spostata.
Una regola pratica: usa l'autofocus su un elemento solo quando il focus non fa scorrere la pagina e quando quell'elemento è inequivocabilmente la prima cosa che l'utente vuole fare.
Avvertenza sui dispositivi mobili
Diversi browser mobili ignorano intenzionalmente autofocus al caricamento della pagina. Su iOS, mobile Safari non fa apparire la tastiera virtuale né sposta il focus automaticamente al caricamento di una pagina, e Chrome su Android si comporta in modo simile. Si tratta di una scelta UX a livello di sistema operativo: l'apertura automatica della tastiera virtuale coprirebbe i contenuti, modificherebbe il layout e sorprenderebbe l'utente prima che abbia deciso di digitare.
Non esiste una soluzione "forza comunque" affidabile su queste piattaforme, e cercare di simularlo con JavaScript (element.focus() al caricamento) è anch'esso bloccato a meno che non avvenga all'interno di un gestore di gesti utente. L'approccio accettato è quello di mettere a fuoco in risposta a un tocco — ad esempio, chiamando .focus() quando l'utente apre una finestra di dialogo o tocca un pulsante di "ricerca" — che è esattamente il pattern con il dialog mostrato sopra.
Compatibilità con i browser
autofocus fa parte dell'HTML Living Standard e gode di un ampio supporto: Chrome, Edge, Firefox e Safari lo hanno implementato da anni, con il comportamento moderno (qualsiasi elemento) disponibile su questi browser dal 2020 circa. La restrizione sulla tastiera mobile descritta sopra è un comportamento deliberato della piattaforma, non una mancanza di supporto.