Enhancing Visual Focus for the Sighted Keyboard User

Sighted keyboard users need to be able to see where the keyboard focus is when browsing a website at all times. Without the visual focus indicator, sighted keyboard users will be unable to interact with links and form elements on a web page.

Web browsers generally take care of visual focus, but the dotted lines placed around links and form elements may be difficult to see for some users. It is always a good idea to enhance the visual focus.

With CSS, you can enhance the visual focus by making the outline more obvious or assigning a background color to both the :hover and :focus pseudo classes. The visual focus can be styled in a number of different ways, but try to make the styles identical for consistency.

To learn more about customizing the visual focus indicator and keyboard accessibility, check out Deque University’s course on HTML and CSS Accessibility.