Day 6: Check focus visibility in the Reindeer Health Monitor
The Reindeer Health Monitor is used by Santa HQ to keep track of each reindeer’s wellbeing during the busiest time of year. Some elves have reported losing their place when navigating the system using only a keyboard.
Today, you will check whether it is always clear which element is currently selected as you move through the page using the keyboard.
Your mission today
Check that all interactive elements show a clear and visible focus indicator.
Quick 5-minute check
- use the Tab key to move through the page
- use Shift + Tab to move backwards
- check that focus is always visible and easy to spot
- focus must not rely on colour alone
- pay close attention to custom styled buttons and controls
Focus visibility issues are best found using manual testing. Automated tools such as the Web Accesibility Viewer for Elves (WAVE) are not reliable for checking focus visibility.
Test the Reindeer Health Monitor
This simplified example shows part of a reindeer’s health record. One of these controls behaves differently when you navigate using the keyboard.
Blitzen’s health record
Show answers and explanation
Which control has the issue
The button labelled “Reindeer feeling grumpy” receives keyboard focus, but does not show a visible focus indicator.
Why this is a problem
Keyboard users rely on a visible focus indicator to understand where they are on a page.
In this example, the button has not been implemented correctly.
This means the button can still be focused, but users cannot see where focus has moved when tabbing through the page.
What works correctly
The “Reindeer feeling festive” button keeps its visible focus indicator, making it clear when it has keyboard focus.
Focus indicators should be clearly visible, have sufficient contrast, and not be removed without providing an accessible alternative.
What this checks for
2.4.7 focus visible (opens in a new tab) - users must be able to see which element currently has keyboard focus.
Why this matters
Keyboard users rely on visible focus to understand where they are on a page. If focus is missing or unclear, users can become disoriented or unable to complete tasks.
Bonus challenge
Zoom the page to 200 percent and then 400 percent and repeat the keyboard test. Is the focus indicator still easy to see?
You can also read more about keyboard accessibility in last year’s advent calendar, Day 11 .