Member-only story
It can be helpful to understand these concepts and their differences during both the design and development process. The technical aspect of the subject reflects the development process, and the user experience reflects the design process. In this article, I will focus on the user experience and the design process. First, let me explain why these concepts are important.
A substantial part of web users has accessibility problems. The number of disabled web users in the world is also high. However, the rate of websites that provide accessibility standards for people with disabilities is only 1% (source). Accessibility is not a simple matter. I admit that I don’t know every detail about accessibility. But I know that there are different problems and we must avoid these problems for every user browsing our site. If you are wondering about accessibility standards, you can take a look at WCAG (Web Content Accessibility Guidelines).
The threestates I mentioned can sometimes be provided with the mouse and sometimes with the keyboard. Some states cannot be noticed on mobile. Some are even hard to spot. Therefore, we can confuse these states in both the design and the development process. I think it is understandable. Let’s focus on how we can distinguish these three from each other.
Before I elaborate, let me explain these states on a button element:
Hover: It is the state that occurs by putting your cursor over the button. You cannot see this state using the keyboard.
Focus: Indicates that the button element is ready to be active. Although it looks very similar to the hover case, it is different. It is a state that can be seen with both mouse and keyboard. (It depends on the browser and the settings you apply, you can usually ‘focus’ on elements by pressing the tab key)
Active: Very simply, it is the state of an element that is active. For example, in our example, it is the state of interacting with the button. Although it is often confused, the active state is different from the selected.
