Andrée Lange has over ten years of experience working as a digital designer at several agencies. At heart she is a true UX and visual designer. In recent years she has specialised in web accessibility. And more specific: in accessible design.
Creating accessible websites is essential for building an inclusive and user-friendly internet for everyone, including people with disabilities. While the Web Content Accessibility Guidelines (WCAG) provide a comprehensive framework for improving accessibility, looking beyond the field of websites to the wider design space can offer a fresh perspective.
Enter universal design – a concept pioneered by Ronald Mace and a team of dedicated researchers and practitioners. By applying the seven foundational principles of universal design to website development, designers can create sites that are not only accessible but also more usable and engaging for all users.
In this article, we’ll explore the key principles of universal design and provide practical guidance on how designers can implement these to create more accessible websites that benefit everyone!
Implementing universal design principles for website accessibility
When applied to website design and development, universal design principles ensure that your site is accessible to all users, including those with visual, auditory, motor, or cognitive impairments. Let’s explore the seven key principles of universal design and how site owners, designers, and developers can ensure their sites adhere to these principles.
Equitable use
The first principle of accessible web design is equitable use, which states that the design should be “useful and marketable to people with diverse abilities“. This means that designers should ensure that all aspects of the website are useable for all visitors, regardless of disability or impairment.
To adhere to this principle, there are several accessibility considerations that designers should keep in mind:
- Provide alternative text (alt text) for all non-text elements on your site that convey information. This allows users with visual impairments to understand the content of images, videos, and other media using screen readers.
- Ensure all interactive elements on your website can be operated with a mouse and keyboard. This enables users who may not be able to use a mouse, such as those with motor impairments, to navigate and interact with your site using only their keyboard.
- Apply sufficient colour contrast to text on your website to make it readable for users with colour blindness or other visual impairments. This can be achieved by using high-contrast colour combinations and avoiding the use of similar colours for text and background.
- Avoid using colour alone to convey meaning. For example, incorrect or missing form field data shouldn’t be indicated only by a red outline on the incorrect fields; other indicators, such as text descriptions or icons, should also be used to ensure that all users can understand the information being conveyed.
Flexibility in use
This principle states that the design should “accommodate a wide range of individual preferences and abilities“. It’s all about enabling users to interact with your website in their preferred way.
There are several accessibility considerations that designers should keep in mind:
- Enable users to resize website text to make it easier or more comfortable to read without other elements of your site breaking or becoming unusable.
- Avoid using autoplay for media elements, especially those that are longer than 5 seconds, as this takes control away from the site user. Providing media controls is much more accessible.
- Avoid the use of sliders and automatic scrolling as this might not give some users enough time to take in key information.
Remember, the goal is to give users the freedom to interact with your website in the best way for them. By prioritising flexibility in your design, you’re creating a welcoming and user-friendly environment that caters to various needs and preferences.
Simple and intuitive use
This principle emphasises the importance of creating designs that are easy to understand and use, regardless of the user’s experience, knowledge, language skills, or current concentration level.
When applying this principle to website design, the goal is to provide an intuitive user experience. Here are some considerations for designers to keep in mind:
- Avoid jargon or complex terminology that may confuse users. Instead, opt for simple, easy-to-understand language throughout your website. This ensures that users can quickly grasp the information they need without having to decipher complicated text.
- Ensure that elements like navigation menus, buttons, and other interactive components are designed consistently across your site. This helps users develop a sense of familiarity and confidence when interacting with your website, as they know what to expect from each element.
- When creating links, use descriptive text that clearly describes the destination or action associated with the link. This helps users understand where they will be directed or what will happen when they click a link.
- Whenever you have forms or input fields on your website, make sure to provide clear labels that indicate what information is expected from the user. This eliminates guesswork and ensures that users can easily understand how to interact with these elements.
Perceptible information
This principle states that your design should “communicate necessary information effectively to the user, regardless of ambient conditions or the user’s sensory abilities.“
There is some overlap between this principle and the principle of equitable use, as both are designed to make your website accessible for users with varying abilities. However, beyond the effective use of colour and providing alt text for non-text elements, there are additional ways designers can adhere to the principle of perceptible information:
- Organise information in an easy-to-understand manner by using a logical heading structure. Headings should relate directly to the text beneath them and should be organised hierarchically. This means using <h1> tags for main headings, <h2> tags for subheadings, and so on. By structuring your content like this, users can quickly scan the page and understand the main points, even if they have difficulty reading the full text.
- Provide both textual and visual means of presenting information. While providing alt text for non-text elements is crucial for users with visual impairments, the reverse is also true; some users will benefit from having a visual alternative to complicated text content. This could include diagrams, charts, or illustrations that help to break down complex ideas into more easily digestible formats.
Tolerance for error
This principle states that an accessible design “minimises hazards and the adverse consequences of accidental or unintended actions.”
By following this principle, you can create a more forgiving experience for visitors, preventing accidental errors and minimising irreversible negative consequences.
- Ensure that tooltips are dismissible, hoverable, and persistent. This prevents situations where a user accidentally triggers a tooltip and can’t get rid of it or intentionally triggers one and then accidentally dismisses it.
- Add delays to dropdown menus and mega menus to help users avoid accidentally triggering them. This is especially important for users with motor impairments who may struggle with precise mouse movements.
- Provide “undo” or “back” buttons to allow users to easily edit information or return to a previous page. This gives them the ability to correct mistakes or change their minds without having to start over from scratch.
- When a user initiates a function that has permanent consequences, such as deleting an account or making a purchase, ask them to confirm their action. This extra step makes it difficult for these functions to be triggered accidentally.
Low physical effort
The sixth principle of universal design advocates for designs that can be “used efficiently and comfortably and with a minimum of fatigue.” The goal is to ensure that website designs don’t require excessive physical or cognitive exertion for users to navigate and interact with the site. Here are some tips:
- Provide larger target areas for interactive elements by increasing the size of buttons, links, and other clickable elements. This makes it easier for users with less precise motor skills to interact with your site. It’s an important change for individuals who may have difficulty with fine motor control or are using assistive technologies like eye-tracking software.
- Minimise the number of steps required for users to achieve their goals. When a user visits your website, they should be able to accomplish what they came for with minimal effort. Avoid lengthy forms or requiring users to navigate multiple pages to find what they need.
- Maintain a logical tab order for users who navigate websites using a keyboard instead of a mouse. This means that when a user presses the “Tab” key, the focus should move sequentially through the page’s interactive elements in a way that makes sense.
- Keep your design consistent and avoid overwhelming users with too much information at once. By breaking complex tasks into smaller, more manageable steps and providing clear, concise instructions, you can reduce the cognitive effort required to use your site.
Size and space for approach and use
This principle states that designs should provide appropriate size and space for “approach, reach, manipulation, and use regardless of the user’s body size, posture, or mobility.”
This principle aims to ensure that designs are accessible to users regardless of how they view or interact with them. It ties closely to other principles, including Low Physical Effort and Flexibility in Use, as it aims to accommodate a wide range of needs and preferences.
Some things to consider are:
- Users access websites from various devices, including desktop computers, laptops, tablets, and smartphones. Ensure that your website is accessible and easy to use across all these. Design responsive layouts that adapt to different screen sizes and ensure that interactive elements like buttons and links are large enough to be easily tapped on smaller screens.
- While designing your site, consider assistive technologies like screen magnifiers or text-to-speech software. For example, if a user is magnifying your site, you’ll want to ensure that dynamic elements like dropdown menus remain easy to understand and interact with, even when enlarged. Similarly, if a user relies on text-to-speech software, it’s important to ensure that your site’s content is structured in a way that makes sense when read aloud.
Take action: Incorporating universal design in your next web project
Applying the seven principles of universal design – equitable use, flexibility in use, simple and intuitive interface, perceptible information, tolerance for error, low physical effort, and size and space for approach and use – is essential for creating websites that are accessible and welcoming to all users.
As web technologies and user needs continue to evolve, it’s important to stay informed about accessible design. Consider enrolling in one of The A11y Collective‘s comprehensive courses to further your knowledge and practical skills in creating inclusive web experiences.
Take the next step in your journey towards universal design by enrolling in your first course with The A11y Collective today!
Ready to get started?
Enrol in our “Accessible design, the basics” course to take your first steps in understanding the fundamentals of web accessibility.
