Let’s build an autism-friendly website for your business. While we get to enjoy technological advances with no to little problems, it’s a different story for neurodivergent people. So, we’re inviting you to be more mindful of their needs by making our websites accessible.
Table of Contents
Imagine you were getting stuck in horrible traffic. It was an insane situation, with dozens of vehicles jumbled at the crossroad, traffic lights not working, and everyone honking aggressively. And your car is stuck right in the center of the chaos.
Now we are sorry for the unpleasant visuals, but you get the idea of how people with autism feel when visiting a visually-loud website. The whole situation is overwhelming, distracting, and even frustrating — just like being in that traffic jam.
Actually, it’s not just autism but also other neurodivergent people, including ADHD and dyslexia.
While most of us have no to little problems accessing digital products, it’s a different story for autistic and neurodivergent people. So let’s be more thoughtful about their needs, especially if diversity and inclusion is one of your business drivers and brand values.
The good news is designing an autism-friendly website not only benefits neurodivergent users, but also everyone else. And here’s why.
Web design for autism: The rule of thumb
Autistic & neurodivergent people rely on a calm, structured, and organized environment to be able to focus. That means your website should have no distractions, no noise, and no vagueness. That sounds like a nice, peaceful experience, doesn’t it?
And autistic or not, don’t we all want that?
So, on your next web design reassessment, try to spot any of the following common mistakes.
5 common autism-friendly website design mistakes
Many websites are guilty of these errors, mostly because of a lack of knowledge, though. And knowledge is power, so get to know these mistakes and learn how to fix them, so you can make an autism-friendly website design.
1. Using bright, striking, contrasting colors
Colors like bright orange, fluorescent green, electric blue, and neon red — you get the idea — can be disturbing as well as overstimulating. This means that it could cause tension when browsing the website. That can’t be a good user experience, right?
Instead, opt for soft, calm, and muted colors to support website accessibility. Although if your brand colors are bright, you might have to go back to the foundation of your brand identity and see what possible changes you can make your entire business autism-friendly.
2. Too many navigation bars or confusing menu
Top navigation, sidebar, hamburger button, each one with its own sub-categories… Like, where do you even start browsing after the homepage?
If your business has a lot of content to tell, revisit your information architecture to make sure you lay things out in an organized, structured, and easy-to-find manner. This will help neurodivergent people browse your site with better focus and less fuss.
3. Adding animations that seem fun but serve no purpose
An autoplay video on your hero section? A long tail-like effect trailing behind your cursor? A bouncing live chat button? Yeah, let’s not.
While these might look like fun microinteractions, they don’t really have any purpose other than distracting your users and slowing down your website. What we’d suggest:
- Add a Play button so your users have the option to watch the video or not.
- Let your cursor be a cursor. Removing the trail doesn’t mean the end of your business, right?
- Keep your live chat button floating on the bottom right corner.
Better website accessibility, faster site. Win-win!
4. Using too much sarcasm & figure of speech in your content
Research says that people with autism might have trouble understanding figures of speech. So, be careful with writing your copy. Be creative, but maybe avoid sarcasm, hyperbole, and ambiguous phrases. Or at least, keep them to a minimum.
5. Aggressive pop-ups & push notifications
None of us actually like these, right? They’re annoying and distracting, and they create unwanted frictions in the whole user experience.
How to check website accessibility in 5 steps
1. Automated Testing Tools
Use automated testing tools to get a quick overview of your website’s accessibility issues.
- Tools: Tricentis Testim, QA Wolf, accesiBe, Siteimprove, and EquallyAI. For a full list of top accessibility testing tools and to get more insights, we recommend checking out the QA Lead’s article: 23 Best Web Accessibility Testing Tools in 2024. It’s a great read and will definitely help you choose the right tools for your needs.
- How: Install the browser extension, run an audit, and review the results. These tools will highlight common accessibility issues such as missing alt text, improper heading structure, and color contrast problems.
2. Manual Testing
Manual testing is essential to catch issues that automated tools might miss.
- Keyboard Navigation: Ensure that all interactive elements can be accessed using the keyboard alone (Tab, Enter, and Space keys). Learn how to keyboard test and what issues to check for in this video. Make sure that focus indicators are visible when navigating through the site using a keyboard.
- Screen Reader Testing: Use free screen readers like WebAIM’s MAC’s VoiceOver screen reader or WebAIM’s NVDA for Windows to navigate your site. Check if the content is read out logically and if interactive elements are correctly announced.
- Use Heading Style correctly: Use heading levels (H1, H2, H3, etc.) to create a clear and logical structure. Additionally, proper use of these headings assists screen readers, helping visually impaired users navigate and read your website more effectively.
3. Involve Users with Disabilities
Conduct user testing with people who have various disabilities to get real-world feedback.
- Recruit Testers: Find users with different disabilities such as visual, auditory, cognitive, and mobility restrictions.
- Feedback: Observe how they interact with your website and gather their feedback on the usability and accessibility of your site.
4. Write Helpful Alt-text
Imagine someone using a screen reader to browse your site; descriptive alt text helps them understand what each image is about, creating a more inclusive and enjoyable browsing experience. Not only does alt text improve accessibility, but it also boosts your site’s search engine optimization (SEO). By spending a little extra time crafting meaningful descriptions, you’re making your website more accessible, user-friendly, and discoverable.
5. Review Web Content Accessibility Guidelines (WCAG)
Ensure your website complies with the WCAG standards, particularly the current version (e.g., WCAG 2.1).
- Guidelines: Focus on key principles such as perceivable, operable, understandable, and robust.
- How: Review each guideline and success criterion, applying them to your website. This may involve checking for text alternatives for non-text content, ensuring all functionalities are available from a keyboard, providing enough time for users to read and use the content, etc.
Autism-friendly website design benefits everyone
Think about it: these things not only distress people with autism but also annoy us all, neurotypical people. So let’s be mindful of our web designs — it benefits everyone!
We’ll be sharing more tips and insights on creating an autism-friendly website, web design for autism, and website accessibility. Make sure to subscribe to our bi-weekly newsletter, The Next Draft, so you don’t miss them.
Fill out the short form below and see you in your inbox!
