Designing for autism

Autism Spectrum Disorder (ASD) is one of several forms of neurodivergence, such as ADHD (Attention Deficit Hyperactivity Disorder) or High Intellectual Potential (HIP). Actually, many autistic people also have ADHD and/or HIP. And like other forms of neurodivergence, autism is not a disease.

Autism is a set of neurological conditions that can lead to repetitive behaviours and affect communication or social awareness, information and sensory processing, as well as motor skills. A person with just one of these traits is not necessarily autistic. Autism is diagnosed when the person has a specific number of traits and their intensity is significant.

Even though each autistic person is unique, I’ve found some interesting parallels between ASD, design, and the criteria set out in the Web Content Accessibility Guidelines (WCAG). Here are a few pointers to address autism in design.

Ask clear questions

‍For an autistic person, implicit social rules can be hard to grasp, especially when it comes to understanding the expected level of detail in a response. So be precise in your questions and the available response options.

For example, it's unnecessary to provide an open text field with the question "What did you study?" The question is ambiguous, so an autistic person might be tempted to describe their entire educational background and the specific interests they developed in their free time. If you want to know their highest qualification, simply ask "What is your highest level of education?" with answers like A-level, Bachelor's, Master's, PhD, or No degree.

Plain language benefits not only autistic people but all users. I also recommend checking WCAG criterion 2.4.6 on headings and labels for further guidance.

Follow Jakob’s Law

People don’t spend all day on your website. But when they're visiting, they expect it to work like other websites. This is Jakob’s Law, a fundamental principle of UX design that’s crucial for neuroinclusive design. It also makes an interesting parallel with the preference for routine seen in some autistic individuals, and their need for stability.

Your site should therefore be consistent with other websites, as well as on its internal pages. This includes navigation that remains in the same place on all pages, icons that keep their usual meaning (like the hamburger icon for a menu), and a consistent way of identifying links (for example, using the same colour or underline). Sticking to these digital conventions helps all users, including autistic people, navigate easily.

Don’t trigger popups without user action

Juliana Pontois is a former accessibility consultant who conducted a study on what makes websites inaccessible to autistic people. Two interviewees mentioned “popups” that fill “the entire window” and make them “close the site.” Others referred to elements that “flash, like videos or images.”

Make sure that popups don’t open without user action (as explained in the WCAG criterion 3.2.1 about focus order). Also, make sure any moving or flashing content can be controlled by the user (as explained in the WCAG criterion 2.2.2 about pause, stop, hide). Pay particular attention to cookie pop-ups, newsletter sign-ups, and ads in general.

Go minimalist

Autistic individuals can experience a wide range of sensory issues, from hypersensitivity to hyposensitivity. Hypersensitivity might show up as a low tolerance for social stimulation, difficulty following a conversation due to background noise, or a heightened ability to notice small environmental changes that others might miss. On the other hand, with hyposensitivity, the person may not notice important visual cues on a page.

How do you address these contradictions in design? Opt for a clean, minimalist approach. Avoid stressful elements like countdown timers, which can cause anxiety. Prioritise progressive disclosure of information by asking for one thing at a time and avoiding large blocks of text. By simplifying the screen and only keeping essential information, you help users manage the volume of content and prevent them from getting lost in navigation.

User interface for autistic people

Here are some tips for UI designers. Nikolay Pavlov, a professor at Plovdiv University in Bulgaria, listed them for designing interfaces for autistic people:

Typography

• Stick to a maximum of two different typefaces on the site,
• Choose readable fonts like Arial, Helvetica, or Times New Roman,
• Text size should not be smaller than 14px,
• Avoid justified text and the use of italics,
• Do not hyphenate long words at the right margin of the text. Keep words together.

Contrast and colours

• Avoid white text on a black background. Black text on a white background is easier to read,
• Opt for pastel colours to reduce sensory overload,
• Avoid sharp contrasts, such as black on white, which can be uncomfortable for some autistic people.

Formatting information

• For dates use the full format “Saturday, 26 September 1998”,
• Telephone numbers should be separated: 034-22.33.44 or 034-22 33 44,
• Always use the numeral and not the equivalent word - even for numbers below 10. For example 3, 67, 239,
• Never use roman numerals.

If you think these rules apply to everyone, you're right. That’s the beauty of universal design. It just goes to show that accessibility benefits everyone.

More resources about ASD

• Extraordinary Attorney Woo on Netflix: This South Korean series features a brilliant autistic lawyer who often finds herself in socially isolating situations. It became Netflix's most-watched non-English show just a month after its release.
• The Daily Tism: The Daily Tism is a satirical news and culture website by autistic people for autistic people (and the people who like to laugh with them).
• Pop culture only likes autism as a concept – but fails to do it justice: Why can’t characters be canonically autistic without it being the main point of the show?