Ensure focus is visible
Updated over a week ago

Web visitors can use a mouse or keyboard to click through webpages. Focus refers to where the visitor's mouse or keyboard is within a webpage. When the user clicks using the mouse or keyboard, the user will be clicking on whichever link has focus.

Web visitors who utilize a keyboard for navigation rely on being able to see where the keyboard's focus is so the visitor knows where they are within the page and which link is currently activated for clicking.

Ensuring keyboard focus is visible is not just a feature for ensuring accessibility of your web page but it enhances usability for webpages for many web visitors. Web visitors may navigate web pages utilizing a keyboard for accessibility purposes, lack of access to a mouse, or because the visitor finds navigating with just a keyboard to be faster.

To test whether focus is consistently visible within a website, website administrators can test utilizing webpages with just a keyboard. By clicking tab on the keyboard while viewing a webpage, an administrator should be jumped through the web page to the active elements of the page. While tabbing, the administrator should be able to visually see where the keyboard takes him/her on the webpage. If the keyboard tab is not visible to the administrator, the keyboard focus is likely experiencing one of two scenarios. One, the focus maybe styled so that the focus is not obvious to location. Or two, the focus is entering into some element that is not suppose to be available within the current state of the webpage. 

This is referred to as focus not being visible or focus being lost.

If it is determined that the focus is on an active element within the webpage, the administrator should consider updating the styles for the webpage so that focus is obvious. 

If it is determined that the focus is entering an element that is not suppose to be active within the webpage, the administrator should determine what HTML, CSS, or Javascript is being used that allows the keyboard to tab into an element that is not suppose to be active for that page's current state.

Did this answer your question?