Accessing the 25% Who Can’t — How To Design for Accessibility
We’re increasingly dependent on the internet and computers for everything we do — this has become starkly more obvious through the COVID19 global pandemic.
From finding work, doing our work, banking, travel, through to shopping and keeping in touch with our loved ones — so many aspects of our lives are dependent on technology.
Although they’re critically important, and an ever-present resource, access is not always a given for people living with disabilities.
About 25% of the world’s population has some form of disability.
That’s 2.42 billion people and a $6.9 trillion dollar economy that’s being ignored. No, not a trivial amount at all.
Why? Simply because designers and developers of technology don’t consider the needs of people with disabilities.
They’re seen as minority users, and we’re taught to design for the average person. Interestingly, the average person doesn’t actually exist, and this has caused a plethora of serious and sometimes fatal issues in different industries (this example from the air force is both fascinating and shocking).
Accessible software and websites have more clear benefits — better search results, bigger audience reach, they encourage good coding practices, and increase usability for everyone.
There’s a lot of work that we still need to do to bring accessibility standards and guidelines into the realm of usability — a lot of these are still “tick-box” exercises, that don’t always mean people with disabilities can use them. But they are still better than not having considered them at all.
Universal Design
So, if designing for the average person is a massive fail, how do we design for all? That’s what we call Universal/Accessible Design.
Coined by architect, Ronald Mac, Universal design employs seven principles to aid in the design of buildings, products, services, policy/law and environments to make them accessible to all people, regardless of age, disability or other factors.
The 7 principles are as follows:
- Equitable Use: The design is useful and marketable to people with diverse abilities.
- Flexibility in Use: The design accommodates a wide range of individual preferences and abilities.
- Simple and Intuitive Use: The design is easy to understand, regardless of the user’s experience, knowledge, language skills, or concentration level.
- Perceptible Information: The design communicates necessary information effectively to the user, regardless of ambient conditions or the user’s sensory abilities.
- Tolerance for Error: The design minimizes hazards and the adverse consequences of accidental or unintended actions.
- Low Physical Effort: The design can be used efficiently and comfortably and with minimum fatigue.
- Size and Space for Approach and Use: Appropriate size and space is provided for approach, reach, manipulation, and use, regardless of the user’s body size, posture, or mobility.
Interestingly, some of the technologies we enjoy were once designed for disabled people. Email, telephone, typewriter, touch screens — the list goes on — these incredibly successful technologies were created with Universal Design at their core.
Access needs to consider in Software Design
Along with the “average person myth”, there’s a myth that making a website or app accessible is difficult and expensive.
Designing with accessibility from scratch doesn’t necessarily add extra features or content; therefore there shouldn’t be an additional cost or effort… plus, it’s much cheaper than having to redesign later on.
When designing anything, we should consider the number and type of potential accessibility issues users will have. Here are some conditions we should consider when we design software and website:
- Visual Impairment: This includes a partial or total inability to see or to perceive colour contrasts.
- Hearing Impairment: Some users have a reduced ability to hear.
- Motor Skills/Physical Disabilities: Users may have difficulty moving parts of their bodies, including making precise movements (such as when using a mouse).
- Photosensitive Seizures: Conditions such as epilepsy can cause seizures that are often triggered by flashing lights.
- Cognitive Disabilities: There are also many conditions that affect cognitive ability, such as dementia and dyslexia.
Design considerations for accessibility
Now that we know the reasons why we need to design for all, and the different types of access needs, what are the actionable steps we can take in designing software and websites?
The following list is drawn from accessible Web design, based on the WCAG accessibility standards, and are surprisingly simple to implement.
1. Include text alternatives for visual content
Adding alternative text descriptions to visual content, enables assistive technologies, such as screen readers, to interpret the image into spoken form so that people with vision impairments can understand and navigate the interface. The text should be a brief sentence that describes the image clearly. If alt text is neglected, screen readers will either skip the image, or read out its file name.
For all video content, remember to incorporate subtitles for users who are deaf. This also benefits people who may want to watch the video on mute or in public spaces. If the video is mainly visual without dialogue or narration, add a video caption that describes the content. If you haven’t already, try this setting on Netflix, it’s quite interesting!
2. Retain text hierarchy
The visual hierarchy of the interface should be easily interpreted by assistive technology. Remember to specify the different titles, headings and paragraph styles.
Labelling your text enables browsers and screen readers and alternative access methods to correctly navigate through the content and present in the right order.
3. The right level of colour contrast
Colour is key in anything design related. The right colour palette contributes to the brand, mood and tone of the software. But, the proper use of colour is also a major component in the legibility of an interface.
Colour contrast is often overlooked, but people who have low vision can find it hard to read text from a background colour if it has low contrast. The right contrast can ensure all the elements are distinguishable and clear. The WCAG suggests a minimal contrast ratio of 4.5 to 1 between the text colour and its background.
4. Don’t rely on colour alone to convey information
Users who have visual impairments may not perceive colour accurately, or at all. That’s why it’s important to use more than just colour to communicate different information.
For instance, when designing buttons, make sure to add text labels, even if they have been differentiated using colour. A quick and easy way to test colour accessibility is by converting the design to black and white to see if the same information still comes across.
5. Enable keyboard navigation
The computer mouse isn’t the only way people can interact with your software or website. This is particularly important for people with physical disabilities who will use alternative access methods for computer interaction.
From the get-go, it’s important to ensure that all functionalities are accessible with a keyboard (keys such as tab, enter, and the arrows). This can be easily tested in house by trying to navigate the user interface without a mouse, and seeing how far you get.
6. Clearly label form fields
It’s important to provide users with clear labelled elements, so they can understand what information needs to be filled in, and where.
Remember to keep the text consistent, so that the visible text visible is the same as the field’s name. This makes it simple for people using assistive technology to fill out forms without frustration.
7. Avoid content that may cause seizures
Accessibility guidelines suggest that no element should flash or flicker over three times per second. Anything above that threshold can trigger seizures in people who are photosensitive.
For any flashing content, it’s recommended to use lower contrast, and avoid saturated reds. And let’s be honest, this consideration makes for a visually more pleasing experience in general.
Where to from here…
Remember, accessibility isn’t just about ‘doing good’. Accessible software and websites have better search results, reach a bigger audience, they encourage good coding practices, and increase usability for everyone.
So, make accessibility part of your design research. Verify your assumptions with people who have disabilities, or better yet, co-design with them. It definitely makes for a more purposeful, and engaging design and development process.
If you’re inspired by this post, check out these useful tools that can kickstart your journey to building more meaningful, inclusive solutions
- WebAIM Colour Contrast Checker: Great contrast colour checker that gives you results in real time for regular and large text.
- Inclusive Components: A pattern library in the form of a blog, with a focus on inclusive design. Each post explores a common interface component and comes up with a better, more robust and accessible version of it.
- Colour Oracle: A free colour blindness simulator for Windows, Mac, and Linux. It shows you in real time what people with common color vision impairments see.
- Vox Product Accessibility Guidelines: A comprehensive checklist for designers, engineers, and project managers.
- AXE Google Chrome Extension: Test any site for accessibility violations using the Chrome inspector.
- Contrast: A macOS app for quick access to WCAG colour contrast ratios.
