CINXE.COM

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>WebAIM: Cognitive - Introduction</title> <link rel="shortcut icon" href="/media/favicon.ico"> <link rel="home" href="/"> <link rel="search" href="/search/"> <link rel="alternate" href="https://webaim.org/blog/feed" type="application/rss+xml" title="WebAIM Blog"> <script async src="https://www.googletagmanager.com/gtag/js?id=G-Y41PF8WV9X"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-Y41PF8WV9X'); </script> <link href="/styles/main.css" rel="stylesheet" type="text/css"> <link href="/styles/print.css" rel="stylesheet" type="text/css" media="print"> <script src="/media/scripts/jquery.js"></script> <script src="/media/scripts/main.js"></script> <link href='https://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Kameron:400,700' rel='stylesheet' type='text/css'> <link href="/styles/documents.css?ver=2" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700" rel="stylesheet">  </head> <body> <div id="headcontainer" class="clearfix" style="background-image: url(/media/banners/articles.jpg)"> <header> <div id="skiptocontent"><a href="#maincontent">skip to main content</a></div> <h2><a href="/"><img src="/media/logo.png" width="315" height="83" alt="WebAIM - Web Accessibility In Mind"></a></h2> <nav> <h2 class="hidden">Main Navigation</h2> <ul> <li><a href="/services/">Services</a></li> <li class="current"><a href="/articles/">Articles</a></li> <li><a href="/resources/">Resources</a></li> <li><a href="/projects/">Projects</a></li> <li><a href="/community/">Community</a></li> </ul> </nav> <div id="search"> <form method="get" role="search" action="/search/" id="sitesearch"> <p class="search"><span><label for="q">Search:</label> <input type="text" name="q" id="q"><input type="image" src="/media/template/search.svg" alt="Submit Search"></span></p> </form> <p class="intro"><a href="/intro">Introduction to Web Accessibility</a></p> <p class="training"><a href="/services/training">WebAIM Training</a></p> </div> </header> </div> <main id="maincontainer" class="clearfix"> <article id="maincontent"> <h1>Cognitive<br><span class="subtitle">Introduction</span></h1> <p id="breadcrumbs"><span class="hidden">You are here: </span><a href="/">Home</a> > <a href="/articles/">Articles</a> > Cognitive Disabilities</p> <nav> <h2>Article Contents</h2> <ol> <li class="currentpage"><span class="hidden">Current page: </span>Page 1: Introduction <ol> <li><a href="#something">Something to Think About...</a></li> <li><a href="#functional">Clinical vs. Functional Classifications</a></li> <li><a href="#memory">Memory</a></li> <li><a href="#problem">Problem-Solving</a></li> <li><a href="#attention">Attention</a></li> <li><a href="#reading">Reading, Linguistic, and Verbal Comprehension</a> <ol> <li><a href="#nonliteral">Non-literal text</a></li> <li><a href="#nonexistent">Non-existent text</a></li> </ol> </li> <li><a href="#math">Math Comprehension</a></li> <li><a href="#visual">Visual Comprehension</a></li> </ol> </li> <li>Page 2: <a href="design">Design Considerations</a></li> <li>Page 3: <a href="activity">Cognitive Disabilities Activity</a></li> </ol> </nav> <div class="section" id="something"> <h2>Something to Think About...</h2> <p>Cognitive disability (also known as intellectual disability) is a nebulous term describing a person who has greater difficulty with mental tasks than the average person. Cognitive disabilities are by far the most common type of disability.</p> <p>Most cognitive disabilities are rooted in biology or physiology. The connection between biology and mental processes is most obvious in cases of traumatic brain injury and genetic disorders, but even the more subtle cognitive disabilities stem from brain structure or chemistry. People with profound cognitive disabilities need assistance with nearly every aspect of daily living. Someone with a minor learning disability, however, may be able to function adequately, even to the extent that the disability is never diagnosed.</p> <p>Some web content is too complex by its nature to ever be fully accessible to users with profound cognitive disabilities. Nevertheless, developers and designers still have techniques available to make content accessible to as wide a spectrum of users as possible.</p> </div> <div class="section" id="functional"> <h2>Clinical vs. Functional Classifications</h2> <p>Cognitive disabilities can be thought of in functional or clinical terms. Clinical diagnoses include autism, Down syndrome, traumatic brain injury (TBI), and dementia. Less severe cognitive conditions include attention deficit disorder (ADD), dyslexia (difficulty reading), dyscalculia (difficulty with math), and learning disabilities in general. Clinical diagnoses may be useful from a medical perspective for treatment, but for the purposes of web accessibility, classifying by functional disability is more useful.</p> <p>Functional classification focuses on the user's abilities and challenges, irrespective of their medical or behavioral causes. Multiple functional disabilities can stem from one clinical diagnosis: A person with memory deficits may also have difficulty with attention or problem-solving. Functional categories of cognitive disabilities include difficulties with:</p> <ol> <li>Memory</li> <li>Problem-solving</li> <li>Attention</li> <li>Reading, linguistic, and verbal comprehension</li> <li>Math comprehension</li> <li>Visual comprehension</li> </ol> <p>Functional classifications are useful in web accessibility because they align to concerns of web designers and developers. Telling a developer that some people have autism is only meaningful if the developer knows what kinds of barriers a person with autism might face with web content. On the other hand, telling a developer that some people have difficulties comprehending math gives the developer a meaningful context. Developers simply need to understand and consider the user's range of abilities.</p> </div> <div class="section" id="memory"> <h2>Memory</h2> <p>A common model for explaining memory involves the concepts of working (immediate) memory, short-term memory, and long-term memory. Some individuals with cognitive disabilities have difficulties with one, two, or all three. Some users cannot remember how they got to content. If a complex form displays multiple error messages, the user may be unable to remember multiple errors, and may even forget the error information before they are able to address the error. Maintaining consistency in design and presentation minimizes memory requirements.</p> </div> <div class="section" id="problem"> <h2>Problem-Solving</h2> <p>Some individuals with cognitive disabilities have difficulty solving problems as they arise. Low resilience can cause frustration and lead the user to abandon the task or the site. Examples include CAPTCHA puzzles that require high levels of cognitive function, technically worded error messages, and links that do not take user where they thought they were going.</p> </div> <div class="section" id="attention"> <h2>Attention</h2> <p><span class="floatright"><img src="media/student.jpg" alt="A distracted student."></span>Many individuals have difficulty keeping focus on the task at hand. Distractions such as animating carousels, "toast" popups, jiggling icons, and spontaneous dialog overlays can make task completion difficult or even impossible. Even for neurotypical users, such movements impair usability.</p> <p>Some people with Attention Deficit Hyperactivity Disorder (ADHD) have difficulties learning, but often this is due to distractibility rather than inability to process information. People with ADHD can be impulsive, easily distracted, inattentive, and less able to stick to a long-term task. However, some are highly creative and very productive in short bursts, with an abundance of energy and enthusiasm.</p> <p>To help users focus on important content and functionality, avoid anything that would distract a person's attention away from the main content or functionality, and use good design, such as color, white space, and simple presentation.</p> </div> <div class="section" id="reading"> <h2>Reading, Linguistic, and Verbal Comprehension</h2> <p><span class="border floatright"><img src="media/text.jpg" alt="complex words floating through space." width="203" height="203"></span>Some individuals have difficulties understanding text, ranging from minor challenges to a complete inability to read any text. Although web developers cannot fully accommodate the entire range from non-readers to genius readers, we can try to write as simply and clearly as is feasible, taking into account the primary audience and including those who may have difficulty with some of the content. An estimated 15-20% of the population has some sort of language or text comprehension difficulty鈥攊ncluding many prominent high achievers like Emma Watson, Richard Branson, and Whoopi Goldberg.</p> <div class="example"> <div class="title">Example</div> <p>Here is one example of a reading problem. Note that it may be one of perception or of processing. See if the associated accessibility fix helps you.</p> <p>What is being said in this phrase?</p> <p><strong>Tob eornot obe</strong></p> <p>Now check the power and importance of embedded graphics as a way to enhance the context of the written word by looking at the <a href="media/graphic.htm">phrase with a graphic.</a></p> </div> <div class="section" id="nonliteral"> <h3>Non-Literal Text</h3> <p>Some readers misinterpret satire, allegory, and idiom as literal text. A writer who says "I just love getting stuck in traffic when I'm already late for work" probably means the opposite. Sarcasm such as this can be confusing to some readers. Similarly, someone who reads the colloquialism "she needs to get her ducks in a row" may not realize that the author is probably not referring to real ducks at all. The author is suggesting a need to be more organized or disciplined, using the comparison of a mother duck with her ducklings lined up behind her in order to illustrate the concept.</p> </div> <div class="section" id="nonexistent"> <h3>Non-Existent Text</h3> <p>The unstated assumptions and implied meaning of written content may seem obvious to the writer, but readers may not have the necessary context or background knowledge. Some readers may not be able to infer the intended meaning of text without additional explanations or help.</p> </div> </div> <div class="section" id="math"> <h2>Math Comprehension</h2> <p><span class="floatright border"><img src="media/formula.gif" alt=""></span>Mathematical expressions can be especially difficult for users with cognitive disabilities to understand. This does not mean that authors should avoid math entirely. For people who are comfortable reading equations and thinking mathematically, the best way to explain mathematical concepts is to use equations. However, often it is helpful to explain math conceptually, with or without the formulas. Conceptual explanations help readers understand the reasoning behind the math. </p> </div> <div class="section" id="visual"> <h2>Visual Comprehension</h2> <p>Some individuals have difficulties processing visual information. In many ways, this is the opposite of the problem experienced by people with reading and verbal processing difficulties. Individuals with visual comprehension difficulties may recognize that there are objects on a web page, but not be able to identify the objects. They may not realize that a photograph of a person is a representation of a person, though they can plainly see the photograph itself (as an object) on the web page.</p> <p>For these users, a moving, talking person in a video may be easier to identify and mentally process than a static image of a person in a photograph. Narrated video and multimedia may be helpful.</p> </div> <div id="nextpage"><a href="design">Next</a></div> </article>  <aside id="articlemeta"> <div id="updated">Last updated: <time datetime="2020-08-21">Aug 21, 2020</time></div> <div id="translations"> <h2>Translations</h2> <ul> <li><a href="http://www.rundumgesund.de/krankheiten/kognitive-behinderungen.php"><img src="/media/common/flags/de.png" alt="">German</a> by <a href="http://rundumgesund.de/">rundumgesund.de</a></li> <li><a href="http://mertsahinoglu.com/webaim-bilissel-engeller/"><img src="/media/common/flags/tr.png" alt="">Turkish</a> by <a href="http://mertsahinoglu.com/">Mert Sahinoglu</a></li> </ul> </div> <div id="related"> <h2>Related Resources</h2> <ul> <li><a href="/articles/pour/">Constructing a POUR Website</a></li> <li><a href="/articles/evaluatingcognitive/">Evaluating Cognitive Web Accessibility</a></li> <li><a href="/techniques/writing/">Writing Clearly and Simply</a></li> <li><a href="/articles/visual/">Visual Disabilities</a></li> <li><a href="/articles/auditory/">Auditory Disabilities</a></li> <li><a href="/articles/motor/">Motor Disabilities</a></li> <li><a href="/articles/seizure/">Seizure and Vestibular Disorders</a></li> </ul> </div> </aside> </main> <footer> <div id="footerresources"> <div class="footerblock"> <h2 id="copyright">©2025 WebAIM</h2> <p id="contact"> Utah State University<br> 6807 Old Main Hill<br> Logan, UT 84322-6807<br> <a class="phone" href="tel:4357977024">435.797.7024</a></p> <div id="checkpage"> <h2>Check Your Accessibility</h2> <form action="https://wave.webaim.org/report" novalidate> <label for="waveurl">Web site address:</label> <input type="url" id="waveurl" name="url" title="Web site address"> <input type="submit" value="WAVE"> </form> </div> </div> <div class="footerblock"> <h2 id="blog">From the Blog</h2> <ul><li><a href="/blog/join-the-discussion/">Join the Discussion鈥擣rom Your Inbox</a></li><li><a href="/blog/severity-ratings/">Using Severity Ratings to Prioritize Web Accessibility Remediation</a></li><li><a href="/blog/25-tips/">25 Accessibility Tips to Celebrate 25 Years</a></li><li><a href="/blog/celebrating-webaims-25th-anniversary/">Celebrating WebAIM's 25th Anniversary</a></li></ul> </div> <div class="footerblock"> <h2 id="popular">Popular Resources</h2> <ul> <li><a href="/training/virtual">WebAIM Training</a></li> <li><a href="/standards/wcag/checklist">WCAG 2 Checklist</a></li> <li><a href="/newsletter">WebAIM Monthly Newsletter</a></li> <li><a href="/resources/contrastchecker">Color Contrast Checker</a></li> <li><a href="/resources/designers/">Web Accessibility for Designers</a></li> <li><a href="http://wave.webaim.org/">WAVE Web Accessibility Evaluation Tool</a></li> </ul> </div> <div id="footerlinks"> <ul> <li><a id="footercontact" href="/contact">Contact</a></li> <li><a id="footerabout" href="/about">About</a></li> <li><a id="footerrss" href="/community/rss">RSS Feeds</a></li> <li><a id="footertwit" href="http://twitter.com/webaim">Twitter</a></li> <li><a id="footercopyright" href="/copyright">Copyright & Terms of Use</a></li> </ul> </div> <div class="clear"></div> </div> </footer> </body> </html>