When positioning elements using CSS, it's possible to place them in a position that does not reflect their location in the source order. This can have unexpected side effects for keyboard-navigation users.
Examples
Consider a navigation bar that’s positioned at the top of a web page. It appears first visually because it's a reliable and consistent navigation feature, and something that should be prominent and easy to locate and use.
✗ Bad example
If the author were to position the navigation bar using position: absolute, they’re free to place it anywhere in the markup, even right at the bottom:
<nav>
<ul>
<li><a href="/">home</a></li>
<li><a href="/about">about</a></li>
<li><a href="/contact">contact</a></li>
</ul>
</nav>
</body> <!-- closing body tag -->
The problem here is that keyboard users navigate pages by moving from one interactive element to the next, in the order they appear in the source. They would have to step through all the interactive elements in the page to reach the navigation bar. So if they landed on a page that they didn't want to read, navigating away from that page would be time consuming (and irritating!).
✓ Good example
Since position: absolute applied is unaffected by the element’s position in the source, one could instead move the navigation bar to the top of the page’s source code, allowing the navigation bar to be focused before the rest of the page:
<body> <!-- opening body tag -->
<nav>
<ul>
<li><a href="/">home</a></li>
<li><a href="/about">about</a></li>
<li><a href="/contact">contact</a></li>
</ul>
</nav>