Step 3. Explanation & Practice
The navigation was confusing because the tab order didn't follow the visual order. Either the tab order was altered using the tabindex attribute or the elements' position on the screen was changed via CSS styling.
In addition, a non-interactive element, the heading, received focus, while some interactive ones didn't. The heading had a tabindex=“0” that included it in the tab order, while some buttons had tabindex=“-1” that excluded them from the order.