ADHD-Friendly Web Design: Minimizing Distractions

By one estimate, about 3.5% of the U.S. population has Attention-Deficit/Hyperactivity Disorder (ADHD). The exact percentage may be higher, depending on how the condition is defined; survey-based estimates range up to 10% of the population. 

If your website has barriers for people with ADHD, it’s not accessible for a sizable percentage of your audience. By minimizing distractions, you can keep those users engaged — and create a more compelling experience for all users. 

Here are a few quick ways to minimize distractions through clean, intuitive web design.

Break up written content with lists, images, and videos

Most people won’t read every word of your content. An oft-quoted study from Nielsen Norman Group suggests that 79% of web users “scan" web pages, while only 13% read through every word. 

If your content consists of long, unbroken blocks of text, you’re creating a much more difficult experience for readers. That’s especially true for people with ADHD and folks with reading disorders.

Small paragraphs are much more manageable and easier to scan (not to mention, less visually intimidating). Content authors should look for other ways to break up larger blocks of content: 

• Use relevant images to illustrate your point. Make sure images have accurate alternative text (also called alt text).
• Use ordered and unordered lists (or “bullet points"). Mark up your lists with appropriate HTML to make sure that they’re presented as lists for people who use assistive technologies.
• Include relevant videos. Videos should have accurate captions and transcripts; providing text alternatives will help you reach a wider audience.
• Write clearly and concisely. Try to stick to one idea per paragraph, and include definitions for acronyms and unusual words. 
• Use subheadings to break up long content. Make sure the subheadings are descriptive of the content. Avoid “visual headings,” which present the headings visually without using appropriate HTML.

Remember, your content needs to be well-written, but it also needs to be visually engaging. Breaking up your content isn’t especially difficult, and it’s enormously beneficial for readers.

Related: 4 Quick Ways to Create Clearer Content and Improve Accessibility

Use caution when adding animations or autoplay media

People with ADHD have a tendency to hyperfocus on small details, and web animations can be particularly distracting. For many people, it’s simply impossible to read through a web page with moving content — their eyes won’t stop moving back to the animation. 

By nature, animation is distracting. It’s intended to grab the user’s attention, so use it thoughtfully. The Web Content Accessibility Guidelines (WCAG), which are widely considered to be the international standards for digital accessibility, has strict rules for moving, blinking, scrolling, or auto-updating information. 

Essentially, the user must have the option to pause, stop, or hide the moving content — but the best tactic is to prevent that content from playing automatically (especially if it contains sound). 

Other quick tips: 

• Use caution when implementing fixed elements (or “sticky" content). Make sure that the elements won’t obscure other important content. Learn how sticky and fixed elements impact accessibility.
• If you need to use animations, make sure they don’t flash more than three times in any one-second period. Learn why flash thresholds are important for users with photosensitivity. 
• Make sure your content follows WCAG’s recommendations for color contrast. Low-contrast text can be difficult to read (and for some users with vision disabilities, impossible to read). Learn about color contrast and accessibility. 
• Make your website predictable. Avoid using pop-ups, and make sure your site’s navigation menus are consistent from page to page. Learn more about the do’s and don’ts for website navigation. 

The best practices of accessibility make your website less distracting (and more useful)

WCAG isn’t written specifically for people with ADHD. It’s written for folks with a wide range of abilities and preferences, and following the guidelines helps you design truly inclusive content. 

That benefits every type of web user. Whether someone is reading your website on a busy train, browsing with a broken phone screen, or using a screen reader, WCAG helps you provide them with a consistent experience.

To learn more about the best practices of accessible design, download our free eBook: Developing the Accessibility Mindset.