“An estimated 1.3 billion people experience significant disabilities, which accounts for 16% of the world’s population, or roughly 1 in 6 individuals.” — Source: WHO
Which means, potentially 16% of the global population is unable to use our app due to our failure to design an inclusive product. To gain a better understanding of what accessibility is, let’s immerse ourselves in real-life scenarios.
Imagine being colour blind and finding yourself in the front line at a traffic signal. How would you determine when the signal turns green? Would it be when the car behind you honks? Oh wait, the car behind you always honks!
Now, consider another situation. Your favourite actor’s movie has finally been released on a streaming platform, but it lacks closed captions, and it is in a foreign language!! And yes, accessibility encompasses more than just physical disabilities.
Accessibility: Essential for some, useful for all
To create a more accessible and inclusive design, we should consider (at least) these following factors during the early stages of our design process:
1. Ensure Sufficient Colour Contrast Between Foreground and Background:
To ensure an effective design, it is crucial to establish sufficient contrast between the colour of information-bearing elements and their background. When there’s low contrast, it becomes hard for anyone to see and understand the information. Imagine the difficulty faced by people with low contrast sensitivity, which is common as we get older.
Imagine a website with light grey text on a white background. The low contrast between the text and background makes it difficult for users to read the content, particularly for those with visual impairments or older adults with reduced contrast sensitivity. This lack of sufficient colour contrast can result in frustration, exclusion, and an overall poor user experience.
The minimum colour contrast requirements are as follows:
- Information-bearing elements: At least a 4.5:1 contrast ratio.
- Exceptions: 3:1 contrast ratio can be used for large text (14+ bold, 18+ regular), UI controls & graphical objects.
- Decorative & Disabled elements doesn’t require colour contrast.
WCAG criterion: Contrast (Minimum) (Level AA)
By checking for colour contrast while choosing colour for your website or app can reduce the ample effort taken at the later stage of the project.
2. Avoid Relying Solely on Colour for Conveying Information:
This is especially helpful for users who have partial sight, limited colour vision, or colour blindness. By including other visual elements like icons, labels, or descriptive text, you make it easier for everyone to understand and interact with your design, regardless of their ability to perceive colour
WCAG criterion: Use of Colour (Level A)
Example: Using red and green to represent active and inactive states may appear very similar to people with colour blindness. One effective approach to creating an accessible design is to include additional text indicating the user status.
Consider starting your design process in grayscale or using a colour blind simulator to experience how the content appears in different types of colour blindness.
3. Ensure That Interactive Elements are Easy to Identify:
Using generic link text like “learn more” or “read more” can be ambiguous and fail to provide clear information about the action or destination associated with the link.
This lack of clarity can create uncertainty and cognitive strain for users, particularly for those relying on screen readers or individuals with cognitive disabilities.
WCAG criterion: Link Purpose (Level A)
Example: The accessible design provides a descriptive instructions helps users understand the action they are taking and what will happen next.
A simpler way to make links more accessible is, rather than simply saying “Learn more,” you can use text like “Learn more about Panda” or “Learn more about How to explain UX design job to your relatives.” These descriptive link labels give users a clearer idea of what they can expect to find by clicking on the link.
4. Include Image and Media Alternatives in Your Design:
When a screen reader encounters an image or photo, it will provide a description to the user. However, the quality and usefulness of these descriptions can vary significantly, depending on the effort put into the design.
WCAG criterion: Non-text Content (Level A)
Example: The inaccessible picture lacks suitable alternative text, making it inaccessible for users who cannot perceive the image. On the other hand, an accessible design would include appropriate alternative text that provides a description of the picture.
Note: Alt text should be provided only for information-bearing elements and not for decorative elements or images that do not convey essential information. By focusing alt text on meaningful elements, you ensure that users receive relevant information without overwhelming them with unnecessary descriptions.
5. Establish Clear and Consistent Navigation Options:
Ensure that the navigational components on your website or app remain consistent by appearing in the same order and in the same place on all pages. This consistency allows users to easily navigate through your content without confusion or frustration, as they can rely on familiar navigation patterns to find what they’re looking for.
Changing the navigation from page to page can be disruptive and increase the cognitive load for all users. This inconsistency can pose significant challenges for individuals with cognitive disabilities, making the site difficult or even impossible to navigate.
WCAG criterion: Consistent Navigation (Level AA)
Example: If the home page features a search icon in the upper right corner of the navigation, it should remain in that position on all pages throughout the site.
6. Providing a Way to Disable Moving Content and Interaction-Triggered Animation:
While moving content and animation may seem like minor distractions to some, they can pose significant barriers for individuals with attention disorders or visual sensitivities. It is important to provide users with controls that allow them to pause, stop, hide, or have control over moving, blinking, scrolling, or auto-updating information. This includes features like disabling autoplay animation (e.g., carousels) and animation triggered by user interaction (e.g., parallax scrolling).
This feature allows individuals with attention disorders, anxiety, Autism, and others who experience sensory overload to remove distractions that may hinder their browsing experience.
WCAG criterion: Pause, Stop, Hide (Level A)
Example: The accessible design have a pause button to pause the carousel.
7. Use Labels and Instructions for Form Fields and Inputs:
When designing forms, it’s important to include clear labels and instructions for each field. Many modern forms tend to prioritise a minimalistic look, however, it’s important to ensure that accessibility is not compromised for the sake of aesthetics.
Clear labels and instructions in form fields benefit users with cognitive disabilities, visual impairments, limited literacy, and those using assistive technologies.
WCAG criterion: Labels or Instructions (Level A)
Example: In the inaccessible Form Field, the label is used as a placeholder, which disappears as soon as the user starts typing. This can lead to frustration among users. In the accessible design, the label remains in the same place and does not disappear after the user starts typing, ensuring a more user-friendly experience.
Conclusion:
Designing for accessibility can be easier when we focus on the experience certain group of people have, and how they will interact with your product. Consider factors such as age, visual impairments, hearing impairments, cognitive abilities, and motor skills. If time & resource allocates, conducting user research and gathering insights from various user groups will help you gain a comprehensive understanding of their needs and challenges.
“Accessibility is about people, about inclusion, equity & kindness.”
By implementing accessible design principles, we can remove barriers and provide equal access to information and functionality for all users. By prioritising accessibility, we create a more inclusive and user-friendly experience that benefits everyone.
And remember, Accessibility is not a barrier to innovation.
