Tell us what’s happening:
I have the same issue as the problem here: Applied Accessibility - Use tabindex to Specify the Order of Keyboard Focus for Several Elements
When I click into the preview pane and press tab, the first thing it jumps to is “Home”. Then it goes to “Blog”, then “Training”, and the skips the search bar and submit button entirely. This happens no matter where I click on the preview pane, except when I click along the same horizontal axis as the search bar (see attached picture).
I tried copy-pasting this code into into Atom and opened the HTML file in Chrome, and it works when I open the file. I can get it to work each time if I refresh the page, and press tab without clicking. However, once I click on the page, it exhibits the same behaviour as above. Is clicking on the page changing this behaviour? I think it might have something to do with the section I’m clicking (i.e. the enclosing element; see picture), but I’m not sure if that’s intended behaviour. If so, can this exercise be updated or changed to note this? If not, can someone explain what the issue is to me?
Thank you in advance.
Your code so far
<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 type="search" name="search" id="search" tabindex="1"> <input type="submit" name="submit" value="Submit" id="submit" tabindex="2"> </form> <h2>Inspirational Quotes</h2> <blockquote> <p>“There's no Theory of Evolution, just a list of creatures I've allowed to live.”<br> - Chuck Norris</p> </blockquote> <blockquote> <p>“Wise men say forgiveness is divine, but never pay full price for late pizza.”<br> - TMNT</p> </blockquote> <footer>© 2018 Camper Cat</footer> </body>
Your browser information:
User Agent is:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36.