• Table of contents
• Knowledge base

In this section I’ll list all issues not related to the Search component nor the Popovers.

Issue

Focus order is not logical

The focus order for the whole page should generally follow the visual order of elements, unless the task-order makes more sense.

After mapping out the focus order we can see the following issues:

• The input field (1), search button (2), and clear button (3) are not in the expected order (though this is could be considered the correct task-order).
• 5 and 6 (marked with red circles) were not focusable. This issue will be addressed in the popover section).
• The navigational buttons on the top right are in reverse order (5,6,4).
• After the logo, the focus order skips the search component and jumps below it (7,8).

Focus order of the landing page

Suggestion

Remove tabindex and use autofocus to set initial focus

The issue lies in how the focus is set to start at the search input. While it makes sense for a search engine to set focus here on page load, it is implemented using custom tabindex attributes which is bad practice as it leads to problems with the focus order.

<input id="search_form_input_homepage" type="text" tabindex="1" />
<input id="search_button_homepage" type="submit" tabindex="2">
<input id="search_form_input_clear" type="button" tabindex="3">

In order to resolve this issue, I recommend removing the tabindex attributes and instead adding autofocus to the search input. Additionally, change the order of the clear and submit buttons in code. By doing this, the outcome is the same, without any accessibility issues.