Understandable | Accessibility Project

Form Labels

Let's look at a regular form and the guideline for having understandable labels:

Labels or Instructions

Labels or instructions are provided when content requires user input.

Example: Labelled Form

This form have two inputs for given and family name, both are required. The user can clearly see which input is for given name and for family name.

The browser might have a built in message if a user doesn't fill in a required field, but you the criteria states that a user should be able to understand before submitting the information.

Here the form uses the * symbol next to each input to tell the user that these are required. Although this is a common practice, you should consider adding this information in text, especially for forms with a mix of required and not required inputs.

The WCAG list more criteria that concern labels, for example "Name, Role, Value" that states that form elements like inputs must have labels or other equivalent elements:

Name, Role, Value

Principle: Robust

For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.

For more information about this criteria, see the Robust principle page.

Error Suggestions

Another part of giving the user enough information to understand a site is providing helpful suggestions if, for example, an user input is formatted in the wrong way or missing.

Error Suggestion

If an input error is automatically detected and suggestions for correction are known, then the suggestions are provided to the user, unless it would jeopardize the security or purpose of the content.

Let's take a look at a simple form and how we can add an error message to it.

Example: Adding an Error Message

I have a form where the user sends in their name. Here's a simplified version of the React code without styling:

const [formMessage, setFormMessage] = useState("")
const handleSubmit = () => {
setFormMessage("Name sent!")
}

<div>Name Form</div>
<div>Required *</div>
<form onSubmit={handleSubmit}
<div>
<label htmlFor="name">Name: *</label>
<input
type="text"
id="name" name="name"
value={formData.name}
onChange={handleChange}
required
/>
</div>
<div>
<button type="submit">Submit</button>
</div>
</form>
{formMessage}

The version above tells the user tha the name is required in text, but not much more. The browser will tell the user the field needs to be filled in case it's empty.

In this updated version I specify that it's the full name that is asked for, and inside the handleSubmit function I've included an if statement to check for the presence of a space character in the input. This serves as a validation check for ensuring two names are entered.

const [formMessage, setFormMessage] = useState("")
const handleSubmit = () => {
const { name } = formData
if (name.includes(" ")) {
setFormMessage("Name sent!")
} else {
setFormMessage("Please enter your full name in the format: First Last")
}
}

<div>Name Form</div>
<div>Required *</div>
<form onSubmit={handleSubmit}
<div>
<label htmlFor="name">Full Name: *</label>
<input
type="text"
id="name" name="name"
value={formData.name}
onChange={handleChange}
required
/>
</div>
<div>
<button type="submit">Submit</button>
</div>
</form>
{formMessage}

A couple of notes: Since this simple validation only checks for a space character, you can also add a trim() to remove any trailing spaces. Also remember that you can add more if statements with error suggestion for other errors, to give the user better and more specific information about how they should fill in the form.