CINXE.COM

<!DOCTYPE html> <html class="no-js" lang="en" dir="ltr" prefix="og: http://ogp.me/ns#"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <script> document.documentElement.className = document.documentElement.className.replace('no-js', 'has-js'); function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "/WAI/assets/scripts/main.js?1739902561245459979"; document.body.appendChild(element); } window.addEventListener("load", downloadJSAtOnload, false); </script> <link rel="stylesheet" href="/WAI/assets/css/style.css?1739902561245459979"> <title> All Supplemental Guidance | WAI | W3C</title><style> details ul { margin-top: 1rem; } h2 img.mini { width: 2em; height: 2em; vertical-align: middle; padding-bottom: 0.25em; } details h4 { font-size: 1rem; color: inherit; } </style> <meta name="generator" content="Jekyll v4.3.3" /> <meta property="og:title" content="All Supplemental Guidance" /> <meta name="author" content="W3C Web Accessibility Initiative (WAI)" /> <meta property="og:locale" content="en" /> <meta name="description" content="Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI)." /> <meta property="og:description" content="Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI)." /> <link rel="canonical" href="https://www.w3.org/WAI/WCAG2/supplemental/" /> <meta property="og:url" content="https://www.w3.org/WAI/WCAG2/supplemental/" /> <meta property="og:site_name" content="Web Accessibility Initiative (WAI)" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary_large_image" /> <meta property="twitter:title" content="All Supplemental Guidance" /> <meta name="twitter:site" content="@w3c_wai" /> <meta name="twitter:creator" content="@W3C Web Accessibility Initiative (WAI)" /> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"WebPage","author":{"@type":"Person","name":"W3C Web Accessibility Initiative (WAI)"},"description":"Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI).","headline":"All Supplemental Guidance","url":"https://www.w3.org/WAI/WCAG2/supplemental/"}</script>  <meta name="twitter:image" property="og:image" content="https://www.w3.org/WAI/assets/images/social-sharing-default.jpg"> <link rel="alternate" type="application/rss+xml" href="/WAI/feed.xml"> </head> <body id="top" class="page-all-supplemental-guidance tight-page"> <a href="#main" class="button button--skip-link">Skip to content</a> <div class="minimal-header-container default-grid"> <header class="minimal-header" id="site-header"> <div class="minimal-header-container"> <div class="minimal-header-name"> Supplemental Guidance to WCAG 2 </div> <p class="minimal-header-subtitle"> Additional ways to improve accessibility, not required to meet WCAG </p> </div> <a class="minimal-header-link" href="/WAI/WCAG2/supplemental/about/">About Supplemental Guidance and WCAG</a> <div class="minimal-header-logo"> <a href="/WAI/"> <img alt="W3C" src="/WAI/assets/images/w3c2.svg" width="92" height="44"/> <img alt="Web Accessibility Initiative" src="/WAI/assets/images/wai.svg"/> </a> </div> </header> </div> <div class="default-grid nav-container"> <div class="nav" > <nav class="nav standalone-resource-pager" aria-label=""> <ul> <li class="nav__item"> <a class="pagename active" aria-current="page"><img src="/WAI/content-images/wai-wcag-supplemental/brain.svg" alt="" class="category-icon">All Cognitive</a> </li> </ul> </nav> </div> </div> <div class="default-grid with-gap leftcol"> <style> .nav { background: none; } .nav-related-info { /* blue bar with the "About:" links */ background: #005a9c; color: #fff; } .nav-related-info a { color: #fff !important; } .nav-page-specific { /* light blue bar with page/section specific navigation/pager */ margin-bottom: 1.25em; } .nav a:link, .nav a:visited { color: #036; color: var(--w3c-blue); } .nav a:hover, .nav a:active { color: var(--dk-blue); } .nav-hack.sidebar a:hover, .nav-hack.sidebar a:active { color: var(--dk-blue); text-decoration: underline; } .standalone-resource-about, .standalone-resource-pager { margin: 0; } nav.standalone-resource-about { padding: .5em 0 1.5em 0; font-style: italic; } .nav .standalone-resource-pager ul { align-items: center; } .nav .standalone-resource-pager a, .nav .standalone-resource-pager span { margin-left: 0; margin-right: 1.5em; padding: .5em; } .pager-icon { vertical-align: middle; padding: 0 0 0.15em 0; margin: 0 -0.4em; width: 1.65em; height: 2em; fill: var(--dk-blue) } .category-icon { vertical-align: middle; padding: 0 0.25em 0.25em 0.25em; width: 2em; height: 2em; } .zstandalone-resource-pager { padding: .7em 0; } .standalone-resource-pager zul { display: block; } .standalone-resource-pager zul li { display: inline; } .nav-hack { font-size: .85rem; /*justify-self: end;*/ align-self: start; } .nav-hack ul { list-style: none; border-bottom: 1px solid #BCBCBC; padding-left: 0 } .nav-hack li:not(:first-child){ padding-top: 0.4em; line-height: 1.2; border-top: 1px solid #BCBCBC; } .nav-hack li a { text-decoration: none; } .nav-hack h3 { margin: 0; font-size: 1rem; } .nav-hack p { margin: 0; } h2#sidebar-header { font-size: .95rem; } /* skip link */ .button--skip-link { background-color: var(--gold) !important; border-color: var(--gold) !important; outline-color: currentColor !important; color: var(--off-black) !important; font-weight: 600; font-size: larger; margin: 0 auto; position: absolute; z-index: 20; left: 0; right: 0; top: 0.5em; width: 10em; opacity: 1; transition: transform 0.1875s ease-out, opacity 0.1875s ease-out; } .button--skip-link:not(:focus):not(:hover) { transform: translateY(-4em); opacity: 0; } .standalone-resource-navrule { border:none; border-top: 1px solid grey } .standalone-resource-about ul, .standalone-resource-pager ul { list-style: none; } .standalone-resource-about a, .standalone-resource-pager a, .standalone-resource-about span, .standalone-resource-pager span { margin-left:.8em; margin-right:.8em; } .minimal-header-name a { text-decoration: none; } .minimal-header-name a:hover, .minimal-header-name a:focus { text-decoration: underline; } </style> <nav class="box nav-hack sidebar standalone-resource__sidebar " aria-labelledby="sidebar-header"> <h2 id="sidebar-header" class="box-h ">Page Contents</h2> <div class="box-i"> <ul> <li><a href="#-cognitive-accessibility-guidance"> Cognitive Accessibility Guidance</a></li> <li><a href="#-low-vision-accessibility-guidance"> Low Vision Accessibility Guidance</a></li> </ul> </div> </nav> <main id="main" lang="en" class="standalone-resource__main"> <header> <h1> All Supplemental Guidance </h1> </header> <aside class="box"><header class="box-h "> Summary</header><div class="box-i"> <p>This pages lists <a href="/WAI/WCAG2/supplemental/about/">supplemental guidance</a> for improving accessibility beyond what is required by Web Content Accessibility Guidelines <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">WCAG 2 <svg focusable="false" aria-hidden="true" class="icon-different-view "><use xlink:href="/WAI/assets/images/icons.svg#icon-different-view"></use></svg></a>.</p> </div></aside> <h2 id="-cognitive-accessibility-guidance"><img src="/WAI/content-images/wai-wcag-supplemental/brain.svg" alt="" class=" mini"> Cognitive Accessibility Guidance</h2> <p>This guidance provides advice on how to better meet the accessibility needs of people with cognitive and learning disabilities. The guidance listed below is grouped under “Objectives” and provided in “Design Patterns”.</p> <div class="excol-all"></div> <details id="o1"><summary> <h3>Help Users Understand What Things are and How to Use Them</h3> </summary> <div> <p>Objective: <a href="/WAI/WCAG2/supplemental/objectives/o1-understandable/">Help Users Understand What Things are and How to Use Them</a></p> <h4>Design Patterns:</h4> <ul> <li><a href="/WAI/WCAG2/supplemental/patterns/o1p01-clear-purpose/">Make the Purpose of Your Page Clear </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o1p02-familiar-design/">Use a Familiar Hierarchy and Design </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o1p03-consistent-design/">Use a Consistent Visual Design </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o1p04-clear-steps/">Make Each Step Clear </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o1p05-clear-controls/">Clearly Identify Controls and Their Use </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o1p06-control-actions/">Make the Relationship Clear Between Controls and the Content They Affect </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o1p07-icons-used/">Use Icons that Help the User </a></li> </ul> </div> </details> <details id="o2"><summary> <h3>Help Users Find What They Need</h3> </summary> <div> <p>Objective: <a href="/WAI/WCAG2/supplemental/objectives/o2-find/">Help Users Find What They Need</a></p> <h4>Design Patterns:</h4> <ul> <li><a href="/WAI/WCAG2/supplemental/patterns/o2p01-site-important/">Make it Easy to Find the Most Important Tasks and Features </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o2p02-site-structure/">Make the Site Hierarchy Easy to Understand and Navigate </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o2p03-page-structure/">Use a Clear and Understandable Page Structure </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o2p04-page-important/">Make it easy to find the most important actions and information on the page </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o2p05-chunked-media/">Break Media into Chunks </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o2p06-search/">Provide Search </a></li> </ul> </div> </details> <details id="o3"><summary> <h3>Use Clear and Understandable Content</h3> </summary> <div> <p>Objective: <a href="/WAI/WCAG2/supplemental/objectives/o3-clear-content/">Use Clear and Understandable Content</a></p> <h4>Design Patterns:</h4> <ul> <li><a href="/WAI/WCAG2/supplemental/patterns/o3p01-clear-words/">Use Clear Words </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o3p02-simple-tense/">Use a Simple Tense and Voice </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o3p03-double-negatives/">Avoid Double Negatives or Nested Clauses </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o3p04-literal-language/">Use Literal Language </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o3p05-succinct-text/">Keep Text Succinct </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o3p06-format-punctuation/">Use Clear, Unambiguous Formatting and Punctuation </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o3p07-symbols-letters/">Include Symbols and Letters Necessary to Decipher the Words </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o3p08-summary-provided/">Provide Summary of Long Documents and Media </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o3p09-separated-instructions/">Separate Each Instruction </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o3p10-whitespace/">Use White Spacing </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o3p11-unobscured-foreground/">Ensure Foreground Content is not Obscured by Background </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o3p12-implicit-explained/">Explain Implied Content </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o3p13-numerical-alternatives/">Provide Alternatives for Numerical Concepts </a></li> </ul> </div> </details> <details id="o4"><summary> <h3>Help Users Avoid Mistakes and Know How to Correct Them</h3> </summary> <div> <p>Objective: <a href="/WAI/WCAG2/supplemental/objectives/o4-minimize-mistakes/">Help Users Avoid Mistakes and Know How to Correct Them</a></p> <h4>Design Patterns:</h4> <ul> <li><a href="/WAI/WCAG2/supplemental/patterns/o4p01-unexpected-movement/">Ensure Controls and Content Do Not Move Unexpectedly </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o4p02-back-undo/">Let Users Go Back </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o4p03-declared-charges/">Notify Users of Fees and Charges at the Start of a Task </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o4p04-supportive-forms/">Design Forms to Prevent Mistakes </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o4p05-form-undo/">Make it Easy to Undo Form Errors </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o4p06-clear-labels/">Use Clear Visible Labels </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o4p07-step-instructions/">Use Clear Step-by-step Instructions </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o4p08-input-formats/">Accept different input formats </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o4p09-data-loss/">Avoid Data Loss and “Timeouts” </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o4p10-status-feedback/">Provide Feedback </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o4p11-user-safety/">Help the user stay safe </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o4p12-familiar-metrics/">Use Familiar Metrics and Units </a></li> </ul> </div> </details> <details id="o5"><summary> <h3>Help Users Focus</h3> </summary> <div> <p>Objective: <a href="/WAI/WCAG2/supplemental/objectives/o5-user-focus/">Help Users Focus</a></p> <h4>Design Patterns:</h4> <ul> <li><a href="/WAI/WCAG2/supplemental/patterns/o5p01-minimal-interruptions/">Limit Interruptions </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o5p02-short-paths/">Make Short Critical Paths </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o5p03-manageable-quantity/">Avoid Too Much Content </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o5p04-task-expectations/">Provide Information So a User Can Complete and Prepare for a Task </a></li> </ul> </div> </details> <details id="o6"><summary> <h3>Ensure Processes Do Not Rely on Memory</h3> </summary> <div> <p>Objective: <a href="/WAI/WCAG2/supplemental/objectives/o6-memory/">Ensure Processes Do Not Rely on Memory</a></p> <h4>Design Patterns:</h4> <ul> <li><a href="/WAI/WCAG2/supplemental/patterns/o6p01-login-cognition/">Provide a Login that Does Not Rely on Memory or Other Cognitive Skills </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o6p02-singlestep-login/">Allow the User a Simple, Single Step, Login </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o6p03-concise-login/">Provide a Login Alternative with Less Words </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o6p04-voice-menus/">Let Users Avoid Navigating Voice Menus </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o6p05-low-cognition/">Do Not Rely on Users Calculations or Memorizing Information </a></li> </ul> </div> </details> <details id="o7"><summary> <h3>Provide Help and Support</h3> </summary> <div> <p>Objective: <a href="/WAI/WCAG2/supplemental/objectives/o7-support/">Provide Help and Support</a></p> <h4>Design Patterns:</h4> <ul> <li><a href="/WAI/WCAG2/supplemental/patterns/o7p01-human-help/">Provide Human Help </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o7p02-alternative-content/">Provide Alternative Content for Complex Information and Tasks </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o7p03-supported-choice/">Clearly State the Results and Disadvantages of Actions, Options, and Selections </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o7p04-described-interactions/">Provide Help for Forms and Non-standard Controls </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o7p05-findable-support/">Make It Easy to Find Help and Give Feedback </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o7p06-supported-wayfinding/">Provide Help with Directions </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o7p07-reminders/">Provide Reminders </a></li> </ul> </div> </details> <details id="o8"><summary> <h3>Support Adaptation and Personalization</h3> </summary> <div> <p>Objective: <a href="/WAI/WCAG2/supplemental/objectives/o8-personalization/">Support Adaptation and Personalization</a></p> <h4>Design Patterns:</h4> <ul> <li><a href="/WAI/WCAG2/supplemental/patterns/o8p01-motion/">Let Users Control When the Content Moves or Changes </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o8p02-apis/">Enable APIs and Extensions </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o8p03-complexity/">Support Simplification </a></li> <li><a href="/WAI/WCAG2/supplemental/patterns/o8p04-interface/">Support a Personalized and Familiar Interface </a></li> </ul> </div> </details> <div class="excol-all"></div> <h2 id="-low-vision-accessibility-guidance"><img src="/WAI/content-images/wai-wcag-supplemental/eye.svg" alt="" class=" mini"> Low Vision Accessibility Guidance</h2> <p>Guidance on how to better meet the needs of people with low vision may be added here later.</p> </main> </div> <div class="default-grid with-gap leftcol"> <div class="standalone-resource__prevnext"><aside class="box box-icon box-space-above" id="helpimprove" aria-label="feedback"><header class="box-h box-h-icon box-h-space-above box-h-icon"> <svg focusable="false" aria-hidden="true" class="icon-comments "><use xlink:href="/WAI/assets/images/icons.svg#icon-comments"></use></svg> <h2> Help improve this page </h2></header><div class="box-i"><p>Please share your ideas, suggestions, or comments via e-mail to the publicly-archived list <a href="mailto:wai@w3.org?body=%5Binclude%20a%20relevant%20email%20Subject%5D%0A%0A%5Bput%20comment%20here...%5D%0A%0AI%20give%20permission%20to%20share%20this%20to%20a%20publicly-archived%20e-mail%20list.">wai@w3.org</a> or via GitHub.</p> <div class="button-group"> <a href="mailto:wai@w3.org?body=%5Binclude%20a%20relevant%20email%20Subject%5D%0A%0A%5Bput%20comment%20here...%5D%0A%0AI%20give%20permission%20to%20share%20this%20to%20a%20publicly-archived%20e-mail%20list." class="button"><span>E-mail</span></a><a href=" https://github.com/w3c/wai-wcag-supplemental/edit/main/content/index.md " class="button"><span>Fork & Edit on GitHub</span></a><a href="https://github.com/w3c/wai-wcag-supplemental/issues/new?template=content-issue.yml&wai-url=https://www.w3.org/WAI/WCAG2/supplemental/" class="button"><span>New GitHub Issue</span></a></div></div></aside> </div> </div> <a class="button button-backtotop" href="#top"><span><svg focusable="false" aria-hidden="true" class="icon-arrow-up "><use xlink:href="/WAI/assets/images/icons.svg#icon-arrow-up"></use></svg> Back to Top</span></a> </div> <footer id="wai-site-footer" class="page-footer default-grid" aria-label="Page"> <div class="inner"style="-ms-grid-column: 2; -ms-grid-column-span: 8; grid-column: 2 / 8;"><p><strong>Date:</strong> Cognitive Accessibility Guidance first published 29 April 2021. User interface updated in January 2022.</p> <p>Cognitive Accessibility Guidance content is from the "Content Usable" Working Group Note by Cognitive and Learning Disabilities Accessibility Task Force (<a href="https://www.w3.org/groups/tf/cognitive-a11y-tf">Coga TF</a>) <a href="https://www.w3.org/groups/tf/cognitive-a11y-tf/participants">participants</a>. It is published by the Accessibility Guidelines Working Group (<a href="https://www.w3.org/groups/wg/ag">AG WG</a>) and the Accessible Platform Architectures (<a href="https://www.w3.org/groups/wg/apa">APA</a>) Working Group. This user interface was designed by the Accessibility Education and Outreach Working Group (<a href="https://www.w3.org/groups/wg/eowg">EOWG</a>) with contributions from Steve Lee, Shadi Abou-Zahra, and Shawn Lawton Henry, as part of the <a href="https://www.w3.org/WAI/about/projects/wai-guide/"> WAI-Guide project</a>, co-funded by the European Commission.</p> </div> </footer> <footer class="site-footer grid-4q" aria-label="Site"> <div class="q1-start q3-end about"> <div> <p><a class="largelink" href="https://www.w3.org/WAI/" lang="en" dir="auto" translate="no">W3C Web Accessibility Initiative (WAI)</a></p> <p>Strategies, standards, and supporting resources to make the Web accessible to people with disabilities.</p> </div> <div class="social" lang="en" dir="auto" translate="no"> <ul> <li><a href="https://w3c.social/@wai"><svg focusable="false" aria-hidden="true" class="icon-mastodon "><use xlink:href="/WAI/assets/images/icons.svg#icon-mastodon"></use></svg> Mastodon</a></li> <li><a href="https://www.linkedin.com/company/w3c-wai/"><svg focusable="false" aria-hidden="true" class="icon-linkedin "><use xlink:href="/WAI/assets/images/icons.svg#icon-linkedin"></use></svg> LinkedIn</a></li> <li><a href="https://www.w3.org/WAI/feed.xml"><svg focusable="false" aria-hidden="true" class="icon-rss "><use xlink:href="/WAI/assets/images/icons.svg#icon-rss"></use></svg> Feed</a></li> <li><a href="https://www.youtube.com/channel/UCU6ljj3m1fglIPjSjs2DpRA/playlists/"><svg focusable="false" aria-hidden="true" class="icon-youtube "><use xlink:href="/WAI/assets/images/icons.svg#icon-youtube"></use></svg> YouTube</a></li> <li><a href="https://www.w3.org/WAI/news/subscribe/" class="button">Get News in Email</a></li> </ul> </div> <div lang="en" dir="auto" translate="no"> <p>Copyright © 2025 World Wide Web Consortium (<a href="https://www.w3.org/">W3C</a><sup>®</sup>). See <a href="/WAI/about/using-wai-material/">Permission to Use WAI Material</a>.</p> </div> </div> <div lang="en" dir="auto" translate="no" class="q4-start q4-end"> <ul style="margin-bottom:0"> <li><a href="/WAI/about/contacting/">Contact WAI</a></li> <li><a href="/WAI/sitemap/">Site Map</a></li> <li><a href="/WAI/news/">News</a></li> <li><a href="/WAI/sitemap/#archive">Archive</a></li> <li><a href="/WAI/about/accessibility-statement/">Accessibility Statement</a></li> <li><a href="/WAI/translations/"> Translations</a></li> <li><a href="/WAI/roles/">Resources for Roles</a></li> </ul> </div> </footer> <script src="/WAI/assets/scripts/details4everybody.js?1739902561245459979"></script>  <script src="/WAI/assets/scripts/svg4everybody.js?1739902561245459979"></script> <script> svg4everybody(); </script><script> var translationStrings = {}; </script> </body> </html>