Question
When I tab through the elements on my site with the keyboard everything is almost perfect except for a couple case where it looks like the order is messed up. How can I change the order the elements on my page are given focus when I tag through everything?
Answer
Nearly all elements can be given focus, and have their focus order changed using the 'tabindex' attribute. Elements on a page will be given focus in the order of their tab index. W3 Schools has a great explanation of tabindex here.
Applicable Success Criteria
- 2.1.1 Keyboard Level A
- 2.1.2 No Keyboard Trap Level A
- 2.1.3 Keyboard (No Exception) Level AAA
- 2.4.1 Bypass Blocks Level A
- 2.4.2 Page Titled Level A
- 2.4.3 Focus Order Level A
- 2.4.4 Link Purpose (In Context) Level A
- 2.4.5 Multiple Ways Level AA
- 2.4.6 Headings and Labels Level AA
- 2.4.7 Focus Visible Level AA
- 2.4.8 Location Level AAA
- 2.4.9 Link Purpose (Link Only) Level AAA
- 2.4.10 Section Headings Level AAA
- 3.2.1 On Focus Level A
- 3.2.2 On Input Level A
- 3.2.3 Consistent Navigation Level AA
- Guideline 2.1 - Keyboard Accessible
- Guideline 2.4 - Navigable
- Guideline 3.2 - Predictable
- Principle 2 - Operable
- Principle 3 - Understandable