TIL: Autofocus inputs are an accessibility problem

Don’t dump people in without context.

We love our linters at Etch, they keep us on track with the latest, up to date, standards automatically.

The other day I was adding autofocus on an input in React:

<input type="text" autoFocus />

I got flagged by jsx-a11y.

If you haven’t heard of it, jsx-a11y is an eslint plugin that lints your React code for accessibility problems, helping to catch them before you get to production.

Autofocus can dump screenreader users into your form with zero context, leaving them lost and confused on your page.

Autofocus can also confuse regular users, especially on mobile. So keep it simple, let people click in to your inputs when they are ready.

<input type="text" />

More information on Bruce Lawson’s blog.

At Etch we’re always learning so we can continue to build awesome software.

Let’s see if we can help your team today hey@etch.co