Focus on Accessibility: Mastering Form Input States for All Users

Introduction

Web accessibility is more important than ever, and understanding the finer points can make a world of difference. One crucial but often neglected feature is the focus state in form inputs. In this blog post, we will delve into how you can improve focus states for better accessibility.

Importance of Focus State

What is Focus State?

Focus state indicates which form input is currently active and ready to accept data. Typically, the browser will highlight this in some way.

Code Example:

<!-- HTML -->
<input type="text" id="username" />

/* CSS */
#username:focus {
  outline: 2px solid blue;
}

Why is Focus State Important?

The focus state is crucial for keyboard navigation. By making it clear which input is currently focused, you help users navigate your forms more easily.

Avoid Using outline:none

Many designers get rid of the focus state by setting outline:none, mainly for aesthetic reasons. This, however, is a bad practice.

Code Example:

/* Don't do this */
#username:focus {
  outline: none;
}

Better Practices: Using :focus Wisely

Using :focus

The :focus pseudo-class can be a game-changer for accessibility when used correctly.

Code Example:

/* Good Practice */
#username:focus {
  outline: 2px solid blue;
}

Why outline Over border?

The outline property does not affect the layout of your page, unlike border, making it a better choice.

Code Example:

/* Using outline */
#username:focus {
  outline: 2px solid blue;
}

/* Using border */
#username:focus {
  border: 2px solid blue;
}

Highlighting Form Groups

Sometimes, making an entire form group stand out can be more beneficial.

Code Example:

/* Using :focus-within to highlight a whole form group */
.form-group:focus-within {
  background-color: lightgray;
}

Key Takeaways

1. Never eliminate the focus state; it's crucial for accessibility.
2. Use high contrast for your focus styles.
3. Test your focus states with real users and make adjustments as needed.

Comments

[Lucas]

good points! I confess that I always removed it to make it more beautiful for me, I'll think more about its accessibility

[Pizofreude]

Nicely written, concise and on points.