Hints and Error Messages Everyone Can Use

After this lesson you can

• Tie a hint to its field with aria-describedby, so a screen reader reads it with the label
• Mark required fields in words and write error messages that say how to fix the problem
• Arrange a form's fields in one column, in the order people expect to answer them

Key takeaways

• A hint that says what to type goes beside its field, and aria-describedby ties it to the field, so a screen reader reads it after the label.
• A field's accessible name is what a screen reader announces for it. A label gives a field its name; a placeholder disappears as soon as someone types.
• Mark required fields in words, such as "(required)". A color alone, such as red, is missed by people who can't see it or tell it apart.
• A helpful error message says what's wrong and how to fix it, such as "Enter a date after today", never only "Invalid input".
• Put fields in one column, in the order people expect: who you are, how to reach you, your choices, then the agreement and the button.

A form says Invalid input and turns a box red. Which box? Invalid how? Now imagine you can't see the red, or you hear the page through a screen reader that never mentions the little gray hint under the box. Forms like that are where people give up, and they're also forms that many schools, governments and companies are required by law to fix. The fixes are small, and you'll use them in every form you build.

A hint belongs to its field

On a paper form, the note "5 digits, such as 30301" sits right under the box it's about. On a screen, sighted people see the same thing. But a screen reader, software that reads the page aloud for people who are blind or can't see the screen well, doesn't read a form top to bottom like a page of text. Its user presses Tab to jump from field to field, and hears only what is tied to each one.

The first thing it hears is the field's accessible name: the words that name it. A <label> gives a field its accessible name, which is why every field needs one. A placeholder is not a good name: it disappears as soon as someone starts typing, so they can't check what the box was for.

<label for="zip">ZIP code</label>
<p id="zip-hint">5 digits, such as 30301</p>
<input type="text" id="zip" name="zip" pattern="[0-9]{5}">

Here the hint sits on the screen right above the box, but nothing ties it to the box yet. A screen reader that jumps to the field says "ZIP code, edit text", and never reads the hint.

aria-describedby: tie the hint to the field

ARIA (read "AIR-ee-uh", short for Accessible Rich Internet Applications) is a set of attributes that give screen readers information the HTML alone doesn't. All of them start with aria-. This is the first one in the course; ARIA: When HTML Isn't Enough, in Module 5, covers the rest.

aria-describedby (read "aria described by") names the id of the element that describes the field. Give the hint an id, and name that id on the field, with no #:

<label for="zip">ZIP code</label>
<p id="zip-hint">5 digits, such as 30301</p>
<input type="text" id="zip" name="zip" pattern="[0-9]{5}" aria-describedby="zip-hint">

Now a screen reader says something like "ZIP code, edit text, 5 digits, such as 30301": the name first, then the description. Nothing changes on the screen. A field can name more than one id, separated by spaces: aria-describedby="zip-hint zip-error".

Give a hint to every rule people can't see: a pattern, a minlength, a date that must be in the future.

Required, in words

A note that says Required fields in red fails two groups of people at once. About 1 in 12 men and 1 in 200 women have some color vision deficiency, often between red and green, and a screen reader doesn't announce colors at all. Color can add to a message, but never be the only way it's given.

Put the word in the label:

<label for="full-name">Full name (required)</label>
<input type="text" id="full-name" name="fullName" autocomplete="name" required>

The required attribute also makes a screen reader say "required", but sighted people need to see it before they send the form, so the word goes in the label too. A star (*) alone is a symbol many people don't know, and a screen reader reads it as "star". When nearly every field is required, the other way round works too: say so once at the top, and mark the few optional fields "(optional)".

Error messages that say how to fix it

The browser's built-in messages are general: Please match the requested format. When your own messages appear, from the server sending the page back or from a page's JavaScript, they can do much better. A helpful error message says what's wrong and how to fix it, in plain words, without blame:

An error message goes beside its field and is tied to it the same way as a hint. Start it with a word such as "Error:" or an icon with text, so it isn't only red:

<label for="start-date">Start date (required)</label>
<input type="date" id="start-date" name="startDate" required aria-describedby="start-date-error">
<p id="start-date-error">Error: Enter a date after today.</p>

One column, in the order people expect

A paper form asks your name before your address, and your address before your signature. People bring the same expectations to the screen:

1. Who you are: your name, your birth date.
2. How to reach you: email, phone, address.
3. The choices: the membership plan, the start date.
4. The password, then the agreement to the terms.
5. The button that sends it, at the end, with words that say what it does: Join Peak Fitness.

Keep the fields in one column. Eyes and the Tab key both go straight down, so nobody skips a box that sat off to the side, and the form already fits a phone. Keep related fields together, in a <fieldset> with a <legend> where they answer one question. And leave out the reset button: one click by mistake throws away everything someone typed.

Try it. Take a form of yours, add a hint with an id, and tie it to its field with aria-describedby. Turn on your computer's screen reader (Narrator on Windows with Ctrl+Windows+Enter; VoiceOver on a Mac with Cmd+F5), press Tab to the field, and listen. Press the same keys to turn it off again.

Check yourself

2 questions to try on the lesson page.

So what

A hint someone can hear, a required field anyone can spot, and an error that says how to fix it are what turn "I'll do it later" into "done". They help everyone, not only people who use a screen reader.

Key terms

• aria-describedby
• Accessible name

Cheat sheets

• Hints and Error Messages Everyone Can Use

Related

• Built-in Validation
• ARIA: When HTML Isn't Enough