Aug 8, 2021
Web accessibility
 min read

Designing for cognitive disabilities

An illustration of a side-profile of a person with their hair tied up. One side on the background shows abstract swirls, and the other side shows abstract shapes.
Illustration by Marina Verdu.

Designing for cognitive disabilities

Things we’re doing (and aiming for) at Shopify.

Over 1 billion people in the world have a disability, and out of all these disabilities, cognitive disabilities are the most common. “Cognitive disability” is an umbrella term for many conditions, which all have unique symptoms.

But yet, many of the web accessibility discussions we have do not involve people with cognitive disabilities. We tend to have discussions about color blindness, blindness, and motor skills much more often.

What is cognitive disability?
Cognitive disabilities can look different for different people. It can look like someone with dementia who has difficulty remembering certain things. It can look like someone who has brain fog because of a medication they take every day to manage depression or anxiety. It can look like someone with dyslexia or ADHD.

The list goes on, but it’s important to remember how many disabilities fall under this umbrella. Not considering this group of users when we design leaves a huge number of users potentially left out of the solutions we create.

I gave a conference talk last year at a11yToronto about what we need to consider when designing for people with cognitive disabilities. In this post, I want to give some examples of the things we’re specifically doing at Shopify to try and improve the accessibility of our ecosystem. We know we’re not perfect. But here are some things we’re doing, considering, and also aiming for.

Understanding terms

First, we’ll need to understand a few terms that are important in this conversation. Cognitive disabilities cause difficulties with mental tasks. A neurotypical person is someone without a cognitive disability. Neurodivergent is a person whose brain functions in ways considered atypical by society.

So, how do you design for cognitive disabilities? The Web Content Accessibility Guidelines (WCAG) help us make the internet more accessible. However, even when we’re following these guidelines, it can be unclear if your product or service is actually accessible. For example, what exactly is “accessible language”?

Let’s go over some aspects of design that are important to consider when designing for users with cognitive disabilities.

#1 Language

What qualifies as simple language? It’s difficult to define this, but you should explain things in the simplest way you can. Avoid acronyms and write for a grade 8 reading level or below to include as many people as possible. A useful, free, tool for checking readability is Hemingway App. In Shopify’s design system Polaris, we aim for a grade 7 reading level to include even more people.

Sometimes it’s difficult to avoid using language that’s complex. For example, many people find terms used in the mortgage industry difficult to understand, such as “amortization”, or “compound interest”. Where you need to use industry-specific language, provide a definition, or an option for the user to read more.

Descriptive page titles are also a great place to use simpler language. Make sure page titles are accurate and describe exactly what’s on the page in simple words.

#2 Cognitive load

Cognitive load is the amount of working memory or short-term memory someone is using. Minimizing the cognitive load it takes to use your product or service makes it more accessible for people with cognitive disabilities.

Here’s how to do that:

Don’t make users memorize information. A good example of this is using field labels instead of placeholder text. Placeholder text disappears when users begin typing. This forces them to memorize the placeholder text or delete information so they can see the placeholder text again.

Give users reminders and cues to help them with their task. A great example of this is marking fields in forms as required, and providing links to reset passwords and user IDs within a form.

Don’t force users to do unnecessary tasks, especially involving memorization. Avoid requiring the memorization of information, like verification or authentication numbers. Allow users to copy and paste this information, or automatically input the information when it is sent to the user through their phone. Even people without cognitive disabilities benefit from this because it creates much less friction when using an application.

Avoid infinite scroll and automatic page refresh. Infinite scroll hides the footer from users, and can be distracting and addictive, especially for users with ADHD. Automatic refresh is distracting, causing users to lose information they were interacting with. Give users the choice of continuing to browse or when to refresh their page.

Use common patterns and existing mental models. Whenever possible, don’t attempt to reinvent the wheel. Users have mental models surrounding common interactions (like logging in, checking out, and signing up). Leverage these mental models for common interactions to make it more likely that your users will understand.

Use (accessible) videos and visuals to support content. Many people learning about web accessibility tend to shy away from using videos and visuals. Videos and visuals should be used to support content. As long as videos and visuals are accessible (by using transcripts and closed captions for videos, and alt text for images), they are a great tool.

At Shopify, to help our users spot announcements and notifications more easily, we often use illustrations. Illustrations clarify, add context, and support text by visual means.

Shopify Payments announcement with an image of payment options, as a visual example.
Shopify Payments announcement with an image of payment options, as a visual example.

Label your icons with visible copy as often as possible. Labelling icons is helpful for users who have memory and processing difficulties. Icon labels are also more accessible to users with different cultural backgrounds that may not interpret symbols in the same way as you. For example, someone from an area where shopping carts are uncommon may not understand that you are using a cart icon to represent checkout.

Avoid using automatic timeouts. Automatic timeouts log users out of a system with little or no warning. They can be disorienting and can cause a user to lose the information they have input. If you use a timeout, it’s important to make sure that there is a clear notification explaining why and when it will happen. The notification should give the user at least a few minutes warning before logging them out.

Also include an option to cancel or dismiss the timeout, and have the keyboard focus on this element. Make it as easy as possible for the user to opt out of the timeout.

#3 Layouts

Even if you’re using simple language, referencing familiar mental models, and using icons, illustrations, and labels in a helpful way, the way you approach layout is just as important.

Utilize white space. Make sure your designs have visual separation to differentiate content, draw attention to concepts, and make content on a page look less overwhelming.

Use progressive disclosure. Divide complex tasks into shorter, easier steps. Dividing tasks into more manageable steps makes it easier for users to focus on the task at hand, and can help make complex tasks easier to complete.

At Shopify, we know that checking out and all the tasks it entails (entering your billing address, shipping address, credit card information, and payment information) can be a bit overwhelming. So, we use progressive disclosure (and plenty of whitespace) to divide the checkout process into more manageable steps.

Checkout screen with 3 pages for information, shipping and payment and plenty of whitespace.
The Shopify Checkout screen includes three pages for information, shipping, and payment — and plenty of whitespace.

#4 Testing

Even if you’re following best practice, it’s best to still test. And that’s something we’re trying to get better at here at Shopify.

A people-first approach is important. Computers can’t tell if designs are accessible to people with cognitive disabilities. Getting neurodivergent people involved in testing your products is the best way to ensure your designs are inclusive.

At Shopify, we’re now partnering with Fable Tech Labs to hire testers with various disabilities to use our products, and help us design experiences that are usable and enjoyable for people with disabilities. Getting feedback early and often from users ensures that the end product is as accessible as possible.

Planning for cognitive disabilities is important

Considering cognitive disabilities when we design is important. It makes our designs more accessible to a wider range of people and results in more impactful solutions. Designing for cognitive disabilities also leads to better experiences for all users. Neurotypical users can also benefit from the patterns that help make products more usable for neurodivergent users.

Subscribe to my weekly newsletter

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Thanks for joining our newsletter.
Oops! Something went wrong.