Set Input Focus with HTML5
autofocus attribute on form elements to automatically focus the input field when the page loads 👍
This is super handy if your site has a form and you can automatically select the first input field and your user can start typing right away 👏
For example, if you have a search site like google, you can use this attribute to automatically select the search field. That way your user can start typing immediately without needing to click on the input field first. Yay, awesome User Experience 🤩
You can apply the
autofocus attribute on:
<input autofocus> <button autofocus> <select autofocus> <textarea autofocus>
autofocus Faux Pas
Note you can't apply
autofocus on inputs of type
hidden because hidden inputs can't be focused.
<!-- ❌ do NOT do this --> <input type="hidden" autofocus>
autofocus can only be on one element on one page. So don't use it on multiple elements.
I'll be remissed not to mention some of the accessibility concerns of
autofocus. So please keep this in mind before using this attribute.
Automatically focusing a form control can confuse visually-impaired people who using screen-reading technology. When autofocus is assigned, screen-readers "teleport" their user to the form control without warning them beforehand.
I also want to point a possible solution of using
aria-describedby that may help with this. Of course, if you know of any other solutions, please do share!
When this alert loads, the
autofocus is kicked in to automatically select the "Do not delete" button. However, due to the limitation of
autofocus for screen readers. This is not ideal for accessibility. A possible solution is to utilize the
aria-describedby attribute. So the screen reader will now announce: "Are you sure? dialog. Once you delete this thing, it’s gone forever! Do not delete, button."
<div role="alertdialog" aria-labelledby="acc_name" aria-describedby="acc_desc" > <h2 id="acc_name"> Are you sure? </h2> <p id="acc_desc"> Once you delete this thing, it's gone forever! </p> <button autofocus> Do not delete </button> <button> Delete </button> </div>
Credit to developer.paciellogroup.com