Visible Keyboard Focus - Easy Checks
What is Keyboard Focus?
Visible keyboard focus indicates which interactive element - link, button, form field - you might have moved to using the tab key.
Why is Keyboard Focus important?
People navigating by keyboard or voice need an indication about which element they’ve moved to.
Many sighted users with physical disabilities will use the keyboard to navigate a web page, including:
- people with quadriplegia
- people with limited dexterity
- people with tremors such as Parkinson’s Disease
People who are blind also navigate the web with the keyboard, but will use non-visual cues to determine where they are.
Checking Keyboard Focus
Checking this page
This is just for practice. Also, you can see what the check will look like on an accessible page.
Click on the button below:
Check keyboard focus on this page
Checking other pages
To check other pages you need to add the check link as a bookmark.
- Make sure your browser bookmarks bar is open. Ctrl/CMD+Shift+B will usually toggle the bar
- Drag this link to your browser bookmarks bar: Check keyboard focus
- Visit the page you want to check
- Click on the ‘Check keyboard focus’ link in your bookmarks
Add link using keyboard only
- Make sure your browser bookmarks/favorites bar is open. Ctrl/CMD+Shift+B will usually toggle the bar
- Create a bookmark to this page using Ctrl/CMD+D
- Edit your bookmarks - this varies depending on browser and operating system. There is usually a menu option to manage your bookmarks
- Edit the newly added bookmark to this page
- Paste the script copied into the URL or Link field
What to look for
- Check that all interactive elements have an obvious visual styling
- Check that no blank space is highlighted by the check; this indicates a possible link with no text
Learn more
- Tip: Ensure that interactive elements are easy to identify
- Functionality is available from a keyboard
- Understanding 2.4.7: Focus Visible