4 tips for designing for accessibility and inclusion
5 mins read
Most designers agree that accessibility is a crucial factor in creating user-friendly UX design and UI design. Yet, it’s often the first item to deprioritise due to limited resources and time, as it’s often more reasonable to focus on the majority of your product’s target users.But, by doing that, we may be excluding the world’s largest minority group, the one billion people globally who experience a disability, and missing out on the inherent, universal benefits of making your digital products and services accessible and impactful.
What is accessibility design?
Accessibility design refers to a design that bears an equivalent experience for anyone, regardless of who they are and how they interact with products. Some common practices include ensuring colour contrast, securing the size of touch areas, and providing image/video captions.
There are several potential accessibility issues that users may have while interacting with digital products. Some of the most common include:
People who have these accessibility issues may not necessarily fall into the disabled demographic. For example, those who break an arm may not being able to use a mouse, or older populations may have reduced vision that leads to difficulty reading.
Why is accessibility important in digital product design?
Accessibility design has the potential to change how we create products and deliver content. Considering accessibility in UX&UI design also improves the usability of digital products and benefits a much larger user group (also referred to as The Curb-Cut Effect). For example, closed captions are most often created for users with auditory impairments, but they also enable users to watch videos in a noisy environment.
The good news is more global brands like Apple, IBM, Spotify, and Decathlon are all actively transforming their digital strategy for accessible design. The following are some best practices that PALO IT team implement in our work. They demonstrate accessibility design in action.
Perceivable: information can be perceived by at least one of a person’s senses.
Operable: interfaces are operable through a variation of interaction
Understandable: interaction and information should be understandable
Robust: content can be accessed through a variety of (assistive) technologies
Principles are all well and good, but let’s take a closer look at how they’re implemented...
1. Ensure colour contrast for visual elements
This can benefit:
People with visual impairments like blindness, colour blindness, or low vision due to aging
People who are using digital products in strong light environments
The purpose of creating a minimum luminance contrast ratio between visual elements and its adjacent colours (e.g. background) is those mentioned above can access content with sufficient readability. Other factors like font size and lighting conditions are also important to consider. In product design, we can address this with the most common standard suggested by WCAG, using tools like: Material Colour Tool or Stark Figma Plugin:
2. Do not rely on colours as the only indicator for signifying and separating information
*Principle: Perceivable and understandable
This can benefit:
People with colour blindness
Do not convey different information using colour alone. Using additional visual cues in UI design, such as text labels, glyph shapes, or patterns ensures all people can distinguish between them. Below are two examples from Square and Apple.
Adding icons and assistive messages to elevate the error in an input field bySquare.
Adding icons to indicate different data of a chart by Apple.
If possible, choose a colour palette that is colour-blind-friendlybefore diving into the design of theproduct.
3. Provide alternative text for images
*Principle: Operable and Robust
This can benefit:
People with serious visual impairments like blindness
For website owners; good alternative text can improve SEO
Alternative text (or alt text) helps describe images and other graphic elements in text with a short label in the code, which can ensure people who cannot see them can still understand what is displayed through screen readers (e.g. VoiceOver on iOS; TalkBack on Android). The information will also appear when an image fails to load. For marketing purposes, keywords inside alt text can improve search engine optimisation.
A few reminders to keep in mind when writing alt text:
Keep it short and simple
Do not replicate captions, since both will be read out by screen readers
Decorative images do not need alt text
Functional images (e.g. logos, icon buttons) should have alt text that explain their function
Moreover, using aclear heading hierarchy for each pageenables users who use screen readers to navigate digital products with ease. Ajob listing company, Indeed, has provided agreat toolkit on Figma to help you understand and apply a clear heading hierarchy.
4. Enable keyboard accessibility
Who can benefit:
People with physical disabilities who cannot use a mouse
People with serious visual impairments that cannot see cursors on screen
People with chronic conditions that limit the use of a mouse (e.g. repetitive stress injuries)
Productive users who prefer to navigate interfaces efficiently with a keyboard
Keyboard accessibility allows users who rely on/prefer using keyboards to interact with content and elements in digital products (e.g. using ‘tab’ to navigate to the next element on a website). Users are able to navigate, perform the same tasks as users who use a mouse, and locate elements with focus indication. Allowing this kind of interaction will also enhance overall user experience for all.
It’s also important to input and manage a logical and predictable keyboard focus order, providing users with a hierarchy when navigating content. Common practice to match visual flow is left to right and top to bottom. An example of focus order annotation by Microsoft, Fluent Design System.
Some native elements on websites already have built-in keyboard accessibility. Referring to existing guidelines by MDM can be a good starting point on that topic.
While accessibility design benefits those with disabilities, at PALO IT, we believe accessibility design can create positive impact to all users by providing a better overall experience. We aim to advocate its value and importance to a broader audience, and urge every developer, UX designer, UI designer—individuals and businesses alike—to start leveraging that value in their products and services.
Design with accessibility, and you can’t go wrong.
To start designing with accessibility in mind, learn more about PALO IT’s UX design and UI design services, or get in touch with our team to learn more about how we merge purpose and profit through design strategy.