This is part 3 of The Internet is for Everyone blog series. Read our previous blogs on website accessibility here.

Header image for the blog - Universal design - websites are for everyone. A white airplane is pointing into a blue square with a gaping hole. Both shapes are on a yellow background.

In 1997, a group of designers and architects came together to develop the seven principles of universal design. Led by the late Ronald Mace, their intention was to create a guideline for designing environments, products and communications.

But what led Mace to become the Father of Universal Design?

For most of his life, Mace worked as an architect and was an advocate for universal design thinking. As a wheelchair user for most of his life, he had many barriers and understood what it’s like to live in a world that is not designed to be inclusive. Mace then became a passionate voice for accessibility and universal design. Before his death, he had created many opportunities for accessible design which still impact our work today.

Principles of universal design

User experience starts with users. People are the first consideration in any design, and that includes people with disability and impairments. Digital creators who use the seven guiding universal design principles will be better informed in creating inclusive and accommodating web design.

1. Equitable use

1a. Provide the same means of use for all users: identical whenever possible, equivalent when not
1b. Avoid segregating or stigmatising any users
1c. Provisions for privacy, security, and safety should be equally available to all users
1d. Make the design appealing to all users

Web design examples:

  • High colour contrast helps users with colour blindness to differentiate content on a screen
  • Provide alt text descriptions in images for screen reader users

Universal design example: Three different colour swatches on display with three contrasting colour palettes

2. Flexibility in use

2a. Provide choice in methods of use
2b. Accommodate right- or left-handed access and use
2c. Facilitate the user’s accuracy and precision
2d. Provide adaptability to the user’s pace

Web design example:

  • A person who is sensitive to light will find it difficult to use a glaring screen without resulting in headaches or sleeping disorders. To address the issue, you can give them the option to turn off the blue light or to install applications

3. Simple, intuitive use

3a. Eliminate unnecessary complexity
3b. Be consistent with user expectations and intuition
3c. Accommodate a wide range of literacy and language skills
3d. Arrange information consistent with its importance
3e. Provide effective prompting and feedback during and after task completion

Web design examples:

  • Ensure your content uses the appropriate headings (h1, h2 and h3) and are easy to follow visually
  • Write in plain English and avoid using jargon so users can understand the content easily

Universal design example: A screenshot of the MAC homepage. It has ample white space and concentrated text in the middle of the page

4. Perceptible information

4a. Use different modes (pictorial, verbal, tactile) for redundant presentation of essential information
4b. Provide adequate contrast between essential information and its surroundings
4c. Maximise “legibility” of essential information
4d. Differentiate elements in ways that can be described (i.e., make it easy to give instructions or directions)
4e. Provide compatibility with a variety of techniques or devices used by people with sensory limitations

Web design example:

  • Enable open/closed captions and Auslan interpretation in videos for users with audiovisual impairments

Universal design example: This is a screenshot of a man is holding a laptop on his palm. There is a woman on the right who is gesturing in Auslan. The image is in black and white. Open caption copy is available at the bottom of the screenshot.

5. Tolerance for error

5a. Arrange elements to minimize hazards and errors: most used elements, most accessible; hazardous elements eliminated, isolated, or shielded
5b. Provide warnings of hazards and errors
5c. Provide fail safe features
5d. Discourage unconscious action in tasks that require vigilance

Web design examples:

  • Ensure form error messages are located at the error location. This makes finding and fixing errors much more accessible for all users, especially the cognitively impaired
  • Error messages should clearly explain the error and provide clear instructions on fixing the issue

Universal design example: This is a screenshot of an accessible sign up form by Airbnb with accurately labelled prompts in each field.

 

6. Low physical effort

6a. Allow user to maintain a neutral body position.
6b. Use reasonable operating forces.
6c. Minimise repetitive actions.
6d. Minimise sustained physical effort.

Web design example:

  • Enable keyboard shortcuts for users with limited mobility.

7. Size and space for approach and use

7a. Provide a clear line of sight to important elements for any seated or standing user.
7b. Make reach to all components comfortable for any seated or standing user.
7c. Accommodate variations in hand and grip size.
7d. Provide adequate space for the use of assistive devices or personal assistance.

Web design example:

  • Allow accessible features such as the pinch-to-zoom function to work on mobile

Universal design is meant to be forgiving. As users, we enjoy products that are accessible to all. Download our eBook to learn how you could make accessible-friendly websites.

CTA button to The Internet is for Everyone - Why and how to make your website accessible. Below the text there is a button with the words 'Download eBook' on it

Topics: Accessibility, Brand