Visual focus is all about navigation. Users who rely heavily, or even solely, on a keyboard need clear on-screen indications of what objects or links are selected so that they can properly navigate your site and access what they need. To ensure this accessibility, you need to make sure that ALL navigational elements on a page are compatible with the visual focus indicator. Any option that requires a mouse is essentially blocked off to users who rely on keyboards — so, as a developer and designer, you need to take care to make sure this never happens.
Testing Visual Focus Yourself
Use the "Tab" key on your keyboard for general navigation. You should be able to use "Tab" to bring each individual element clearly into focus, and the "Enter" key should select it. If there is no clear visual change to a particular element as you tab to it, you’ll need to make adjustments to ensure fluid accessibility for all users.
Challenges to Overcome and Other Important Considerations
If you're running an audit of your website to help make sure it's accessible as possible, there are a few important things you'll want to look at in terms of visual focus.
- Make sure your website has a working focus indicator. It's all too easy for developers to override this setting, which can throw an entire accessibility scheme out of sync with the original intent of the site's design.
- Check that the focus indicator isn't partially hidden in some way. Take great care to guarantee that there are no visual effects or other items that obscure the focus indicator.
- Pay close attention to color. Poor color contrast for the focus indicator can essentially render it useless, so even though it is technically still there, the user might not be able to employ it to its full effect.
Visual Focus Best Practices
To provide the most accessibility-friendly experience possible for all users, developers should avoid overriding the default focus indicator that most web browsers have. All popular browsers have a built-in focus feature that displays a visible outline around whatever element on screen currently has the keyboard focus.
Instead of disabling this feature, enhance it. Browsers like Internet Explorer show a thin dotted line around whatever object has the keyboard focus, which can be hard to see for some users. You can use the "focus selector" in CSS to define a style change to customize this indicator and make it easier to see on your own page.
Also pay close attention to how visual focus settings affect other elements on a page. A simple border is an efficient way to indicate focus on an element like a link, but it might create issues for things like buttons, tabs, and menus. In these situations, a visual change other than a border — such as a glow or reversed colors — would be most helpful.
