About accessibility tabindex

HTML-CSS
1

So, I’ve got this situation here :

Why when I tab, it does not select Search then Submit? Isn’t that the point of Tabindex?

2

First of all, input is tab-able tag, so there should be no tabindex to start with
My guess that you would like to start tab order from input field, if true than try adding autofocus attribute to the input:

<input type="search" id="searchInputField" name="search" autofocus>

You should not use tabindex with values greater than 0, basically there are only 2 cases:

  1. tabindex="-1" => Ignore tabbing of otherwise tab-able element
  2. tabindex="0" => Make element tab-able in sequential order
3

This was literally the point of the exercise given :

Camper Cat has a search field on his Inspirational Quotes page that he plans to position in the upper right corner with CSS. He wants the search input and submit input form controls to be the first two items in the tab order. Add a tabindex attribute set to “1” to the search input , and a tabindex attribute set to “2” to the submit input .

Still, this was a helpful answer in a different way than expected :slight_smile:

4

Is this freeCodeCamp challenge?

UPDATE: Yeah, I found it. So you now see that the way it described in challenge not quite works, just submit the answer to pass the tests and remember my remarks for future. Some challenges on freeCodeCamp (as well as Internet in general) are simply outdated and might no longer be actual - it’s normal.

5

Yeah, sorry, I should have linked the question!

Aren’t old formatting supposed to work in newer versions? Still, autofocus looks neat.