In this article, Philena discusses the importance of designing accessible experiences that cater to a diverse range of users, as well as for temporary or situational challenges. She touches on why accessibility is not just a technical requirement but a design principle that benefits everyone. Philena highlights six common design mistakes that hinder accessibility and provides practical solutions to create more inclusive, user-friendly designs.
Why accessibility in design matters
Design isn’t just about making things look good—it’s about making sure everyone can use your product or service. Think about it: you’ve probably struggled with low contrast on your phone in bright sunlight or found it hard to navigate a cluttered website when you’re in a rush. Accessible design makes things easier for everyone.
But accessibility isn’t just about following guidelines - it’s also about understanding real user needs. That’s why user research and feedback on design decisions are essential to ensure designs truly meet the needs of diverse users. By listening to feedback and testing with people who have a range of abilities and experiences, designers can identify barriers and create solutions that work for everyone.
So, let’s look at some common design mistakes and how you can avoid them to create a better experience for all users.
Mistake 1: Low contrast text
Let’s start with one of the most obvious issues - low contrast. Sure, it might look stylish to have light grey text on a white background, but can anyone actually read it? Now, imagine someone with a visual impairment trying to make sense of that.
But here’s the thing: low contrast isn’t just an issue for those with impaired vision. Think of someone trying to read on their phone outside in the sun, with the screen reflecting glare—contrast matters in that scenario too.
How to get it right:
Aim for a contrast ratio of at least 4.5:1 for normal text.
Use tools like the WebAIM Color Contrast Checker to test your designs.
Think of contrast as a universal design principle—if it’s easier for someone with a visual impairment, it’s easier for everyone.
Mistake 2: Relying only on colour to convey information
Think about a form where the only indication of an error is a red outline. For someone who’s colourblind, that red outline might not even register. The same problem happens when colour alone is used to convey important information, like in charts or buttons.
Accessibility isn’t just about catering to specific disabilities, it’s also about ensuring clarity for everyone. Whether it’s a person with colour blindness or someone trying to interact with your design in less than ideal lighting, relying solely on colour can be a problem.
How to get it right:
Always supplement colour with icons, text, or patterns.
For example, instead of just using a red outline for errors, add a symbol and text that clearly explains the issue and how to fix it.
Use a colour-blindness simulator during the design process to ensure your work is still clear without colour.
Be aware that blindness simulators will never replace real user feedback. Ensure you test your designs with diverse users.
Mistake 3: Complex layouts that confuse users
We’ve all been there—landing on a website that’s so cluttered and chaotic that we have no idea where to look. For someone with cognitive disabilities or attention issues, this kind of layout can make navigation nearly impossible.
But even without a disability, a complex layout can be frustrating. Picture yourself trying to book a flight on a crowded train, with limited time and attention—simplicity and clarity become lifesavers.
How to get it right:
Use a clear visual hierarchy with headings and subheadings that guide users.
Make important information easy to find with a clean layout, such as grouping related elements together to create an intuitive flow.
Use consistent spacing, fonts, and alignment to reduce cognitive load.
Keep consistency across pages, so users don’t have to relearn how to navigate every time.
For example, place the primary action button, like "Continue" or "Submit," in the same location across all pages and use consistent labelling to avoid confusion.
Mistake 4: Text that’s too small or difficult to read
Tiny text is a big problem. Whether someone has low vision or is trying to read on a small screen in a bumpy car ride, small, illegible text makes for a frustrating experience.
Readable text benefits everyone. Imagine you’re trying to skim an article on your phone during your commute—clear, bold text that’s easy to read helps you grasp the key points.
How to get it right:
Use a minimum font size of 16px for body text.
Keep line length between 45 to 75 characters for better readability.
Choose fonts that are easy to read, with good spacing between letters and lines.
Some fonts that are considered accessible include: Arial, Calibri, Century Gothic, Helvetica, Tahoma, Verdana, Tiresias, and OpenDyslexic. Again, it is important to get real user feedback to see what works for your users.
Mistake 5: Missing image descriptions
For someone using a screen reader, images without descriptions are a black hole of information. They can’t see what the image is trying to convey, so they miss out on key content. Alternative text or alt text can provide that context for users by describing images for users who can’t see them.
But alt text isn’t just for screen reader users. What about someone with a slow internet connection? While they’re waiting for the images to load, they can still understand what’s there if you’ve provided alt text.
How to get it right:
Always include meaningful alt text for images that convey information.
Avoid purely decorative images, or if they are not needed make sure they’re marked as such by using empty alt text (alt="").
Alt text should reflect the image’s purpose and context in relation to the surrounding content, for example if you use ‘simple illustration of mountains and a sun’:
On a page about travel destinations it could be: “Illustration of a mountain range at sunrise, representing a peaceful travel location.”
On a page about design inspiration it could be: “Minimalist mountain and sun illustration showcasing simple design concepts.”
Think of alt text as part of the story you’re telling—don’t leave users in the dark.
Mistake 6: Incomprehensible data graphs
Complex data visualisations can be a headache for users, especially those with assistive technology or those who are colourblind. Labels that are too small or graphs that rely solely on colour can make it difficult to understand what’s being presented.
But this isn’t just a challenge for users with disabilities. Anyone trying to read a graph on a small screen or in a distracting environment will appreciate clear, easy to understand visuals.
One simple way to make graphs more accessible is to incorporate patterns or textures in addition to colour. For example, instead of only using red and green in a pie chart, you can add stripes or dots to differentiate between sections for users who struggle with colour perception.
How to get it right:
Provide clear, concise summaries of data trends.
Label graphs and charts clearly, with text and visual cues like patterns.
Use high contrast colours and provide alternative formats, like tables, for users who prefer text-based information.
For image-based graphs, provide clear alt text or captions that describe the data and key insights, ensuring the information is accessible to screen reader users.
Designing for everyone
At the end of the day, accessibility is about making sure everyone has equal access to services and products. By avoiding these common design mistakes, you’re not just helping people with disabilities—you’re creating a better experience for anyone who might be in a permanent, temporary or environmental situation where good design means accessible design.
Take action
When designing services or products, ask yourself: is this accessible for everyone? Start making these changes today, and be sure to conduct user accessibility testing along the way - you may be surprised by small changes that improve the overall user experience for everyone.
Additional resources
To further enhance your accessibility design skills, explore these valuable resources:
Contact information
If you have any questions about our accessibility services or you want to find out more about other services we provide at Solirius, please get in touch.
Comentários