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.