Accessibility isn’t often something designers consider when beginning a new project. Many times, it’s a hidden need that they don’t think about until something becomes problematic. For example, you may be in the middle of a design project when a test user tells you that they can’t read some text on your website. That’s when you begin to analyze what happened and you realize that they are color blind and couldn’t distinguish the green text from the red background. Admittedly, green text on red background isn’t a good idea even for those who aren’t color blind, but you get the idea.

Accessibility issues can always creep in throughout a project’s lifecycle. The most expensive ones are often those that come after a project’s been completed. In some countries where accessibility legislation is strong, businesses can actually find themselves in costly lawsuits if they aren’t careful. Companies and federal agencies are required to provide equal access to all their users. Regardless of the legal requirements, however, accessibility can greatly benefit users and improve products. That’s why we’re going to look at ways of planning and focusing your efforts on designing with accessibility in mind from the very beginning.

Applying the 7 principles of universal design

Ron Mace, along with several design researchers and practitioners across the U.S. first published ‘The Principles of Universal Design’ in 1997. They are valuable resources which designers can use to intelligently plan and guide their design process. This will benefit both users of the design, as well as the business itself.

The principles of universal design serve as a foundation for those who want to create universal design products. They were created to guide many design disciplines such as products, environments, and communications. These principles can be applied to any design style or trend because they are adaptable and timeless. Incorporating them at the start of your project will ensure that you are proactively considering accessibility.

There are seven principles which all include guidelines that offer actionable approaches for universal design. Each of these principles captures a key concept. Whenever you’re planning and evaluating your design based on these guidelines, keep in mind that not every principle is always relevant to every design.

Let’s go ahead and look at each design principle and their guidelines. We’ll also look at design examples for each of these for a better understanding of how you can apply them to your own projects.

1. Equitable use

“The design is useful and marketable to people with diverse abilities.”

The first principle is equitable use. That’s because this drives accessibility. This principle encourages you to consider users with different abilities. It encourages you to consider all users, not just those you’re targeting. Designing for all users means you’ll also improve the experience your target users will have, thus increasing your company’s brand value.

Guidelines:

  • Provide all users with the same means: identical if possible, equivalent if not.
  • Don’t segregate or stigmatize any of your users.
  • Every user should have the same provisions for privacy, security, and safety.
  • Ensure your design is appealing to all users.

Design example: avoid stigmatizing color blind users by using strong color contrast

Approximately 8% of men (1 in 12) and 0.5% of women (1 in 200). Designing color palettes with strong contrast will ensure that you don’t segregate or stigmatize these users.

A common accessibility myth is that if you design for accessibility, you inevitably sacrifice a superior visual design. The truth, however, is that strong color contrast, in this case, can be aesthetically pleasing to everyone.

2. Flexibility in use

“The design accommodates a wide range of individual preferences and abilities.”

Everyone is different, so a static, inflexible design won’t accommodate all users. This principle encourages us to create designs that are flexible, adaptable, and/or customizable. It accounts for individual preferences and lets users choose their own way of using a product. When you give users a choice, they feel freer and more in control of their own experience with your system.

Guidelines:

  • Offer users a choice in how they use your system.
  • Ensure you accommodate both left-handed and right-handed users.
  • Offer users accuracy and precision.
  • Ensure adaptability to users’ pace.

Design example: allow dashboard customizability

Customization allows users to change your system, adapting it to their own preferences and abilities. They can choose and organize what they see on your website and how they use it. Dashboards are great examples of the importance of customization. Many project management applications and enterprise systems offer users the ability to customize their dashboards. Depending on their needs and what they’re working on, users can choose what they want to see on the dashboard and how to use it in a way that benefits them most.

3. Simple and intuitive use

“Use of the design is easy to understand, regardless of the user's experience, knowledge, language skills, or current concentration level.”

One of the main goals of UX design is offering simple and intuitive use, and it’s no surprise that it’s also a universal design principle. Its goal is to reduce complexity and cognitive loads. The cognitive load theory states that we can only handle between 3 and 9 items in a short amount of time when we are processing information. As such, to reduce complexity and cognitive load, always try to present users with as few information as possible, ideally between 3 and 9 items.

Guidelines:

  • Reduce any unnecessary complexity.
  • Be consistent with intuition and user expectations.
  • Ensure you accommodate for a wide range of language and literacy levels.
  • Arrange information in a way that is consistent with its importance.
  • Offer users effective feedback and prompting both during and after completing a task.

Design example: use progressive disclosure to reduce visual clutter

Progressive disclosure is an interaction design technique which aims to reduce visual clutter and get rid of any irrelevant information. It prioritizes information based on used needs and interactions. Additionally, it allows them to drill in for more information, generally without incurring more page load. Progressive disclosure reduces cognitive load and helps user focus on their tasks.

MailChimp, for example, is a web-based service for email marketing. On their pricing page, they use progressive disclosure to showcase their service plans. Users can interact with a slider that communicates the number of people they want to reach out to and based on that, the website displays their recommended service plan.

4. Perceptible information

“The design communicates necessary information effectively to the user, regardless of ambient conditions or the user’s sensory abilities.”

Information is critical, so it should be easy to digest and easily accessible, regardless of whether it’s communicated through text, audio, video, or pictures. Incorporating this principle into your design means starting with your users. Figure out the best way to present information to them by considering what their disabilities may be, such as hearing or visual impairments.

Guidelines:

  • Use various methods for redundantly presenting essential information (verbal, tactile, pictorial, etc.).
  • Ensure an adequate contrast between important information and its surroundings.
  • Ensure important information is as legible as possible.
  • Differentiate elements in a way that can easily be described, allowing users to give instructions or directions.
  • Ensure the system is compatible with various techniques or devices used by people with sensory limitations.

