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 selecting 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 webpage, but it also enhances usability for webpages for many web visitors. Web visitors may navigate webpages using a keyboard for accessibility purposes, due to a lack of access to a mouse, or because they find navigating with just a keyboard to be faster.
To test whether focus is consistently visible within a website, website administrators can test by utilizing webpages with just a keyboard. By using the tab button on the keyboard while viewing a webpage, an administrator should jump through the active elements on 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 may be styled so that its location is not obvious. Alternatively, the focus entered an element that should not be accessible in the current webpage state.
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 the focus is obvious.
If it is determined that the focus is entering an element that is not supposed 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 supposed to be active for that page's current state.
Read more in Focus - Best Practices.
If you have questions, please contact our DubBot Support team via email at help@dubbot.com or via the blue chat bubble in the lower right corner of your screen. We are here to help!