Add autofocus to the first field and your visitor can start typing as soon as the page loads. No need to click or tab or search for forms on the page.
If the user uses assistive technology, it will announce the label and the field, and then announce that the field is focused.
Similarly, your password reset page (single field) and signup page (single purpose) will have the same structure and will likewise benefit from having the first field focused.
If your login page is followed by a 2fa page, then that autofocus
is vital.
Few things are as "throw pc out of the window"-frustrating as frantically typing in that 2fa code as the last few seconds tick away, only to find the field wasn't focused. And now you have to do it all over again.
Argh!
Some things just get to me.
Even if you have a page with a single purpose, you might not want to add autofocus.
If you have a login form but people can also use social logins (Google, GitHub, and the like) and you don't know which one they'll use don't add an autofocus.
Instead, keep track of what they use to log in. As soon as you know which one they're using you can store that in a cookie (or localStorage) and focus on the field or button they need to interact with the next time they visit.
So let's get back to the point: autofocus
is a great way to make your forms more user-friendly, as long as you use it in the right place.
Are you building a page that has:
Then autofocus
is your and your visitor's friend.
So go ahead and use it on your login pages, your signup pages, your password reset pages, and your 2fa pages. Your users will thank you for it.
Web developer and creator of Polypane.app, the browser for developers.
Blog: kilianvalkhof.com
Mastodon: @kilian
X: @kilianvalkhof
Polypane: Polypane.app