Focus state — A war tale between UI and UX
The hover state is native to HTML, but due to misinformation, some designers sacrifice experience for the sake of aesthetics.
On this article, I’ll explain what focus state is, how we can use it and how to make UI and UX go along.
What is it?
The focus state are a visual communication to inform the user what element has been selected on screen, when we are, for example, browsing using the keyboard or a remote control.
It is essential for people with motor disabilities and very useful for someone who eventually broke the mouse.
This is a CSS attribute called outline , the HTML places it automatically for all the interactive elements, as buttons and links. Even though being an automatic feature, this is a barrier because the bad practices.
Why are there barriers for the focus?
Designers
The automatic focus state are also triggered on mouse clicks. Usually designers request that the focus state must be removed, only because they think that the focus border is non-aesthetic when it appears during the mouse click.
Developers
They take the outline out because the designer asked to do so, or because they learned that in a course. Moreover, they joke about HTML but are not concerned to learn basic HTML semantics.
Programming courses
On college or bootcamps, the people who teach programming usually neglects the accessibility on their projects. Usually people that are fresh in the career misunderstands everything and usually replicates this badly in the professional day by day.
I had some programming classes, where they learned to remove the outline every time you start a new project. As you can see in the example below:
One of these schools (at least here in Brazil) are very famous and very influential in the community, teaching thousands of people every year!
How long until the programming schools cease to teach to implement barriers in the web accessibility?
Removing barriers
Designers
When creating component prototypes, besides the hover, pressed and disabled , you must give the focus state as well.
You can use the HTML default colors, but it is also possible to customize the color and border width. To do so, make sure the visible focus won’t be invisible.
The best width size is 2 pixels, with solid color, minimum contrast of 4.5:1 and minimum area of 1 pixel between the element and the border to better highlight the contrast.
Keep on mind we are talking about user experience (UX) and not aesthetics (UI). The focus here is not to be fancy, it must be operable and perceivable.
Developers
Look up for outline: none; or outline: 0; in the code and replace them for the following:
If you need to customize the color and the border width, use these configurations in the focus-visible, as follows:
How to test
Browse through the application using the TAB key to move further to the element, and SHIFT + TAB to go back.
Try to execute the task, for example, sign up as a new user without using the mouse, only the keyboard. Check if it’s possible to interact with all the fields, buttons, links and if they have the visible focus state enabled.
If you have any trouble trying to find out the element with the active focus, open a bug fix describing the new issue.
Special thanks to Diego Duarte who helped me with the translation of this article. Thanks for reading. Hopefully this content will be useful for you and all your team ☺.
