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?1739541174349523255"; document.body.appendChild(element); } window.addEventListener("load", downloadJSAtOnload, false); </script> <link rel="stylesheet" href="/WAI/assets/css/style.css?1739541174349523255"> <title> What’s New in WCAG 2.1 | Web Accessibility Initiative (WAI) | W3C</title><style>blockquote {font-style: normal !important;} blockquote p:first-of-type:before, blockquote p:last-of-type:after, blockquote dl:last-of-type:after {content: '' !important;margin-left: 0 !important;} blockquote.sc {padding: 0 10px 15px 20px;border: solid #ccc 1px;background: #f0f0f0;color: #000; margin-right: 0; margin-bottom:40px;} .quotes {margin-bottom:40px;} .quotes ul {list-style-type: none;} .quotes li>p {display:table-row;} .quotes li>p span {display:table-cell;} .issue {font-weight: bold; display:table-cell; width: 6em;} q:before {content: open-quote;color: #005a6a;font-weight: bold;} q:after {content: close-quote;color: #005a6a;font-weight: bold;} .sc dt { display: list-item; list-style-type: disc; float: left; font-weight: bold; margin-left: 2em; margin-right: 1ex; margin-top: 0; } .sc dt:after { content: ":"; } .sc p:last-of-type {margin-bottom: 1em} .sc p:last-child, .sc *:last-child {margin-bottom: 0} </style> <meta name="generator" content="Jekyll v4.3.3" /> <meta property="og:title" content="What’s New in WCAG 2.1" /> <meta name="author" content="W3C Web Accessibility Initiative (WAI)" /> <meta property="og:locale" content="en" /> <meta name="description" content="This page lists the new success criteria in Web Content Accessibility Guidelines (WCAG) 2.1. It includes quotes from personas (fictional people) to help you understand some aspects of the success criteria." /> <meta property="og:description" content="This page lists the new success criteria in Web Content Accessibility Guidelines (WCAG) 2.1. It includes quotes from personas (fictional people) to help you understand some aspects of the success criteria." /> <link rel="canonical" href="https://www.w3.org/WAI/standards-guidelines/wcag/new-in-21/" /> <meta property="og:url" content="https://www.w3.org/WAI/standards-guidelines/wcag/new-in-21/" /> <meta property="og:site_name" content="Web Accessibility Initiative (WAI)" /> <meta property="og:image" content="https://www.w3.org/WAI/content-images/wcag/general-social.png" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary_large_image" /> <meta property="twitter:image" content="https://www.w3.org/WAI/content-images/wcag/general-social.png" /> <meta property="twitter:title" content="What’s New in WCAG 2.1" /> <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":"This page lists the new success criteria in Web Content Accessibility Guidelines (WCAG) 2.1. It includes quotes from personas (fictional people) to help you understand some aspects of the success criteria.","headline":"What’s New in WCAG 2.1","image":"https://www.w3.org/WAI/content-images/wcag/general-social.png","url":"https://www.w3.org/WAI/standards-guidelines/wcag/new-in-21/"}</script>  <link rel="alternate" type="application/rss+xml" href="/WAI/feed.xml"> </head> <body id="top" class="page-what-s-new-in-wcag-2-1 "> <nav aria-label="Skip Link and Language Selector" id="controls" class="default-grid"> <ul> <li><a href="#main">Skip to Content</a></li> <li class="opt"><a href="/WAI/meta/customize/">Change Text Size or Colors</a></li> <li class="opt languagelist"> <strong>This page in:</strong> <ul class="languagelistul"><li><strong style="text-transform: capitalize;">English</strong></li><li><a style="text-transform: capitalize;" href="/WAI/standards-guidelines/wcag/new-in-21/es" lang="es" dir="auto" translate="no">español</a></li> </ul> </li> <li class="opt"> <a href="/WAI/translations/">All Translations <svg focusable="false" aria-hidden="true" class="icon-translations "><use xlink:href="/WAI/assets/images/icons.svg#icon-translations"></use></svg></a> </li> <li><button id="showoptions" data-showhidebuttonid="header-showoptions" class="showhidebutton button-inline" data-target="#controls .opt" aria-expanded="false" data-large-aria-expanded="true" data-showtext='<svg focusable="false" aria-hidden="true" class="icon-languages "><use xlink:href="/WAI/assets/images/icons.svg#icon-languages"></use></svg> Show Customization, Languages, Translations' data-hidetext='Hide Options'><svg focusable="false" aria-hidden="true" class="icon-languages "><use xlink:href="/WAI/assets/images/icons.svg#icon-languages"></use></svg> Show Customization, Languages, Translations</button></li> </ul> </nav> <header id="site-header" class="default-grid with-gap"> <div class="logos"> <a lang="en" class="home w3c" href="https://www.w3.org/"> <svg role="img" aria-label="W3C" viewBox="0 0 68 34" xmlns="http://www.w3.org/2000/svg"><g><path d="m16.117 1.006 5.759 19.58 5.759-19.58h4.17 11.444v1.946l-5.879 10.128c2.065.663 3.627 1.868 4.686 3.615 1.059 1.748 1.589 3.799 1.589 6.155 0 2.914-.775 5.363-2.324 7.348s-3.555 2.978-6.017 2.978c-1.854 0-3.469-.589-4.845-1.767-1.377-1.178-2.396-2.773-3.058-4.786l3.256-1.35c.477 1.218 1.106 2.178 1.887 2.879.781.702 1.701 1.052 2.76 1.052 1.112 0 2.052-.622 2.82-1.866.768-1.245 1.152-2.74 1.152-4.489 0-1.933-.411-3.429-1.231-4.488-.954-1.244-2.45-1.867-4.489-1.867h-1.588v-1.906l5.56-9.612h-6.712l-.382.65-8.163 27.548h-.397l-5.958-19.937-5.957 19.937h-.397l-9.53-32.168h4.17l5.759 19.58 3.892-13.185-1.906-6.395z"/><path d="m64.92 1.006c-.819 0-1.554.295-2.111.861-.591.6-.92 1.376-.92 2.178s.313 1.545.887 2.128c.583.591 1.334.912 2.145.912.793 0 1.562-.321 2.161-.903.574-.557.887-1.3.887-2.136 0-.811-.321-1.57-.878-2.136-.584-.592-1.344-.904-2.171-.904zm2.643 3.065c0 .701-.271 1.351-.768 1.832-.524.507-1.174.777-1.892.777-.675 0-1.342-.278-1.84-.785s-.777-1.157-.777-1.849.287-1.368.802-1.891c.481-.49 1.131-.751 1.84-.751.726 0 1.376.271 1.883.785.49.489.752 1.147.752 1.882zm-2.559-1.807h-1.3v3.445h.65v-1.469h.642l.701 1.469h.726l-.769-1.57c.498-.102.785-.439.785-.929 0-.625-.472-.946-1.435-.946zm-.118.422c.608 0 .886.169.886.591 0 .405-.278.549-.87.549h-.549v-1.14z"/><path d="m59.807.825.676 4.107-2.391 4.575s-.918-1.941-2.443-3.015c-1.285-.905-2.122-1.102-3.431-.832-1.681.347-3.587 2.357-4.419 4.835-.995 2.965-1.005 4.4-1.04 5.718-.056 2.113.277 3.362.277 3.362s-1.452-2.686-1.438-6.62c.009-2.808.451-5.354 1.75-7.867 1.143-2.209 2.842-3.535 4.35-3.691 1.559-.161 2.791.59 3.743 1.403 1 .854 2.01 2.721 2.01 2.721z"/><path d="m60.102 24.063s-1.057 1.889-1.715 2.617c-.659.728-1.837 2.01-3.292 2.651s-2.218.762-3.656.624c-1.437-.138-2.772-.97-3.24-1.317s-1.664-1.369-2.34-2.322-1.733-2.859-1.733-2.859.589 1.91.958 2.721c.212.467.864 1.894 1.789 3.136.863 1.159 2.539 3.154 5.086 3.604 2.547.451 4.297-.693 4.73-.97s1.346-1.042 1.924-1.66c.603-.645 1.174-1.468 1.49-1.962.231-.36.607-1.092.607-1.092z"/></g></svg> </a> <a lang="en" class="home" href="/WAI/"> <span class="wai"><span class="wa">Web Accessibility</span> <span class="i"><span class="initieative">Initiative</span> <span>WAI</span></span></span> </a> <div class="claim"> <span>Strategies, standards, resources to make the Web accessible to people with disabilities</span> </div> <button class="button button-menu" aria-haspopup="true" aria-expanded="false" id="openmenu"><span><svg focusable="false" aria-hidden="true" class="icon-menu "><use xlink:href="/WAI/assets/images/icons.svg#icon-menu"></use></svg> Menu</span></button> </div> <div class="navigations"> <nav class="metanav" aria-label="Meta & Search" lang="en"> <ul> <li><a href="/WAI/about/participating/">Get Involved</a></li> <li><a href="/WAI/about/">About W3C WAI</a></li> <li> <form action="/WAI/search/" role="search"> <div> <label for="header-search"> <span class="visuallyhidden">Search:</span> <input id="header-search" type="search" name="q" placeholder="Search" aria-label="Search"> </label> <button class="button button-icon button-nobg button-noborder"><span><svg focusable="false" aria-label="Submit Search" class="icon-search "><use xlink:href="/WAI/assets/images/icons.svg#icon-search"></use></svg></span></button> </div> </form> </li> </ul> </nav> </div> </header><nav class="mainnav" aria-label="Main" lang="en"><ul><li><a lang="en" href="/WAI/fundamentals/"><span>Accessibility Fundamentals</span></a></li><li><a lang="en" href="/WAI/planning/"><span>Planning & Policies</span></a></li><li><a lang="en" href="/WAI/design-develop/"><span>Design & Develop</span></a></li><li><a lang="en" href="/WAI/test-evaluate/"><span>Test & Evaluate</span></a></li><li><a lang="en" href="/WAI/teach-advocate/"><span>Teach & Advocate</span></a></li><li><a lang="en" href="/WAI/standards-guidelines/"><span>Standards/<wbr>Guidelines</span></a></li></ul></nav><nav class="default-grid breadcrumb" aria-label="Breadcrumb" lang="en"> <ul style="align-self: center;"> <li><a href="/WAI/" lang="en">Home</a></li><li><a lang="en" href="/WAI/standards-guidelines/"><span>Standards/<wbr>Guidelines</span></a></li><li><a lang="en" href="/WAI/standards-guidelines/wcag/"><span>Web Content – WCAG 2</span></a></li><li><a lang="en" href="/WAI/standards-guidelines/wcag/new-in-21/" aria-current="page"><span>New in 2.1</span></a></li></ul> </nav> <div class="default-grid with-gap leftcol"> <div class="sidenav"><nav class="sn-contents" aria-label="Secondary"> <ul class="sidenav--list"> <li> <a lang="en" href="/WAI/standards-guidelines/" class="page-link"><span>Standards/<wbr>Guidelines</span></a></li><li> <a lang="en" href="/WAI/standards-guidelines/wcag/" aria-current="location" class="page-link"><span>Web Content – WCAG 2</span></a><ul><li> <a lang="en" href="https://www.w3.org/WAI/WCAG21/quickref/" class="page-link"><span>How to Meet WCAG 2 (Quick Reference)</span></a></li><li> <a lang="en" href="/WAI/standards-guidelines/wcag/glance/" class="page-link"><span>At a Glance</span></a></li><li> <a lang="en" href="/WAI/standards-guidelines/wcag/docs/" class="page-link"><span>The Documents</span></a></li><li> <a lang="en" href="/WAI/standards-guidelines/wcag/non-web-ict/" class="page-link"><span>Applying to Non-Web ICT</span></a></li><li> <a lang="en" href="/WAI/standards-guidelines/wcag/new-in-22/" class="page-link"><span>New in 2.2</span></a></li> <li> <a lang="en" href="/WAI/standards-guidelines/wcag/new-in-21/" aria-current="page" class="page-link"><span>New in 2.1</span></a></li><li> <a lang="en" href="/WAI/standards-guidelines/wcag/translations/" class="page-link"><span>Translations</span></a></li><li> <a lang="en" href="/WAI/standards-guidelines/wcag/commenting/" class="page-link"><span>Commenting</span></a></li><li> <a lang="en" href="/WAI/standards-guidelines/wcag/conformance-logos/" class="page-link"><span>Conformance Logos</span></a></li><li> <a lang="en" href="/WAI/standards-guidelines/wcag/faq/" class="page-link"><span>FAQ</span></a></li></ul></li><li> <a lang="en" href="/WAI/standards-guidelines/wcag/wcag3-intro/" class="page-link"><span>WCAG 3 Draft</span></a></li><li> <a lang="en" href="/WAI/standards-guidelines/atag/" class="page-link"><span>Authoring Tool Accessibility Guidelines (ATAG) Overview</span></a><ul><li> <a lang="en" href="/WAI/standards-guidelines/atag/glance/" class="page-link"><span>At a Glance</span></a></li><li> <a lang="en" href="/WAI/standards-guidelines/atag/education/" class="page-link"><span>For LMS</span></a></li><li> <a lang="en" href="/WAI/standards-guidelines/atag/no-code/" class="page-link"><span>For No-Code Tools</span></a></li><li> <a lang="en" href="/WAI/standards-guidelines/atag/social-media/" class="page-link"><span>For Social Media Platforms</span></a></li></ul></li><li> <a lang="en" href="/WAI/standards-guidelines/uaag/" class="page-link"><span>User Agents – UAAG</span></a></li><li> <a lang="en" href="/WAI/standards-guidelines/aria/" class="page-link"><span>WAI-ARIA</span></a></li><li> <a lang="en" href="/WAI/standards-guidelines/evaluation/" class="page-link"><span>Evaluation – ACT & EARL</span></a><ul><li> <a lang="en" href="/WAI/standards-guidelines/act/" class="page-link"><span>Accessibility Conformance Testing – ACT</span></a></li><li> <a lang="en" href="/WAI/standards-guidelines/earl/" class="page-link"><span>Evaluation and Report Language – EARL</span></a></li></ul></li><li> <a lang="en" href="/WAI/adapt/" class="page-link"><span>WAI-Adapt</span></a></li><li> <a lang="en" href="/WAI/pronunciation/" class="page-link"><span>Pronunciation</span></a></li><li> <a lang="en" href="/WAI/standards-guidelines/harmonization/" class="page-link"><span>Standards Harmonization is Essential</span></a></li><li> <a lang="en" href="/WAI/standards-guidelines/w3c-process/" class="page-link"><span>W3C Process for Developing Standards</span></a></li><li> <a lang="en" href="/WAI/standards-guidelines/linking/" class="page-link"><span>Referencing and Linking to Standards</span></a></li><li> <a lang="en" href="/WAI/cognitive/" class="page-link"><span>Cognitive Accessibility at W3C</span></a></li><li> <a lang="en" href="/WAI/standards-guidelines/mobile/" class="page-link"><span>Mobile Accessibility at W3C</span></a></li></ul></nav><nav class="sidenav-languages" aria-labelledby="languagehead"> <header id="languagehead">Languages/Translations</header> <ul class="langlist"> <li style="margin-bottom: 2px;"><strong style="text-transform: capitalize;">English (original)</strong></li><li style="margin-bottom: 2px;"><a style="text-transform: capitalize;" href="/WAI/standards-guidelines/wcag/new-in-21/es" dir="auto" translate="no" lang="es">español</a></li></ul> <p><a href="/WAI/translations/">All Translations</a></p> <p><a href="/WAI/about/translating/">Translating WAI Resources</a></p> </nav> </div> <main id="main" lang="en"> <header> <h1> What’s New in WCAG 2.1 </h1></header> <aside class="box box-full"><header class="box-h box-h-full"> <h2> Summary </h2></header><div class="box-i"> <p>This page lists the new success criteria in Web Content Accessibility Guidelines (WCAG) 2.1.</p> <p><strong>It includes quotes from personas (fictional people)</strong> to help you understand some aspects of the success criteria. It also includes links to Understanding documents that explain the success criteria in detail and provide more examples.</p> </div></aside> <nav class="box box-simple" aria-labelledby="tocheading" id="toc"> <header id="tocheading" class="box-h box-h-simple"> Page Contents</header> <div class="box-i"> <ul id="markdown-toc"> <li><a href="#introduction" id="markdown-toc-introduction">Introduction</a></li> <li><a href="#guideline-13-adaptable" id="markdown-toc-guideline-13-adaptable">Guideline 1.3 Adaptable</a> <ul> <li><a href="#134-orientation-aa" id="markdown-toc-134-orientation-aa">1.3.4 Orientation (AA)</a></li> <li><a href="#135-identify-input-purpose-aa" id="markdown-toc-135-identify-input-purpose-aa">1.3.5 Identify Input Purpose (AA)</a></li> <li><a href="#136-identify-purpose-aaa" id="markdown-toc-136-identify-purpose-aaa">1.3.6 Identify Purpose (AAA)</a></li> </ul> </li> <li><a href="#guideline-14-distinguishable" id="markdown-toc-guideline-14-distinguishable">Guideline 1.4 Distinguishable</a> <ul> <li><a href="#1410-reflow-aa" id="markdown-toc-1410-reflow-aa">1.4.10 Reflow (AA)</a></li> <li><a href="#1411-non-text-contrast-aa" id="markdown-toc-1411-non-text-contrast-aa">1.4.11 Non-Text Contrast (AA)</a></li> <li><a href="#1412-text-spacing-aa" id="markdown-toc-1412-text-spacing-aa">1.4.12 Text Spacing (AA)</a></li> <li><a href="#1413-content-on-hover-or-focus-aa" id="markdown-toc-1413-content-on-hover-or-focus-aa">1.4.13 Content on Hover or Focus (AA)</a></li> </ul> </li> <li><a href="#guideline-21-keyboard-accessible" id="markdown-toc-guideline-21-keyboard-accessible">Guideline 2.1 Keyboard Accessible</a> <ul> <li><a href="#214-character-key-shortcuts-a" id="markdown-toc-214-character-key-shortcuts-a">2.1.4 Character Key Shortcuts (A)</a></li> </ul> </li> <li><a href="#guideline-22-enough-time" id="markdown-toc-guideline-22-enough-time">Guideline 2.2 Enough Time</a> <ul> <li><a href="#226-timeouts-aaa" id="markdown-toc-226-timeouts-aaa">2.2.6 Timeouts (AAA)</a></li> </ul> </li> <li><a href="#guideline-23-seizures-and-physical-reactions" id="markdown-toc-guideline-23-seizures-and-physical-reactions">Guideline 2.3 Seizures and Physical Reactions</a> <ul> <li><a href="#233-animation-from-interactions-aaa" id="markdown-toc-233-animation-from-interactions-aaa">2.3.3 Animation from Interactions (AAA)</a></li> </ul> </li> <li><a href="#guideline-25-input-modalities" id="markdown-toc-guideline-25-input-modalities">Guideline 2.5 Input Modalities</a> <ul> <li><a href="#251-pointer-gestures-a" id="markdown-toc-251-pointer-gestures-a">2.5.1 Pointer Gestures (A)</a></li> <li><a href="#252-pointer-cancellation-a" id="markdown-toc-252-pointer-cancellation-a">2.5.2 Pointer Cancellation (A)</a></li> <li><a href="#253-label-in-name-a" id="markdown-toc-253-label-in-name-a">2.5.3 Label in Name (A)</a></li> <li><a href="#254-motion-actuation-a" id="markdown-toc-254-motion-actuation-a">2.5.4 Motion Actuation (A)</a></li> <li><a href="#255-target-size-aaa" id="markdown-toc-255-target-size-aaa">2.5.5 Target Size (AAA)</a></li> <li><a href="#256-concurrent-input-mechanisms-aaa" id="markdown-toc-256-concurrent-input-mechanisms-aaa">2.5.6 Concurrent Input Mechanisms (AAA)</a></li> </ul> </li> <li><a href="#guideline-41-compatible" id="markdown-toc-guideline-41-compatible">Guideline 4.1 Compatible</a> <ul> <li><a href="#413-status-messages-aa" id="markdown-toc-413-status-messages-aa">4.1.3 Status Messages (AA)</a></li> </ul> </li> <li><a href="#about-the-personas-quotes" id="markdown-toc-about-the-personas-quotes">About the Personas Quotes</a></li> </ul> </div> </nav> <h2 id="introduction">Introduction</h2> <p>For an introduction to Web Content Accessibility Guidelines (WCAG) and more about versions 2.0, 2.1, and 2.2, see the <a href="/WAI/standards-guidelines/wcag/">WCAG Overview</a>.</p> <p>WCAG 2.1 provides 17 additional success criteria to address:</p> <ul> <li><a href="/WAI/standards-guidelines/mobile/">mobile accessibility</a></li> <li>people with low vision</li> <li><a href="/WAI/cognitive/">people with cognitive and learning disabilities</a></li> </ul> <h2 id="guideline-13-adaptable">Guideline 1.3 Adaptable</h2> <p>Create content that can be presented in different ways (for example simpler layout) without losing information or structure.</p> <h3 id="134-orientation-aa">1.3.4 Orientation (AA)</h3> <blockquote class="sc"> <p>Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is <a href="https://www.w3.org/TR/WCAG21/#dfn-essential" data-link-type="dfn">essential</a>.</p> </blockquote> <p class="persona">Comic with cerebral palsy who uses a wheelchair:</p> <div class="quotes"> <ul> <li><p><span class="issue">Problem:</span><span><q>I can't rotate my tablet — it's attached to my wheelchair.</q></span></p></li> <li><p><span class="issue">Works well:</span><span><q>The application works whether I attach my tablet horizontally or vertically.</q></span></p></li> </ul> </div> <p><a href="https://www.w3.org/WAI/WCAG21/Understanding/orientation.html">Understanding Orientation</a></p> <h3 id="135-identify-input-purpose-aa">1.3.5 Identify Input Purpose (AA)</h3> <blockquote class="sc"> <p>The purpose of each input field collecting information about the user can be <a href="https://www.w3.org/TR/WCAG21/#dfn-programmatically-determinable" data-link-type="dfn">programmatically determined</a> when:</p> <ul> <li>The input field serves a purpose identified in the <a href="https://www.w3.org/TR/WCAG21/#input-purposes">Input Purposes for User Interface Components section</a>; and</li> <li>The content is implemented using technologies with support for identifying the expected meaning for form input data.</li> </ul> </blockquote> <p class="persona"><a href="https://www.w3.org/WAI/people-use-web/user-stories/archived/#supermarketassistant">Supermarket assistant</a> with dyslexia and dyscalculia:</p> <div class="quotes"> <ul> <li><p><span class="issue">Problem:</span><span><q>My address is so complicated. There's lots of numbers and long words. It's hard to type it all without making mistakes.</q></span></p></li> <li><p><span class="issue">Works well:</span><span><q>I love websites that can automatically fill it all in for me. Then I don't have to work so hard to get the numbers and spelling right.</q><br /> <em>Note: </em>This works because the fields use autocomplete. </span></p></li> </ul> </div> <p><a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">Understanding Identify Input Purpose</a></p> <h3 id="136-identify-purpose-aaa">1.3.6 Identify Purpose (AAA)</h3> <blockquote class="sc"> <p>In content implemented using markup languages, the purpose of <a href="https://www.w3.org/TR/WCAG21/#dfn-user-interface-components" data-link-type="dfn">User Interface Components</a>, icons, and <a href="https://www.w3.org/TR/WCAG21/#dfn-regions" data-link-type="dfn">regions</a> can be <a href="https://www.w3.org/TR/WCAG21/#dfn-programmatically-determinable" data-link-type="dfn">programmatically determined</a>.</p> </blockquote> <p class="persona">Gamer with language processing disability:</p> <div class="quotes"> <ul> <li><p><span class="issue">Problem:</span><span><q>I have software that changes the words in the navigation into symbols. It doesn't work at all with some websites.</q></span></p></li> <li><p><span class="issue">Works well:</span><span><q>It works pretty good with some websites.</q></span></p></li> </ul> </div> <p><a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-purpose.html">Understanding Identify Purpose</a></p> <h2 id="guideline-14-distinguishable">Guideline 1.4 Distinguishable</h2> <p>Make it easier for users to see and hear content including separating foreground from background.</p> <h3 id="1410-reflow-aa">1.4.10 Reflow (AA)</h3> <blockquote class="sc"> <p>Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:</p> <ul> <li>Vertical scrolling content at a width equivalent to 320 <a href="https://www.w3.org/TR/WCAG21/#dfn-css-pixels" data-link-type="dfn">CSS pixels</a>;</li> <li>Horizontal scrolling content at a height equivalent to 256 <a href="https://www.w3.org/TR/WCAG21/#dfn-css-pixels" data-link-type="dfn">CSS pixels</a>;</li> </ul> <p>Except for parts of the content which require two-dimensional layout for usage or meaning.</p> </blockquote> <p class="persona">Parent with low vision – 20/400:</p> <div class="quotes"> <ul> <li><p><span class="issue">Problem:</span><span><q>It's nearly impossible to read text if I have to scroll right and left to read each line. It's disorienting and I lose my place. It makes it hard to understand what I'm reading.</q></span></p></li> <li><p><span class="issue">Works well:</span><span><q>I increase the text size 400% and it reflowed within the width of the window. I can read it easily without scrolling back and forth.</q></span></p></li> </ul> </div> <p><a href="https://www.w3.org/WAI/WCAG21/Understanding/reflow.html">Understanding Reflow</a></p> <h3 id="1411-non-text-contrast-aa">1.4.11 Non-Text Contrast (AA)</h3> <blockquote class="sc"> <p>The visual <a href="https://www.w3.org/TR/WCAG21/#dfn-presentation" data-link-type="dfn">presentation</a> of the following have a <a href="https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio" data-link-type="dfn">contrast ratio</a> of at least 3:1 against adjacent color(s):</p> <dl> <dt>User Interface Components</dt> <dd>Visual information required to identify <a href="https://www.w3.org/TR/WCAG21/#dfn-user-interface-components" data-link-type="dfn">user interface components</a> and <a href="https://www.w3.org/TR/WCAG21/#dfn-states" data-link-type="dfn">states</a>, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;</dd> <dt>Graphical Objects</dt> <dd>Parts of graphics required to understand the content, except when a particular presentation of graphics is <a href="https://www.w3.org/TR/WCAG21/#dfn-essential" data-link-type="dfn">essential</a> to the information being conveyed.</dd> </dl> </blockquote> <p class="persona"><a href="https://www.w3.org/WAI/people-use-web/user-stories/archived/#retiree">Retiree</a> with low contrast sensitivity:</p> <div class="quotes"> <ul> <li><p><span class="issue">Problem:</span><span><q>I couldn't use the "Order Form" — there were no text boxes. After a long call with customer service, I learned there were text box borders that were too light for me to see.</q></span></p></li> <li><p><span class="issue">Works well:</span><span><q>It's easy for me to see all the icons and buttons and everything — even in the sunlight.</q></span></p></li> </ul> </div> <p><a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">Understanding Non-text Contrast</a></p> <h3 id="1412-text-spacing-aa">1.4.12 Text Spacing (AA)</h3> <blockquote class="sc"> <p>In content implemented using markup languages that support the following <a href="https://www.w3.org/TR/WCAG21/#dfn-text" data-link-type="dfn">text</a> <a href="https://www.w3.org/TR/WCAG21/#dfn-style-properties" data-link-type="dfn">style properties</a>, no loss of content or functionality occurs by setting all of the following and by changing no other style property:</p> <ul> <li>Line height (line spacing) to at least 1.5 times the font size;</li> <li>Spacing following paragraphs to at least 2 times the font size;</li> <li>Letter spacing (tracking) to at least 0.12 times the font size;</li> <li>Word spacing to at least 0.16 times the font size.</li> </ul> <p>Exception: Human languages and scripts that do not make use of one or more of these text style properties in written text can conform using only the properties that exist for that combination of language and script.</p> </blockquote> <p class="persona"><a href="https://www.w3.org/WAI/people-use-web/user-stories/archived/#classroomstudent">Student</a> with dyslexia:<br /> and <a href="https://www.w3.org/WAI/people-use-web/user-stories/archived/#retiree">Retiree</a> with low vision:</p> <div class="quotes"> <ul> <li><p><span class="issue">Problem:</span><span><q>Most text is hard to read. It's so cluttered I can't keep my focus. Just increasing the space between lines makes all the difference. When I'm really tired, I also increase the space between words. However, some websites don't work right — some of the text gets cut off and even buttons disappear.</q></span></p></li> <li><p><span class="issue">Works well:</span><span><q>OK, I know I'm a bit of a geek, but I've perfected a user style sheet to make text spacing just right for me. It's a relief when websites work well with my CSS.</q></span></p></li> </ul> </div> <p><a href="https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html">Understanding Text Spacing</a></p> <h3 id="1413-content-on-hover-or-focus-aa">1.4.13 Content on Hover or Focus (AA)</h3> <blockquote class="sc"> <p>Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true:</p> <dl> <dt>Dismissible</dt> <dd>A <a href="https://www.w3.org/TR/WCAG21/#dfn-mechanism" data-link-type="dfn">mechanism</a> is available to dismiss the additional content without moving pointer hover or keyboard focus, unless the additional content communicates an <a href="https://www.w3.org/TR/WCAG21/#dfn-input-error" data-link-type="dfn">input error</a> or does not obscure or replace other content;</dd> <dt>Hoverable</dt> <dd>If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing;</dd> <dt>Persistent</dt> <dd>The additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid.</dd> </dl> <p>Exception: The visual presentation of the additional content is controlled by the user agent and is not modified by the author.</p> </blockquote> <p class="persona">Teacher with low vision who uses screen magnification software:</p> <div class="quotes"> <ul> <li><p><span class="issue">Problem:</span><span><q>I was moving my mouse around to track what I was looking at on a web page. It helps me keep focused. Then -boom- this little box popped up. It covered what I was trying to read and I couldn't get it to go away.</q></span></p></li> <li><p><span class="issue">Works well:</span><span><q>I hovered over a word and a box popped up with the definition, but it was mostly off the screen with my magnification. I moved my mouse pointer to the definition box and scrolled the magnified area over to the definition box and it stayed popped up so I could read it.</q></span></p></li> </ul> </div> <p><a href="https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html">Understanding Content on Hover or Focus</a></p> <h2 id="guideline-21-keyboard-accessible">Guideline 2.1 Keyboard Accessible</h2> <p>Make all functionality available from a keyboard.</p> <h3 id="214-character-key-shortcuts-a">2.1.4 Character Key Shortcuts (A)</h3> <blockquote class="sc"> <p>If a <a href="https://www.w3.org/TR/WCAG21/#dfn-keyboard-shortcuts" data-link-type="dfn">keyboard shortcut</a> is implemented in content using only letter (including upper- and lower-case letters), punctuation, number, or symbol characters, then at least one of the following is true:</p> <dl> <dt>Turn off</dt> <dd>A <a href="https://www.w3.org/TR/WCAG21/#dfn-mechanism" data-link-type="dfn">mechanism</a> is available to turn the shortcut off;</dd> <dt>Remap</dt> <dd>A mechanism is available to remap the shortcut to use one or more non-printable keyboard characters (e.g. Ctrl, Alt, etc).</dd> <dt>Active only on focus</dt> <dd>The keyboard shortcut for a <a href="https://www.w3.org/TR/WCAG21/#dfn-user-interface-components" data-link-type="dfn">user interface component</a> is only active when that component has focus.</dd> </dl> </blockquote> <p class="persona"><a href="https://www.w3.org/WAI/people-use-web/user-stories/archived/#reporter">Reporter</a> with repetitive stress injury who uses voice recognition software:</p> <div class="quotes"> <ul> <li><p><span class="issue">Problem:</span><span><q>When I was using my mail app with voice commands, it kept deleting the messages instead of opening them.</q><br /> <em>Note: </em>There was a shortcut key for delete that was triggered by something the reporter was saying, and no way to turn off the shortcut keys.</span></p></li> <li><p><span class="issue">Works well:</span><span><q>In my spreadsheet application, there's a setting to turn off or modify character key shortcuts.</q></span></p></li> </ul> </div> <p><a href="https://www.w3.org/WAI/WCAG21/Understanding/character-key-shortcuts.html">Understanding Character Key Shortcuts</a></p> <h2 id="guideline-22-enough-time">Guideline 2.2 Enough Time</h2> <p>Provide users enough time to read and use content.</p> <h3 id="226-timeouts-aaa">2.2.6 Timeouts (AAA)</h3> <blockquote class="sc"> <p>Users are warned of the duration of any <a href="https://www.w3.org/TR/WCAG21/#dfn-user-inactivity" data-link-type="dfn">user inactivity</a> that could cause data loss, unless the data is preserved for more than 20 hours when the user does not take any actions.</p> </blockquote> <p class="persona">School playground aide with cognitive disabilities:</p> <div class="quotes"> <ul> <li><p><span class="issue">Problem:</span><span><q>I was selecting my Employee Benefits and was comparing the different plans. When I went back to select the Health Plan, it had timed out and lost all the information I had already entered.</q></span></p></li> <li><p><span class="issue">Works well:</span><span><q>When I started the Employee Benefits app, it told me how many minutes I had to complete the forms.</q></span></p></li> </ul> </div> <p><a href="https://www.w3.org/WAI/WCAG21/Understanding/timeouts.html">Understanding Timeouts</a></p> <h2 id="guideline-23-seizures-and-physical-reactions">Guideline 2.3 Seizures and Physical Reactions</h2> <p>Do not design content in a way that is known to cause seizures or physical reactions.</p> <h3 id="233-animation-from-interactions-aaa">2.3.3 Animation from Interactions (AAA)</h3> <blockquote class="sc"> <p><a href="https://www.w3.org/TR/WCAG21/#dfn-motion-animation" data-link-type="dfn">Motion animation</a> triggered by interaction can be disabled, unless the animation is <a href="https://www.w3.org/TR/WCAG21/#dfn-essential" data-link-type="dfn">essential</a> to the functionality or the information being conveyed.</p> </blockquote> <p class="persona">Artist with vestibular disorder:</p> <div class="quotes"> <ul> <li><p><span class="issue">Problem:</span><span><q>In the online tax app, as I move my mouse around or tab to different fields, this little bubble with the current balance follows me around the screen. Makes me dizzy and nauseous.</q></span></p></li> <li><p><span class="issue">Works well:</span><span><q>I was so glad there was an option to turn off animations.</q></span></p></li> </ul> </div> <p><a href="https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html">Understanding Animation from Interactions</a></p> <h2 id="guideline-25-input-modalities">Guideline 2.5 Input Modalities</h2> <p>Make it easier for users to operate functionality through various inputs beyond keyboard.</p> <h3 id="251-pointer-gestures-a">2.5.1 Pointer Gestures (A)</h3> <blockquote class="sc"> <p>All <a href="https://www.w3.org/TR/WCAG21/#dfn-functionality" data-link-type="dfn">functionality</a> that uses multipoint or path-based gestures for operation can be operated with a <a href="https://www.w3.org/TR/WCAG21/#dfn-single-pointer" data-link-type="dfn">single pointer</a> without a path-based gesture, unless a multipoint or path-based gesture is <a href="https://www.w3.org/TR/WCAG21/#dfn-essential" data-link-type="dfn">essential</a>.</p> </blockquote> <p class="persona">Comic with cerebral palsy who has limited movement in fingers:</p> <div class="quotes"> <ul> <li><p><span class="issue">Problem:</span><span><q>I can't move my fingers like that. I need another way to zoom in the map.</q></span></p></li> <li><p><span class="issue">Works well:</span><span><q>Good thing there are buttons to zoom in and out.</q></span></p></li> </ul> </div> <p><a href="https://www.w3.org/WAI/WCAG21/Understanding/pointer-gestures.html">Understanding Pointer Gestures</a></p> <h3 id="252-pointer-cancellation-a">2.5.2 Pointer Cancellation (A)</h3> <blockquote class="sc"> <p>For <a href="https://www.w3.org/TR/WCAG21/#dfn-functionality" data-link-type="dfn">functionality</a> that can be operated using a <a href="https://www.w3.org/TR/WCAG21/#dfn-single-pointer" data-link-type="dfn">single pointer</a>, at least one of the following is true:</p> <dl> <dt>No Down-Event</dt> <dd>The <a href="https://www.w3.org/TR/WCAG21/#dfn-down-event" data-link-type="dfn">down-event</a> of the pointer is not used to execute any part of the function;</dd> <dt>Abort or Undo</dt> <dd>Completion of the function is on the <a href="https://www.w3.org/TR/WCAG21/#dfn-up-event" data-link-type="dfn">up-event</a>, and a <a href="https://www.w3.org/TR/WCAG21/#dfn-mechanism" data-link-type="dfn">mechanism</a> is available to abort the function before completion or to undo the function after completion;</dd> <dt>Up Reversal</dt> <dd>The up-event reverses any outcome of the preceding down-event;</dd> <dt>Essential</dt> <dd>Completing the function on the down-event is <a href="https://www.w3.org/TR/WCAG21/#dfn-essential" data-link-type="dfn">essential</a>.</dd> </dl> </blockquote> <p class="persona"> Politician with motor disabilities and low vision:</p> <div class="quotes"> <ul> <li><p><span class="issue">Problem:</span><span><q>I went to hit the "Mute" button and accidentally touched the "End Call" button instead. It hung up immediately.</q></span></p></li> <li><p><span class="issue">Works well:</span><span><q>In another web conferencing application, if I accidentally touch the "End Call" button, I can just slide my finger off the "End Call" button and it won't end the call.</q></span></p></li> </ul> </div> <p><a href="https://www.w3.org/WAI/WCAG21/Understanding/pointer-cancellation.html">Understanding Pointer Cancellation</a></p> <h3 id="253-label-in-name-a">2.5.3 Label in Name (A)</h3> <blockquote class="sc"> <p>For <a href="https://www.w3.org/TR/WCAG21/#dfn-user-interface-components" data-link-type="dfn">user interface components</a> with <a href="https://www.w3.org/TR/WCAG21/#dfn-labels" data-link-type="dfn">labels</a> that include <a href="https://www.w3.org/TR/WCAG21/#dfn-text" data-link-type="dfn">text</a> or <a href="https://www.w3.org/TR/WCAG21/#dfn-images-of-text" data-link-type="dfn">images of text</a>, the <a href="https://www.w3.org/TR/WCAG21/#dfn-name" data-link-type="dfn">name</a> contains the text that is presented visually.</p> </blockquote> <p class="persona"><a href="https://www.w3.org/WAI/people-use-web/user-stories/archived/#reporter">Reporter</a> with repetitive stress injury who uses voice recognition software:</p> <div class="quotes"> <ul> <li><p><span class="issue">Problem:</span><span><q>It understood most of my voice commands until I got to the Send button. I kept saying 'Send' and it didn't work.</q><br /> <em>Note: </em>It was visually labeled 'send' but the 'name' in the code was 'submit'. It would have worked if the 'name' started with 'send'.</span></p></li> </ul> </div> <p><a href="https://www.w3.org/WAI/WCAG21/Understanding/label-in-name.html">Understanding Label in Name</a></p> <h3 id="254-motion-actuation-a">2.5.4 Motion Actuation (A)</h3> <blockquote class="sc"> <p><a href="https://www.w3.org/TR/WCAG21/#dfn-functionality" data-link-type="dfn">Functionality</a> that can be operated by device motion or user motion can also be operated by <a href="https://www.w3.org/TR/WCAG21/#dfn-user-interface-components" data-link-type="dfn">user interface components</a> and responding to the motion can be disabled to prevent accidental actuation, except when:</p> <dl> <dt>Supported Interface</dt> <dd>The motion is used to operate functionality through an <a href="https://www.w3.org/TR/WCAG21/#dfn-accessibility-supported" data-link-type="dfn">accessibility supported</a> interface;</dd> <dt>Essential</dt> <dd>The motion is <a href="https://www.w3.org/TR/WCAG21/#dfn-essential" data-link-type="dfn">essential</a> for the function and doing so would invalidate the activity.</dd> </dl> </blockquote> <p class="persona">Comic with cerebral palsy who uses a wheelchair:</p> <div class="quotes"> <ul> <li><p><span class="issue">Problem:</span><span><q>I can't shake my phone; it's connected to my wheelchair. So there needs to be another way to activate that feature, like a button.</q></span></p></li> <li><p><span class="issue">Problem:</span><span><q>I have tremors, so I need to turn off motion activation — and then be able to do stuff without motion actuation.</q></span></p></li> <li><p><span class="issue">Works well:</span><span><q>My friend has this cool application that looks like a physical spin lock. She rotates the phone to turn to the combination. I can use the same application by typing the numbers directly.</q></span></p></li> </ul> </div> <p><a href="https://www.w3.org/WAI/WCAG21/Understanding/motion-actuation.html">Understanding Motion Actuation</a></p> <h3 id="255-target-size-aaa">2.5.5 Target Size (AAA)</h3> <blockquote class="sc"> <p>The size of the <a href="https://www.w3.org/TR/WCAG21/#dfn-target" data-link-type="dfn">target</a> for <a href="https://www.w3.org/TR/WCAG21/#dfn-pointer-inputs" data-link-type="dfn">pointer inputs</a> is at least 44 by 44 <a href="https://www.w3.org/TR/WCAG21/#dfn-css-pixels" data-link-type="dfn">CSS pixels</a> except when:</p> <dl> <dt>Equivalent</dt> <dd>The target is available through an equivalent link or control on the same page that is at least 44 by 44 CSS pixels;</dd> <dt>Inline</dt> <dd>The target is in a sentence or block of text;</dd> <dt>User Agent Control</dt> <dd>The size of the target is determined by the user agent and is not modified by the author;</dd> <dt>Essential</dt> <dd>A particular presentation of the target is <a href="https://www.w3.org/TR/WCAG21/#dfn-essential" data-link-type="dfn">essential</a> to the information being conveyed.</dd> </dl> </blockquote> <p class="persona"><a href="https://www.w3.org/WAI/people-use-web/user-stories/archived/#retiree">Retiree</a> with hand tremor (and big fingers):</p> <div class="quotes"> <ul> <li><p><span class="issue">Problem:</span><span><q>The buttons are so small, I hit "Cancel" when going for "Submit". Then I have to start all over again.</q></span></p></li> <li><p><span class="issue">Works well:</span><span><q>This website buttons are big enough that I don't hit the wrong button even when I'm riding on the bumpy bus.</q></span></p></li> </ul> </div> <p><a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html">Understanding Target Size</a></p> <h3 id="256-concurrent-input-mechanisms-aaa">2.5.6 Concurrent Input Mechanisms (AAA)</h3> <blockquote class="sc"> <p>Web content does not restrict use of input modalities available on a platform except where the restriction is <a href="https://www.w3.org/TR/WCAG21/#dfn-essential" data-link-type="dfn">essential</a>, required to ensure the security of the content, or required to respect user settings.</p> </blockquote> <p class="persona"><a href="https://www.w3.org/WAI/people-use-web/user-stories/archived/#reporter">Reporter</a> with repetitive stress injury who uses voice recognition software:</p> <div class="quotes"> <ul> <li><p><span class="issue">Problem:</span><span><q>When my RSI acts up, I switch back and forth a lot between keyboard, mouse, stylus, voice. This application doesn't let me use the stylus when I have a keyboard plugged in.</q></span></p></li> </ul> </div> <p><a href="https://www.w3.org/WAI/WCAG21/Understanding/concurrent-input-mechanisms.html">Understanding Concurrent Input Mechanisms</a></p> <h2 id="guideline-41-compatible">Guideline 4.1 Compatible</h2> <p>Maximize compatibility with current and future user agents, including assistive technologies.</p> <h3 id="413-status-messages-aa">4.1.3 Status Messages (AA)</h3> <blockquote class="sc"> <p>In content implemented using markup languages, <a href="https://www.w3.org/TR/WCAG21/#dfn-status-messages" data-link-type="dfn">status messages</a> can be <a href="https://www.w3.org/TR/WCAG21/#dfn-programmatically-determinable" data-link-type="dfn">programmatically determined</a> through <a href="https://www.w3.org/TR/WCAG21/#dfn-role" data-link-type="dfn">role</a> or properties such that they can be presented to the user by <a href="https://www.w3.org/TR/WCAG21/#dfn-assistive-technologies" data-link-type="dfn">assistive technologies</a> without receiving focus.</p> </blockquote> <p class="persona"><a href="https://www.w3.org/WAI/people-use-web/user-stories/archived/#accountant">Accountant</a> who is blind and uses a screen reader:</p> <div class="quotes"> <ul> <li><p><span class="issue">Problem:</span><span><q>I selected a class for the conference, but I can't tell if it got added to my schedule.</q></span></p></li> <li><p><span class="issue">Works well:</span><span><q>When I add a meeting to my calendar, I hear a confirmation.</q></span></p></li> </ul> </div> <p><a href="https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html">Understanding Status Messages</a></p> <h2 id="about-the-personas-quotes">About the Personas Quotes</h2> <p>The linked persona roles go to the <a href="/WAI/people-use-web/user-stories/archived/">Stories of Web Users</a>. That page has other personas with different disabilities. We might add more in the future.</p> <p>After we’ve reviewed these persona quotes sufficiently, we plan to add them to the Understanding documents.</p> <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-website/edit/main/pages/standards-guidelines/wcag/new-in-21.md " class="button"><span>Fork & Edit on GitHub</span></a><a href="https://github.com/w3c/wai-website/issues/new?template=content-issue.yml&wai-resource-id=wai-wcag-intro&wai-url=https://www.w3.org/WAI/standards-guidelines/wcag/new-in-21/" class="button"><span>New GitHub Issue</span></a></div></div></aside> <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> </main> </div> <footer id="wai-site-footer" class="page-footer default-grid" aria-label="Page"> <div class="inner"><p><strong>Updated:</strong> 5 October 2023.</p><p><strong>Editor:</strong> <a href="https://www.w3.org/People/Shawn/">Shawn Lawton Henry</a>. Contributors: Shadi Abou-Zahra, Jonathan Avila, Brent Bakken, Laura Carlson, Stéphane Deschamps, Eric Eggert, James Green, Becky Gibson, Marc Johlic, Robert Jolly, Howard Kramer, Chris O'Brien, Sharron Rush, Nic Steenhout, Glenda Sims, Bill Tyler.</p> <p>Developed with input from the Education and Outreach Working Group (<a href="https://www.w3.org/WAI/about/groups/eowg/">EOWG</a>) and the Accessibility Guidelines Working Group (<a href="https://www.w3.org/WAI/about/groups/eowg/">AG WG</a>).</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?1739541174349523255"></script>  <script src="/WAI/assets/scripts/svg4everybody.js?1739541174349523255"></script> <script> svg4everybody(); </script><script> var translationStrings = {}; </script> </body> </html>