Unit 11: Intro to Photoshop
Unit 12: Design Accessibility
Unit 13: Product Design Thinking
Unit 14: User Experience Design
Unit 16: Introduction to Design Portfolios
Unit 17: Portfolio Development
Unit 18: Personal Branding
Unit 19: Case Studies
Unit 20: Portfolio Website Design
Unit 21: Career Coaching
2 of 2

Forms

In this lesson, we will cover how to make form design accessible.

Be careful with forms

In recent years we have experienced a de-evolution in form fields. Modern designs have foregone traditional identifying attributes and interactive affordances in favor of a more minimalist approach. Today’s forms lack two specific items that are vital for accessibility: clearly defined boundaries and visible labels.

Forms without Borders

Below is an example of a traditional text input. It is a rectangle with a defined boundary. It can be filled with color, but does not have to be filled. There is also a visible label, which in this example sits to the left of the field.

Clearly defined boundaries for form fields are important for users with mobility impairments and those with cognitive disabilities. Knowing the location and size of the click target is important for people using a standard or adaptive pointing device. Users with cognitive disabilities may have difficultly finding and interacting with fields without common visual cues.

Here is an example form fields without boundaries from a popular blogging platform. Below there are two input fields on the page. Where on the screen can we click in order to enter the “Tell your story…” text area?

Here is the same screen shot with a blue rectangle added to show the boundaries of the text area. If you click anywhere below this region, nothing happens.

This is an example of a note-taking app design. This also does not use traditional input visuals, but provides users with disabilities more information. The title of the note goes between the two horizontal lines, and the user can click anywhere between the bottom two lines to begin typing their note.

Forms without Labels

Labels tell the user the purpose of the field, maintain their usefulness when focus is placed inside of the field and remain even after completing the field. Placeholder text is a poor replacement for a visual label.

They are typically of low contrast. Of all the examples, only one has enough contrast to meet our needed 4.5:1 ratio.

Placeholder text goes away. In the examples below, what are we supposed to enter into the text field? For the JetBlue example should we enter username, email address, or TrueBlue number? For the Caviar example, should we “Get Started” by typing in our favorite food, a preferred restaurant, or address? Are the price fields for min and max, over and under, or before and after?

Here is a more accessible way of designing the Price compound field shown above. We will see the labels, min and max, even after we fill in the fields.

Scroll to Top