22

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 ?

10
  • 2
    I've wished for a long time that Amazon would put the initial focus on the search field. Yes, it would cause me to miss the first few interactive elements (skip link, amazon home link, and perhaps a couple others depending on whether I'm logged in and the type of amazon account I have), but it would be a fantastic feature for keyboard users and would not violate any WCAG success criteria. Screen reader users have so many ways to navigate (the entire DOM, by element type, by landmarks, etc) that it wouldn't be a hindrance to them. Sep 7 at 6:33
  • 2
    It would be interesting to see amazon analyze their web traffic and see what the first interactive element on the page is selected the most. I suspect (purely anecdotal) it's the search field. Minimally, they could use the accesskey attribute to make it easy to move the focus to the search field. Sep 7 at 6:35
  • 1
    @slugolicious I know ex-Amazonians and they said that 9.x/10 users on Amazon use search over browse. Of course, there are other things to do like navigating the customer account, etc. Why do you think it does not violate WCAG criteria? Would love if you elaborate, maybe even as an answer to the question? Sep 7 at 9:47
  • 1
    I don't know if it's an answer, but I know that auto focusing the search box tends to display a list of search items which can cover links the user may use. I've run into this problem once or twice on other sites, but it seems Amazon's search avoids this.
    – trlkly
    Sep 7 at 10:12
  • 3
    > “Why do you think it does not violate WCAG criteria?” If you look at all 50 wcag 2.1 AA success criteria, it doesn’t fail any of them. “2.4.3 Focus Order” is the closest guideline to this situation but having the focus on the search field does not affect the “operation” of the page. Sep 8 at 2:56
19

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.

8
  • I think most browsers have stopped supporting Backspace-as-Back feature, precisely because of destructive inconsistency of behavior between input fields and other objects.
    – Ruslan
    Sep 7 at 20:38
  • @Ruslan Interesting - I hadn't noticed that. It still works for me, but I'm using a slightly old version of Firefox.
    – HappyDog
    Sep 7 at 21:58
  • Hmm, just tested on Firefox 51 and 91, and in both versions Backspace doesn't work to go back. Maybe it's OS-dependent. I tested on GNU/Linux.
    – Ruslan
    Sep 7 at 22:11
  • I'm on Windows. It occurs to me it might be functionality that's added by an extension. Either way, it get's broken if you autofocus into a field on page load! ;-)
    – HappyDog
    Sep 7 at 22:14
  • Yes, for me the number 1 reason would be that I expect the arrow keys, Home, End, Page Up/Down, and Backspace to scroll the page or go back in history. Sometimes these keys don't work, either because of a text field or because of some video player, and that makes me annoyed. (I use Firefox 91 and have manually re-eneabled Backspace = Back because I have been using that feature for more than 25 years now!) Sep 8 at 16:47
25

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.

6
  • Just curious... why would automatically popping up a keyboard on mobile Google be annoying? When going to the Google homepage, isn't it most likely that typing into the search field is exactly what the user wants to do? (Admittedly, in my case I've probably never opened Google on mobile in a browser because, in Apple's immortal words, "there's an app for that". But if I did...) Sep 8 at 13:05
  • 3
    In some form factors, if the keyboard opened by default it would obscure the rest of the form. If there is no other actionable or important content on the page, like a google search page, then this is fine. If the page is a form where the user can view and or edit say their profile, then being stuck on the first field will annoy the user, especially if they are not likely to change the data in that field. There are better design choices to avoid this, but in general there are more editable forms in apps than there are google search style pages, so the majority rules. Sep 8 at 13:32
  • 3
    Reasons why autofocus on a mobile phone can be annoying: The keyboard overlaps or shifts content. It can be unexpected. Even if you've seen it happen before, it can easily be forgotten and surprise you again. It's an annoyance created for you that wasn't necessary at all, while on the other hand having to tap the field before you can type can also be annoying but at least something to be expected. If you choose to have autofocus on the search field, do so with full confidence that people will always need and want it, regardless of the time and context in which you offer it to them.
    – jazZRo
    Sep 8 at 15:38
  • @jazZRo The worst is when content gets shifted such that it's no longer obvious which field you're typing into. The focused field ends up partially offscreen, and some unrelated field is front and center.
    – bta
    Sep 9 at 0:11
  • 1
    +1 Thank you for the very concise answer @jazZRo and the hint on how to make the search field accessible. Sep 13 at 9:48
5

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.
1

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.

1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.