Why would the search input field not get focus when the page is loaded?

Question

Opening up google.com I see that the search input field gets focus automatically, i.e. the cursor is already blinking in the field and users can start typing right away.

In contrast, amazon.com or booking.com don't do this. Yes, 99.9x% of the Google users will search and appreciate that they can start typing right away, while at Amazon or Booking there is a chance that users want to browse the site instead of searching right way. Anyhow, would it hurt to give the input field focus and make it convenient for those who want to start typing?

Q: What are reasons NOT to give a search input field focus?

After reading a related older discussion here on the site about why Google would not do this, I learned that Accessibility might be a reason. So I'd be very interested if there is an accessibility-friendly way to work with autofocus?

Answer 1

Autofocus is a tool that is wildly helpful if done correctly and it is appropriate to the situation, but there are many, many things that can go wrong. If your implementation doesn't avoid all of these pitfalls then you will cause great annoyance to some (or maybe all) of your users:

• If the autofocus happens only when the page has finished loading, then you could end up dragging the user away from any interaction they have already started, during load time. For example:
  • The user has scrolled the page, then it jumps back up to the top.
  • The user has started typing in one field and suddenly finds themselves typing somewhere else.
  • The user has started typing in the auto-focussed field, but the auto-focus effectively triggers a 'select all' so the next keystroke replaces what they have typed so far.
  • The user is tabbing through the document and suddenly they are jumped to somewhere unexpected.
• It can interfere with keyboard navigation, e.g. up/down, page-up/page-down, home/end, backspace (which is equivalent to the 'back' button), and so on. These would normally scroll the page or cause some other navigation, but not when an input has the focus.
• If the design of the input changes when it gets the focus (e.g. a small search box might expand to full width when you enter it) then it will distract users who don't want to access this feature from what they intended to do and may end up covering content they are trying to see.
• On touch devices, this can cause the keyboard to pop-up, covering half the page and requiring extra steps to remove. This is very intrusive if it's not wanted and can be confusing even if it is wanted.
• If the user is using accessibility tools (e.g. a screen reader) it jumps them to a random place in the document, which is very disorienting and can make navigation difficult.
• If entering the field causes XHR request to load data (e.g. 'recent searches', or 'suggested articles') then this causes unnecessary bandwidth usage and may slow down loading or using the page due to requests being queued.

Google side-steps most of the above problems, because:

1. From the Google home-page it is overwhelmingly likely that you will want to perform a search. There is very little else to do there!
2. The page is very, very small and so loads super-quick, so there is not much time for a user to do anything whilst it is loading.
3. The page fits on a single screen on nearly all form factors, so there is no scrolling to worry about.
4. There is only a single input, so the likelihood of tabbing around the page or being in a different input element is reduced significantly.
5. They disable it on touch devices, so it doesn't pop-up the keyboard.
6. The style of the input box doesn't change on focus.
7. Whilst they do load some data in the background, this is done in a very optimised way that does not use much bandwidth nor impact upon performance, as far as I can tell.
8. It may impact on screen readers, in the manner described above, but I haven't tested that. However, given the limited content on the page this might not have much of a real-world impact.

Google's is quite a specialist use-case and whilst there may be other situations where autofocus would be appropriate (e.g. a login form which doesn't contain any other content) in most cases, it causes more annoyance than it saves.

Answer 2

You already answered your own question. Keyboard/screen-reader users will need to step out of the search field when it was focused automatically to make use of other ways to navigate. Also on mobile, Google doesn't auto focus on the input field. The reason is simply to not directly popup a keyboard since that would be annoying.

If you want to make your main search field accessible use the ARIA attribute role="search" on the form (see this example on MDN). This will make it a landmark and easier to find and navigate to for screen readers. Use that landmark only once.

Answer 3

Here is an example of where auto focusing the search field is extremely annoying, unwanted behaviour:

1. Go to Openclipart and search for something, say linux.
2. Scroll down to the bottom and click the next page button.
3. Now on the second page result you want to scroll down the page by pressing the spacebar. Except you can't because the stupid search box has stolen focus and you just end up prefixing the search term with spaces.

Answer 4

Tl,dr; some reasons not to give the search field autofocus when entering a site are:

1. Searching is not the main function of your site, just an optional tool you offer to your users
2. Searching is the main function of your site, but it requires more than 1 field/parameter to work

---

Google does this not because 99.9% of its users will search; it does it because people enter Google to search. That's the main function and the focus (pun intended) of the site.

On the other hand, the main function of amazon.com is to sell; so not only not all people that enters amazon already knows exactly what they want to buy, but amazon also wants people to spend at least a few seconds in the main page so they can advertise products to you, using spaces they already sold to vendors.

Now, you might say "hey, but people go into booking.com to search too" and, you would be right, but they can search hotels, they can search travels, the can search car rental services, they can search taxi services... so the first natural thing people do in booking.com is not search, but specify what they want to search, and after that there's the thing that every one of those services require a different subset of parameters for the page to show results, so it's not just one field to search on.

Answer 5

I think the easiest and most plain answer is:

• If your website is all about searching (like google), you should autofocus the search field.
• If you website is not mainly about searching, you shouldn't autofocus the search field.

To elaborate: The main goal of a design is, to provide information as clear and easy as possible to the users. You do not want your users to search all the time to "find" what they want. Sometimes they don't even know what they want.

Your users shouldn't come to your (a.e.) Car Website and directly start searching as they most likely don't know all of your products or services. Instead you should offer a overview and a clear navigation also in cooperation with your user journey.