Focus Indicator Example
The Content for Everyone website is designed so that the focus indicator is visible. If you press the tab key while you’re on this page, the focus will move from link to link, starting with the skip links (which are only visible when using keyboard or assistive technology to navigate) and then continuing to highight each link/interactive elemenet going left to right across each row of the page down to the last link in the bottom right of the footer.
For those who navigate via keyboard and are engaging with the site visually, the visible focus indicator is crucial to understanding where they are on the site and which items they can interact with. If you’ve never navigated a site with keyboard, this page can be a good example.
Like the header and footer of this site, the following three links also have a visible focus indicator
Now, we’ll remove the focus indicator and you’ll understand how difficult knowing where you are is when the indicator isn’t visible.
The following three links don’t have a visible focus indicator.
We hope this single example helps you understand more about the need for visible focus indicators. We encourage you to use a keyboard to navigate some of your favorite sites so you can further understand what it’s like to use only a keyboard and not another pointer device.
If your site doesn't have a visible focus indicator, you might be able to find a plugin for the platform that you use, or you may have to consult with a developer to assist you. If you use an AI coding assistant to work on your site, you could also work with it to put a focus indicator in for you.