I am currently working on identifying examples of bad accessibility practices. Specifically, I am focusing on issues related to Keyboard Focus. The first example I have encountered is the lack of visibility when trying to navigate through a set of buttons. The second example involves an illogical focus order. To address these issues, I need to include the tabindex attribute in certain tags.
I am struggling with finding a way to tab through the initial four buttons sequentially, proceed to the form (navigating through the fields and submit button), and finally move to a section containing various links in a loop. Unfortunately, the current behavior when tabbing through elements shifts from the buttons to the URL bar and then onto the input fields. My goal is to ensure the focus transitions smoothly from div to div, especially because this will be within a tab panel on a website, so isolation is essential.
I realize that my explanation might be slightly confusing as I do not have extensive experience in web development. For reference, here is the Codepen link along with the relevant HTML code snippet. Thank you for your assistance!
Codepen: https://codepen.io/anon/pen/ZyaMrP
<style>
button:focus {
outline: none !important;
text-decoration: none !important;
}
</style>
<p>Unfocusable buttons</p>
<div class="buttons">
<button>button 1</button>
<button>button 2</button>
<button>button 3</button>
<button>button 4</button>
</div>
<p>Unintuitive Focus Order</p>
<div class="inputs">
<form>
<label>input 1</label>
<input type="text" tabindex="1"><br>
<label>input 2</label>
<input type="text" tabindex="4"><br>
<label>input 3</label>
<input type="text" tabindex="2"><br>
<input type="submit" value="Submit" tabindex="3">
</form>
</div>
<p>Focus Trap (Loop)</p>
<div class="links">
<a href="#" tabindex="5">link 1</a>
<a href="#" tabindex="6">link 2</a>
<a href="#" tabindex="7" onFocus="this.tabindex=4;" onBlur="this.tabindex=7;">link 3</a>
</div>