How to Create an Autism-Friendly Website: 5 Primary Mistakes to Avoid & Web Accessibility Testing Tools

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.

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.

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!

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.

None of us actually like these, right? They're annoying and distracting, and they create unwanted frictions in the whole user experience.

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.

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.

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.

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.

Ensure your website complies with the WCAG standards, particularly the current version, WCAG 2.2, which has been the W3C Recommendation since October 2023.

• 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.