How trick helps

The manager and the designer force to clean the offline everywhere. Tell them it's a bad idea!

You are absolutely right, we will tell you with pleasure.

Interfaces have two types of elements: simple and interactive. Simple represent something or represent. Interactive allows you to interact with them. Open the form page in the browser and immediately start typing. Nothing happens, huh? All keystrokes go straight to the page. But if you get into the field, then the letters that you type will run inside - it has intercepted the focus and all the events. The spacebar now no longer scrolls the page, but puts a space. Very comfortably.

Links can also be in focus, then they can be opened with an enterter, 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, select or a range knob, then you can cycle through the lists or move the knob using the keyboard arrows. And it's not just about embedded elements - you can also create interactive elements that are in focus or 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 a mouse or tap a finger in the right place, for many the keyboard is the main interface to your site.

How does this interaction occur? 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 continue to interact with it: enter, space, arrows, or just letters from the keyboard.

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

When an element is in focus, it has a pseudo-class :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 a frame, sometimes a blue outline, sometimes something else. Too often, these contours are tried to be turned off with the help of outline: none , forgetting why they are needed or considering them unimportant.

The main argument for the shutdown, 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 by, although usually within the framework of a familiar system style. But you can not only disable, you can reassign! Make another outline , replace it with a border , box-shadow or even the background color of the element. The main thing is that he clearly said: I am now in focus.

Who are all those people who prefer the keyboard? This is any of us in long form with a bunch of fields. Either with a mug in hand, or with a child in her arms, or with a hand injury, or with motor skills that do not allow using the mouse. These are also professional users of interfaces who cannot afford to waste time fussing with the mouse. And what, to deny them all just because ugly? Of course not.

Go to the main Yandex, Google, Gitkhaba and click on the tab - all of these sites are accessible from the keyboard. A good interface is more than just a picture. In your hands, help the designer to make the interface better, and the manager to make it accessible to the widest audience.

Video version

Questions can be asked here .