The first of three episodes in a deep dive about accessibility for Autistic users. Rowan shares specific findings from the Austism Accessibility Guidelines Research Project report from 2019. This report was conducted by Hassell Inclusion in partnership with the UK's National Autism Society, and there are a ton of great tips for making your content more accessible and palatable for Autistic individuals! Join us on this three episode journey towards accessibility beyond the Web Content Accessibility Guidelines (WCAG).
00:00 | Introduction
00:36 | Background
01:47 | Autism and web accessibility
02:23 | The report
03:46 | The findings
04:25 | 1. Page layout
06:45 | 2. Navigation
07:49 | 3. Colours
8:39 | 4. Fonts
10:10 | 5. Text
11:28 | Conclusion
Twists & Turns | The Paul Dunlea Group
This is the all•Access podcast Access & Allies. My name is Rowan; I’m the co-Founder of All Access and a web accessibility auditor for the government of British Columbia’s Digital Government team.
The goal of Access & Allies is to attempt to break down any digital accessibility topic under the sun to answer any and all of your questions around making digital tools more accessible. Thanks for tuning in, and if you prefer to read along, make sure to find this episode’s transcript in the notes — along with any resources I mention.
Now, let’s get started with today’s topic: Web accessibility for autistic users.
This episode is the first of a three-part series that discusses findings on how to make your web content more accessible for people with Autism. The Autistic community is much larger than anyone currently knows, because we are realizing how many people go overlooked and don’t get assessments for autism. Especially women, girls, and gender diverse individuals, because autism can present differently in these groups than what is stereotypically expected or looked for.
The Web Content Accessibility Guidelines are our guiding light as digital accessibility experts. The latest version has 86 success criteria to keep in mind for making our websites and web products accessible for people with disabilities. But there is a world of accessibility beyond the WCAG, and while there is so much to talk about with WCAG, I want to explore that realm past the agreed upon standards.
I wanted to know if there was anything in writing about the Autistic digital experience. Not to frame it as a monolith, because Autism is very individualistic and everyone’s experience is different. But, I wondered if there were common threads between users with Autism. And I was able to find some information on that! So through episodes 14 - 16, I’m going to explore what can make your digital product more user-friendly and accessible for Autistic audience members or clients, and explore those themes in relation — or contrast — to WCAG.
The Web Content Accessibility Guidelines skew heavily towards making your content accessible for people who use assistive technology, as well as people with reading and processing disorders. Which is great! But there are experiences that are not always accounted for, and a lot of room for interpretation here and there, like the success criteria “Text Size”.
And for much more nuanced experiences, like Autism, these experiences can go overlooked because they are difficult to define. After all, the Autism spectrum, if you look at it like a spectrum, is very vast and very diverse. So, where do we begin?
Luckily, between June and September of 2019, the UK-based organizations, Hassell Inclusion in partnership with the National Autistic Society, did the work for us.
There were two phases in their research: desk research and interviews with three experts in autism and accessibility was phase one, and then phase two was an online survey and user research. The online survey involved 398 autistic respondents including 110 autistic people with associated learning disabilities. The researchers found that phase two validated the findings from phase one, and the user research also involved face-to-face focus groups with 17 autistic web users.
The takeaway here is that there was a ton of data collected from a large group of people. They did their due diligence when consulting with the autistic community, and it’s a really great example of how to conduct this type of research and feedback process. An Autistic-led organization was involved in the planning and a large pool of people with lived experience were the driving force behind the data.
In the report, which will be linked in the notes section of this episode, there was a quote I liked that I’ll read for you. It was by Gov.UK, Understanding new accessibility requirements for public sector bodies, and it reads, “Accessibility means more than putting things online. It means making your content and design clear and simple enough so that most people can use it without needing to adapt it, while supporting those who do need to adapt things.”
There’s no way we can dedicate a short episode to this report and outline every bit of information in it. So, please keep in mind that there is so much more to discover by reading the takeaways. But I want to share the high level suggestions with you to get us started.
The report itself does a great job and outline the individualistic nature of Autism, in that while there were a lot of common feelings and preferences, there were individuals or smaller groups that had contrasting views or preferences. And the report takes all of these into account, and makes suggested guidelines based on the most prevalent preferences and giving a nod to the less prevalent.
So let’s get started with the suggestions.
The things that stand out when it comes to page layout is to keep your content organized, clean, and symmetrical. Basically, make it make sense from a design perspective. For a lot of Autistic people, if something is too distracting they will leave. And this will come up repeatedly. It’s like a bounce effect. I know that when I’m navigating the web, if something is too flashy, I can get overwhelmed and ultimately can’t pay attention to the important content so I leave because it isn’t worth the mental load. A lot of businesses have lost my patronage because their site was too hectic — and it sounds like that’s a common experience.
So the first rule is the keep the design clear and clutter-free.
The second high priority item is to set page lengths appropriately to the page type and function. Too much scrolling can actually make people feel dizzy and can also easily overwhelm users.
Next is to clearly separate design elements and sections that do not belong together. So again, clear organization is key. One person from the study found that a lack of clear organization makes focusing difficult, causes eye strain, and subsequently causes headaches. So a lack of organization can result in physical pain. Computers are great, but we should keep in mind the physiological impact of them as well.
And another note about organization: put the most important information at the top if you can. Or at least make it the most prominent or easiest to find element.
Also think about what the non-text content is communicating. Do your design elements indicate level of importance? An example is having larger boxes or other design features indicated more important information. The reason for this is size indicates hierarchy, and that subliminal messaging is really important to a lot of people.
Next thing to think of with page layout is images above the fold. If you have a banner image that takes up the entire screen, and people have to scroll down to find the important information, that causes overwhelm, confusion, and frustration. The overall sentiments conveyed were that it’s over-imposing and intrusive.
Another great tip that often isn’t utilized is to provide a page summary. Especially if headings are vague or meant to be clever.
A lot of these suggestions could be new success criteria added under the WCAG guidelines “Text Alternatives”, “Adaptable”, “Navigable”, and “Predictable”. They do fall under the principles of WCAG, but have not yet been prioritized in the internationally agreed upon standards.
The next set of suggestions are related to navigation. Much like page content, it is suggested to keep navigation consistent and simple. AKA, clean and clutter-free.
One suggestion which is directly related to WCAG success criteria is to ensure that all links and buttons are visibly clickable. A lot of WCAG success criteria is about ensuring the focus is visible for people who do not use a mouse, but it’s important to visibly show that links are links and not just when hovering over them.
Next up is regarding carousels. Some people in the survey like carousels, but they must be easily navigable. Meaning they have to follow the success criteria 2.2.2 Pause, Stop, Hide. And they must move slowly. These suggestions directly relate to the WCAG guideline “2.2 Enough Time”.
Finally, the last highest priority suggestion is to use sequential menus with fewer items. If you can, minimize how much content goes in your main navigation menu and make sure it follows a logical order.
There are two high priority suggestions under Colours, and these are one of those design features that are often overlooked when it comes to accessibility. One of the most common WCAG rules you’ll hear people saying is to use high contrast. But with the Autism community, many people find muted colours easier to absorb, whereas bright contrasting colours can be overstimulating, distracting, and potentially even painful.
So how do we balance the need for high contrast and the need for soft colours? That leads us to the second suggestion: Allow users to customize the background and text of colours. Giving people autonomy around their web experience is a great way to go if you can manage that. Provide options for people, even when it comes to colours, and ultimately make sure that your content is compatible with different user experiences should they use an extension to change the palette or contrast, for example.
We’re at the penultimate section for our first episode of this series on designing and developing Autistic-friendly web experiences, and that is Fonts.
Users found that using at least 12 point fonts is helpful, especially for people with compounding conditions like ADHD. Specific font sizes are not referenced in WCAG, because how a font shows up is dependent on user agent settings and the user’s display. Generally, 14 is a good minimum, but the socially accepted rule across the internet is to not go below 12. And success criteria specific to font sizes are 1.4.12 Text Spacing and 1.4.4 Resize Text.
The next suggestion is to choose a typeface and use it consistently. And avoid using serif and sans-serif together. Typically, we suggest avoiding serif fonts because they can be especially problematic for people with dyslexia.
Also, allow users to customise the font type and size to suit their needs. This again in part references 1.4.4 Resize Text in WCAG, but also providing options for typefaces is something I’ve rarely seen, but I’ve really appreciated it when it was an option. Absolutely design your content with the font that is part of your brand image, but giving people options outside that main brand image only positively affects your overall brand image. Because it shows you are adaptable and accommodation, and that’s ultimately good for you and your users. One good option to provide is Open Dyslexic or Dyslexie, two fonts I’ve talked about in episode 5: One-size-fits-some.
In the last set of suggestions in our first of three Autism-focused episodes, we’re focusing on text. It’s similar to font, but overall looks at spacing and organizing.
First, and most importantly, ensure sufficient spacing between paragraphs and between lines of text. This directly relates to WCAG success criteria 1.4.12 Text Spacing, as mentioned a moment ago, and this is one that often goes overlooked. Make use of white space, and give content and people breathing room so they can more easily digest the information you’re providing.
Also, use shorter paragraphs and shorter sentences. Reference “3.1.5 Reading Level” of WCAG. Using language that is stereotypically seen as “more intelligent” isn’t actually all that smart, because most people read at a lower reading level. Make your copy widely understandable.
And don’t get in the way of your information by poorly strategizing the placement of images. Images that get in the way of the flow of your text ultimately distract users and take away from user experience.
And finally, one of the most important suggestions was to avoid excessive bold text. Use this design choice strategically, and only when necessary. Too much can cause agitation and is seen as aggressive, making it hard to focus.
Thank you for listening to this episode of Access & Allies on making your web products accessible for autistic users. This has been the first episode in a three episode series about making your web content accessible for Autistic individuals. As always, keep in mind that the user experience of someone who is Autistic will be different from the next, but these are some suggestions based on heavily researched data on what tends to make for a better product.
The topics we covered today in order were page layout, navigation, colours, fonts, and text. In episode 15 we will go over non-textual formats, images, video and audio, movement, and help pages, so keep an eye out for that.
I hope this has provided you with some new information, or at least confirmed some old knowledge. Just remember: meaningful accessibility takes time, expertise, and context!
Make sure to check out the resources provided in the notes section. And if you have any questions or comments, please feel free to reach out at info@allaccess.dev or through LinkedIn.
Want your site assessed for accessibility, or looking for consultation on your site plan? Make sure to reach out about that as well — we want to know how we can support you.
It’s been fun talking at you and until next time on Access & Allies.