Focus Visible

Introduction

Users that can not or do not use a mouse to navigate need the same level of access as those who use a mouse. If the website does not include the proper code, then these users won't see things like the same way as mouse users.

By default, most browsers use a dotted box to highlight keyboard focus location. However, in many cases, website creators reset these browser features to create their own, and forget to add back in proper code that would show keyboard focus.

If you are responsible for styling your website, and know some basic CSS techniques, you need to make sure you style a:active and a:focus to be the exact same as the a:hover style. Different browsers treat these items differently, so styling all three to be the exact same will ensure that whatever browser a user uses, keyboard focus will be the same as mouse hover focus.

You could, however, also make the focus even better by making sure that the focus style provides an extremely visible change. Sometimes even the a.hover style is not that visible.

WCAG 2.0 States

2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)

Link Focus Examples

In the first example, the mouse is hovering over "Current Students" and the keyboard focus is on "Faculty & Staff." Notice that a:focus has not been styled, the browser default dotted box has been left, but it would be better if it matched the example below to provide even better visibility.

Example of link focus that is not as good as it could be

The CSS code in this example would look something like the following:

a:hover { background-color: #d85a1a; color: #ffffff; }

This would set the text color as white and the background color as OSU Orange, but only for a mouse hovering over the link.

In this example, a:focus and a:active have been styled exactly the same as a:hover, so regardless of how a user reaches the "Faculty and Staff" link, it will look exactly the same.

Example of link focus as it should be coded

The CSS code in this example would look something like the following:

a:hover, a:active, a:focus { background-color: #d85a1a; color: #ffffff; }

This would set the text color as white and the background color as OSU Orange for all situations.

Note that color contrast guidelines also need to be followed when determining link focus colors.

Try it for yourself! In most browsers, you can use your TAB key to navigate through the links. On this page, you can see what link you are currently on because it looks the same as when you use a mouse to hover over it. You can hit ENTER to activate the link. Then, visit another site, maybe your own, try the TAB key again. Does it work the same? If not, you may have an accessibility issue.

Drupal

For Drupal users, this focus visibility for keyboard users is determined by the template/theme code, so this not a topic you can control. You should check your site for this functionality by tabbing through the links and seeing if they change with the keyboard to match what links look like when you hover over it with a mouse. If you would like help figuring out how to test for this, please contact us.