Skip to Main Content


PRESENTER: This tutorial explores the importance of keyboard focus. We're going to cover what is focus, how to enhance receive focus, visual focus, focus on off screen elements, and focus tab order.

One, what is focus? In simple terms, focus indicates the user interface component which is currently selected to receive input. Focus is generally removed from element by bringing another element into focus.

Not all elements are focusable. Headings, paragraphs, divs, and various other page elements cannot receive focus. Elements that are focusable are normally ones that users can interact with, such as links and form controls. There's generally no need to set focus on something if the user can't interact with it.

Section two, how do elements receive focus? The first method that can be used to bring an element into focus is the mouse. For example, if you mouse click on a text input field, ready to begin typing, this element will come into focus. The second method is keystrokes. In most cases, the tab keystroke is used.

For example, if you use the tab keystroke, focus will jump from one focusable element to another. The third method that can be used to bring an element into focus is JavaScript. If a users triggers some sort of event, the focus may automatically shift to a new element. For example, if a user presses a button to trigger a modal dialog window, a developer should programmatically shift the focus from the button to the modal window.

Section three, visual focus. For some types of users, such as keyboard only users, being able to see which element is in focus is very important. Visual focus allows these users to see where they are on a page. It also allows them to know when their focused on an element that allows input, such as typing form data.

Some designers, and popular CSS libraries, turn off the native focus appearance because they find it unattractive. In this example, all elements that receive focus have no outlines. This is very bad practice, as it completely removes all visual clues. If the focused method is considered unattractive, it's better to use CSS to replace the default method rather than remove it entirely.

Another bad practice is to use different methods of indicating focus across a web page or an application. For example, a designer might style focus navigation links with a background color, and then general links with a dotted border, and inputs with a different type of solid border. This means that keyboard users have to work harder to understand which element is currently in focus. It's preferable to use a consistent method of indicating focus across all elements where possible.

Section four, focus on offscreen elements. Another concern is allowing elements that are positioned offscreen to receive focus. This can happen when developers move an element off screen to temporarily hide it, such as using CSS to move an element minus 10,000 pixels to the left. The problem is there might be one or more keystrokes required by keyboard users that don't match the visual display order of the content, and this can lead to confusion. The solution is to make sure focusable elements are not hidden from users.

Section five, focus and tab order. It's important that focus should move from element to element in logical tab order. For example, focus should not jump from an element on one side of the screen to the other side of screen in unexpected ways. In this example, when the user presses the tab key, focus moves from the address field to the Submit button. Tab order is discussed in more details in a later video.

Conclusion. So there you have it, a simple explanation of keyboard focus. Except where otherwise noted, this work is licensed under a Creative Commons by attribution ShareAlike 4.0 license. Copyright 2018, California Community Colleges Chancellor's office. These works are licensed under a Creative Commons Attribution 4.0 international license. They are available to everyone, and may be repurposed to meet the unique needs of educational institutions.