HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Visual focus is crucial for all users that rely on keyboard and switch devices.
Visual focus is crucial for all users that rely on keyboard and switch devices.
You learned a bit about visual focus when we talked about link states. Let us dig deeper. Visual focus is sometimes called keyboard focus or tab focus. It is a visual indicator on a interactive component that has keyboard focus. The effect is often a border or outline.
You will learn not to remove the focus, and two options for styling the focus.
This is the most important takeaway from this module. Whatever you do, do not remove the focus. This CSS line is ruining the accessibility for a lot of people:
outline: 0;
Another common method for hiding the focus that the parent element is to small to show it, in combination with:
overflow: hidden;
Most browsers use the outline property to show the visual focus of an interactive element. We have two options. Leave it or customize it. Removing it is not an option.
In this example from Airbnb, the destination Ålesund is the focused element. However, it is not possible to tell. The reason is that the parent <div>
has overflow: hidden;
The easiest way to handle visual focus is to leave it for the browser to handle. This has many benefits:
Removing the overflow: hidden;
showing the default focus styling. The browser Chrome in mobile mode is using an orange outline. You might think that keyboard focus is not important on mobile devices. That is a misconception. People use keyboards and other assistive technologies on mobile devices as well.
We also have some challenges with the default focus.
The travel site Momondo has a vivid color palette. They can pick a color from their palette to use as the visual focus.
This is a modified version of the Momondo website, showing the link Trips in focus with a pink and white outline. The pink color is from their palette, the same as the search button.
As a side note, the search button has insufficient color contrast when used with white text. The contrast ratio is only 3.33. However, used as a visual focus against a dark purple background the contrast is better with a ratio of 5.47.
To better make custom visual focus, you need to know about the different CSS outline properties. Head over to w3resource to learn about the outline style, color, width and offset. Now you are better prepared to make keyboard accessible interfaces.