Design example: help hearing impaired users watch videos with transcriptions

Multimedia, particularly videos, require multisensory experiences. People who are hearing impaired or face language barriers can have a difficult time consuming content from videos. These barriers can be overcome by adding subtitles or transcriptions to videos, thus allowing users to consume the information within them without needing to hear anything. Accessible designs benefit both companies and users, just like it does TED.

TED is an NPO whose mission is to spread ideas through short talks. These talks typically don’t last more than 18 minutes and come in the form of videos. To ensure that they can reach and help as many people as possible, their website provides users with both subtitles and transcriptions, as well as an option to select the text language.

This is great for users with a hearing impairment, as well as for those who might simply prefer to read the content instead of listening or watching a video. This is also good for TED because it helps them reach more users, thus increasing their popularity.

5. Tolerance for error

“The design minimizes hazards and the adverse consequences of accidental or unintended actions.”

Mistakes are a huge part of life, hence the saying “to err is human.” While there are no potential catastrophic consequences of our mistakes as designers, we should still aim to design error-friendly environments. Universal design involves designing for all users, as well as designing in anticipation for users’ various environments and actions. This principle encourages you to think beyond the device’s screen and how the user and your system will interact with each other.

Guidelines:

  • Arrange elements in a way that minimizes hazards and errors.
  • Warn users about hazards and errors.
  • Implement fail-safe features.
  • Discourage users from performing actions unconsciously when the task requires vigilance.

Design example: using form validation to reduce submission errors

Form validation helps to minimize and prevent user errors. You can validate form inputs in three ways:

  1. Input format validation – this ensures the user has filled in the form fields using the correct format. Email fields, for example, should start with a string of characters, followed by an “@” and a domain name.
  2. Data validation – ensure that the data users enter is in the correct context. For example, setting a reminder with a digital assistant will require a date and time no earlier than the present, of course.
  3. Server validation – this means that all the data in a form is sent to the server where it is checked for a correct relationship between every input. For example, a login form validates the data server-side by verifying that the username and password match.

6. Low physical effort

“The design can be used efficiently and comfortably and with a minimum of fatigue.”

We may not typically associate using the web with any sort of physical effort. We can just sit down with a mouse and keyboard, but technology is now everywhere in our workplaces. It’s not uncommon nowadays for many people to use computers for eight or more hours to performs their work tasks, and this can be quite taxing on our bodies.

People with disabilities, in fact, can have a much harder time using the web than others. For example, someone with mobility issues may have difficulty moving the mouse to their desired targets. This is why it’s crucial that we design experiences with low physical effort in mind.

Guidelines:

  • Ensure users can maintain a neutral body position.
  • Use reasonable operating forces.
  • Minimize the number of repetitive actions required to complete tasks.
  • Minimize the amount of sustained physical efforts required to complete tasks.

Design example: using keyboard shortcuts to minimize mouse usage

Keyboard shortcuts are great for ensuring users don’t need to move from the keyboard to the mouse for simple tasks. Most pieces of software offer keyboard shortcuts such as Ctrl + C for copying and Ctrl + V for pasting. Adding appropriate shortcuts can help you design wonderful interactive experiences for your users. They can improve a website’s navigation and make it easier to user for all users.

7. Size and space for approach and use

“Appropriate size and space is provided for approach, reach, manipulation, and use regardless of user's body size, posture, or mobility.”

Product designers typically focus on form factors such as a product’s size and the space it occupies. Digital designers focus less on form factors and more on what is displayed on the screen. However, we should think outside of our devices’ screens and consider users’ environments, especially now that most users likely use mobile devices over desktop computers.

Most of the guidelines for this principle apply primarily to product and environment design but we can still make use of them when creating a universal design for a website for both desktop and mobile devices.

Guidelines:

  • Ensure all important elements are clearly visible regardless of what device is used.
  • Ensure that reaching every component is comfortable, regardless of whether the user is standing or sitting.
  • Accommodate for variations in hand size.
  • Offer an adequate space for using personal assistance or assistive devices.

Design example: target areas on mobile devices

On desktop computers, users interact with websites using a small pointer on the screen. On mobile devices, they use their fingers to touch the screen, so a small target area can be problematic because users may not be able to tap it with precision. A 2013 MIT study showed that the average size of an adult human’s index finder is between 1.6 to 2cm. That amounts to approximately 60 to 76 pixels on a typical mobile screen. As such, when designing mobile experiences, make sure you consider human physical factors for your touch target areas.

Why universal design matters

The Convention on the Rights of Persons with Disability (CRPD) is the most important international work on accessibility. It’s the 21st century’s first major human rights treaty and it serves to protect people with disabilities’ rights and dignity. The CRPD calls for removing any environmental and attitudinal barriers in both physical and digital spaces. It was adopted by the United Nations in 2007 and as of 2021, 163 countries have signed it.

“The Convention listed Universal Design as one of the general obligations to protect the rights of persons with disabilities. “To undertake or promote research and development of universally designed goods, services, equipment and facilities, as defined in article 2 of the present Convention, which should require the minimum possible adaptation and the least cost to meet the specific needs of a person with disabilities, to promote their availability and use, and to promote universal design in the development of standards and guidelines;”” — U.N. Convention on the Rights of Persons with Disabilities, Article 4, 2006

Final thoughts

Creating accessible experiences can be challenging, and we may sometimes not know where to start. Universal design’s seven principles are great for helping us consider all users’ needs. Everyone benefits from universal design, not just those with disabilities or people who are aging.

The principles of universal design are great resources that we can use to design accessible websites (or other digital experiences) which serve and cater to as many people as possible. They will help guide your design process, so you should incorporate them into your projects from the very beginning.