The discourse around building accessible websites tends to focus on physical disabilities - visual impairments (alt tags, screen reader compatibility), deafness (captions), color blindness (nothing should be signified by changes in color alone). However, mental health conditions such as PTSD, ADHD, autism, and depression are also considered disabilities under the American with Disabilities Act (ADA), and can affect how users navigate and interact with the web. The accessibility needs of people with mental health related conditions are often overlooked in mainstream accessibility conversations, in spite of the fact that mental health-related disabilities affect a large number of Americans. According to the World Health Organization, 1 in 8 people live with a mental disorder, which is nearly 1 billion people worldwide.  In the US, it is estimated that there are: According to the World Health Organization 13 million people with PTSD (US Department of Veteran Affairs)
21 million adults and 3.7 million teens with Depression (Mental Health America)
15.5 million adults and 7.1 million children with ADHD (CDC - adults, children)
5.5 million adults with autism (CDC)
40 million people with dyslexia (Discovery ABA)
of people over 65, 10% have dementia and 22% have mild cognitive impairment (Columbia University) 13 million people with PTSD (US Department of Veteran Affairs) US Department of Veteran Affairs 21 million adults and 3.7 million teens with Depression (Mental Health America) Mental Health America 15.5 million adults and 7.1 million children with ADHD (CDC - adults, children) adults children 5.5 million adults with autism (CDC) CDC 40 million people with dyslexia (Discovery ABA) Discovery ABA of people over 65, 10% have dementia and 22% have mild cognitive impairment (Columbia University) Columbia University In this blog, we’ll explore common barriers on web pages faced by users with mental health challenges and highlight design strategies that foster a safer, more accessible digital experience. What Makes the Web Difficult for Users with Mental Health Conditions? Every user is different, but some challenges are common within and even across conditions. These include: Susceptibility to Overwhelm/Cognitive Overload Many, if not all, mental health conditions make a person more easily overwhelmed. Experiencing overwhelm can cause someone to have impaired comprehension, make more mistakes, take impulsive actions they later regret, forget what they were doing, or need to leave the website or pause other responsibilities in order to regain emotional regulation. Common web designs that can cause overwhelm include cluttered layouts, inconsistent navigation, long and overly complex forms, and long blocks of text without paragraph breaks, images, or white space to break up the text. Sensory Issues and Overstimulation When a user is overstimulated, they are more easily overwhelmed. Additionally, overstimulation from sensory issues can be viscerally painful, and trigger migraines or panic attacks. Overstimulation can be caused by cluttered designs, and especially animations, video, audio, and flashing lights. Sensory issues are most common in people with autism, though it can affect people with other conditions as well. Susceptibility to Dysphoria Dysphoria is a state of feeling deeply unhappy or uneasy, often to the point of disruption, where the person can’t function to their full potential. Many mental health conditions, in particular depression, bipolar disorder, anxiety disorders, and schizophrenia, can make individuals more prone to experiencing dysphoria. Web content that triggers dysphoria can have disabling effects for hours or even days, and in extreme cases, can trigger suicidal thoughts. Susceptibility to Flashbacks to Traumatic Events and Heightened Startle Responses Similar to susceptibility to dysphoria, people with PTSD can have flashbacks to traumatic events triggered by content on the web. Flashbacks can cause debilitating symptoms, such as anxiety, headaches, other physical pain, intrusive painful memories, fatigue, inability to concentrate, irritability, and suicidal thoughts, and it can take days or even weeks for flashback related symptoms to fully resolve. People with PTSD also have a heightened startle response, so a surprising action or sound - such as modals, pop ups, animations, etc - can trigger a disruptive stress response. Memory Issues Users with memory issues can have trouble accessing services if forms or other flows are long or complex, if there are long load times, if the page changes during flows without clear summaries of where the user is in the process, or if forms only use placeholders to tell the user what the input is asking for (placeholders disappear once a user starts typing). Impaired working memory affects users with age related memory loss, and can also affect users with other conditions like PTSD. Intense Distractibility A user with intense distractibility will not be able to fully engage with content on pages that has distractions - they will end up distracted and unable to access what they are looking for, and can end up distracted to the point that it disrupts their other plans and responsibilities for the day. Intense distractibility is the hallmark of ADHD, though other mental health conditions can also involve decreased concentration and focus. Distractions can include things that actively draw the users attention away from the information they need (audio, video, animations that cannot be turned off, complex layouts), and it can also include designs that make it difficult to stay focused on the content (ie, the delivery is boring or overwhelming, such has overly verbose or academic writing style, or long blocks of text without breaks such as white space or images). Best Practices for Making Web Pages Accessible to Users with Mental Health Conditions Many practices will support users across a variety of conditions. Avoiding cognitive overload, overwhelm, and confusion is one of the most fundamental aspects of building websites that are accessible to people with mental health issues, as all mental health conditions can increase a person’s susceptibility to overwhelm. This means designing simple, clear, and easily understood online experiences. This includes: Clear content with simple words, short blocks of text that are supported by images and broken up by white space
Use literal language - no jargon, acronyms, slang, or word play (this also makes content to more accessible to users across the globe, who aren’t familiar with local slang and idioms or may struggle to understand word play)
Designs that make errors less likely (like spell check, auto suggestions, and making sure your forms support autofill from saved browser data, allowing users to see and check their answers before submitting)
Clear and specific instructions (for instance, if your forms require a specific format for the information, stating that - such as “Date of birth (MM/DD/YYYY):”
Clear and specific error messages (ie, “Phone number is not in a valid format, the format should be (xxx) xxx-xxxx” vs “Error in form”)
Designs that make correcting errors as easy as possible (ie, auto-focus the input in the form which has invalid data, offer “go back” and “undo” options)
Intuitive navigation that is consistent across all pages and includes breadcrumbs
Simple and straightforward layouts Including progress bars and lengths on videos and audios so users have a clear sense of how much more they have to do
Ensure that all links and buttons are visibly clickable - the cursor changes to a pointer when they hover over the element
Avoid timeouts on forms
Use positive reinforcement and success messages to communicate clearly to the user that they have successfully completed their action Offering help via a variety of formats. For instance, some users with anxiety disorders are afraid of phone calls, while other users with cognitive impairments and learning disabilities find phone calls reduce their anxiety, and users with dyslexia may struggle with written support chats. Clear content with simple words, short blocks of text that are supported by images and broken up by white space Use literal language - no jargon, acronyms, slang, or word play (this also makes content to more accessible to users across the globe, who aren’t familiar with local slang and idioms or may struggle to understand word play) Designs that make errors less likely (like spell check, auto suggestions, and making sure your forms support autofill from saved browser data, allowing users to see and check their answers before submitting) Clear and specific instructions (for instance, if your forms require a specific format for the information, stating that - such as “Date of birth (MM/DD/YYYY):” Clear and specific error messages (ie, “Phone number is not in a valid format, the format should be (xxx) xxx-xxxx” vs “Error in form”) Designs that make correcting errors as easy as possible (ie, auto-focus the input in the form which has invalid data, offer “go back” and “undo” options) Intuitive navigation that is consistent across all pages and includes breadcrumbs breadcrumbs Simple and straightforward layouts Including progress bars and lengths on videos and audios so users have a clear sense of how much more they have to do Ensure that all links and buttons are visibly clickable - the cursor changes to a pointer when they hover over the element Avoid timeouts on forms Use positive reinforcement and success messages to communicate clearly to the user that they have successfully completed their action Offering help via a variety of formats. For instance, some users with anxiety disorders are afraid of phone calls, while other users with cognitive impairments and learning disabilities find phone calls reduce their anxiety, and users with dyslexia may struggle with written support chats. Avoiding overstimulating or distracting content is also a strategy that supports users with a variety of conditions, such as users with ADHD, autism, and sensory issues. This includes: No content that involves sound should play by default
All content that involves sound or motion, such as animation, audio, video, and image carousels, should be able to be paused, stopped, or hidden
Only using pop-ups when they provide expected information (for instance, a confirmation message that the task is successfully completed)
Avoiding designs with automatic changes on the screen No content that involves sound should play by default All content that involves sound or motion, such as animation, audio, video, and image carousels, should be able to be paused, stopped, or hidden Only using pop-ups when they provide expected information (for instance, a confirmation message that the task is successfully completed) Avoiding designs with automatic changes on the screen Making sure your content is respectful to people with mental health related disabilities is another important aspect of building an accessible page. This means avoiding any language that uses mental health related words (or disability-related terms of any kind) as derogatory terms, such as insane, crazy, psycho, psychotic, schizo. Condition-Specific Accessibility Strategies: Memory-Related issues In order to provide an accessible digital experience for users with impaired memories, a website should reduce the ways users need to rely on memory. This can be done by: Displaying the search term a user searched outside of the search bar, so it’s clear what the results refer to, even if the user has typed something else in the search input
Including breadcrumb navigation so the user knows where they are
Including summaries of what is happening on the page a user is on, especially if they are in a multi-page flow
Having reasonable password creation requirements Displaying the search term a user searched outside of the search bar, so it’s clear what the results refer to, even if the user has typed something else in the search input Including breadcrumb navigation so the user knows where they are breadcrumb navigation Including summaries of what is happening on the page a user is on, especially if they are in a multi-page flow Having reasonable password creation requirements PTSD - Trigger warnings and content previews for sensitive content The most important aspect of providing an accessible experience for people with PTSD is requiring content warnings or previews. “Trigger warnings” have received ridicule as “coddling” people, with the idea that they are about individuals avoiding confrontation or being challenged. This is a common misunderstanding of what “trigger warnings” are, however. The purpose of trigger warnings is to help individuals with PTSD avoid having flashbacks - and a flashback is much more than being upset, it triggers a deep internal perception of immediate, life-threatening danger, which will disrupt the person’s functioning for hours, even as long as days or weeks. Providing trigger warnings allows users to choose to engage with the content, and avoid content that may cause PTSD-related symptoms. ADHD To create an accessible digital experience for users with ADHD, the web page should be designed to reduce the likelihood of distractions - this means both avoiding distracting features, as well as presenting content in a way that does not require a great deal of focus or concentration to engage with. As previously mentioned, this includes: Avoiding any sounds, videos, or animations that play by default
Allowing users to pause, stop, and hide any animations, videos, or audios
Avoiding long, unbroken blocks of text - text should be broken up with white space, images, or other content
Avoiding cluttered and complex layouts Avoiding any sounds, videos, or animations that play by default Allowing users to pause, stop, and hide any animations, videos, or audios Avoiding long, unbroken blocks of text - text should be broken up with white space, images, or other content Avoiding cluttered and complex layouts Other ways to support users with ADHD include: Present information in streamlined formats - include only key info above the fold, and provide more thorough details and information below the fold or in expandable components
Keep carousels or other rotating banners on slow timers
Keep the number of options small - users with ADHD can experience decision paralysis.
When possible, provide only one call to action, and make sure that call to action is clear and prominently displayed.
Use minimalist designs with plenty of white space (Apple is a good example of this kind of design) Present information in streamlined formats - include only key info above the fold, and provide more thorough details and information below the fold or in expandable components Keep carousels or other rotating banners on slow timers Keep the number of options small - users with ADHD can experience decision paralysis. When possible, provide only one call to action, and make sure that call to action is clear and prominently displayed. Use minimalist designs with plenty of white space (Apple is a good example of this kind of design) Customizable User Experiences Some websites have specific profiles users can select to tailor their web experience to their needs. For instance, accessiBe is an agency that implements accessibility options on client web pages, and their offering includes an ADHD Friendly Profile which boasts “more focus and fewer distractions”, a Seizure Safe Profile, a Cognitive Disability Profile, and others. However, some reviews have stated that accessiBe’s profiles aren’t compatible with screen readers, and their ADHD-specific design was distracting to some users. accessiBe Another example of customizable experiences are sites that allow users to set color themes. Users with visual impairments will likely prefer higher contrast colors and designs, whereas users with sensory issues can be overstimulated by high contrast sites and prefer lower contrast color themes. Color themes that support users with color blindness can also be offered. Conclusion Building accessible websites for people with mental health-related disabilities isn’t just about compliance—it’s about empathy, inclusion, and thoughtful design. By implementing strategies like reducing cognitive load, avoiding triggering content, providing clear navigation, and offering customization options, we can make the web a more supportive and empowering place for everyone. As designers and developers, we have the power to shape digital spaces that respect mental well-being and embrace neurodiversity. Let’s build with care, and create experiences where no one is left behind. https://pmc.ncbi.nlm.nih.gov/articles/PMC8869505/
https://www.w3.org/WAI/people-use-web/abilities-barriers/cognitive/
https://www.verndale.com/insights/accessibility/website-design-trends-for-dyslexia-and-adhd
https://www.inclusionhub.com/articles/improving-wcag-for-mental-health
https://cacm.acm.org/research/considering-trauma-in-accessible-design-for-adults-with-intellectual-and-developmental-disabilities/
https://www.wcag.com/blog/digital-accessibility-and-neurodiversity/
https://edoc.ub.uni-muenchen.de/26029/7/Bernard_Renaldo.pdf
https://medium.com/@madisondunaetz/trauma-informed-ux-design-1621957dd097 https://pmc.ncbi.nlm.nih.gov/articles/PMC8869505/ https://pmc.ncbi.nlm.nih.gov/articles/PMC8869505/ https://www.w3.org/WAI/people-use-web/abilities-barriers/cognitive/ https://www.w3.org/WAI/people-use-web/abilities-barriers/cognitive/ https://www.verndale.com/insights/accessibility/website-design-trends-for-dyslexia-and-adhd https://www.verndale.com/insights/accessibility/website-design-trends-for-dyslexia-and-adhd https://www.inclusionhub.com/articles/improving-wcag-for-mental-health https://www.inclusionhub.com/articles/improving-wcag-for-mental-health https://cacm.acm.org/research/considering-trauma-in-accessible-design-for-adults-with-intellectual-and-developmental-disabilities/ https://cacm.acm.org/research/considering-trauma-in-accessible-design-for-adults-with-intellectual-and-developmental-disabilities/ https://www.wcag.com/blog/digital-accessibility-and-neurodiversity/ https://www.wcag.com/blog/digital-accessibility-and-neurodiversity/ https://edoc.ub.uni-muenchen.de/26029/7/Bernard_Renaldo.pdf https://edoc.ub.uni-muenchen.de/26029/7/Bernard_Renaldo.pdf https://medium.com/@madisondunaetz/trauma-informed-ux-design-1621957dd097 https://medium.com/@madisondunaetz/trauma-informed-ux-design-1621957dd097

Cardano

Apple

Discovery

Every

Accessibility Quick Start: High Impact Practices for Non-Frontend Devs

Writing Scalable and Maintainable React Code with SOLID Principles

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

A Developer’s Guide to Accessibility For Mental Health and Cognitive Disabilities

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Accessibility Quick Start: High Impact Practices for Non-Frontend Devs

20 Hours of Work, $258 in Sales — The First Week of Shade

4 Quick and Easy Tips to Make Your WordPress Website ADA Compliant

4 ways CSS :has() can make your HTML forms even better

5 Resources to Measure Website Accessibility

Accessibility Quick Start: High Impact Practices for Non-Frontend Devs

20 Hours of Work, $258 in Sales — The First Week of Shade

4 Quick and Easy Tips to Make Your WordPress Website ADA Compliant

4 ways CSS :has() can make your HTML forms even better

5 Resources to Measure Website Accessibility

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps