In 1997, the Center for Universal Design at NC State University put together 7 Principles of Universal Design for products and environments that can be used by all people as much as possible without requiring adaptation or special design.
Let's apply these principles for the purposes of web design and make web content more accessible.
Table of content
- Principle One: Equitable Use
- Principle Two: Flexibility in Use
- Principle Three: Simple and Intuitive Use
- Principle Four: Perceptible Information
- Principle Five: Tolerance for Error
- Principle Six: Low Physical Effort
- Principle Seven: Size and Space for Approach and Use
1. Principle One: Equitable Use
The design is useful and marketable to people with diverse abilities.
Guidelines:
1a. Provide the same means of use for all users: identical whenever possible; equivalent when not.
1b. Avoid segregating or stigmatizing any users.
1c. Provisions for privacy, security, and safety should be equally available to all users.
1d. Make the design appealing to all users.
To make a website accessible to all, the use of semantic HTML tags is important. When used correctly for headings, landmarks, tables, forms, and others, you create a consistent design that is perceptible to both sighted and users with visual impairment.
2. Principle Two: Flexibility in Use
The design accommodates a wide range of individual preferences and abilities.
Guidelines
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.
In relation to the web, content must be coded to be accessible by mouse, touchscreen, or keyboard. This means that if, for example, the user goes to a website where data needs to be entered and an alert appears warning that the session is about to expire, it must be possible for keyboard and screen reader users to easily and quickly extend the session.
3. Principle Three: 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.
Guidelines
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.
In terms of the web, make sure that the structure of the website is well organized (content is organized with headings, important sections of the content are clearly marked) and semantic HTML tags and native HTML widgets are used that are familiar to users.
Also provide simplified summaries of the important points at the beginning of an article, which will help users understand the content more easily. Advertising and content that is not part of the main content should be placed outside the reading flow and marked as such so that it is not confused with the content.
When using forms, validation must ensure that in cases of successful completion and submission, this is clearly communicated through a success message.
If errors occur during completion, the input fields must receive focus and clearly describe why the error occurred and how it can be corrected.
4. Principle Four: Perceptible Information
The design communicates necessary information effectively to the user, regardless of ambient conditions or the user's sensory abilities.
Guidelines
4a. Use different modes (pictorial, verbal, tactile) for redundant presentation of essential information.
4b. Provide adequate contrast between essential information and its surroundings.
4c. Maximize "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.
In order to apply this principle correctly on the web, for example, a text could also be presented visually with simple illustrations, as audio and/or in video format. Regardless of the input device or the user's disability, they should be able to perceive the content provided.
5. Principle Five: Tolerance for Error
The design minimizes hazards and the adverse consequences of accidental or unintended actions.
Guidelines
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.
On the web, this principle can be applied as follows:
On orders, give the user a confirmation summary of what they are about to order before sending it, in case they hit the button by mistake and don't want to complete the process.
If the user uses an app where one can delete photos, posts or documents, for example, move them to the recycle bin first to restore what was deleted if one changes their mind or accidentally hit the delete button.
Another good example are search functions. If the website offer a search function, program it to spell check the submitted search terms and suggest corrections to guarantee the user a successful search.
6. Principle Six: Low Physical Effort
The design can be used efficiently and comfortably and with a minimum of fatigue.
Guidelines
6a. Allow user to maintain a neutral body position.
6b. Use reasonable operating forces.
6c. Minimize repetitive actions.
6d. Minimize sustained physical effort.
In terms of the web, you fulfill this principle if, for example, you offer keyboard users a "Skip to main content" link at the beginning of the page so they don't have to type through all the links in the header and navigation and can jump directly to the main content.
Also, make sure that the site has a good structure of headings and landmarks (it is important that the content starts with an <h1> heading, located in a <main> landmark, among others)so that users of screen readers can navigate via headings and landmarks to the part of the page that interests them.
7. Principle Seven: 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.
Guidelines
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.
I couldn't think of a good use case for this particular principle in relation to the Web. I think it could be related to hardware and physical environments rather than virtual environments or interfaces.
If you can think of a good example, let me know in the comments and I can add to it.
Thanks for your reading and time. I really appreciate it!
Top comments (0)