How to Design Web Content that Supports Autistics
Human neurodiversity is an important part of the digital accessibility conversation that tends to be left out. Neurodiversity, which refers to the natural diversity of our brains (and the ways we think, learn, and behave) can have a huge impact on whether we are able to fully access digital content and the web. While there are many brains amongst us that function “typically”—and are referred to collectively as “neurotypical”—there are also many brains that are “neurodivergent”. In particular, those with Attention Deficit Hyperactivity Disorder (ADHD), Obsessive-Compulsive Disorder, and Autism Spectrum Disorder/Condition (ASD/ASC, or just Autism) are among those that have neurodivergent brains, and therefore have different needs when it comes to digital content.
Web and content designers are often focused on providing accessibility features that mainly support users with visual or motor disabilities, not neurocognitive needs. At first thought it seems like a daunting task: how are we supposed to design accessible digital content when everyone’s brain works differently? The answer lies in Universal Design and Inclusive Design principles, and creating content that supports the widest range of needs regardless of ability. The Web Content Accessibility Guidelines version 2.1 (also known as WCAG) aims to provide standardized guidelines that fulfill a broad range of needs, getting us closer to universally accessible digital content.
It is my personal opinion, however, that the WCAG falls short when it comes to fully addressing neurocognitive needs. In part I believe this is because not all of the WCAG is required by law, and in part because it is less clear what features would really support neurodiverse individuals. While more “visible” impairments such as visual or motor difficulties sometimes are present in individuals who are neurodiverse, which makes it easier to provide solutions, many neurodiverse individuals have difficulties that are less visible or unknown.
For example, as someone with Autism, one of the features of my brain is that I get really impatient. When my webpage doesn’t load correctly or at all, or when content is too complex, I get frustrated and sometimes exit out of what I am looking at, be it document or webpage. After I have calmed down, I have to restart the whole process. This can be a particular problem when dealing with government forms, taxes, healthcare sites, and other notoriously slow and poorly designed web content. While impatience may be seen by neurotypical people as a personal problem or a moral failure, for me it is a feature of my Autism and something I can’t always control, and I know many Autistics who share this difficulty.
A common saying in the Autism community is “If you have met one person with Autism, you have met one person with Autism.” Neurodivergence is different for everyone that experiences it, and each neurodiverse person will have unique neurocognitive needs while navigating the web, which is another reason why designing for neurodiversity is difficult.
Which is why I want to take today’s blog to discuss some of the features that may support neurodiverse individuals and their needs. Specifically, I want to discuss features that would support Autistics, but likely other neurodivergent folks too.
As a disclaimer: my needs are unique, as are all of our needs. I can not speak on behalf of the entire Autistic community, and some may disagree with me (in fact, please do so in the comments). I aim to provide general advice that stems from my own experience as an Autistic person, but do feel that the features I will discuss would benefit both neurodivergent and neurotypical individuals.
What guidelines already exist
I do want to give some appreciation to WCAG features that already support neurocognitive needs. There are a few listed criteria in the WCAG version 2.1 that could specifically aid neurodivergent digital content and web users. These include:
Guideline 1.3 Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
Guideline 1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.
Guideline 2.2 Enough Time: Provide users enough time to read and use content.
Guideline 2.4 Navigable: Provide ways to help users navigate, find content, and determine where they are.
Guideline 3.1 Readable: Make text content readable and understandable.
Guideline 3.2 Predictable: Make Web pages appear and operate in predictable ways.
Guideline 3.3 Input Assistance: Help users avoid and correct mistakes.
The WCAG also has some supplemental guidance for improving cognitive accessibility, as well as a longer and more in-depth document with specific guidance developed by the Cognitive and Learning Disabilities Accessibility Task Force (COGA). The guidance in these documents are is a wonderful addition to the WCAG, although they are both not required by the new laws.
These guidelines are a great start, but there is plenty left out of the WCAG that would better support users with Autism and other neurocognitive conditions. The web is a largely sensory and social space, and features that require sensory and social aspects can cause barriers if not given careful consideration from designers. Some of the tips I share below are included in these supplemental guides while others are not, but the below tips are the things I have found most important for me when navigating digital content as an autistic.
Tip #1: Try to avoid bright or neon colors
I may be the first to say it, but I very much dislike neon. Bright colors, and specifically neons, give me a lot of sensory overwhelm. Bright red is the worst—and looking at it for more than a few seconds can trigger a physical reaction of “pain” to shoot through my eyes and head, and a migraine often follows.
While allistic (a term describing anyone who is non-autistic) people might see this as dramatic, many Autistics have heightened sensitivity to sensory experiences such as bright and overwhelming lights or colors. To me, a strong sensory experience is categorized in my brain as “pain”, even if it might not be “painful” in a traditional sense. Unfortunately, bright and loud colors have for some reason become almost a symbol of Autism, and while I have known many Autistics to share my disdain for them, I have known others that simply love them!
I have created my own accommodations for this, which include setting the brightness on my computer very low, and using Windows Night Light or similar programs (such as f.lux) at all times to give bright colors a more muted, orangey hue. When I come across websites that use extremely bright colors, sometimes the accommodations I use are not enough to prevent that “pain” signal being sent to my brain. I usually have to squint, look away, or close the page within a few seconds to avoid any negative effects. I can often get away with changing colors on spreadsheets, but most websites don’t have the option to change the colors that are built in.
I have encountered the most pushback on this debate from designers, who are unhappy about the limited choice in colors they can use for websites and other graphical content. Many designers fear that “accessible” is the same as “boring” or “plain”, but that is simply not the case! A good design does not need neon colors—I promise you. When in doubt, there is always the option to create a way to turn down the brightness on your colors, or make the page grayscale, which can help aid people with color deficiencies or low vision as well. Another great option is to have a setting that allows your content to be viewed in “Dark Mode” or a version that has more muted, dark, relaxing tones.
Accessibility doesn’t have to mean boring design or minimalism. I think that accessibility is actually the perfect opportunity to get creative and innovative, to create new styles that are both beautiful and accessible. Designers—give yourself more credit! It's tough work, but it will make all the difference for ensuring content can be enjoyed by all.
Tip #2: Too many advertisements create too many barriers
Advertisements (ads) can be important sources of revenue for bloggers, small businesses, and other users hoping to monetize their web content, but too many of them simply makes your website inaccessible. Struggling to find the small “X” (that often doesn’t meet color contrast requirements, by the way) to close an autoplaying video ad, trying to read text without getting distracted by a new medication, or being bombarded by flashing lights and colors contributes to a poor user experience for everyone, but especially those with Autism.
As someone with Autism, I find that ads are not only extremely distracting but sometimes hinder my ability to use the site they are on. Recipe blogs are huge barriers in this area, since many of them turn my computer into a furnace and make it unusable. I feel like I am playing tag trying to close all of the ads before the page refreshes due to loading issues. Again, my impatience in this area is a large barrier as well, and the minute I face problems with a website I am likely to close it and go elsewhere.
I have also noticed that many ads show disturbing or inappropriate content that causes me a physical reaction to the ad. Marketers can use this tactic to draw our attention to the ad, but this is overall bad practice and not just for neurodivergent folks, but everyone who uses the web. Children especially should be protected from disturbing or sexual content in ads, especially if the site they are visiting is meant for their use. These ads can also trigger autistic and allistic people to have meltdowns or other anxiety-related responses.
In general, many autistic people can be more susceptible to manipulation and exploitation tactics due to social barriers. This already positions them poorly for the web, which can be rife with manipulative and exploitative ads and other marketing schemes. Though it’s not always possible to choose a preference of what types of ads can be displayed on your content, placing ads in strategic locations (such as at the bottom of the screen, or more out of view) can support users that may be more vulnerable.
Other tips to consider are only having ads that are static (no flashing, animation, or video content). In addition, avoid ads that “popup” on your screen, hindering your view and attention, and require that you close them. Limit the amount of ads that you have, and try to put less ads in locations where your community will be reading a lot of text or information.
There is definitely a balance here, as ads can be unavoidable, but there needs to be some consideration for the types of ads, ad sizes, and ad locations to ensure they create minimal barriers for the community you serve. If you place them haphazardly, you may risk not only creating barriers but losing your community base—and your revenue—as well. Though I can’t speak for all Autistics, it is my personal opinion and observation that many of us tend to be loyal to specific brands. Once we find something that works, we don’t need anything else. So we tend to stick to the sites that we trust to offer us a good user experience, good content, and minimal barriers.
Tip #3: Repeat information and directions often
I see this a lot on web pages that require actions, for example, forms or other pages where you have to submit documents. One page will explain what you need to submit and how to submit it, then the actual page where you submit has no clear directions for what information goes where. This requires a lot of back and forth between tabs, which can be difficult for anyone, but especially those with memory processing issues of which Autistics and other neurodivergent individuals can experience.
If the instructions are too in-depth, or the fields where I need to submit things are poorly labeled, I probably won’t do it. In addition, if submissions are not split up into sections or don’t save as you go (or provide you the option to save), it might not get done either. For me, TurboTax is a great example of a site that does this well, because it allows me to save and pick up right where I left off. It also provides clear, repeated instructions for many of the fields.
For websites that require long forms or actions, a “cheat sheet” can be helpful. I think of a cheat sheet as a downloadable document that contains instructions for how to complete the actions needed. Providing a document like this ensures that the user can print out the instructions and keep them nearby while completing the required tasks.
In all areas, it is important to also provide a way for users to find support if needed. For example, keep a link to the FAQ or any other methods to contact a support person available somewhere on each page, such as the footer. Having this information in an easy to find location may prevent Autistic users from closing the form altogether due to not being able to receive support, but in general, this is just good web design.
Tip #4: Provide an alternative to calling
Having a phone number listed as an option for communication is actually a really accessible thing. I know many members of the older generations that still prefer to get stuff done via phone call, like booking appointments or checking store hours. However, some people are much more comfortable with alternative options such as automated portals, checking websites, texting, or emailing to get things done.
As an Autistic, calling people on the phone can be incredibly anxiety inducing. I have to hype myself up, practice what I am going to say, drink some water, and then finally decide…actually, I want to put it off until tomorrow.
It isn’t always this hard. Some days are better than others, but it tends to be the hardest when the call is important. For example, scheduling an important meeting or appointment, or making a decision.
It makes it really hard for me to schedule important appointments or other necessities when my only option is to call, and it’s not just people with Autism. Those who have any form of anxiety (general or social anxiety), are deaf or have limited hearing, have Auditory Processing Disorder, have mutism, or have any cognitive difficulties that impair their ability to interact with someone over the phone would benefit from non-verbal communication options.
It’s not just those with disabilities that benefit, however. Not everyone has access to a phone, and some people may have circumstances that limit their ability to make a phone call, such as a sleeping baby or being in a loud or crowded place. Maybe you are in an important Zoom meeting, but need to urgently get in contact with someone without stepping away. Regardless, alternative methods for communication can benefit a wide variety of people and circumstances.
I recommend providing a variety of clearly-designated ways for users to contact you that support a range of needs and abilities. These include having an option to make a direct phone call to a human, in addition to automated support via phone call, automated or direct support via a chatbot, embedded forms, email, or text.
Tip #5: Have an Autistic user test your website
While not always feasible, it’s always encouraged to have real people test your website for accessibility. And by real people, I mean real users with disabilities, especially those that face barriers to the web such as those that are blind or have motor impairments. Autistics and other neurodivergent folks especially can have unique needs that aren’t always accounted for in the WCAG, so user testing can help you find barriers that might have been missed in other testing sessions.
User testing is important because designers don’t often have the disabilities that they may be designing for. In fact, I don’t know a single web designer with Autism (and if you are, I would love to connect!). While not every autistic person faces the same barriers, a quick web audit with an Autistic person can teach you a lot about how people with different cognitive needs interact with your site, which can be incredibly useful for designing your content in a more appealing and functional way. I would be happy to help you get started, as someone with Autism myself—please get in touch if you need a tester!
Having your site user tested also gives you some significant credibility with the disabled community, and I recommend listing any testing you have done on a designated accessibility page on your site. Also, remember that web testing isn’t one-and-done, but instead you should be bringing on a tester anytime you make major changes to the layout or function of your site or content.
Have any additional tips?
Leave me a comment below!
