Question about tabindex

Tell us what’s happening:

Hey guys, I am just at the challenge from applied-accessibility and I have a question about the tabindex attribute.

Question is: I complete the challenge by putting the tabindex=“1” and tabindex=“2” in both respective fields. However, when I apply tab on the page it simply skips the search and submit inputs. So with tabbing, it doesn’t pass through it.

However, when I put tabindex=“0” and tabindex=“1” it does go to the search field, but not to the submit button…Anyone knows what’s happening here? Why I can’t just tab through the search and submit button by doing as instructed?

Cheers!

My code:


<body>
  <header>
    <h1>Even Deeper Thoughts with Master Camper Cat</h1>
    <nav>
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Blog</a></li>
        <li><a href="">Training</a></li>
      </ul>
    </nav>
  </header>
  <form>
    <label for="search">Search:</label>
    
    
    <input tabindex="1" type="search" name="search" id="search">
    <input tabindex="2" type="submit" name="submit" value="Submit" id="submit">
    
    
  </form>
  <h2>Inspirational Quotes</h2>
  <blockquote>
    <p>&ldquo;There's no Theory of Evolution, just a list of creatures I've allowed to live.&rdquo;<br>
    - Chuck Norris</p>
  </blockquote>
  <blockquote>
    <p>&ldquo;Wise men say forgiveness is divine, but never pay full price for late pizza.&rdquo;<br>
    - TMNT</p>
  </blockquote>
  <footer>&copy; 2018 Camper Cat</footer>
</body>

Hi! So most computers start at 0. 0 is first then 1 then 2 then 3. So there is no “first” input to tab through.
The test cases probably don’t account for that. But that’s just my guess.

Allright, thanks mate! Cheers;)

I also had this issue. After playing around with it a bit, I figured out a few things.

So the first big thing: in order to get the effect that the exercise describes, click inside the box at the middle bottom of the exercise page where it usually says, “Your test output will go here”. When you press tab inside of there, the focus will jump to the output field on the right (the page you are formatting). You will see the tab order progressing as described in the exercise instructions.

Also assigning tabindex=“0” will be the same as default and would have less priority than 1,2,3, etc. In this case assigning tabindex=“0” to the search field and tabindex=“1” to the submit field would have focus start at the submit field, or tabindex=“1”, and then the three header links, and then the search field.

Side note: assigning tabindex=1 to both search and submit fields would have the same effect as assigning values 1 and 2, respectively, since “search” is before “submit” in the html order.

Hope this helps and wasn’t too confusing. I’m new at this as well.

1 Like

I had thought the same, but I tested it better and actually the challenge is right.
tabindex=“1” comes before “0”, but to test it you don’t have to click in the background of the webpage (the right panel), think that someone navigating purely with keyboard couldn’t do that.
What I did was to paste the code into VScode and visualize the webpage purely with my keyboard and, indeed, the search bar is highlighted first, the button second, and the links afterwards.

1 Like