Accessibility demo for visual impairment

The problem

This form could be inaccessible for visually impaired users as it depends on colour only to show error messages and shows these message above the form — not allowing a user or assistive technology to associate them with the relevant part of the form.

The form inputs are also laid out in a way that could be difficult to process for users with low vision — the labels being beside the inputs instead of directly above them — which would reduce the cognitive load in a user processing the form.

Note: Use a Chrome extension such as Spectrum to view this page under simulated colour deficiencies

Note: Demo this form using the “Straw test” or this “Tunnel vision” bookmarklet.

Form

There were a few errors with the information you entered.

  • Title is mandatory
  • First Name is mandatory
  • Surname is mandatory
  • Town/City is mandatory
  • Email Address is mandatory
  • Preferred contact number is mandatory
  • Your comments is mandatory

The solution

Form

Title is a mandatory field

First Name is a mandatory field

Surname is a mandatory field

Town/City is a mandatory field

Email is a mandatory field

Contact number is a mandatory field

Your Comments is a mandatory field