How focus helps

Manager and designer are forced to clean offline everywhere. Tell them this is a bad idea!

You are absolutely right, we’ll gladly tell you.

Interfaces have two types of elements: simple and interactive. Simple represent or signify something. Interactive allow you to interact with them. Open the page with the form in the browser and immediately start typing. Nothing's happening, right? All keystrokes go straight to the page. But if you get into the field, then the letters that you type inside will run - it has captured the focus and all the events. Spacebar now does not scroll the page, but puts a space. Very comfortably.

Links can also be in focus, then they can be opened by an enteror, and if the button is in focus, then it can be pressed with a space. If the focus is one radio button from the list, selector or range knob, then you can sort through the lists or move the knob with the arrows of the keyboard. And it's not just about built-in elements - you can also create interactive elements that fall into focus or are controlled from the keyboard.

If for some such interaction with interactive elements from the keyboard is a pleasant addition, for others it is the only way. Not everyone can click or tap in the right place, for many, the keyboard is the main interface to your site.

How does this interaction happen? The main button here is the tab, it moves to the next interactive element. Shift-tab is transferred to the previous one - try it yourself. As soon as you hit the desired item, you can already interact in it: enter, space, arrows, or just letters from the keyboard.

In such a situation, it is very important to know which element is currently active, in order to make it clearer which of them you are currently interacting with. When you have a mouse cursor, stylus or just a finger - it is always clear where you click. Where, where, well, right here! But when you interact with the keyboard - you need focus. Without him you are now ... nowhere.

When an element is in focus, a pseudo-class appears in it :focus. By default, browsers highlight interactive elements in focus using special strokes. They differ in different browsers and on different systems: sometimes it is a black dotted line or frame, sometimes a blue outline, sometimes something else. Too often, these circuits try to shut off with help outline: none, forgetting why they are needed or considering them unimportant.

The main argument for disabling, they say, is ugly and there is no such thing in the design. And I even understand those who are ugly - and the truth is past, although usually within the familiar system style. But you can not only turn off, you can reassign! Make another outline, replace it with border, box-shadowor even the background color of the element. The main thing is that he clearly states: I am now in focus.

Who are all these people who are more comfortable with the keyboard? This is any of us in a long form with a bunch of fields. Or with a mug in his hand, or with a child in his arms, or with a brush injury, or with motor skills that prevent the mouse from being used. They are also professional users of interfaces who cannot afford to waste time fussing with the mouse. And what, refuse them all just because it's ugly? Of course not.

Go to the main page of Yandex, Google, Github and press the tab - all these sites are accessible from the keyboard. A good interface is more than just a picture. It’s in your hands to help the designer make the interface better, and make the manager accessible to a wide audience.

Video version

Questions can be asked here .