Focus on Accessibility: Mastering Form Input States for All Users

Emmanuel — Tue, 19 Sep 2023 13:42:40 +0000

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

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

DEV Community: Emmanuel

Focus on Accessibility: Mastering Form Input States for All Users

Introduction

Importance of Focus State

What is Focus State?

Why is Focus State Important?

Avoid Using outline:none

Better Practices: Using :focus Wisely

Using :focus

Why outline Over border?

Highlighting Form Groups

Key Takeaways

Avoid Using `outline:none`

Better Practices: Using `:focus` Wisely

Using `:focus`

Why `outline` Over `border`?