Set focus on search bar on load

[mrmansfan]

When I open my HTML5 help page, the focus is not set in the search bar. You have to first click in the search bar to set the focus, then type your search query. Is there anyway to set the focus on load of the home page so that a user can just start typing their search?

[NorthEast]

If you search on Google, you'll find plenty of examples - they'll use javascript focus()

I'd suggest something like this for a Top Nav skin:

Code: Select all

$(document).ready(function(){
	$("input.search-field").focus();
});

[jimgilliam]

Thanks for this bit! It was exactly what I was looking to do and works great.

[NorthEast]

In the last 7 years I've also learned that doing this is a really bad idea for accessibility, so I'd recommend not to do this.

[jimgilliam]

Interesting, and thanks for the info, NorthEast. Maybe I shouldn't use Google as a model.

[NorthEast]

It was flagged as an issue in our accessibility audit because of how it impacts the page navigation sequence.

If you navigate the page using the keyboard, you expect to follow a consistent navigation sequence.
(https://www.w3.org/WAI/WCAG21/Understan ... order.html)

The problem with setting focus on the search bar is that it breaks the expected navigation sequence and jumps over the elements at the start of the page. This means you have to work out whereabouts you are in the page, and learn to go backwards to find elements at the start of the page - like the menu, and anything else that comes before your search bar in the navigation sequence.

I think it would be fine if the search was actually the first element in the navigation sequence of the page.

[jimgilliam]

Thanks for the info. Agreed. It's something I didn't think about, but it makes total sense.

Instead of auto-focusing, I modified the script to offer my users the choice to enable or disable search bar auto-focus; then their preference is stored in LocalStorage. I also included a snippet:

Enabling this option automatically sets focus on the search input field when a help page loads, meaning you can immediately start typing into the search bar without clicking to select it. Caution: Enabling this option can interfere with assistive technologies like screen reader work flows and keyboard navigation.