Forms

Labels play an essential role in accessibility, particularly for users who rely on assistive technology such as screen readers. Hint text, also known as placeholder text, offers a brief, informative clue about the data or format that should be entered into a specific form field. When only hint text is used as a label, it can create substantial challenges - not only for accessibility, but also for those who may need to revisit what is being asked as they fill out the form. 

For this exercise, compare the inaccessible and accessible labels below as you enter the requested data into the fields.

Inaccessible Label

Accessible Label

Proper grouping and spacing in form design allows for a clear and accessible user experience. Compare the examples below to gain insight into how thoughtful spacing supports all users, helping them navigate forms with ease and confidence, reducing frustration, and enhancing overall usability.

To begin, try filling out the City field first in the inaccessible layout, then compare the experience with the accessible layout below it.

Inaccessible Layout

Accessible Layout

We've all experienced moments when we've struggled to identify how to fix an error in a form. Whether it's a missing field, a mistyped email, or an unclear requirement, form error messaging can lead to frustration and confusion. Compare the following examples to see how thoughtful error messaging helps users navigate forms smoothly, identify and resolve mistakes quickly, and complete their tasks with confidence.

Inaccessible Error Message

To experience an inaccessible error, type in your phone number in this format: [XXX] 555-1212, or type more than 10 numbers.

Accessible Error Message

To experience an accessible error, type in a 5-digit year, or enter your phone number.