To ramp up its default styling in the upcoming versions, Google Chrome collaborated with a team from Microsoft Edge to re-theme and enable functional improvements. One such notable improvement was a focus indicator with better visibility. Also known as the “focus ring”, the focus indicator is an accessibility feature. It helps users identify the elements that they are interacting with when using either switch devices or the keyboard.
In the previous versions of Chrome, this was achieved by outlining the element using a light blue colour. But this created a problem because on a similarly colored background, it was difficult to perceive the interacting element. The change which Google Chrome implemented made the focusing parameter change to a thick dark ring outlined by a thin white line. This enabled the interactive element to become clearly visible both on light as well as dark backgrounds. It also improved user experience automatically without the need for developers to write a new code for the same.
But why was this change required?
To start with, users first need to have a thorough understanding of what is focus indicator and how it works. When a particular tab or element is being accessed, a blue outlines show up. This gains prominence when the user is filling forms or requires the selection of a menu option. Browsers use something known as: focus CSS pseudo-class to impart these outlines to the interactive elements. The importance of these outlines lie in their ability to indicate the user’s position on the webpage.
These outlines are the focus indicators. Simply speaking they are visual markers. They refer to or indicate the element that the webpage is currently focusing on. These elements are all interactive and as a rule, if the mouse can interact with it, so should the keyboard. And anything the keyboard interacts with needs to have visible focus.
Who benefits from the use of these focus indicators?
While most people use the mouse for interacting with a web page, there are plenty of people who still use the keyboard like:
- People using screen readers: Such users have sight impairment; some may be blind while others might have vision problems. Even people with cognitive disabilities like dyslexia use screen readers to interact with the internet. These screen readers can only be accessed using a keyboard and hence visible focus becomes mandatory here.
- People suffering from limited mobility: Some people have motor disabilities. Hence they are incapable of using the mouse. Thus their only option of interacting with the internet is either a mouth stick or a switch which can simulate the keyboard.
- Power users: They are people who have to work on the web for very long periods. Examples of power users include people like the web developer who is forever writing codes or the admin guy whose sole work is data entry etc. For such people, using the mouse to fill up the different fields is near to impossible. The keyboard is the only option available for them.
Other than the above requirements, even the accessibility guidelines for web content laid down by WCAG mention the need for “focus visible”. WCAG is a common accessibility standard guide. Thus many countries require websites to meet these standards to operate inside them.
What are the focusable elements on the web page?
There are many different focusable elements on the webpage and each of these requires a focus indicator to make them look prominent when they are in use. Some of the focusable elements that users commonly encounter are:
- Menu items
- Form controls and different fields etc.
Every browser has certain default focus indicators. Thus focus indicators of Google Chrome are different from that of Firefox, Internet Explorer etc. For example, while Firefox uses an ink-coloured dotted outline, Google Chrome previously used a light blue coloured outline. Internet Explorer has a dotted grey outline.
Google Chrome very recently ramped up its Focus Visibility as mentioned above. This was done so that it:
- Could provide good contrast
- Be complementary to the element’s dimensions and
- Enable the colour scheme to stand out
Changes in Focus visibility and form controls by Google
The HTML form control is the backbone of web interactivity. They have built in accessibility, are developer-friendly and familiar to the innumerable people who use them daily. Hence when we talk about focus visibility, we also need to talk about form controls.
Now, form controls have a styling inconsistency. While older controls were styled so that they matched the OS being used by the user, recently added form controls match with the style that is currently popular. For Google Chrome, this resulted in mismatched and outdated looking controls. To correct this, developers had to spend valuable time enabling styling changes in the default appearance of the focus controls.
But the latest updates introduced by Google Chrome, solved all problems related to form control. It also made it possible to make these interactive elements and links easy to perceive. Thus changes in focus visibility could be enabled along with enhancing touch support and upgrading other accessibility options.
But even after changes were made to the “focus visible”, there were certain occasions wherein the focus ring was still difficult to perceive. Some instances for the same include:
- Black button and white background
- Elements are positioned very close to each other etc.
In both of the above instances, the focus ring becomes almost indistinguishable. Users who have faced such a situation understand how difficult it is to work when the elements are not distinguishable. But there are ways to overcome this lapse too. If the new focus indicator introduced by Google Chrome does not match the website design, it can be easily styled to meet the user’s requirement. This is generally done using the new: focus visible pseudo-class.
What is a pseudo-class?
A pseudo-class is that keyword which when added to any selector signifies a specific state of the element selected. The use of the: hover is an excellent example of pseudo-class. In this when the ++pointer hovers over a button, its colour changes.
The usefulness of pseudo-class lies in the fact that style applied to an element can be done both:
- In relation to the document tree content and
- External factors like navigator history, content status, mouse position etc.
Just like regular classes, multiple pseudo classes can also be clubbed together and chained.
What is :focus-visible?
Also called the “Focus Indicated” pseudo-class, this is a native CSS or Cascading Style Sheet process to impart style to an element that is:
- Already in focus or
- Requires a visible indicator to get the desired focus.
This is another change incorporated by Google Chrome to improve focus visibility and improve accessibility. Currently, it is only available and supported by Google Chrome. This new pseudo-class gets applied whenever focus is placed on an element. Chrome uses heuristics to determine whether displaying the focus indicator on that element would benefit the user.
If the recent interaction with the internet was with the help of a keyboard and no Alt/Option, Meta or Control keys were pressed, then the :focus-visible would definitely match. Generally, when different input modalities are used, the usefulness of this selector increases so that the control can provide different focus indicators based on the same.
But the :focus-visible can only be applied in instances wherein there is a need to visibly see the position of the focus using the visual indicator. It cannot hide an outline as can be done using the command : focus. If the user wants the outline to disappear then both of them need to be simultaneously used together.
When does :focus-visible get displayed?
If on clicking a control on a mobile device, the result is a keyboard on display, then it can be safely concluded that the control would always display a focus indicator. This is irrespective of the type of input device used to put focus on it.
The element <input type=”text”> is a good example of the same. Herein the user sends the input to the interactive element regardless of how the focus was originally received by the input element. Thus it is always beneficial to display the focus indicator in this instance.
However, if the result on display is not a keyboard, what does the user do then. The control has a choice. It can selectively display the focus indicator. The <button> element is a good example of the same. If the user completes an action simply by clicking on this interactive element, then the control might choose not to display the focus indicator.
But when a keyboard is used for navigation, the display of the focus indicator becomes a necessity. This will enable the user to decide whether he wants to use the “Space” or “Enter” keys to click on the control.
Simply speaking, the application of the focus visible or display of the :focus-visible takes place when:
- The user specifically mentions wanting it with the help of a setting,
- An element needs a keyboard input,
- The user navigates using a keyboard,
- A script deliberately moves the focus from an element using the :focus-visible control to a different element.
:focus-visible pseudo-class is not used when a pointing input device is used as the mouse, finger on a touch screen etc. and when a script attempts to move the focus from a non :focus-visible element to a different element.
There were other prominent changes made to Google Chrome recently but the change in focus visibility was the most important one incorporated to improve accessibility options.