What is Accessibility-First Web Design
Mar 12, 2020 • 3 Minute Read • Maggie Bean, Inbound Marketing Specialist
See All Our Insights
Website Design Trends for Dyslexia and ADHD
Oct 14, 2020 • 5 Minute Read • Chris Anthony, Visual Design Lead
It’s easy to think about physical accessibility accommodations for people with different abilities, but information accessibility often takes a back seat. The telecom industry first used closed captioning in 1972—with Julia Child’s “The French Chef,” surprisingly—which was the earliest effort at broadening access to information.
Today, the Americans with Disabilities Act mandates accessibility to all places of public accommodation, and the Supreme Court interpreted the mandate to apply to websites. Roughly 10% of the population has a cognitive limitation such as ADHD and as many as 15% have some type of dyslexia. The legal and ethical question facing designers today is, “How can we ensure we are building experiences that allow full and equal access to information?”
When it comes to information accessibility, the Web Accessibility Initiative prepared Web Content Accessibility Guidelines (WCAG) which provide straightforward techniques to help people with visual impairments get the information they need online. Forward-thinking designers are using and expanding on those techniques as a springboard for designs that improve accessibility for all, especially those with cognitive impairments like ADHD.
Here’s a look at the latest design trends to broaden website accessibility for people who have unique needs when it comes to deciphering and using digital content.
Accessible color schemes
Color plays a major role in designing for individuals with dyslexia, which can present difficulties when designing for accessibility. For example, the contrast of black text on a white page is helpful for those with visual limitations, but dyslexia affects the way people see color, so a black-on-white color scheme can cause words to blur together. People with dyslexia benefit from a more subtle contrast such as dark gray on off-white or pale blue.
It can be difficult to design a one-size-fits-all color scheme that works for people with differing abilities. Often times adjustments can be made to a brand’s color palette that will optimize content based on legibility and accessibility. When corporate branding guidelines prohibit major changes to their color scheme, tools have been implemented that allow users to select alternative text and background colors based on their needs.
This option solves accessibility for a multitude of disabilities, including dyslexia, poor visual acuity, and at times ADHD.
Decision Fatigue
Decision fatigue, or decision paralysis, is:
- When the fear of making an error outweighs the realistic expectation.
- The value of success in a decision is not able to be determined in a timely manner.
Indecisiveness is a real problem and can be paralyzing for a user with ADHD, meaning that in most occasions, they end up making no decision at all. They may end up doing nothing because they lack a clear path to follow.
The inability to make decisions can render users paralyzed. Users with ADHD may also be worried about repeating wrong decisions that they have made in the past. This makes them try to avoid decision-making entirely.
Best practices suggest keeping content concise and providing one, prominent, clearly defined call-to-action on content cards to avoid decision fatigue. Additionally, making results and disadvantages of a user’s action clear so they can understand the consequences of their actions will help users when considering how decision fatigue might affect them.
“Less is more”
Minimalist designs with plenty of white space provide a distraction-free experience for those with ADHD and certain visual limitations. Clear icons and static content also help people focus on and absorb important information.
Apple is a leader in this type of distraction-free design. Simple copy, recognizable icons, and lots of white space work both from an aesthetic perspective and an accessibility one.
Fonts are also a part of the “less is more” approach. Research shows that 12- or 14-point San Serif typeface, no italics, and a maximum of 70 characters per line are optimal for those with dyslexia and ADHD.
Consistent, simple navigation
“Findability” is essential for individuals with cognitive impairment. Intuitive navigation that is consistent across the site makes it easier for people to click through the site and find the information they are looking for. This goes beyond basics such as placing the menu bar in the same location on all pages to include robust sub-navigation and thoughtful use of breadcrumbs. Consistency provides a more intuitive experience and gives users more control over how they interact with the site.
Furthermore, simple navigation structures that do not rely on global search functionality and do not include multiple levels of utility have been proven to improve a user’s ability to focus on information without distraction. When considering users with attention and cognitive disorders, a simple, browsable navigation will allow them to find relevant information faster.
Optimized timing
Timing plays an important role in the way people with different abilities use your website. The first element in accessible design is to remove time constraints so that individuals can take as much time as they need to access and interact with your content. Timed form completion is an obvious example of this.
A more subtle example is animated, blinking, or moving content, which prevents access to those with ADHD, dyslexia, and literacy issues. WCAG addresses the need for pause, stop, and hide functionality so users can control their experience.
Adding a pause button for carousels, for example, lets users access content at their own speed. It can also be used to shut down auto-playing video, which those with ADHD find immensely distracting. Ideally, content should never change automatically on the screen.
Alternative formats
One of the most common misconceptions about accessibility for those with ADHD and dyslexia is that plain text is the best way to present information. Research shows that, given a choice, people with dyslexia often prefer to access content in audio format or in the form of infographics.
Not all content is suitable for audio or other non-text formats, but if you have the resources to offer alternative ways for users to interact with your contact, you should do so.
Intuitive forms and error messages
If you’ve completed an online travel booking or opened an account online, you know that form fields and error messages are often anything but intuitive. Sometimes, errors are highlighted in red, other times they are denoted with a tick mark, and sometimes there is no obvious way to know what went wrong.
People with cognitive disabilities need clear, text-based error messages with easily understood suggestions for correcting the problem.
In the example below, Mailchimp gives clear, problem-specific error messages that explain what information is needed to validate the form:
The U.K. government website provides even more messaging surrounding errors, giving detailed instructions to help the user find the missing information:
Bottom line
The ability to independently access the information on a website is a right, not an option. Organizations have the responsibility to remove design barriers that prevent those with cognitive disabilities from exercising their right to access.
For people with dyslexia and ADHD, those barriers can be boiled down into three essential needs:
- A website that is easy to use and understand
- The ability to access content and complete tasks without distractions
- Help avoiding, recognizing, and correcting mistakes
Design improvements that address those needs benefit not only individuals with cognitive disabilities, but they also benefit everyone who visits your site.