Web Content Accessibility Guidelines (WCAG) 2.1

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head> <meta charset="UTF-8"> <meta name="generator" content="ReSpec 34.1.8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <style> span.example-title{text-transform:none} :is(aside,div).example,div.illegal-example{padding:.5em;margin:1em 0;position:relative;clear:both} div.illegal-example{color:red} div.illegal-example p{color:#000} :is(aside,div).example{border-left-width:.5em;border-left-style:solid;border-color:#e0cb52;background:#fcfaee} aside.example div.example{border-left-width:.1em;border-color:#999;background:#fff} .example pre{background-color:rgba(0,0,0,.03)} </style> <style> .issue-label{text-transform:initial} .warning>p:first-child{margin-top:0} .warning{padding:.5em;border-left-width:.5em;border-left-style:solid} span.warning{padding:.1em .5em .15em} .issue.closed span.issue-number{text-decoration:line-through} .issue.closed span.issue-number::after{content:" (Closed)";font-size:smaller} .warning{border-color:#f11;border-width:.2em;border-style:solid;background:#fbe9e9} .warning-title:before{content:"⚠";font-size:1.3em;float:left;padding-right:.3em;margin-top:-.3em} li.task-list-item{list-style:none} input.task-list-item-checkbox{margin:0 .35em .25em -1.6em;vertical-align:middle} .issue a.respec-gh-label{padding:5px;margin:0 2px 0 2px;font-size:10px;text-transform:none;text-decoration:none;font-weight:700;border-radius:4px;position:relative;bottom:2px;border:none;display:inline-block} </style> <style> dfn{cursor:pointer} .dfn-panel{position:absolute;z-index:35;min-width:300px;max-width:500px;padding:.5em .75em;margin-top:.6em;font-family:"Helvetica Neue",sans-serif;font-size:small;background:#fff;color:#000;box-shadow:0 1em 3em -.4em rgba(0,0,0,.3),0 0 1px 1px rgba(0,0,0,.05);border-radius:2px} .dfn-panel:not(.docked)>.caret{position:absolute;top:-9px} .dfn-panel:not(.docked)>.caret::after,.dfn-panel:not(.docked)>.caret::before{content:"";position:absolute;border:10px solid transparent;border-top:0;border-bottom:10px solid #fff;top:0} .dfn-panel:not(.docked)>.caret::before{border-bottom:9px solid #a2a9b1} .dfn-panel *{margin:0} .dfn-panel b{display:block;color:#000;margin-top:.25em} .dfn-panel ul a[href]{color:#333} .dfn-panel>div{display:flex} .dfn-panel a.self-link{font-weight:700;margin-right:auto} .dfn-panel .marker{padding:.1em;margin-left:.5em;border-radius:.2em;text-align:center;white-space:nowrap;font-size:90%;color:#040b1c} .dfn-panel .marker.dfn-exported{background:#d1edfd;box-shadow:0 0 0 .125em #1ca5f940} .dfn-panel .marker.idl-block{background:#8ccbf2;box-shadow:0 0 0 .125em #0670b161} .dfn-panel a:not(:hover){text-decoration:none!important;border-bottom:none!important} .dfn-panel a[href]:hover{border-bottom-width:1px} .dfn-panel ul{padding:0} .dfn-panel li{margin-left:1em} .dfn-panel.docked{position:fixed;left:.5em;top:unset;bottom:2em;margin:0 auto;max-width:calc(100vw - .75em * 2 - .5em - .2em * 2);max-height:30vh;overflow:auto} </style> <title>Web Content Accessibility Guidelines (WCAG) 2.1</title> <style id="respec-mainstyle"> @keyframes pop{ 0%{transform:scale(1,1)} 25%{transform:scale(1.25,1.25);opacity:.75} 100%{transform:scale(1,1)} } :is(h1,h2,h3,h4,h5,h6,a) abbr{border:none} dfn{font-weight:700} a.internalDFN{color:inherit;border-bottom:1px solid #99c;text-decoration:none} a.externalDFN{color:inherit;border-bottom:1px dotted #ccc;text-decoration:none} a.bibref{text-decoration:none} .respec-offending-element:target{animation:pop .25s ease-in-out 0s 1} .respec-offending-element,a[href].respec-offending-element{text-decoration:red wavy underline} @supports not (text-decoration:red wavy underline){ .respec-offending-element:not(pre){display:inline-block} .respec-offending-element{background:url(data:image/gif;base64,R0lGODdhBAADAPEAANv///8AAP///wAAACwAAAAABAADAEACBZQjmIAFADs=) bottom repeat-x} } #references :target{background:#eaf3ff;animation:pop .4s ease-in-out 0s 1} cite .bibref{font-style:normal} a[href].orcid{padding-left:4px;padding-right:4px} a[href].orcid>svg{margin-bottom:-2px} .toc a,.tof a{text-decoration:none} a .figno,a .secno{color:#000} ol.tof,ul.tof{list-style:none outside none} .caption{margin-top:.5em;font-style:italic} table.simple{border-spacing:0;border-collapse:collapse;border-bottom:3px solid #005a9c} .simple th{background:#005a9c;color:#fff;padding:3px 5px;text-align:left} .simple th a{color:#fff;padding:3px 5px;text-align:left} .simple th[scope=row]{background:inherit;color:inherit;border-top:1px solid #ddd} .simple td{padding:3px 10px;border-top:1px solid #ddd} .simple tr:nth-child(even){background:#f0f6ff} .section dd>p:first-child{margin-top:0} .section dd>p:last-child{margin-bottom:0} .section dd{margin-bottom:1em} .section dl.attrs dd,.section dl.eldef dd{margin-bottom:0} #issue-summary>ul{column-count:2} #issue-summary li{list-style:none;display:inline-block} details.respec-tests-details{margin-left:1em;display:inline-block;vertical-align:top} details.respec-tests-details>*{padding-right:2em} details.respec-tests-details[open]{z-index:999999;position:absolute;border:thin solid #cad3e2;border-radius:.3em;background-color:#fff;padding-bottom:.5em} details.respec-tests-details[open]>summary{border-bottom:thin solid #cad3e2;padding-left:1em;margin-bottom:1em;line-height:2em} details.respec-tests-details>ul{width:100%;margin-top:-.3em} details.respec-tests-details>li{padding-left:1em} .self-link:hover{opacity:1;text-decoration:none;background-color:transparent} aside.example .marker>a.self-link{color:inherit} .header-wrapper{display:flex;align-items:baseline} :is(h2,h3,h4,h5,h6):not(#toc>h2,#abstract>h2,#sotd>h2,.head>h2){position:relative;left:-.5em} :is(h2,h3,h4,h5,h6):not(#toch2)+a.self-link{color:inherit;order:-1;position:relative;left:-1.1em;font-size:1rem;opacity:.5} :is(h2,h3,h4,h5,h6)+a.self-link::before{content:"§";text-decoration:none;color:var(--heading-text)} :is(h2,h3)+a.self-link{top:-.2em} :is(h4,h5,h6)+a.self-link::before{color:#000} @media (max-width:767px){ dd{margin-left:0} } @media print{ .removeOnSave{display:none} } </style> <link rel="stylesheet" type="text/css" href="guidelines.css"> <meta name="description" content="Web Content Accessibility Guidelines (WCAG) 2.1 covers a wide range of recommendations for making Web content more accessible. Following these guidelines will make content more accessible to a wider range of people with disabilities, including accommodations for blindness and low vision, deafness and hearing loss, limited movement, speech disabilities, photosensitivity, and combinations of these, and some accommodation for learning disabilities and cognitive limitations; but will not address every user need for people with these disabilities. These guidelines address accessibility of web content on desktops, laptops, tablets, and mobile devices. Following these guidelines will also often make Web content more usable to users in general."> <link rel="canonical" href="https://www.w3.org/TR/WCAG21/"> <style> var{position:relative;cursor:pointer} var[data-type]::after,var[data-type]::before{position:absolute;left:50%;top:-6px;opacity:0;transition:opacity .4s;pointer-events:none} var[data-type]::before{content:"";transform:translateX(-50%);border-width:4px 6px 0 6px;border-style:solid;border-color:transparent;border-top-color:#000} var[data-type]::after{content:attr(data-type);transform:translateX(-50%) translateY(-100%);background:#000;text-align:center;font-family:"Dank Mono","Fira Code",monospace;font-style:normal;padding:6px;border-radius:3px;color:#daca88;text-indent:0;font-weight:400} var[data-type]:hover::after,var[data-type]:hover::before{opacity:1} </style> <script id="initialUserConfig" type="application/json">{ "trace": true, "useExperimentalStyles": true, "doRDFa": "1.1", "includePermalinks": true, "permalinkEdge": true, "permalinkHide": false, "tocIntroductory": true, "specStatus": "REC", "diffTool": "http://www.aptest.com/standards/htmldiff/htmldiff.pl", "shortName": "WCAG21", "publishDate": "2023-09-21", "copyrightStart": "2020", "license": "document", "previousPublishDate": "2018-06-05", "previousMaturity": "REC", "prevRecURI": "https://www.w3.org/TR/WCAG/", "edDraftURI": "https://w3c.github.io/wcag/guidelines/22/", "implementationReportURI": "https://www.w3.org/WAI/WCAG21/implementation-report/", "group": "ag", "github": "w3c/wcag", "editors": [ { "name": "Andrew Kirkpatrick", "mailto": "akirkpat@adobe.com", "company": "Adobe", "companyURI": "http://www.adobe.com/", "w3cid": 39770, "url": "mailto:akirkpat@adobe.com" }, { "name": "Joshue O Connor", "mailto": "josh@interaccess.ie", "company": "Invited Expert, InterAccess", "companyURI": "https://interaccess.org/", "w3cid": 41218, "url": "mailto:josh@interaccess.ie" }, { "name": "Alastair Campbell", "mailto": "acampbell@nomensa.com", "company": "Nomensa", "companyURI": "https://www.nomensa.com/", "w3cid": 44689, "url": "mailto:acampbell@nomensa.com" }, { "name": "Michael Cooper", "mailto": "cooper@w3.org", "company": "W3C", "companyURI": "https://www.w3.org", "w3cid": 34017, "url": "mailto:cooper@w3.org" } ], "errata": "https://www.w3.org/WAI/WCAG21/errata/", "wg": "Accessibility Guidelines Working Group", "wgURI": "https://www.w3.org/WAI/GL/", "wgPublicList": "public-agwg-comments", "wgPatentURI": "https://www.w3.org/2004/01/pp-impl/35422/status", "maxTocLevel": 4, "postProcess": [ null ], "localBiblio": { "CAPTCHA": { "href": "http://www.captcha.net/", "publisher": "Carnegie Mellon University", "title": "The CAPTCHA Project" }, "GPII": { "href": "https://gpii.net/", "title": "Global Public Inclusive Infrastructure" }, "HARDING-BINNIE": { "authors": [ "Harding G. F. A.", "Binnie, C.D." ], "date": "2002", "title": "Independent Analysis of the ITC Photosensitive Epilepsy Calibration Test Tape" }, "IEC-4WD": { "date": "May 5, 1998", "title": "IEC/4WD 61966-2-1: Colour Measurement and Management in Multimedia Systems and Equipment - Part 2.1: Default Colour Space - sRGB" }, "ISO_9241-112": { "uri": "https://www.iso.org/standard/64840.html", "title": "Ergonomics of human-system interaction -- Part 112: Principles for the presentation of information", "publisher": "International Standards Organization" }, "ISO_9241-391": { "isoNumber": "9241-391", "href": "https://www.iso.org/standard/56350.html", "title": "Ergonomics of human-system interaction—Part 391: Requirements, analysis and compliance test methods for the reduction of photosensitive seizures", "publisher": "International Standards Organization", "id": "iso_9241-391" }, "UNESCO": { "date": "1997", "href": "http://www.unesco.org/education/information/nfsunesco/doc/isced_1997.htm", "title": "International Standard Classification of Education", "id": "unesco" } }, "publishISODate": "2023-09-21T00:00:00.000Z", "generatedSubtitle": "W3C Recommendation 21 September 2023" }</script> <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2021/W3C-REC"></head> <body class="h-entry informative"><div class="head"> <p class="logos"><a class="logo" href="https://www.w3.org/"><img crossorigin="" alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2021/logos/W3C" width="72"> </a></p> <h1 id="title" class="title">Web Content Accessibility Guidelines (WCAG) 2.1</h1> <p id="w3c-state"><a href="https://www.w3.org/standards/types#REC">W3C Recommendation</a> <time class="dt-published" datetime="2023-09-21">21 September 2023</time></p> <details open=""> <summary>More details about this document</summary> <dl> <dt>This version:</dt><dd> <a class="u-url" href="https://www.w3.org/TR/2023/REC-WCAG21-20230921/">https://www.w3.org/TR/2023/REC-WCAG21-20230921/</a> </dd> <dt>Latest published version:</dt><dd> <a href="https://www.w3.org/TR/WCAG21/">https://www.w3.org/TR/WCAG21/</a> </dd> <dt>Latest editor's draft:</dt><dd><a href="https://w3c.github.io/wcag/guidelines/22/">https://w3c.github.io/wcag/guidelines/22/</a></dd> <dt>History:</dt><dd> <a href="https://www.w3.org/standards/history/WCAG21/">https://www.w3.org/standards/history/WCAG21/</a> </dd><dd> <a href="https://github.com/w3c/wcag/commits/">Commit history</a> </dd> <dt>Implementation report:</dt><dd> <a href="https://www.w3.org/WAI/WCAG21/implementation-report/">https://www.w3.org/WAI/WCAG21/implementation-report/</a> </dd> <dt>Previous Recommendation:</dt><dd><a href="https://www.w3.org/TR/WCAG20/">https://www.w3.org/TR/WCAG20/</a></dd> <dt>Editors:</dt><dd class="editor p-author h-card vcard" data-editor-id="39770"> <a class="ed_mailto u-email email p-name" href="mailto:akirkpat@adobe.com">Andrew Kirkpatrick</a> (<span class="p-org org h-org">Adobe</span>) </dd><dd class="editor p-author h-card vcard" data-editor-id="41218"> <a class="ed_mailto u-email email p-name" href="mailto:josh@interaccess.ie">Joshue O Connor</a> (<span class="p-org org h-org">Invited Expert, InterAccess</span>) </dd><dd class="editor p-author h-card vcard" data-editor-id="44689"> <a class="ed_mailto u-email email p-name" href="mailto:acampbell@nomensa.com">Alastair Campbell</a> (<span class="p-org org h-org">Nomensa</span>) </dd><dd class="editor p-author h-card vcard" data-editor-id="34017"> <a class="ed_mailto u-email email p-name" href="mailto:cooper@w3.org">Michael Cooper</a> (<span class="p-org org h-org">W3C</span>) </dd> <dt>Feedback:</dt><dd> <a href="https://github.com/w3c/wcag/">GitHub w3c/wcag</a> (<a href="https://github.com/w3c/wcag/pulls/">pull requests</a>, <a href="https://github.com/w3c/wcag/issues/new/choose">new issue</a>, <a href="https://github.com/w3c/wcag/issues/">open issues</a>) </dd><dd><a href="mailto:public-agwg-comments@w3.org?subject=%5BWCAG21%5D%20YOUR%20TOPIC%20HERE">public-agwg-comments@w3.org</a> with subject line <kbd>[WCAG21] <em>… message topic …</em></kbd> (<a rel="discussion" href="https://lists.w3.org/Archives/Public/public-agwg-comments">archives</a>)</dd> <dt>Errata:</dt><dd><a href="https://www.w3.org/WAI/WCAG21/errata/">Errata exists</a>.</dd> </dl> </details> <p> See also <a href="https://www.w3.org/Translations/?technology=WCAG21"> <strong>translations</strong></a>. </p> <p class="copyright"> <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2020-2023 <a href="https://www.w3.org/">World Wide Web Consortium</a>. <abbr title="World Wide Web Consortium">W3C</abbr><sup>®</sup> <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a rel="license" href="https://www.w3.org/Consortium/Legal/copyright-documents" title="W3C Document License">document use</a> rules apply. </p> <hr title="Separator for header"> </div> <section id="abstract" class="introductory"><h2>Abstract</h2> <p>Web Content Accessibility Guidelines (WCAG) 2.1 covers a wide range of recommendations for making Web content more accessible. Following these guidelines will make content more accessible to a wider range of people with disabilities, including accommodations for blindness and low vision, deafness and hearing loss, limited movement, speech disabilities, photosensitivity, and combinations of these, and some accommodation for learning disabilities and cognitive limitations; but will not address every user need for people with these disabilities. These guidelines address accessibility of web content on desktops, laptops, tablets, and mobile devices. Following these guidelines will also often make Web content more usable to users in general. </p> <p>WCAG 2.1 success criteria are written as testable statements that are not technology-specific. Guidance about satisfying the success criteria in specific technologies, as well as general information about interpreting the success criteria, is provided in separate documents. See <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web Content Accessibility Guidelines (WCAG) Overview</a> for an introduction and links to WCAG technical and educational material. </p> <p>WCAG 2.1 extends <a href="https://www.w3.org/TR/WCAG20/">Web Content Accessibility Guidelines 2.0</a> [<cite><a class="bibref" data-link-type="biblio" href="#bib-wcag20" title="Web Content Accessibility Guidelines (WCAG) 2.0">WCAG20</a></cite>], which was published as a <abbr title="World Wide Web Consortium">W3C</abbr> Recommendation December 2008. Content that conforms to WCAG 2.1 also conforms to WCAG 2.0. The WG intends that for policies requiring conformance to WCAG 2.0, WCAG 2.1 can provide an alternate means of conformance. The publication of WCAG 2.1 does not deprecate or supersede WCAG 2.0. While WCAG 2.0 remains a <abbr title="World Wide Web Consortium">W3C</abbr> Recommendation, the <abbr title="World Wide Web Consortium">W3C</abbr> advises the use of WCAG 2.1 to maximize future applicability of accessibility efforts. The <abbr title="World Wide Web Consortium">W3C</abbr> also encourages use of the most current version of WCAG when developing or updating Web accessibility policies. </p> </section> <section id="sotd" class="introductory"><h2>Status of This Document</h2><p><em>This section describes the status of this document at the time of its publication. A list of current <abbr title="World Wide Web Consortium">W3C</abbr> publications and the latest revision of this technical report can be found in the <a href="https://www.w3.org/TR/"><abbr title="World Wide Web Consortium">W3C</abbr> technical reports index</a> at https://www.w3.org/TR/.</em></p> <p>This is a <a href="https://www.w3.org/2018/Process-20180201/#RecsW3C">Recommendation</a> of WCAG 2.1 by the <a href="https://www.w3.org/WAI/GL/">Accessibility Guidelines Working Group</a>. This incorporates <a href="https://www.w3.org/WAI/WCAG21/errata/">errata</a> and are described in the <a href="#changelog">change log</a>. At some point additional changes might be incorporated into an <a href="https://www.w3.org/2018/Process-20180201/#revised-rec">Edited or Amended Recommendation</a>. </p> <p>To comment, <a href="https://github.com/w3c/wcag/issues/new">file an issue in the <abbr title="World Wide Web Consortium">W3C</abbr> WCAG GitHub repository</a>. Although the proposed Success Criteria in this document reference issues tracking discussion, the Working Group requests that public comments be filed as new issues, one issue per discrete comment. It is free to create a GitHub account to file issues. If filing issues in GitHub is not feasible, send email to <a href="mailto:public-agwg-comments@w3.org?subject=WCAG%202.1%20public%20comment">public-agwg-comments@w3.org</a> (<a href="https://lists.w3.org/Archives/Public/public-agwg-comments/">comment archive</a>). </p> <p> This document was published by the <a href="https://www.w3.org/groups/wg/ag">Accessibility Guidelines Working Group</a> as a Recommendation using the <a href="https://www.w3.org/2023/Process-20230612/#recs-and-notes">Recommendation track</a>. </p><p> <abbr title="World Wide Web Consortium">W3C</abbr> recommends the wide deployment of this specification as a standard for the Web. </p><p> A <abbr title="World Wide Web Consortium">W3C</abbr> Recommendation is a specification that, after extensive consensus-building, is endorsed by <abbr title="World Wide Web Consortium">W3C</abbr> and its Members, and has commitments from Working Group members to <a href="https://www.w3.org/Consortium/Patent-Policy/#sec-Requirements">royalty-free licensing</a> for implementations. </p><p> This document was produced by a group operating under the <a href="https://www.w3.org/Consortium/Patent-Policy-20170801/">1 August 2017 <abbr title="World Wide Web Consortium">W3C</abbr> Patent Policy</a>. <abbr title="World Wide Web Consortium">W3C</abbr> maintains a <a rel="disclosure" href="https://www.w3.org/groups/wg/ag/ipr">public list of any patent disclosures</a> made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains <a href="https://www.w3.org/Consortium/Patent-Policy-20170801/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/Consortium/Patent-Policy-20170801/#sec-Disclosure">section 6 of the <abbr title="World Wide Web Consortium">W3C</abbr> Patent Policy</a>. </p><p> This document is governed by the <a id="w3c_process_revision" href="https://www.w3.org/2023/Process-20230612/">12 June 2023 <abbr title="World Wide Web Consortium">W3C</abbr> Process Document</a>. </p></section><nav id="toc"><h2 class="introductory" id="table-of-contents">Table of Contents</h2><ol class="toc"><li class="tocline"><a class="tocxref" href="#abstract">Abstract</a></li><li class="tocline"><a class="tocxref" href="#sotd">Status of This Document</a></li><li class="tocline"><a class="tocxref" href="#intro">Introduction</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#background-on-wcag-2">Background on WCAG 2</a></li><li class="tocline"><a class="tocxref" href="#wcag-2-layers-of-guidance">WCAG 2 Layers of Guidance</a></li><li class="tocline"><a class="tocxref" href="#wcag-2-1-supporting-documents">WCAG 2.1 Supporting Documents</a></li><li class="tocline"><a class="tocxref" href="#requirements-for-wcag-2-1">Requirements for WCAG 2.1</a></li><li class="tocline"><a class="tocxref" href="#comparison-with-wcag-2-0">Comparison with WCAG 2.0</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#new-features-in-wcag-2-1">New Features in WCAG 2.1</a></li><li class="tocline"><a class="tocxref" href="#numbering-in-wcag-2-1">Numbering in WCAG 2.1</a></li><li class="tocline"><a class="tocxref" href="#conformance-to-wcag-2-1">Conformance to WCAG 2.1</a></li></ol></li><li class="tocline"><a class="tocxref" href="#later-versions-of-accessibility-guidelines">Later Versions of Accessibility Guidelines</a></li></ol></li><li class="tocline"><a class="tocxref" href="#perceivable"><bdi class="secno">1. </bdi> Perceivable </a><ol class="toc"><li class="tocline"><a class="tocxref" href="#text-alternatives"><bdi class="secno">1.1 </bdi>Text Alternatives</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#non-text-content"><bdi class="secno">1.1.1 </bdi>Non-text Content</a></li></ol></li><li class="tocline"><a class="tocxref" href="#time-based-media"><bdi class="secno">1.2 </bdi>Time-based Media</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#audio-only-and-video-only-prerecorded"><bdi class="secno">1.2.1 </bdi>Audio-only and Video-only (Prerecorded)</a></li><li class="tocline"><a class="tocxref" href="#captions-prerecorded"><bdi class="secno">1.2.2 </bdi>Captions (Prerecorded)</a></li><li class="tocline"><a class="tocxref" href="#audio-description-or-media-alternative-prerecorded"><bdi class="secno">1.2.3 </bdi>Audio Description or Media Alternative (Prerecorded)</a></li><li class="tocline"><a class="tocxref" href="#captions-live"><bdi class="secno">1.2.4 </bdi>Captions (Live)</a></li><li class="tocline"><a class="tocxref" href="#audio-description-prerecorded"><bdi class="secno">1.2.5 </bdi>Audio Description (Prerecorded)</a></li><li class="tocline"><a class="tocxref" href="#sign-language-prerecorded"><bdi class="secno">1.2.6 </bdi>Sign Language (Prerecorded)</a></li><li class="tocline"><a class="tocxref" href="#extended-audio-description-prerecorded"><bdi class="secno">1.2.7 </bdi>Extended Audio Description (Prerecorded)</a></li><li class="tocline"><a class="tocxref" href="#media-alternative-prerecorded"><bdi class="secno">1.2.8 </bdi>Media Alternative (Prerecorded)</a></li><li class="tocline"><a class="tocxref" href="#audio-only-live"><bdi class="secno">1.2.9 </bdi>Audio-only (Live)</a></li></ol></li><li class="tocline"><a class="tocxref" href="#adaptable"><bdi class="secno">1.3 </bdi>Adaptable</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#info-and-relationships"><bdi class="secno">1.3.1 </bdi>Info and Relationships</a></li><li class="tocline"><a class="tocxref" href="#meaningful-sequence"><bdi class="secno">1.3.2 </bdi>Meaningful Sequence</a></li><li class="tocline"><a class="tocxref" href="#sensory-characteristics"><bdi class="secno">1.3.3 </bdi>Sensory Characteristics</a></li><li class="tocline"><a class="tocxref" href="#orientation"><bdi class="secno">1.3.4 </bdi>Orientation</a></li><li class="tocline"><a class="tocxref" href="#identify-input-purpose"><bdi class="secno">1.3.5 </bdi>Identify Input Purpose</a></li><li class="tocline"><a class="tocxref" href="#identify-purpose"><bdi class="secno">1.3.6 </bdi>Identify Purpose</a></li></ol></li><li class="tocline"><a class="tocxref" href="#distinguishable"><bdi class="secno">1.4 </bdi>Distinguishable</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#use-of-color"><bdi class="secno">1.4.1 </bdi>Use of Color</a></li><li class="tocline"><a class="tocxref" href="#audio-control"><bdi class="secno">1.4.2 </bdi>Audio Control</a></li><li class="tocline"><a class="tocxref" href="#contrast-minimum"><bdi class="secno">1.4.3 </bdi>Contrast (Minimum)</a></li><li class="tocline"><a class="tocxref" href="#resize-text"><bdi class="secno">1.4.4 </bdi>Resize Text</a></li><li class="tocline"><a class="tocxref" href="#images-of-text"><bdi class="secno">1.4.5 </bdi>Images of Text</a></li><li class="tocline"><a class="tocxref" href="#contrast-enhanced"><bdi class="secno">1.4.6 </bdi>Contrast (Enhanced)</a></li><li class="tocline"><a class="tocxref" href="#low-or-no-background-audio"><bdi class="secno">1.4.7 </bdi>Low or No Background Audio</a></li><li class="tocline"><a class="tocxref" href="#visual-presentation"><bdi class="secno">1.4.8 </bdi>Visual Presentation</a></li><li class="tocline"><a class="tocxref" href="#images-of-text-no-exception"><bdi class="secno">1.4.9 </bdi>Images of Text (No Exception)</a></li><li class="tocline"><a class="tocxref" href="#reflow"><bdi class="secno">1.4.10 </bdi>Reflow</a></li><li class="tocline"><a class="tocxref" href="#non-text-contrast"><bdi class="secno">1.4.11 </bdi>Non-text Contrast</a></li><li class="tocline"><a class="tocxref" href="#text-spacing"><bdi class="secno">1.4.12 </bdi>Text Spacing</a></li><li class="tocline"><a class="tocxref" href="#content-on-hover-or-focus"><bdi class="secno">1.4.13 </bdi>Content on Hover or Focus</a></li></ol></li></ol></li><li class="tocline"><a class="tocxref" href="#operable"><bdi class="secno">2. </bdi>Operable </a><ol class="toc"><li class="tocline"><a class="tocxref" href="#keyboard-accessible"><bdi class="secno">2.1 </bdi>Keyboard Accessible</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#keyboard"><bdi class="secno">2.1.1 </bdi>Keyboard</a></li><li class="tocline"><a class="tocxref" href="#no-keyboard-trap"><bdi class="secno">2.1.2 </bdi>No Keyboard Trap</a></li><li class="tocline"><a class="tocxref" href="#keyboard-no-exception"><bdi class="secno">2.1.3 </bdi>Keyboard (No Exception)</a></li><li class="tocline"><a class="tocxref" href="#character-key-shortcuts"><bdi class="secno">2.1.4 </bdi>Character Key Shortcuts</a></li></ol></li><li class="tocline"><a class="tocxref" href="#enough-time"><bdi class="secno">2.2 </bdi>Enough Time</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#timing-adjustable"><bdi class="secno">2.2.1 </bdi>Timing Adjustable</a></li><li class="tocline"><a class="tocxref" href="#pause-stop-hide"><bdi class="secno">2.2.2 </bdi>Pause, Stop, Hide</a></li><li class="tocline"><a class="tocxref" href="#no-timing"><bdi class="secno">2.2.3 </bdi>No Timing</a></li><li class="tocline"><a class="tocxref" href="#interruptions"><bdi class="secno">2.2.4 </bdi>Interruptions</a></li><li class="tocline"><a class="tocxref" href="#re-authenticating"><bdi class="secno">2.2.5 </bdi>Re-authenticating</a></li><li class="tocline"><a class="tocxref" href="#timeouts"><bdi class="secno">2.2.6 </bdi>Timeouts</a></li></ol></li><li class="tocline"><a class="tocxref" href="#seizures-and-physical-reactions"><bdi class="secno">2.3 </bdi>Seizures and Physical Reactions</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#three-flashes-or-below-threshold"><bdi class="secno">2.3.1 </bdi>Three Flashes or Below Threshold</a></li><li class="tocline"><a class="tocxref" href="#three-flashes"><bdi class="secno">2.3.2 </bdi>Three Flashes</a></li><li class="tocline"><a class="tocxref" href="#animation-from-interactions"><bdi class="secno">2.3.3 </bdi>Animation from Interactions</a></li></ol></li><li class="tocline"><a class="tocxref" href="#navigable"><bdi class="secno">2.4 </bdi>Navigable</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#bypass-blocks"><bdi class="secno">2.4.1 </bdi>Bypass Blocks</a></li><li class="tocline"><a class="tocxref" href="#page-titled"><bdi class="secno">2.4.2 </bdi>Page Titled</a></li><li class="tocline"><a class="tocxref" href="#focus-order"><bdi class="secno">2.4.3 </bdi>Focus Order</a></li><li class="tocline"><a class="tocxref" href="#link-purpose-in-context"><bdi class="secno">2.4.4 </bdi>Link Purpose (In Context)</a></li><li class="tocline"><a class="tocxref" href="#multiple-ways"><bdi class="secno">2.4.5 </bdi>Multiple Ways</a></li><li class="tocline"><a class="tocxref" href="#headings-and-labels"><bdi class="secno">2.4.6 </bdi>Headings and Labels</a></li><li class="tocline"><a class="tocxref" href="#focus-visible"><bdi class="secno">2.4.7 </bdi>Focus Visible</a></li><li class="tocline"><a class="tocxref" href="#location"><bdi class="secno">2.4.8 </bdi>Location</a></li><li class="tocline"><a class="tocxref" href="#link-purpose-link-only"><bdi class="secno">2.4.9 </bdi>Link Purpose (Link Only)</a></li><li class="tocline"><a class="tocxref" href="#section-headings"><bdi class="secno">2.4.10 </bdi>Section Headings</a></li></ol></li><li class="tocline"><a class="tocxref" href="#input-modalities"><bdi class="secno">2.5 </bdi>Input Modalities</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#pointer-gestures"><bdi class="secno">2.5.1 </bdi>Pointer Gestures</a></li><li class="tocline"><a class="tocxref" href="#pointer-cancellation"><bdi class="secno">2.5.2 </bdi>Pointer Cancellation</a></li><li class="tocline"><a class="tocxref" href="#label-in-name"><bdi class="secno">2.5.3 </bdi>Label in Name</a></li><li class="tocline"><a class="tocxref" href="#motion-actuation"><bdi class="secno">2.5.4 </bdi>Motion Actuation</a></li><li class="tocline"><a class="tocxref" href="#target-size"><bdi class="secno">2.5.5 </bdi>Target Size</a></li><li class="tocline"><a class="tocxref" href="#concurrent-input-mechanisms"><bdi class="secno">2.5.6 </bdi>Concurrent Input Mechanisms</a></li></ol></li></ol></li><li class="tocline"><a class="tocxref" href="#understandable"><bdi class="secno">3. </bdi> Understandable </a><ol class="toc"><li class="tocline"><a class="tocxref" href="#readable"><bdi class="secno">3.1 </bdi>Readable</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#language-of-page"><bdi class="secno">3.1.1 </bdi>Language of Page</a></li><li class="tocline"><a class="tocxref" href="#language-of-parts"><bdi class="secno">3.1.2 </bdi>Language of Parts</a></li><li class="tocline"><a class="tocxref" href="#unusual-words"><bdi class="secno">3.1.3 </bdi>Unusual Words</a></li><li class="tocline"><a class="tocxref" href="#abbreviations"><bdi class="secno">3.1.4 </bdi>Abbreviations</a></li><li class="tocline"><a class="tocxref" href="#reading-level"><bdi class="secno">3.1.5 </bdi>Reading Level</a></li><li class="tocline"><a class="tocxref" href="#pronunciation"><bdi class="secno">3.1.6 </bdi>Pronunciation</a></li></ol></li><li class="tocline"><a class="tocxref" href="#predictable"><bdi class="secno">3.2 </bdi>Predictable</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#on-focus"><bdi class="secno">3.2.1 </bdi>On Focus</a></li><li class="tocline"><a class="tocxref" href="#on-input"><bdi class="secno">3.2.2 </bdi>On Input</a></li><li class="tocline"><a class="tocxref" href="#consistent-navigation"><bdi class="secno">3.2.3 </bdi>Consistent Navigation</a></li><li class="tocline"><a class="tocxref" href="#consistent-identification"><bdi class="secno">3.2.4 </bdi>Consistent Identification</a></li><li class="tocline"><a class="tocxref" href="#change-on-request"><bdi class="secno">3.2.5 </bdi>Change on Request</a></li></ol></li><li class="tocline"><a class="tocxref" href="#input-assistance"><bdi class="secno">3.3 </bdi>Input Assistance</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#error-identification"><bdi class="secno">3.3.1 </bdi>Error Identification</a></li><li class="tocline"><a class="tocxref" href="#labels-or-instructions"><bdi class="secno">3.3.2 </bdi>Labels or Instructions</a></li><li class="tocline"><a class="tocxref" href="#error-suggestion"><bdi class="secno">3.3.3 </bdi>Error Suggestion</a></li><li class="tocline"><a class="tocxref" href="#error-prevention-legal-financial-data"><bdi class="secno">3.3.4 </bdi>Error Prevention (Legal, Financial, Data)</a></li><li class="tocline"><a class="tocxref" href="#help"><bdi class="secno">3.3.5 </bdi>Help</a></li><li class="tocline"><a class="tocxref" href="#error-prevention-all"><bdi class="secno">3.3.6 </bdi>Error Prevention (All)</a></li></ol></li></ol></li><li class="tocline"><a class="tocxref" href="#robust"><bdi class="secno">4. </bdi> Robust </a><ol class="toc"><li class="tocline"><a class="tocxref" href="#compatible"><bdi class="secno">4.1 </bdi>Compatible</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#parsing"><bdi class="secno">4.1.1 </bdi>Parsing</a></li><li class="tocline"><a class="tocxref" href="#name-role-value"><bdi class="secno">4.1.2 </bdi>Name, Role, Value</a></li><li class="tocline"><a class="tocxref" href="#status-messages"><bdi class="secno">4.1.3 </bdi>Status Messages</a></li></ol></li></ol></li><li class="tocline"><a class="tocxref" href="#conformance"><bdi class="secno">5. </bdi>Conformance</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#interpreting-normative-requirements"><bdi class="secno">5.1 </bdi>Interpreting Normative Requirements</a></li><li class="tocline"><a class="tocxref" href="#conformance-reqs"><bdi class="secno">5.2 </bdi>Conformance Requirements</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#cc1"><bdi class="secno">5.2.1 </bdi>Conformance Level</a></li><li class="tocline"><a class="tocxref" href="#cc2"><bdi class="secno">5.2.2 </bdi>Full pages</a></li><li class="tocline"><a class="tocxref" href="#cc3"><bdi class="secno">5.2.3 </bdi>Complete processes</a></li><li class="tocline"><a class="tocxref" href="#cc4"><bdi class="secno">5.2.4 </bdi>Only Accessibility-Supported Ways of Using Technologies</a></li><li class="tocline"><a class="tocxref" href="#cc5"><bdi class="secno">5.2.5 </bdi>Non-Interference</a></li></ol></li><li class="tocline"><a class="tocxref" href="#conformance-claims"><bdi class="secno">5.3 </bdi>Conformance Claims (Optional) </a><ol class="toc"><li class="tocline"><a class="tocxref" href="#conformance-required"><bdi class="secno">5.3.1 </bdi>Required Components of a Conformance Claim</a></li><li class="tocline"><a class="tocxref" href="#conformance-optional"><bdi class="secno">5.3.2 </bdi>Optional Components of a Conformance Claim </a></li></ol></li><li class="tocline"><a class="tocxref" href="#conformance-partial"><bdi class="secno">5.4 </bdi>Statement of Partial Conformance - Third Party Content</a></li><li class="tocline"><a class="tocxref" href="#conformance-partial-lang"><bdi class="secno">5.5 </bdi>Statement of Partial Conformance - Language</a></li></ol></li><li class="tocline"><a class="tocxref" href="#glossary"><bdi class="secno">6. </bdi>Glossary</a></li><li class="tocline"><a class="tocxref" href="#input-purposes"><bdi class="secno">7. </bdi>Input Purposes for User Interface Components</a></li><li class="tocline"><a class="tocxref" href="#changelog"><bdi class="secno">A. </bdi>Change Log</a></li><li class="tocline"><a class="tocxref" href="#acknowledgements"><bdi class="secno">B. </bdi>Acknowledgments</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#ack_participants-active"><bdi class="secno">B.1 </bdi>Participants of the AG WG active in the development of this document:</a></li><li class="tocline"><a class="tocxref" href="#ack_participants-previous"><bdi class="secno">B.2 </bdi>Other previously active WCAG WG participants and other contributors to WCAG 2.0, WCAG 2.1, or supporting resources </a></li><li class="tocline"><a class="tocxref" href="#enabling-funders"><bdi class="secno">B.3 </bdi>Enabling funders</a></li></ol></li><li class="tocline"><a class="tocxref" href="#references"><bdi class="secno">C. </bdi>References</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#informative-references"><bdi class="secno">C.1 </bdi>Informative references</a></li></ol></li></ol></nav> <section class="informative introductory" id="intro"><div class="header-wrapper"><h2 id="introduction">Introduction</h2><a class="self-link" href="#intro" aria-label="Permalink for this Section"></a></div><p><em>This section is non-normative.</em></p> <section id="background-on-wcag-2"><div class="header-wrapper"><h3 id="background-on-wcag-2-0">Background on WCAG 2</h3><a class="self-link" href="#background-on-wcag-2" aria-label="Permalink for this Section"></a></div> <p>Web Content Accessibility Guidelines (WCAG) 2.1 defines how to make Web content more accessible to people with disabilities. Accessibility involves a wide range of disabilities, including visual, auditory, physical, speech, cognitive, language, learning, and neurological disabilities. Although these guidelines cover a wide range of issues, they are not able to address the needs of people with all types, degrees, and combinations of disability. These guidelines also make Web content more usable by older individuals with changing abilities due to aging and often improve usability for users in general. </p> <p>WCAG 2.1 is developed through the <a href="https://www.w3.org/WAI/standards-guidelines/w3c-process/"><abbr title="World Wide Web Consortium">W3C</abbr> process</a> in cooperation with individuals and organizations around the world, with a goal of providing a shared standard for Web content accessibility that meets the needs of individuals, organizations, and governments internationally. WCAG 2.1 builds on WCAG 2.0 [<cite><a class="bibref" data-link-type="biblio" href="#bib-wcag20" title="Web Content Accessibility Guidelines (WCAG) 2.0">WCAG20</a></cite>], which in turn built on WCAG 1.0 [<cite><a class="bibref" data-link-type="biblio" href="#bib-wai-webcontent" title="Web Content Accessibility Guidelines 1.0">WAI-WEBCONTENT</a></cite>] and is designed to apply broadly to different Web technologies now and in the future, and to be testable with a combination of automated testing and human evaluation. For an introduction to WCAG, see the <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web Content Accessibility Guidelines (WCAG) Overview</a>. </p> <p>Significant challenges were encountered in defining additional criteria to address cognitive, language, and learning disabilities, including a short timeline for development as well as challenges in reaching consensus on testability, implementability, and international considerations of proposals. Work will carry on in this area in future versions of WCAG. We encourage authors to refer to our supplemental guidance on <a href="https://www.w3.org/WAI/standards-guidelines/wcag/#supplement">improving inclusion for people with disabilities, including learning and cognitive disabilities, people with low-vision, and more</a>. </p> <p>Web accessibility depends not only on accessible content but also on accessible Web browsers and other user agents. Authoring tools also have an important role in Web accessibility. For an overview of how these components of Web development and interaction work together, see: </p> <ul> <li><strong><a href="https://www.w3.org/WAI/fundamentals/components/">Essential Components of Web Accessibility</a></strong></li> <li><strong><a href="https://www.w3.org/WAI/standards-guidelines/uaag/">User Agent Accessibility Guidelines (UAAG) Overview</a></strong></li> <li><strong><a href="https://www.w3.org/WAI/standards-guidelines/atag/">Authoring Tool Accessibility Guidelines (ATAG) Overview</a></strong></li> </ul> <p>Where this document refers to <q>WCAG 2</q> it is intended to mean any and all versions of WCAG that start with 2. </p> </section> <section id="wcag-2-layers-of-guidance"><div class="header-wrapper"><h3 id="wcag-2-layers-of-guidance-0">WCAG 2 Layers of Guidance</h3><a class="self-link" href="#wcag-2-layers-of-guidance" aria-label="Permalink for this Section"></a></div> <p>The individuals and organizations that use WCAG vary widely and include Web designers and developers, policy makers, purchasing agents, teachers, and students. In order to meet the varying needs of this audience, several layers of guidance are provided including overall <em>principles</em>, general <em>guidelines</em>, testable <em>success criteria</em> and a rich collection of <em>sufficient techniques</em>, <em>advisory techniques</em>, and <em>documented common failures</em> with examples, resource links and code. </p> <ul> <li> <p><strong>Principles</strong> - At the top are four principles that provide the foundation for Web accessibility: <em>perceivable, operable, understandable, and robust</em>. See also <a href="https://www.w3.org/WAI/WCAG21/Understanding/intro#understanding-the-four-principles-of-accessibility">Understanding the Four Principles of Accessibility</a>. </p> </li> <li> <p><strong>Guidelines</strong> - Under the principles are guidelines. The 13 guidelines provide the basic goals that authors should work toward in order to make content more accessible to users with different disabilities. The guidelines are not testable, but provide the framework and overall objectives to help authors understand the success criteria and better implement the techniques. </p> </li> <li> <p><strong>Success Criteria</strong> - For each guideline, testable success criteria are provided to allow WCAG 2.1 to be used where requirements and conformance testing are necessary such as in design specification, purchasing, regulation, and contractual agreements. In order to meet the needs of different groups and different situations, three levels of conformance are defined: A (lowest), AA, and AAA (highest). Additional information on WCAG levels can be found in <a href="https://www.w3.org/WAI/WCAG21/Understanding/conformance#levels">Understanding Levels of Conformance</a>. </p> </li> <li> <p><strong>Sufficient and Advisory Techniques</strong> - For each of the <em>guidelines</em> and <em>success criteria</em> in the WCAG 2.1 document itself, the working group has also documented a wide variety of <em>techniques</em>. The techniques are informative and fall into two categories: those that are <em>sufficient</em> for meeting the success criteria and those that are <em>advisory</em>. The advisory techniques go beyond what is required by the individual success criteria and allow authors to better address the guidelines. Some advisory techniques address accessibility barriers that are not covered by the testable success criteria. Where common failures are known, these are also documented. See also <a href="https://www.w3.org/WAI/WCAG21/Understanding/understanding-techniques">Sufficient and Advisory Techniques in Understanding WCAG 2.1</a>. </p> </li> </ul> <p>All of these layers of guidance (principles, guidelines, success criteria, and sufficient and advisory techniques) work together to provide guidance on how to make content more accessible. Authors are encouraged to view and apply all layers that they are able to, including the advisory techniques, in order to best address the needs of the widest possible range of users. </p> <p>Note that even content that conforms at the highest level (AAA) will not be accessible to individuals with all types, degrees, or combinations of disability, particularly in the cognitive language and learning areas. Authors are encouraged to consider the full range of techniques, including the advisory techniques, as well as to seek relevant advice about current best practice to ensure that Web content is accessible, as far as possible, to this community. <a href="https://www.w3.org/WAI/WCAG21/Understanding/understanding-metadata">Metadata</a> may assist users in finding content most suitable for their needs. </p> </section> <section id="wcag-2-1-supporting-documents"><div class="header-wrapper"><h3 id="wcag-2-1-supporting-documents-0">WCAG 2.1 Supporting Documents</h3><a class="self-link" href="#wcag-2-1-supporting-documents" aria-label="Permalink for this Section"></a></div> <p>The WCAG 2.1 document is designed to meet the needs of those who need a stable, referenceable technical standard. Other documents, called supporting documents, are based on the WCAG 2.1 document and address other important purposes, including the ability to be updated to describe how WCAG would be applied with new technologies. Supporting documents include: </p> <ol class="enumar"> <li> <p><strong><a href="https://www.w3.org/WAI/WCAG21/quickref/">How to Meet WCAG 2.1</a></strong> - A customizable quick reference to WCAG 2.1 that includes all of the guidelines, success criteria, and techniques for authors to use as they are developing and evaluating Web content. This includes content from WCAG 2.0 and WCAG 2.1 and can be filtered in many ways to help authors focus on relevant content. </p> </li> <li> <p><strong><a href="https://www.w3.org/WAI/WCAG21/Understanding/">Understanding WCAG 2.1</a></strong> - A guide to understanding and implementing WCAG 2.1. There is a short "Understanding" document for each guideline and success criterion in WCAG 2.1 as well as key topics. </p> </li> <li> <p><strong><a href="https://www.w3.org/WAI/WCAG21/Techniques/">Techniques for WCAG 2.1</a></strong> - A collection of techniques and common failures, each in a separate document that includes a description, examples, code and tests. </p> </li> <li> <p><strong><a href="https://www.w3.org/WAI/standards-guidelines/wcag/docs/">The WCAG Documents</a></strong> - A diagram and description of how the technical documents are related and linked. </p> </li> </ol> <p>See <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web Content Accessibility Guidelines (WCAG) Overview</a> for a description of the WCAG 2.1 supporting material, including education resources related to WCAG 2. Additional resources covering topics such as the business case for Web accessibility, planning implementation to improve the accessibility of Web sites, and accessibility policies are listed in <a href="https://www.w3.org/WAI/Resources/Overview">WAI Resources</a>. </p> </section> <section id="requirements-for-wcag-2-1"><div class="header-wrapper"><h3 id="requirements-for-wcag-2-1-0">Requirements for WCAG 2.1</h3><a class="self-link" href="#requirements-for-wcag-2-1" aria-label="Permalink for this Section"></a></div> <p>WCAG 2.1 meets a set of <a href="https://w3c.github.io/wcag21/requirements/">requirements for WCAG 2.1</a> which, in turn, inherit requirements from WCAG 2.0. Requirements structure the overall framework of guidelines and ensure backwards compatibility. The Working Group also used a less formal set of acceptance criteria for success criteria, to help ensure success criteria are similar in style and quality to those in WCAG 2.0. These requirements constrained what could be included in WCAG 2.1. This constraint was important to preserve its nature as a dot-release of WCAG 2. </p> </section> <section id="comparison-with-wcag-2-0"><div class="header-wrapper"><h3 id="comparison-with-wcag-2-0-0">Comparison with WCAG 2.0</h3><a class="self-link" href="#comparison-with-wcag-2-0" aria-label="Permalink for this Section"></a></div> <p>WCAG 2.1 was initiated with the goal to improve accessibility guidance for three major groups: users with cognitive or learning disabilities, users with low vision, and users with disabilities on mobile devices. Many ways to meet these needs were proposed and evaluated, and a set of these were refined by the Working Group. Structural requirements inherited from WCAG 2.0, clarity and impact of proposals, and timeline led to the final set of success criteria included in this version. The Working Group considers that WCAG 2.1 incrementally advances web content accessibility guidance for all these areas, but underscores that not all user needs are met by these guidelines. </p> <p>WCAG 2.1 builds on and is backwards compatible with WCAG 2.0, meaning web pages that conform to WCAG 2.1 also conform to WCAG 2.0. Authors that are required by policy to conform with WCAG 2.0 will be able to update content to WCAG 2.1 without losing conformance with WCAG 2.0. Authors following both sets of guidelines should be aware of the following differences: </p> <section id="new-features-in-wcag-2-1"><div class="header-wrapper"><h4 id="new-features-in-wcag-2-1-0">New Features in WCAG 2.1</h4><a class="self-link" href="#new-features-in-wcag-2-1" aria-label="Permalink for this Section"></a></div> <p>WCAG 2.1 extends WCAG 2.0 by adding new success criteria, definitions to support them, guidelines to organize the additions, and a couple additions to the conformance section. This additive approach helps to make it clear that sites which conform to WCAG 2.1 also conform to WCAG 2.0, thereby meeting conformance obligations that are specific to WCAG 2.0. The Accessibility Guidelines Working Group recommends that sites adopt WCAG 2.1 as their new conformance target, even if formal obligations mention WCAG 2.0, to provide improved accessibility and to anticipate future policy changes. </p> <p>The following Success Criteria are new in WCAG 2.1:</p> <ul> <li>1.3.4 <a href="#orientation">Orientation</a> (AA) </li> <li>1.3.5 <a href="#identify-input-purpose">Identify Input Purpose</a> (AA) </li> <li>1.3.6 <a href="#identify-purpose">Identify Purpose</a> (AAA) </li> <li>1.4.10 <a href="#reflow">Reflow</a> (AA) </li> <li>1.4.11 <a href="#non-text-contrast">Non-Text Contrast</a> (AA) </li> <li>1.4.12 <a href="#text-spacing">Text Spacing</a> (AA) </li> <li>1.4.13 <a href="#content-on-hover-or-focus">Content on Hover or Focus</a> (AA) </li> <li>2.1.4 <a href="#character-key-shortcuts">Character Key Shortcuts</a> (A) </li> <li>2.2.6 <a href="#timeouts">Timeouts</a> (AAA) </li> <li>2.3.3 <a href="#animation-from-interactions">Animation from Interactions</a> (AAA) </li> <li>2.5.1 <a href="#pointer-gestures">Pointer Gestures</a> (A) </li> <li>2.5.2 <a href="#pointer-cancellation">Pointer Cancellation</a> (A) </li> <li>2.5.3 <a href="#label-in-name">Label in Name</a> (A) </li> <li>2.5.4 <a href="#motion-actuation">Motion Actuation</a> (A) </li> <li>2.5.5 <a href="#target-size">Target Size</a> (AAA) </li> <li>2.5.6 <a href="#concurrent-input-mechanisms">Concurrent Input Mechanisms</a> (AAA) </li> <li>4.1.3 <a href="#status-messages">Status Messages</a> (AA) </li> </ul> <p>The new success criteria may reference new terms that have also been added to the glossary and form part of the normative requirements of the success criteria. </p> <p>In the Conformance section, a third note about page variants has been added to <a href="#cc2">Full Pages</a>, and an option for machine-readable metadata added to <a href="#conformance-optional">Optional Components of a Conformance Claim</a>. </p> </section> <section id="numbering-in-wcag-2-1"><div class="header-wrapper"><h4 id="numbering-in-wcag-2-1-0">Numbering in WCAG 2.1</h4><a class="self-link" href="#numbering-in-wcag-2-1" aria-label="Permalink for this Section"></a></div> <p>In order to avoid confusion for implementers for whom backwards compatibility to WCAG 2.0 is important, new success criteria in WCAG 2.1 have been appended to the end of the set of success criteria within their guideline. This avoids the need to change the section number of success criteria from WCAG 2.0, which would be caused by inserting new success criteria between existing success criteria in the guideline, but it means success criteria in each guideline are no longer grouped by conformance level. The order of success criteria within each guideline does not imply information about conformance level; only the conformance level indicator (A / AA / AAA) on the success criterion itself indicates this. The <a href="https://www.w3.org/WAI/WCAG21/quickref/">WCAG 2.1 Quick Reference</a> provides ways to view success criteria grouped by conformance level, along with many other filter and sort options. </p> </section> <section id="conformance-to-wcag-2-1"><div class="header-wrapper"><h4 id="conformance-to-wcag-2-1-0">Conformance to WCAG 2.1</h4><a class="self-link" href="#conformance-to-wcag-2-1" aria-label="Permalink for this Section"></a></div> <p>WCAG 2.1 uses the same conformance model as WCAG 2.0 with a couple additions, which is described in the <a href="#conformance">Conformance</a> section. It is intended that sites that conform to WCAG 2.1 also conform to WCAG 2.0, which means they meet the requirements of any policies that reference WCAG 2.0, while also better meeting the needs of users on the current Web. </p> </section> </section> <section id="later-versions-of-accessibility-guidelines"><div class="header-wrapper"><h3 id="later-versions-of-accessibility-guidelines-0">Later Versions of Accessibility Guidelines</h3><a class="self-link" href="#later-versions-of-accessibility-guidelines" aria-label="Permalink for this Section"></a></div> <p>In parallel with WCAG 2.1, the Accessibility Guidelines Working Group is developing another major version of accessibility guidelines. The result of this work is expected to be a more substantial restructuring of web accessibility guidance than would be realistic for dot-releases of WCAG 2. The work follows a research-focused, user-centered design methodology to produce the most effective and flexible outcome, including the roles of content authoring, user agent support, and authoring tool support. This is a multi-year effort, so WCAG 2.1 is needed as an interim measure to provide updated web accessibility guidance to reflect changes on the web since the publication of WCAG 2.0. The Working Group might also develop additional interim versions, continuing with WCAG 2.2, on a similar short timeline to provide additional support while the major version is completed. </p> </section> </section> <section class="principle" id="perceivable"><div class="header-wrapper"><h2 id="x1-perceivable"><bdi class="secno">1. </bdi> Perceivable </h2><a class="self-link" href="#perceivable" aria-label="Permalink for Section 1."></a></div> <p>Information and user interface components must be presentable to users in ways they can perceive. </p> <section class="guideline" id="text-alternatives"><div class="header-wrapper"><h3 id="x1-1-text-alternatives"><bdi class="secno">Guideline 1.1 </bdi>Text Alternatives</h3><a class="self-link" href="#text-alternatives" aria-label="Permalink for Section 1.1"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/text-alternatives.html">Understanding Text Alternatives</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#text-alternatives">How to Meet Text Alternatives</a></div><p>Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language. </p> <section class="guideline" id="non-text-content"><div class="header-wrapper"><h4 id="x1-1-1-non-text-content"><bdi class="secno">Success Criterion 1.1.1 </bdi>Non-text Content</h4><a class="self-link" href="#non-text-content" aria-label="Permalink for Section 1.1.1"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html">Understanding Non-text Content</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#non-text-content">How to Meet Non-text Content</a></div><p class="conformance-level">(Level A)</p> <p>All <a href="#dfn-non-text-content" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-non-text-content-1" title="any content that is not a sequence of characters that can be programmatically determined or where the sequence is not expressing something in human language">non-text content</a> that is presented to the user has a <a href="#dfn-text-alternative" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-text-alternative-1" title="Text that is programmatically associated with non-text content or referred to from text that is programmatically associated with non-text content. Programmatically associated text is text whose location can be programmatically determined from the non-text content.">text alternative</a> that serves the equivalent purpose, except for the situations listed below. </p> <dl> <dt>Controls, Input</dt> <dd> <p>If non-text content is a control or accepts user input, then it has a <a href="#dfn-name" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-name-1" title="text by which software can identify a component within Web content to the user">name</a> that describes its purpose. (Refer to <a href="#name-role-value">Success Criterion 4.1.2</a> for additional requirements for controls and content that accepts user input.) </p> </dd> <dt>Time-Based Media</dt> <dd> <p>If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content. (Refer to <a href="#time-based-media">Guideline 1.2</a> for additional requirements for media.) </p> </dd> <dt>Test</dt> <dd> <p>If non-text content is a test or exercise that would be invalid if presented in <a href="#dfn-text" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-text-1" title="sequence of characters that can be programmatically determined, where the sequence is expressing something in human language">text</a>, then text alternatives at least provide descriptive identification of the non-text content. </p> </dd> <dt>Sensory</dt> <dd> <p>If non-text content is primarily intended to create a <a href="#dfn-specific-sensory-experience" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-specific-sensory-experience-1" title="a sensory experience that is not purely decorative and does not primarily convey important information or perform a function">specific sensory experience</a>, then text alternatives at least provide descriptive identification of the non-text content. </p> </dd> <dt><a href="#dfn-captcha" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-captcha-1" title="initialism for "Completely Automated Public Turing test to tell Computers and Humans Apart"">CAPTCHA</a></dt> <dd> <p>If the purpose of non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided to accommodate different disabilities. </p> </dd> <dt>Decoration, Formatting, Invisible</dt> <dd> <p>If non-text content is <a href="#dfn-pure-decoration" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-pure-decoration-1" title="serving only an aesthetic purpose, providing no information, and having no functionality">pure decoration</a>, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-1" title="hardware and/or software that acts as a user agent, or along with a mainstream user agent, to provide functionality to meet the requirements of users with disabilities that go beyond those offered by mainstream user agents">assistive technology</a>. </p> </dd> </dl> </section> </section> <section class="guideline" id="time-based-media"><div class="header-wrapper"><h3 id="x1-2-time-based-media"><bdi class="secno">Guideline 1.2 </bdi>Time-based Media</h3><a class="self-link" href="#time-based-media" aria-label="Permalink for Section 1.2"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/time-based-media.html">Understanding Time-based Media</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#time-based-media">How to Meet Time-based Media</a></div><p>Provide alternatives for time-based media.</p> <section class="guideline" id="audio-only-and-video-only-prerecorded"><div class="header-wrapper"><h4 id="x1-2-1-audio-only-and-video-only-prerecorded"><bdi class="secno">Success Criterion 1.2.1 </bdi>Audio-only and Video-only (Prerecorded)</h4><a class="self-link" href="#audio-only-and-video-only-prerecorded" aria-label="Permalink for Section 1.2.1"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/audio-only-and-video-only-prerecorded.html">Understanding Audio-only and Video-only (Prerecorded)</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#audio-only-and-video-only-prerecorded">How to Meet Audio-only and Video-only (Prerecorded)</a></div><p class="conformance-level">(Level A)</p> <p>For <a href="#dfn-prerecorded" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-prerecorded-1" title="information that is not live">prerecorded</a> <a href="#dfn-audio-only" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-audio-only-1" title="a time-based presentation that contains only audio (no video and no interaction)">audio-only</a> and prerecorded <a href="#dfn-video-only" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-video-only-1" title="a time-based presentation that contains only video (no audio and no interaction)">video-only</a> media, the following are true, except when the audio or video is a <a href="#dfn-media-alternative-for-text" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-media-alternative-for-text-1" title="media that presents no more information than is already presented in text (directly or via text alternatives)">media alternative for text</a> and is clearly labeled as such: </p> <dl> <dt>Prerecorded Audio-only</dt> <dd> <p>An <a href="#dfn-alternative-for-time-based-media" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-alternative-for-time-based-media-1" title="document including correctly sequenced text descriptions of time-based visual and auditory information and providing a means for achieving the outcomes of any time-based interaction">alternative for time-based media</a> is provided that presents equivalent information for prerecorded audio-only content. </p> </dd> <dt>Prerecorded Video-only</dt> <dd> <p>Either an alternative for time-based media or an audio track is provided that presents equivalent information for prerecorded video-only content. </p> </dd> </dl> </section> <section class="guideline" id="captions-prerecorded"><div class="header-wrapper"><h4 id="x1-2-2-captions-prerecorded"><bdi class="secno">Success Criterion 1.2.2 </bdi>Captions (Prerecorded)</h4><a class="self-link" href="#captions-prerecorded" aria-label="Permalink for Section 1.2.2"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/captions-prerecorded.html">Understanding Captions (Prerecorded)</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#captions-prerecorded">How to Meet Captions (Prerecorded)</a></div><p class="conformance-level">(Level A)</p> <p><a href="#dfn-captions" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-captions-1" title="synchronized visual and/or text alternative for both speech and non-speech audio information needed to understand the media content">Captions</a> are provided for all <a href="#dfn-prerecorded" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-prerecorded-2" title="information that is not live">prerecorded</a> <a href="#dfn-audio" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-audio-1" title="the technology of sound reproduction">audio</a> content in <a href="#dfn-synchronized-media" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-synchronized-media-1" title="audio or video synchronized with another format for presenting information and/or with time-based interactive components, unless the media is a media alternative for text that is clearly labeled as such">synchronized media</a>, except when the media is a <a href="#dfn-media-alternative-for-text" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-media-alternative-for-text-2" title="media that presents no more information than is already presented in text (directly or via text alternatives)">media alternative for text</a> and is clearly labeled as such. </p> </section> <section class="guideline" id="audio-description-or-media-alternative-prerecorded"><div class="header-wrapper"><h4 id="x1-2-3-audio-description-or-media-alternative-prerecorded"><bdi class="secno">Success Criterion 1.2.3 </bdi>Audio Description or Media Alternative (Prerecorded)</h4><a class="self-link" href="#audio-description-or-media-alternative-prerecorded" aria-label="Permalink for Section 1.2.3"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/audio-description-or-media-alternative-prerecorded.html">Understanding Audio Description or Media Alternative (Prerecorded)</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#audio-description-or-media-alternative-prerecorded">How to Meet Audio Description or Media Alternative (Prerecorded)</a></div><p class="conformance-level">(Level A)</p> <p>An <a href="#dfn-alternative-for-time-based-media" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-alternative-for-time-based-media-2" title="document including correctly sequenced text descriptions of time-based visual and auditory information and providing a means for achieving the outcomes of any time-based interaction">alternative for time-based media</a> or <a href="#dfn-audio-descriptions" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-audio-descriptions-1" title="narration added to the soundtrack to describe important visual details that cannot be understood from the main soundtrack alone">audio description</a> of the <a href="#dfn-prerecorded" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-prerecorded-3" title="information that is not live">prerecorded</a> <a href="#dfn-video" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-video-1" title="the technology of moving or sequenced pictures or images">video</a> content is provided for <a href="#dfn-synchronized-media" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-synchronized-media-2" title="audio or video synchronized with another format for presenting information and/or with time-based interactive components, unless the media is a media alternative for text that is clearly labeled as such">synchronized media</a>, except when the media is a <a href="#dfn-media-alternative-for-text" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-media-alternative-for-text-3" title="media that presents no more information than is already presented in text (directly or via text alternatives)">media alternative for text</a> and is clearly labeled as such. </p> </section> <section class="guideline" id="captions-live"><div class="header-wrapper"><h4 id="x1-2-4-captions-live"><bdi class="secno">Success Criterion 1.2.4 </bdi>Captions (Live)</h4><a class="self-link" href="#captions-live" aria-label="Permalink for Section 1.2.4"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/captions-live.html">Understanding Captions (Live)</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#captions-live">How to Meet Captions (Live)</a></div><p class="conformance-level">(Level AA)</p> <p><a href="#dfn-captions" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-captions-2" title="synchronized visual and/or text alternative for both speech and non-speech audio information needed to understand the media content">Captions</a> are provided for all <a href="#dfn-live" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-live-1" title="information captured from a real-world event and transmitted to the receiver with no more than a broadcast delay">live</a> <a href="#dfn-audio" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-audio-2" title="the technology of sound reproduction">audio</a> content in <a href="#dfn-synchronized-media" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-synchronized-media-3" title="audio or video synchronized with another format for presenting information and/or with time-based interactive components, unless the media is a media alternative for text that is clearly labeled as such">synchronized media</a>. </p> </section> <section class="guideline" id="audio-description-prerecorded"><div class="header-wrapper"><h4 id="x1-2-5-audio-description-prerecorded"><bdi class="secno">Success Criterion 1.2.5 </bdi>Audio Description (Prerecorded)</h4><a class="self-link" href="#audio-description-prerecorded" aria-label="Permalink for Section 1.2.5"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/audio-description-prerecorded.html">Understanding Audio Description (Prerecorded)</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#audio-description-prerecorded">How to Meet Audio Description (Prerecorded)</a></div><p class="conformance-level">(Level AA)</p> <p><a href="#dfn-audio-descriptions" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-audio-descriptions-2" title="narration added to the soundtrack to describe important visual details that cannot be understood from the main soundtrack alone">Audio description</a> is provided for all <a href="#dfn-prerecorded" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-prerecorded-4" title="information that is not live">prerecorded</a> <a href="#dfn-video" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-video-2" title="the technology of moving or sequenced pictures or images">video</a> content in <a href="#dfn-synchronized-media" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-synchronized-media-4" title="audio or video synchronized with another format for presenting information and/or with time-based interactive components, unless the media is a media alternative for text that is clearly labeled as such">synchronized media</a>. </p> </section> <section class="guideline" id="sign-language-prerecorded"><div class="header-wrapper"><h4 id="x1-2-6-sign-language-prerecorded"><bdi class="secno">Success Criterion 1.2.6 </bdi>Sign Language (Prerecorded)</h4><a class="self-link" href="#sign-language-prerecorded" aria-label="Permalink for Section 1.2.6"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/sign-language-prerecorded.html">Understanding Sign Language (Prerecorded)</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#sign-language-prerecorded">How to Meet Sign Language (Prerecorded)</a></div><p class="conformance-level">(Level AAA)</p> <p><a href="#dfn-sign-language-interpretation" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-sign-language-interpretation-1" title="translation of one language, generally a spoken language, into a sign language">Sign language interpretation</a> is provided for all <a href="#dfn-prerecorded" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-prerecorded-5" title="information that is not live">prerecorded</a> <a href="#dfn-audio" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-audio-3" title="the technology of sound reproduction">audio</a> content in <a href="#dfn-synchronized-media" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-synchronized-media-5" title="audio or video synchronized with another format for presenting information and/or with time-based interactive components, unless the media is a media alternative for text that is clearly labeled as such">synchronized media</a>. </p> </section> <section class="guideline" id="extended-audio-description-prerecorded"><div class="header-wrapper"><h4 id="x1-2-7-extended-audio-description-prerecorded"><bdi class="secno">Success Criterion 1.2.7 </bdi>Extended Audio Description (Prerecorded)</h4><a class="self-link" href="#extended-audio-description-prerecorded" aria-label="Permalink for Section 1.2.7"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/extended-audio-description-prerecorded.html">Understanding Extended Audio Description (Prerecorded)</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#extended-audio-description-prerecorded">How to Meet Extended Audio Description (Prerecorded)</a></div><p class="conformance-level">(Level AAA)</p> <p>Where pauses in foreground audio are insufficient to allow <a href="#dfn-audio-descriptions" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-audio-descriptions-3" title="narration added to the soundtrack to describe important visual details that cannot be understood from the main soundtrack alone">audio descriptions</a> to convey the sense of the video, <a href="#dfn-extended-audio-description" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-extended-audio-description-1" title="audio description that is added to an audiovisual presentation by pausing the video so that there is time to add additional description">extended audio description</a> is provided for all <a href="#dfn-prerecorded" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-prerecorded-6" title="information that is not live">prerecorded</a> <a href="#dfn-video" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-video-3" title="the technology of moving or sequenced pictures or images">video</a> content in <a href="#dfn-synchronized-media" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-synchronized-media-6" title="audio or video synchronized with another format for presenting information and/or with time-based interactive components, unless the media is a media alternative for text that is clearly labeled as such">synchronized media</a>. </p> </section> <section class="guideline" id="media-alternative-prerecorded"><div class="header-wrapper"><h4 id="x1-2-8-media-alternative-prerecorded"><bdi class="secno">Success Criterion 1.2.8 </bdi>Media Alternative (Prerecorded)</h4><a class="self-link" href="#media-alternative-prerecorded" aria-label="Permalink for Section 1.2.8"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/media-alternative-prerecorded.html">Understanding Media Alternative (Prerecorded)</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#media-alternative-prerecorded">How to Meet Media Alternative (Prerecorded)</a></div><p class="conformance-level">(Level AAA)</p> <p>An <a href="#dfn-alternative-for-time-based-media" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-alternative-for-time-based-media-3" title="document including correctly sequenced text descriptions of time-based visual and auditory information and providing a means for achieving the outcomes of any time-based interaction">alternative for time-based media</a> is provided for all <a href="#dfn-prerecorded" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-prerecorded-7" title="information that is not live">prerecorded</a> <a href="#dfn-synchronized-media" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-synchronized-media-7" title="audio or video synchronized with another format for presenting information and/or with time-based interactive components, unless the media is a media alternative for text that is clearly labeled as such">synchronized media</a> and for all prerecorded <a href="#dfn-video-only" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-video-only-2" title="a time-based presentation that contains only video (no audio and no interaction)">video-only</a> media. </p> </section> <section class="guideline" id="audio-only-live"><div class="header-wrapper"><h4 id="x1-2-9-audio-only-live"><bdi class="secno">Success Criterion 1.2.9 </bdi>Audio-only (Live)</h4><a class="self-link" href="#audio-only-live" aria-label="Permalink for Section 1.2.9"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/audio-only-live.html">Understanding Audio-only (Live)</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#audio-only-live">How to Meet Audio-only (Live)</a></div><p class="conformance-level">(Level AAA)</p> <p>An <a href="#dfn-alternative-for-time-based-media" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-alternative-for-time-based-media-4" title="document including correctly sequenced text descriptions of time-based visual and auditory information and providing a means for achieving the outcomes of any time-based interaction">alternative for time-based media</a> that presents equivalent information for <a href="#dfn-live" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-live-2" title="information captured from a real-world event and transmitted to the receiver with no more than a broadcast delay">live</a> <a href="#dfn-audio-only" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-audio-only-2" title="a time-based presentation that contains only audio (no video and no interaction)">audio-only</a> content is provided. </p> </section> </section> <section class="guideline" id="adaptable"><div class="header-wrapper"><h3 id="x1-3-adaptable"><bdi class="secno">Guideline 1.3 </bdi>Adaptable</h3><a class="self-link" href="#adaptable" aria-label="Permalink for Section 1.3"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/adaptable.html">Understanding Adaptable</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#adaptable">How to Meet Adaptable</a></div><p>Create content that can be presented in different ways (for example simpler layout) without losing information or structure. </p> <section class="guideline" id="info-and-relationships"><div class="header-wrapper"><h4 id="x1-3-1-info-and-relationships"><bdi class="secno">Success Criterion 1.3.1 </bdi>Info and Relationships</h4><a class="self-link" href="#info-and-relationships" aria-label="Permalink for Section 1.3.1"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html">Understanding Info and Relationships</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#info-and-relationships">How to Meet Info and Relationships</a></div><p class="conformance-level">(Level A)</p> <p>Information, <a href="#dfn-structure" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-structure-1" title="The way the parts of a Web page are organized in relation to each other; and The way a collection of Web pages is organized">structure</a>, and <a href="#dfn-relationships" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-relationships-1" title="meaningful associations between distinct pieces of content">relationships</a> conveyed through <a href="#dfn-presentation" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-presentation-1" title="rendering of the content in a form to be perceived by users">presentation</a> can be <a href="#dfn-programmatically-determinable" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-programmatically-determinable-1" title="determined by software from author-supplied data provided in a way that different user agents, including assistive technologies, can extract and present this information to users in different modalities">programmatically determined</a> or are available in text. </p> </section> <section class="guideline" id="meaningful-sequence"><div class="header-wrapper"><h4 id="x1-3-2-meaningful-sequence"><bdi class="secno">Success Criterion 1.3.2 </bdi>Meaningful Sequence</h4><a class="self-link" href="#meaningful-sequence" aria-label="Permalink for Section 1.3.2"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/meaningful-sequence.html">Understanding Meaningful Sequence</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#meaningful-sequence">How to Meet Meaningful Sequence</a></div><p class="conformance-level">(Level A)</p> <p>When the sequence in which content is presented affects its meaning, a <a href="#dfn-correct-reading-sequence" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-correct-reading-sequence-1" title="any sequence where words and paragraphs are presented in an order that does not change the meaning of the content">correct reading sequence</a> can be <a href="#dfn-programmatically-determinable" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-programmatically-determinable-2" title="determined by software from author-supplied data provided in a way that different user agents, including assistive technologies, can extract and present this information to users in different modalities">programmatically determined</a>. </p> </section> <section class="guideline" id="sensory-characteristics"><div class="header-wrapper"><h4 id="x1-3-3-sensory-characteristics"><bdi class="secno">Success Criterion 1.3.3 </bdi>Sensory Characteristics</h4><a class="self-link" href="#sensory-characteristics" aria-label="Permalink for Section 1.3.3"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/sensory-characteristics.html">Understanding Sensory Characteristics</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#sensory-characteristics">How to Meet Sensory Characteristics</a></div><p class="conformance-level">(Level A)</p> <p>Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, color, size, visual location, orientation, or sound. </p> <div class="note" role="note" id="issue-container-generatedID"><div role="heading" class="note-title marker" id="h-note" aria-level="5"><span>Note</span></div><p class="">For requirements related to color, refer to <a href="#distinguishable">Guideline 1.4</a>.</p></div> </section> <section class="guideline" id="orientation"><div class="header-wrapper"><h4 id="x1-3-4-orientation"><bdi class="secno">Success Criterion 1.3.4 </bdi>Orientation</h4><a class="self-link" href="#orientation" aria-label="Permalink for Section 1.3.4"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/orientation.html">Understanding Orientation</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#orientation">How to Meet Orientation</a></div><p class="conformance-level">(Level AA)</p> <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="#dfn-essential" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-essential-1" title="if removed, would fundamentally change the information or functionality of the content, and information and functionality cannot be achieved in another way that would conform">essential</a>.</p> <div class="note" role="note" id="issue-container-generatedID-0"><div role="heading" class="note-title marker" id="h-note-0" aria-level="5"><span>Note</span></div><p class="">Examples where a particular display orientation may be essential are a bank check, a piano application, slides for a projector or television, or virtual reality content where content is not necessarily restricted to landscape or portrait display orientation.</p></div> </section> <section class="guideline" id="identify-input-purpose"><div class="header-wrapper"><h4 id="x1-3-5-identify-input-purpose"><bdi class="secno">Success Criterion 1.3.5 </bdi>Identify Input Purpose</h4><a class="self-link" href="#identify-input-purpose" aria-label="Permalink for Section 1.3.5"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">Understanding Identify Input Purpose</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#identify-input-purpose">How to Meet Identify Input Purpose</a></div><p class="conformance-level">(Level AA)</p> <p>The purpose of each input field collecting information about the user can be <a href="#dfn-programmatically-determinable" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-programmatically-determinable-3" title="determined by software from author-supplied data provided in a way that different user agents, including assistive technologies, can extract and present this information to users in different modalities">programmatically determined</a> when:</p> <ul> <li>The input field serves a purpose identified in the <a href="#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> </section> <section class="guideline" id="identify-purpose"><div class="header-wrapper"><h4 id="x1-3-6-identify-purpose"><bdi class="secno">Success Criterion 1.3.6 </bdi>Identify Purpose</h4><a class="self-link" href="#identify-purpose" aria-label="Permalink for Section 1.3.6"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-purpose.html">Understanding Identify Purpose</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#identify-purpose">How to Meet Identify Purpose</a></div><p class="conformance-level">(Level AAA)</p> <p>In content implemented using markup languages, the purpose of <a href="#dfn-user-interface-components" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-user-interface-components-1" title="a part of the content that is perceived by users as a single control for a distinct function">user interface components</a>, icons, and <a href="#dfn-regions" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-regions-1" title="perceivable, programmatically determined section of content">regions</a> can be <a href="#dfn-programmatically-determinable" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-programmatically-determinable-4" title="determined by software from author-supplied data provided in a way that different user agents, including assistive technologies, can extract and present this information to users in different modalities">programmatically determined</a>.</p> </section> </section> <section class="guideline" id="distinguishable"><div class="header-wrapper"><h3 id="x1-4-distinguishable"><bdi class="secno">Guideline 1.4 </bdi>Distinguishable</h3><a class="self-link" href="#distinguishable" aria-label="Permalink for Section 1.4"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/distinguishable.html">Understanding Distinguishable</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#distinguishable">How to Meet Distinguishable</a></div><p>Make it easier for users to see and hear content including separating foreground from background. </p> <section class="guideline" id="use-of-color"><div class="header-wrapper"><h4 id="x1-4-1-use-of-color"><bdi class="secno">Success Criterion 1.4.1 </bdi>Use of Color</h4><a class="self-link" href="#use-of-color" aria-label="Permalink for Section 1.4.1"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html">Understanding Use of Color</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#use-of-color">How to Meet Use of Color</a></div><p class="conformance-level">(Level A)</p> <p>Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. </p> <div class="note" role="note" id="issue-container-generatedID-1"><div role="heading" class="note-title marker" id="h-note-1" aria-level="5"><span>Note</span></div><p class="">This success criterion addresses color perception specifically. Other forms of perception are covered in <a href="#adaptable">Guideline 1.3</a> including programmatic access to color and other visual presentation coding.</p></div> </section> <section class="guideline" id="audio-control"><div class="header-wrapper"><h4 id="x1-4-2-audio-control"><bdi class="secno">Success Criterion 1.4.2 </bdi>Audio Control</h4><a class="self-link" href="#audio-control" aria-label="Permalink for Section 1.4.2"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/audio-control.html">Understanding Audio Control</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#audio-control">How to Meet Audio Control</a></div><p class="conformance-level">(Level A)</p> <p>If any audio on a Web page plays automatically for more than 3 seconds, either a <a href="#dfn-mechanism" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-mechanism-1" title="process or technique for achieving a result">mechanism</a> is available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level. </p> <div class="note" role="note" id="issue-container-generatedID-2"><div role="heading" class="note-title marker" id="h-note-2" aria-level="5"><span>Note</span></div><p class="">Since any content that does not meet this success criterion can interfere with a user's ability to use the whole page, all content on the Web page (whether or not it is used to meet other success criteria) must meet this success criterion. See <a href="#cc5">Conformance Requirement 5: Non-Interference</a>. </p></div> </section> <section class="guideline" id="contrast-minimum"><div class="header-wrapper"><h4 id="x1-4-3-contrast-minimum"><bdi class="secno">Success Criterion 1.4.3 </bdi>Contrast (Minimum)</h4><a class="self-link" href="#contrast-minimum" aria-label="Permalink for Section 1.4.3"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html">Understanding Contrast (Minimum)</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum">How to Meet Contrast (Minimum)</a></div><p class="conformance-level">(Level AA)</p> <p>The visual presentation of <a href="#dfn-text" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-text-2" title="sequence of characters that can be programmatically determined, where the sequence is expressing something in human language">text</a> and <a href="#dfn-images-of-text" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-images-of-text-1" title="text that has been rendered in a non-text form (e.g., an image) in order to achieve a particular visual effect">images of text</a> has a <a href="#dfn-contrast-ratio" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-contrast-ratio-1" title="(L1 + 0.05) / (L2 + 0.05), where">contrast ratio</a> of at least 4.5:1, except for the following: </p> <dl> <dt>Large Text</dt> <dd> <p><a href="#dfn-large-scale" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-large-scale-1" title="with at least 18 point or 14 point bold or font size that would yield equivalent size for Chinese, Japanese and Korean (CJK) fonts">Large-scale</a> text and images of large-scale text have a contrast ratio of at least 3:1; </p> </dd> <dt>Incidental</dt> <dd> <p>Text or images of text that are part of an inactive <a href="#dfn-user-interface-components" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-user-interface-components-2" title="a part of the content that is perceived by users as a single control for a distinct function">user interface component</a>, that are <a href="#dfn-pure-decoration" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-pure-decoration-2" title="serving only an aesthetic purpose, providing no information, and having no functionality">pure decoration</a>, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement. </p> </dd> <dt>Logotypes</dt> <dd> <p>Text that is part of a logo or brand name has no contrast requirement.</p> </dd> </dl> </section> <section class="guideline" id="resize-text"><div class="header-wrapper"><h4 id="x1-4-4-resize-text"><bdi class="secno">Success Criterion 1.4.4 </bdi>Resize Text</h4><a class="self-link" href="#resize-text" aria-label="Permalink for Section 1.4.4"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html">Understanding Resize Text</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#resize-text">How to Meet Resize Text</a></div><p class="conformance-level">(Level AA)</p> <p>Except for <a href="#dfn-captions" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-captions-3" title="synchronized visual and/or text alternative for both speech and non-speech audio information needed to understand the media content">captions</a> and <a href="#dfn-images-of-text" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-images-of-text-2" title="text that has been rendered in a non-text form (e.g., an image) in order to achieve a particular visual effect">images of text</a>, <a href="#dfn-text" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-text-3" title="sequence of characters that can be programmatically determined, where the sequence is expressing something in human language">text</a> can be resized without <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-2" title="hardware and/or software that acts as a user agent, or along with a mainstream user agent, to provide functionality to meet the requirements of users with disabilities that go beyond those offered by mainstream user agents">assistive technology</a> up to 200 percent without loss of content or functionality. </p> </section> <section class="guideline" id="images-of-text"><div class="header-wrapper"><h4 id="x1-4-5-images-of-text"><bdi class="secno">Success Criterion 1.4.5 </bdi>Images of Text</h4><a class="self-link" href="#images-of-text" aria-label="Permalink for Section 1.4.5"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/images-of-text.html">Understanding Images of Text</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#images-of-text">How to Meet Images of Text</a></div><p class="conformance-level">(Level AA)</p> <p>If the technologies being used can achieve the visual presentation, <a href="#dfn-text" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-text-4" title="sequence of characters that can be programmatically determined, where the sequence is expressing something in human language">text</a> is used to convey information rather than <a href="#dfn-images-of-text" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-images-of-text-3" title="text that has been rendered in a non-text form (e.g., an image) in order to achieve a particular visual effect">images of text</a> except for the following: </p> <dl> <dt>Customizable</dt> <dd> <p>The image of text can be <a href="#dfn-visually-customized" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-visually-customized-1" title="the font, size, color, and background can be set">visually customized</a> to the user's requirements; </p> </dd> <dt>Essential</dt> <dd> <p>A particular presentation of text is <a href="#dfn-essential" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-essential-2" title="if removed, would fundamentally change the information or functionality of the content, and information and functionality cannot be achieved in another way that would conform">essential</a> to the information being conveyed. </p> </dd> </dl> <div class="note" role="note" id="issue-container-generatedID-3"><div role="heading" class="note-title marker" id="h-note-3" aria-level="5"><span>Note</span></div><p class="">Logotypes (text that is part of a logo or brand name) are considered essential.</p></div> </section> <section class="guideline" id="contrast-enhanced"><div class="header-wrapper"><h4 id="x1-4-6-contrast-enhanced"><bdi class="secno">Success Criterion 1.4.6 </bdi>Contrast (Enhanced)</h4><a class="self-link" href="#contrast-enhanced" aria-label="Permalink for Section 1.4.6"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhanced.html">Understanding Contrast (Enhanced)</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#contrast-enhanced">How to Meet Contrast (Enhanced)</a></div><p class="conformance-level">(Level AAA)</p> <p>The visual presentation of <a href="#dfn-text" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-text-5" title="sequence of characters that can be programmatically determined, where the sequence is expressing something in human language">text</a> and <a href="#dfn-images-of-text" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-images-of-text-4" title="text that has been rendered in a non-text form (e.g., an image) in order to achieve a particular visual effect">images of text</a> has a <a href="#dfn-contrast-ratio" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-contrast-ratio-2" title="(L1 + 0.05) / (L2 + 0.05), where">contrast ratio</a> of at least 7:1, except for the following: </p> <dl> <dt>Large Text</dt> <dd> <p><a href="#dfn-large-scale" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-large-scale-2" title="with at least 18 point or 14 point bold or font size that would yield equivalent size for Chinese, Japanese and Korean (CJK) fonts">Large-scale</a> text and images of large-scale text have a contrast ratio of at least 4.5:1; </p> </dd> <dt>Incidental</dt> <dd> <p>Text or images of text that are part of an inactive <a href="#dfn-user-interface-components" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-user-interface-components-3" title="a part of the content that is perceived by users as a single control for a distinct function">user interface component</a>, that are <a href="#dfn-pure-decoration" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-pure-decoration-3" title="serving only an aesthetic purpose, providing no information, and having no functionality">pure decoration</a>, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement. </p> </dd> <dt>Logotypes</dt> <dd> <p>Text that is part of a logo or brand name has no contrast requirement.</p> </dd> </dl> </section> <section class="guideline" id="low-or-no-background-audio"><div class="header-wrapper"><h4 id="x1-4-7-low-or-no-background-audio"><bdi class="secno">Success Criterion 1.4.7 </bdi>Low or No Background Audio</h4><a class="self-link" href="#low-or-no-background-audio" aria-label="Permalink for Section 1.4.7"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/low-or-no-background-audio.html">Understanding Low or No Background Audio</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#low-or-no-background-audio">How to Meet Low or No Background Audio</a></div><p class="conformance-level">(Level AAA)</p> <p>For <a href="#dfn-prerecorded" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-prerecorded-8" title="information that is not live">prerecorded</a> <a href="#dfn-audio-only" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-audio-only-3" title="a time-based presentation that contains only audio (no video and no interaction)">audio-only</a> content that (1) contains primarily speech in the foreground, (2) is not an audio <a href="#dfn-captcha" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-captcha-2" title="initialism for "Completely Automated Public Turing test to tell Computers and Humans Apart"">CAPTCHA</a> or audio logo, and (3) is not vocalization intended to be primarily musical expression such as singing or rapping, at least one of the following is true: </p> <dl> <dt>No Background</dt> <dd> <p>The audio does not contain background sounds.</p> </dd> <dt>Turn Off</dt> <dd> <p>The background sounds can be turned off.</p> </dd> <dt>20 dB</dt> <dd> <p>The background sounds are at least 20 decibels lower than the foreground speech content, with the exception of occasional sounds that last for only one or two seconds. </p> <div class="note" role="note" id="issue-container-generatedID-4"><div role="heading" class="note-title marker" id="h-note-4" aria-level="5"><span>Note</span></div><p class="">Per the definition of "decibel," background sound that meets this requirement will be approximately four times quieter than the foreground speech content. </p></div> </dd> </dl> </section> <section class="guideline" id="visual-presentation"><div class="header-wrapper"><h4 id="x1-4-8-visual-presentation"><bdi class="secno">Success Criterion 1.4.8 </bdi>Visual Presentation</h4><a class="self-link" href="#visual-presentation" aria-label="Permalink for Section 1.4.8"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/visual-presentation.html">Understanding Visual Presentation</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#visual-presentation">How to Meet Visual Presentation</a></div><p class="conformance-level">(Level AAA)</p> <p>For the visual presentation of <a href="#dfn-blocks-of-text" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-blocks-of-text-1" title="more than one sentence of text">blocks of text</a>, a <a href="#dfn-mechanism" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-mechanism-2" title="process or technique for achieving a result">mechanism</a> is available to achieve the following: </p> <ul> <li>Foreground and background colors can be selected by the user.</li> <li>Width is no more than 80 characters or glyphs (40 if CJK).</li> <li>Text is not justified (aligned to both the left and the right margins).</li> <li>Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.</li> <li>Text can be resized without assistive technology up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text <a href="#dfn-on-a-full-screen-window" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-on-a-full-screen-window-1" title="on the most common sized desktop/laptop display with the viewport maximized">on a full-screen window</a>.</li> </ul> </section> <section class="guideline" id="images-of-text-no-exception"><div class="header-wrapper"><h4 id="x1-4-9-images-of-text-no-exception"><bdi class="secno">Success Criterion 1.4.9 </bdi>Images of Text (No Exception)</h4><a class="self-link" href="#images-of-text-no-exception" aria-label="Permalink for Section 1.4.9"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/images-of-text-no-exception.html">Understanding Images of Text (No Exception)</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#images-of-text-no-exception">How to Meet Images of Text (No Exception)</a></div><p class="conformance-level">(Level AAA)</p> <p><a href="#dfn-images-of-text" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-images-of-text-5" title="text that has been rendered in a non-text form (e.g., an image) in order to achieve a particular visual effect">Images of text</a> are only used for <a href="#dfn-pure-decoration" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-pure-decoration-4" title="serving only an aesthetic purpose, providing no information, and having no functionality">pure decoration</a> or where a particular presentation of <a href="#dfn-text" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-text-6" title="sequence of characters that can be programmatically determined, where the sequence is expressing something in human language">text</a> is <a href="#dfn-essential" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-essential-3" title="if removed, would fundamentally change the information or functionality of the content, and information and functionality cannot be achieved in another way that would conform">essential</a> to the information being conveyed. </p> <div class="note" role="note" id="issue-container-generatedID-5"><div role="heading" class="note-title marker" id="h-note-5" aria-level="5"><span>Note</span></div><p class="">Logotypes (text that is part of a logo or brand name) are considered essential.</p></div> </section> <section class="guideline" id="reflow"><div class="header-wrapper"><h4 id="x1-4-10-reflow"><bdi class="secno">Success Criterion 1.4.10 </bdi>Reflow</h4><a class="self-link" href="#reflow" aria-label="Permalink for Section 1.4.10"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/reflow.html">Understanding Reflow</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#reflow">How to Meet Reflow</a></div><p class="conformance-level">(Level AA)</p> <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="#dfn-css-pixels" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-css-pixels-1" title="visual angle of about 0.0213 degrees">CSS pixels</a>;</li> <li>Horizontal scrolling content at a height equivalent to 256 <a href="#dfn-css-pixels" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-css-pixels-2" title="visual angle of about 0.0213 degrees">CSS pixels</a>.</li> </ul> <p>Except for parts of the content which require two-dimensional layout for usage or meaning.</p> <div class="note" role="note" id="issue-container-generatedID-6"><div role="heading" class="note-title marker" id="h-note-6" aria-level="5"><span>Note</span></div><p class="">320 CSS pixels is equivalent to a starting viewport width of 1280 CSS pixels wide at 400% zoom. For web content which is designed to scroll horizontally (e.g., with vertical text), 256 CSS pixels is equivalent to a starting viewport height of 1024 CSS pixels at 400% zoom.</p></div> <div class="note" role="note" id="issue-container-generatedID-7"><div role="heading" class="note-title marker" id="h-note-7" aria-level="5"><span>Note</span></div><p class="">Examples of content which requires two-dimensional layout are images required for understanding (such as maps and diagrams), video, games, presentations, data tables (not individual cells), and interfaces where it is necessary to keep toolbars in view while manipulating content. It is acceptable to provide two-dimensional scrolling for such parts of the content.</p></div> </section> <section class="guideline" id="non-text-contrast"><div class="header-wrapper"><h4 id="x1-4-11-non-text-contrast"><bdi class="secno">Success Criterion 1.4.11 </bdi>Non-text Contrast</h4><a class="self-link" href="#non-text-contrast" aria-label="Permalink for Section 1.4.11"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">Understanding Non-text Contrast</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#non-text-contrast">How to Meet Non-text Contrast</a></div><p class="conformance-level">(Level AA)</p> <p>The visual <a href="#dfn-presentation" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-presentation-2" title="rendering of the content in a form to be perceived by users">presentation</a> of the following have a <a href="#dfn-contrast-ratio" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-contrast-ratio-3" title="(L1 + 0.05) / (L2 + 0.05), where">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="#dfn-user-interface-components" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-user-interface-components-4" title="a part of the content that is perceived by users as a single control for a distinct function">user interface components</a> and <a href="#dfn-states" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-states-1" title="dynamic property expressing characteristics of a user interface component that may change in response to user action or automated processes">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="#dfn-essential" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-essential-4" title="if removed, would fundamentally change the information or functionality of the content, and information and functionality cannot be achieved in another way that would conform">essential</a> to the information being conveyed.</dd> </dl> </section> <section class="guideline" id="text-spacing"><div class="header-wrapper"><h4 id="x1-4-12-text-spacing"><bdi class="secno">Success Criterion 1.4.12 </bdi>Text Spacing</h4><a class="self-link" href="#text-spacing" aria-label="Permalink for Section 1.4.12"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html">Understanding Text Spacing</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#text-spacing">How to Meet Text Spacing</a></div><p class="conformance-level">(Level AA)</p> <p>In content implemented using markup languages that support the following <a href="#dfn-text" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-text-7" title="sequence of characters that can be programmatically determined, where the sequence is expressing something in human language">text</a> <a href="#dfn-style-properties" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-style-properties-1" title="property whose value determines the presentation (e.g. font, color, size, location, padding, volume, synthesized speech prosody) of content elements as they are rendered (e.g. onscreen, via loudspeaker, via braille display) by user agents">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> </section> <section class="guideline" id="content-on-hover-or-focus"><div class="header-wrapper"><h4 id="x1-4-13-content-on-hover-or-focus"><bdi class="secno">Success Criterion 1.4.13 </bdi>Content on Hover or Focus</h4><a class="self-link" href="#content-on-hover-or-focus" aria-label="Permalink for Section 1.4.13"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html">Understanding Content on Hover or Focus</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#content-on-hover-or-focus">How to Meet Content on Hover or Focus</a></div><p class="conformance-level">(Level AA)</p> <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="#dfn-mechanism" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-mechanism-3" title="process or technique for achieving a result">mechanism</a> is available to dismiss the additional content without moving pointer hover or keyboard focus, unless the additional content communicates an <a href="#dfn-input-error" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-input-error-1" title="information provided by the user that is not accepted">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> <div class="note" role="note" id="issue-container-generatedID-8"><div role="heading" class="note-title marker" id="h-note-8" aria-level="5"><span>Note</span></div><p class="">Examples of additional content controlled by the user agent include browser tooltips created through use of the HTML <a href="https://www.w3.org/TR/html/dom.html#the-title-attribute"><code>title</code> attribute</a>.</p></div> <div class="note" role="note" id="issue-container-generatedID-9"><div role="heading" class="note-title marker" id="h-note-9" aria-level="5"><span>Note</span></div><p class="">Custom tooltips, sub-menus, and other nonmodal popups that display on hover and focus are examples of additional content covered by this criterion.</p></div> </section> </section> </section> <section class="principle" id="operable"><div class="header-wrapper"><h2 id="x2-operable"><bdi class="secno">2. </bdi>Operable </h2><a class="self-link" href="#operable" aria-label="Permalink for Section 2."></a></div> <p>User interface components and navigation must be operable.</p> <section class="guideline" id="keyboard-accessible"><div class="header-wrapper"><h3 id="x2-1-keyboard-accessible"><bdi class="secno">Guideline 2.1 </bdi>Keyboard Accessible</h3><a class="self-link" href="#keyboard-accessible" aria-label="Permalink for Section 2.1"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/keyboard-accessible.html">Understanding Keyboard Accessible</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#keyboard-accessible">How to Meet Keyboard Accessible</a></div><p>Make all functionality available from a keyboard.</p> <section class="guideline" id="keyboard"><div class="header-wrapper"><h4 id="x2-1-1-keyboard"><bdi class="secno">Success Criterion 2.1.1 </bdi>Keyboard</h4><a class="self-link" href="#keyboard" aria-label="Permalink for Section 2.1.1"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html">Understanding Keyboard</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#keyboard">How to Meet Keyboard</a></div><p class="conformance-level">(Level A)</p> <p>All <a href="#dfn-functionality" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-functionality-1" title="processes and outcomes achievable through user action">functionality</a> of the content is operable through a <a href="#dfn-keyboard-interface" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-keyboard-interface-1" title="interface used by software to obtain keystroke input">keyboard interface</a> without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints. </p> <div class="note" role="note" id="issue-container-generatedID-10"><div role="heading" class="note-title marker" id="h-note-10" aria-level="5"><span>Note</span></div><p class="">This exception relates to the underlying function, not the input technique. For example, if using handwriting to enter text, the input technique (handwriting) requires path-dependent input but the underlying function (text input) does not. </p></div> <div class="note" role="note" id="issue-container-generatedID-11"><div role="heading" class="note-title marker" id="h-note-11" aria-level="5"><span>Note</span></div><p class="">This does not forbid and should not discourage providing mouse input or other input methods in addition to keyboard operation. </p></div> </section> <section class="guideline" id="no-keyboard-trap"><div class="header-wrapper"><h4 id="x2-1-2-no-keyboard-trap"><bdi class="secno">Success Criterion 2.1.2 </bdi>No Keyboard Trap</h4><a class="self-link" href="#no-keyboard-trap" aria-label="Permalink for Section 2.1.2"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/no-keyboard-trap.html">Understanding No Keyboard Trap</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#no-keyboard-trap">How to Meet No Keyboard Trap</a></div><p class="conformance-level">(Level A)</p> <p>If keyboard focus can be moved to a component of the page using a <a href="#dfn-keyboard-interface" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-keyboard-interface-2" title="interface used by software to obtain keystroke input">keyboard interface</a>, then focus can be moved away from that component using only a keyboard interface, and, if it requires more than unmodified arrow or tab keys or other standard exit methods, the user is advised of the method for moving focus away. </p> <div class="note" role="note" id="issue-container-generatedID-12"><div role="heading" class="note-title marker" id="h-note-12" aria-level="5"><span>Note</span></div><p class="">Since any content that does not meet this success criterion can interfere with a user's ability to use the whole page, all content on the Web page (whether it is used to meet other success criteria or not) must meet this success criterion. See <a href="#cc5">Conformance Requirement 5: Non-Interference</a>. </p></div> </section> <section class="guideline" id="keyboard-no-exception"><div class="header-wrapper"><h4 id="x2-1-3-keyboard-no-exception"><bdi class="secno">Success Criterion 2.1.3 </bdi>Keyboard (No Exception)</h4><a class="self-link" href="#keyboard-no-exception" aria-label="Permalink for Section 2.1.3"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/keyboard-no-exception.html">Understanding Keyboard (No Exception)</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#keyboard-no-exception">How to Meet Keyboard (No Exception)</a></div><p class="conformance-level">(Level AAA)</p> <p>All <a href="#dfn-functionality" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-functionality-2" title="processes and outcomes achievable through user action">functionality</a> of the content is operable through a <a href="#dfn-keyboard-interface" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-keyboard-interface-3" title="interface used by software to obtain keystroke input">keyboard interface</a> without requiring specific timings for individual keystrokes. </p> </section> <section class="guideline" id="character-key-shortcuts"><div class="header-wrapper"><h4 id="x2-1-4-character-key-shortcuts"><bdi class="secno">Success Criterion 2.1.4 </bdi>Character Key Shortcuts</h4><a class="self-link" href="#character-key-shortcuts" aria-label="Permalink for Section 2.1.4"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/character-key-shortcuts.html">Understanding Character Key Shortcuts</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#character-key-shortcuts">How to Meet Character Key Shortcuts</a></div><p class="conformance-level">(Level A)</p> <p>If a <a href="#dfn-keyboard-shortcuts" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-keyboard-shortcuts-1" title="alternative means of triggering an action by the pressing of one or more keys">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="#dfn-mechanism" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-mechanism-4" title="process or technique for achieving a result">mechanism</a> is available to turn the shortcut off;</dd> <dt>Remap</dt> <dd>A mechanism is available to remap the shortcut to include one or more non-printable keyboard keys (e.g., Ctrl, Alt);</dd> <dt>Active only on focus</dt> <dd>The keyboard shortcut for a <a href="#dfn-user-interface-components" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-user-interface-components-5" title="a part of the content that is perceived by users as a single control for a distinct function">user interface component</a> is only active when that component has focus.</dd> </dl> </section> </section> <section class="guideline" id="enough-time"><div class="header-wrapper"><h3 id="x2-2-enough-time"><bdi class="secno">Guideline 2.2 </bdi>Enough Time</h3><a class="self-link" href="#enough-time" aria-label="Permalink for Section 2.2"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/enough-time.html">Understanding Enough Time</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#enough-time">How to Meet Enough Time</a></div><p>Provide users enough time to read and use content.</p> <section class="guideline" id="timing-adjustable"><div class="header-wrapper"><h4 id="x2-2-1-timing-adjustable"><bdi class="secno">Success Criterion 2.2.1 </bdi>Timing Adjustable</h4><a class="self-link" href="#timing-adjustable" aria-label="Permalink for Section 2.2.1"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/timing-adjustable.html">Understanding Timing Adjustable</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#timing-adjustable">How to Meet Timing Adjustable</a></div><p class="conformance-level">(Level A)</p> <p>For each time limit that is set by the content, at least one of the following is true:</p> <dl> <dt>Turn off</dt> <dd> <p>The user is allowed to turn off the time limit before encountering it; or</p> </dd> <dt>Adjust</dt> <dd> <p>The user is allowed to adjust the time limit before encountering it over a wide range that is at least ten times the length of the default setting; or </p> </dd> <dt>Extend</dt> <dd> <p>The user is warned before time expires and given at least 20 seconds to extend the time limit with a simple action (for example, "press the space bar"), and the user is allowed to extend the time limit at least ten times; or </p> </dd> <dt>Real-time Exception</dt> <dd> <p>The time limit is a required part of a real-time event (for example, an auction), and no alternative to the time limit is possible; or </p> </dd> <dt>Essential Exception</dt> <dd> <p>The time limit is <a href="#dfn-essential" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-essential-5" title="if removed, would fundamentally change the information or functionality of the content, and information and functionality cannot be achieved in another way that would conform">essential</a> and extending it would invalidate the activity; or </p> </dd> <dt>20 Hour Exception</dt> <dd> <p>The time limit is longer than 20 hours.</p> </dd> </dl> <div class="note" role="note" id="issue-container-generatedID-13"><div role="heading" class="note-title marker" id="h-note-13" aria-level="5"><span>Note</span></div><p class="">This success criterion helps ensure that users can complete tasks without unexpected changes in content or context that are a result of a time limit. This success criterion should be considered in conjunction with <a href="#on-focus">Success Criterion 3.2.1</a>, which puts limits on changes of content or context as a result of user action. </p></div> </section> <section class="guideline" id="pause-stop-hide"><div class="header-wrapper"><h4 id="x2-2-2-pause-stop-hide"><bdi class="secno">Success Criterion 2.2.2 </bdi>Pause, Stop, Hide</h4><a class="self-link" href="#pause-stop-hide" aria-label="Permalink for Section 2.2.2"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/pause-stop-hide.html">Understanding Pause, Stop, Hide</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#pause-stop-hide">How to Meet Pause, Stop, Hide</a></div><p class="conformance-level">(Level A)</p> <p>For moving, <a href="#dfn-blinking" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-blinking-1" title="switch back and forth between two visual states in a way that is meant to draw attention">blinking</a>, scrolling, or auto-updating information, all of the following are true: </p> <dl> <dt>Moving, blinking, scrolling</dt> <dd> <p>For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to <a href="#dfn-pause" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-pause-1" title="stopped by user request and not resumed until requested by user">pause</a>, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is <a href="#dfn-essential" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-essential-6" title="if removed, would fundamentally change the information or functionality of the content, and information and functionality cannot be achieved in another way that would conform">essential</a>; and </p> </dd> <dt>Auto-updating</dt> <dd> <p>For any auto-updating information that (1) starts automatically and (2) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update unless the auto-updating is part of an activity where it is essential. </p> </dd> </dl> <div class="note" role="note" id="issue-container-generatedID-14"><div role="heading" class="note-title marker" id="h-note-14" aria-level="5"><span>Note</span></div><p class="">For requirements related to flickering or flashing content, refer to <a href="#seizures-and-physical-reactions">Guideline 2.3</a>. </p></div> <div class="note" role="note" id="issue-container-generatedID-15"><div role="heading" class="note-title marker" id="h-note-15" aria-level="5"><span>Note</span></div><p class="">Since any content that does not meet this success criterion can interfere with a user's ability to use the whole page, all content on the Web page (whether it is used to meet other success criteria or not) must meet this success criterion. See <a href="#cc5">Conformance Requirement 5: Non-Interference</a>. </p></div> <div class="note" role="note" id="issue-container-generatedID-16"><div role="heading" class="note-title marker" id="h-note-16" aria-level="5"><span>Note</span></div><p class="">Content that is updated periodically by software or that is streamed to the user agent is not required to preserve or present information that is generated or received between the initiation of the pause and resuming presentation, as this may not be technically possible, and in many situations could be misleading to do so. </p></div> <div class="note" role="note" id="issue-container-generatedID-17"><div role="heading" class="note-title marker" id="h-note-17" aria-level="5"><span>Note</span></div><p class="">An animation that occurs as part of a preload phase or similar situation can be considered essential if interaction cannot occur during that phase for all users and if not indicating progress could confuse users or cause them to think that content was frozen or broken. </p></div> </section> <section class="guideline" id="no-timing"><div class="header-wrapper"><h4 id="x2-2-3-no-timing"><bdi class="secno">Success Criterion 2.2.3 </bdi>No Timing</h4><a class="self-link" href="#no-timing" aria-label="Permalink for Section 2.2.3"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/no-timing.html">Understanding No Timing</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#no-timing">How to Meet No Timing</a></div><p class="conformance-level">(Level AAA)</p> <p>Timing is not an <a href="#dfn-essential" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-essential-7" title="if removed, would fundamentally change the information or functionality of the content, and information and functionality cannot be achieved in another way that would conform">essential</a> part of the event or activity presented by the content, except for non-interactive <a href="#dfn-synchronized-media" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-synchronized-media-8" title="audio or video synchronized with another format for presenting information and/or with time-based interactive components, unless the media is a media alternative for text that is clearly labeled as such">synchronized media</a> and <a href="#dfn-real-time-events" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-real-time-events-1" title="event that a) occurs at the same time as the viewing and b) is not completely generated by the content">real-time events</a>. </p> </section> <section class="guideline" id="interruptions"><div class="header-wrapper"><h4 id="x2-2-4-interruptions"><bdi class="secno">Success Criterion 2.2.4 </bdi>Interruptions</h4><a class="self-link" href="#interruptions" aria-label="Permalink for Section 2.2.4"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/interruptions.html">Understanding Interruptions</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#interruptions">How to Meet Interruptions</a></div><p class="conformance-level">(Level AAA)</p> <p>Interruptions can be postponed or suppressed by the user, except interruptions involving an <a href="#dfn-emergency" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-emergency-1" title="a sudden, unexpected situation or occurrence that requires immediate action to preserve health, safety, or property">emergency</a>. </p> </section> <section class="guideline" id="re-authenticating"><div class="header-wrapper"><h4 id="x2-2-5-re-authenticating"><bdi class="secno">Success Criterion 2.2.5 </bdi>Re-authenticating</h4><a class="self-link" href="#re-authenticating" aria-label="Permalink for Section 2.2.5"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/re-authenticating.html">Understanding Re-authenticating</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#re-authenticating">How to Meet Re-authenticating</a></div><p class="conformance-level">(Level AAA)</p> <p>When an authenticated session expires, the user can continue the activity without loss of data after re-authenticating. </p> </section> <section class="guideline" id="timeouts"><div class="header-wrapper"><h4 id="x2-2-6-timeouts"><bdi class="secno">Success Criterion 2.2.6 </bdi>Timeouts</h4><a class="self-link" href="#timeouts" aria-label="Permalink for Section 2.2.6"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/timeouts.html">Understanding Timeouts</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#timeouts">How to Meet Timeouts</a></div><p class="conformance-level">(Level AAA)</p> <p>Users are warned of the duration of any <a href="#dfn-user-inactivity" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-user-inactivity-1" title="any continuous period of time where no user actions occur">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> <div class="note" role="note" id="issue-container-generatedID-18"><div role="heading" class="note-title marker" id="h-note-18" aria-level="5"><span>Note</span></div><p class="">Privacy regulations may require explicit user consent before user identification has been authenticated and before user data is preserved. In cases where the user is a minor, explicit consent may not be solicited in most jurisdictions, countries or regions. Consultation with privacy professionals and legal counsel is advised when considering data preservation as an approach to satisfy this success criterion.</p></div> </section> </section> <section class="guideline" id="seizures-and-physical-reactions"><div class="header-wrapper"><h3 id="x2-3-seizures-and-physical-reactions"><bdi class="secno">Guideline 2.3 </bdi>Seizures and Physical Reactions</h3><a class="self-link" href="#seizures-and-physical-reactions" aria-label="Permalink for Section 2.3"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/seizures-and-physical-reactions.html">Understanding Seizures and Physical Reactions</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#seizures-and-physical-reactions">How to Meet Seizures and Physical Reactions</a></div><p>Do not design content in a way that is known to cause seizures or physical reactions.</p> <section class="guideline" id="three-flashes-or-below-threshold"><div class="header-wrapper"><h4 id="x2-3-1-three-flashes-or-below-threshold"><bdi class="secno">Success Criterion 2.3.1 </bdi>Three Flashes or Below Threshold</h4><a class="self-link" href="#three-flashes-or-below-threshold" aria-label="Permalink for Section 2.3.1"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/three-flashes-or-below-threshold.html">Understanding Three Flashes or Below Threshold</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#three-flashes-or-below-threshold">How to Meet Three Flashes or Below Threshold</a></div><p class="conformance-level">(Level A)</p> <p><a href="#dfn-web-page-s" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-web-page-s-1" title="a non-embedded resource obtained from a single URI using HTTP plus any other resources that are used in the rendering or intended to be rendered together with it by a user agent">Web pages</a> do not contain anything that flashes more than three times in any one second period, or the <a href="#dfn-flashes" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-flashes-1" title="a pair of opposing changes in relative luminance that can cause seizures in some people if it is large enough and in the right frequency range">flash</a> is below the <a href="#dfn-general-flash-and-red-flash-thresholds" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-general-flash-and-red-flash-thresholds-1" title="a flash or rapidly changing image sequence is below the threshold (i.e., content passes) if any of the following are true:">general flash and red flash thresholds</a>. </p> <div class="note" role="note" id="issue-container-generatedID-19"><div role="heading" class="note-title marker" id="h-note-19" aria-level="5"><span>Note</span></div><p class="">Since any content that does not meet this success criterion can interfere with a user's ability to use the whole page, all content on the Web page (whether it is used to meet other success criteria or not) must meet this success criterion. See <a href="#cc5">Conformance Requirement 5: Non-Interference</a>. </p></div> </section> <section class="guideline" id="three-flashes"><div class="header-wrapper"><h4 id="x2-3-2-three-flashes"><bdi class="secno">Success Criterion 2.3.2 </bdi>Three Flashes</h4><a class="self-link" href="#three-flashes" aria-label="Permalink for Section 2.3.2"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/three-flashes.html">Understanding Three Flashes</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#three-flashes">How to Meet Three Flashes</a></div><p class="conformance-level">(Level AAA)</p> <p><a href="#dfn-web-page-s" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-web-page-s-2" title="a non-embedded resource obtained from a single URI using HTTP plus any other resources that are used in the rendering or intended to be rendered together with it by a user agent">Web pages</a> do not contain anything that <a href="#dfn-flashes" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-flashes-2" title="a pair of opposing changes in relative luminance that can cause seizures in some people if it is large enough and in the right frequency range">flashes</a> more than three times in any one second period. </p> </section> <section class="guideline" id="animation-from-interactions"><div class="header-wrapper"><h4 id="x2-3-3-animation-from-interactions"><bdi class="secno">Success Criterion 2.3.3 </bdi>Animation from Interactions</h4><a class="self-link" href="#animation-from-interactions" aria-label="Permalink for Section 2.3.3"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html">Understanding Animation from Interactions</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#animation-from-interactions">How to Meet Animation from Interactions</a></div><p class="conformance-level">(Level AAA)</p> <p><a href="#dfn-motion-animation" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-motion-animation-1" title="addition of steps between conditions to create the illusion of movement or to give a sense of a smooth transition">Motion animation</a> triggered by interaction can be disabled, unless the animation is <a href="#dfn-essential" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-essential-8" title="if removed, would fundamentally change the information or functionality of the content, and information and functionality cannot be achieved in another way that would conform">essential</a> to the functionality or the information being conveyed.</p> </section> </section> <section class="guideline" id="navigable"><div class="header-wrapper"><h3 id="x2-4-navigable"><bdi class="secno">Guideline 2.4 </bdi>Navigable</h3><a class="self-link" href="#navigable" aria-label="Permalink for Section 2.4"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/navigable.html">Understanding Navigable</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#navigable">How to Meet Navigable</a></div><p>Provide ways to help users navigate, find content, and determine where they are.</p> <section class="guideline" id="bypass-blocks"><div class="header-wrapper"><h4 id="x2-4-1-bypass-blocks"><bdi class="secno">Success Criterion 2.4.1 </bdi>Bypass Blocks</h4><a class="self-link" href="#bypass-blocks" aria-label="Permalink for Section 2.4.1"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/bypass-blocks.html">Understanding Bypass Blocks</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#bypass-blocks">How to Meet Bypass Blocks</a></div><p class="conformance-level">(Level A)</p> <p>A <a href="#dfn-mechanism" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-mechanism-5" title="process or technique for achieving a result">mechanism</a> is available to bypass blocks of content that are repeated on multiple <a href="#dfn-web-page-s" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-web-page-s-3" title="a non-embedded resource obtained from a single URI using HTTP plus any other resources that are used in the rendering or intended to be rendered together with it by a user agent">Web pages</a>. </p> </section> <section class="guideline" id="page-titled"><div class="header-wrapper"><h4 id="x2-4-2-page-titled"><bdi class="secno">Success Criterion 2.4.2 </bdi>Page Titled</h4><a class="self-link" href="#page-titled" aria-label="Permalink for Section 2.4.2"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/page-titled.html">Understanding Page Titled</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#page-titled">How to Meet Page Titled</a></div><p class="conformance-level">(Level A)</p> <p><a href="#dfn-web-page-s" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-web-page-s-4" title="a non-embedded resource obtained from a single URI using HTTP plus any other resources that are used in the rendering or intended to be rendered together with it by a user agent">Web pages</a> have titles that describe topic or purpose. </p> </section> <section class="guideline" id="focus-order"><div class="header-wrapper"><h4 id="x2-4-3-focus-order"><bdi class="secno">Success Criterion 2.4.3 </bdi>Focus Order</h4><a class="self-link" href="#focus-order" aria-label="Permalink for Section 2.4.3"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html">Understanding Focus Order</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#focus-order">How to Meet Focus Order</a></div><p class="conformance-level">(Level A)</p> <p>If a <a href="#dfn-web-page-s" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-web-page-s-5" title="a non-embedded resource obtained from a single URI using HTTP plus any other resources that are used in the rendering or intended to be rendered together with it by a user agent">Web page</a> can be <a href="#dfn-navigated-sequentially" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-navigated-sequentially-1" title="navigated in the order defined for advancing focus (from one element to the next) using a keyboard interface">navigated sequentially</a> and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability. </p> </section> <section class="guideline" id="link-purpose-in-context"><div class="header-wrapper"><h4 id="x2-4-4-link-purpose-in-context"><bdi class="secno">Success Criterion 2.4.4 </bdi>Link Purpose (In Context)</h4><a class="self-link" href="#link-purpose-in-context" aria-label="Permalink for Section 2.4.4"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context.html">Understanding Link Purpose (In Context)</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#link-purpose-in-context">How to Meet Link Purpose (In Context)</a></div><p class="conformance-level">(Level A)</p> <p>The <a href="#dfn-purpose-of-each-link" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-purpose-of-each-link-1" title="nature of the result obtained by activating a hyperlink">purpose of each link</a> can be determined from the link text alone or from the link text together with its <a href="#dfn-programmatically-determined-link-context" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-programmatically-determined-link-context-1" title="additional information that can be programmatically determined from relationships with a link, combined with the link text, and presented to users in different modalities">programmatically determined link context</a>, except where the purpose of the link would be <a href="#dfn-ambiguous-to-users-in-general" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-ambiguous-to-users-in-general-1" title="the purpose cannot be determined from the link and all information of the Web page presented to the user simultaneously with the link (i.e., readers without disabilities would not know what a link would do until they activated it)">ambiguous to users in general</a>. </p> </section> <section class="guideline" id="multiple-ways"><div class="header-wrapper"><h4 id="x2-4-5-multiple-ways"><bdi class="secno">Success Criterion 2.4.5 </bdi>Multiple Ways</h4><a class="self-link" href="#multiple-ways" aria-label="Permalink for Section 2.4.5"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/multiple-ways.html">Understanding Multiple Ways</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#multiple-ways">How to Meet Multiple Ways</a></div><p class="conformance-level">(Level AA)</p> <p>More than one way is available to locate a <a href="#dfn-web-page-s" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-web-page-s-6" title="a non-embedded resource obtained from a single URI using HTTP plus any other resources that are used in the rendering or intended to be rendered together with it by a user agent">Web page</a> within a <a href="#dfn-set-of-web-pages" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-set-of-web-pages-1" title="collection of web pages that share a common purpose and that are created by the same author, group or organization">set of Web pages</a> except where the Web Page is the result of, or a step in, a <a href="#dfn-processes" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-processes-1" title="series of user actions where each action is required in order to complete an activity">process</a>. </p> </section> <section class="guideline" id="headings-and-labels"><div class="header-wrapper"><h4 id="x2-4-6-headings-and-labels"><bdi class="secno">Success Criterion 2.4.6 </bdi>Headings and Labels</h4><a class="self-link" href="#headings-and-labels" aria-label="Permalink for Section 2.4.6"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels.html">Understanding Headings and Labels</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels">How to Meet Headings and Labels</a></div><p class="conformance-level">(Level AA)</p> <p>Headings and <a href="#dfn-labels" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-labels-1" title="text or other component with a text alternative that is presented to a user to identify a component within Web content">labels</a> describe topic or purpose. </p> </section> <section class="guideline" id="focus-visible"><div class="header-wrapper"><h4 id="x2-4-7-focus-visible"><bdi class="secno">Success Criterion 2.4.7 </bdi>Focus Visible</h4><a class="self-link" href="#focus-visible" aria-label="Permalink for Section 2.4.7"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html">Understanding Focus Visible</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#focus-visible">How to Meet Focus Visible</a></div><p class="conformance-level">(Level AA)</p> <p>Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. </p> </section> <section class="guideline" id="location"><div class="header-wrapper"><h4 id="x2-4-8-location"><bdi class="secno">Success Criterion 2.4.8 </bdi>Location</h4><a class="self-link" href="#location" aria-label="Permalink for Section 2.4.8"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/location.html">Understanding Location</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#location">How to Meet Location</a></div><p class="conformance-level">(Level AAA)</p> <p>Information about the user's location within a <a href="#dfn-set-of-web-pages" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-set-of-web-pages-2" title="collection of web pages that share a common purpose and that are created by the same author, group or organization">set of Web pages</a> is available. </p> </section> <section class="guideline" id="link-purpose-link-only"><div class="header-wrapper"><h4 id="x2-4-9-link-purpose-link-only"><bdi class="secno">Success Criterion 2.4.9 </bdi>Link Purpose (Link Only)</h4><a class="self-link" href="#link-purpose-link-only" aria-label="Permalink for Section 2.4.9"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-link-only.html">Understanding Link Purpose (Link Only)</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#link-purpose-link-only">How to Meet Link Purpose (Link Only)</a></div><p class="conformance-level">(Level AAA)</p> <p>A <a href="#dfn-mechanism" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-mechanism-6" title="process or technique for achieving a result">mechanism</a> is available to allow the purpose of each link to be identified from link text alone, except where the purpose of the link would be <a href="#dfn-ambiguous-to-users-in-general" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-ambiguous-to-users-in-general-2" title="the purpose cannot be determined from the link and all information of the Web page presented to the user simultaneously with the link (i.e., readers without disabilities would not know what a link would do until they activated it)">ambiguous to users in general</a>. </p> </section> <section class="guideline" id="section-headings"><div class="header-wrapper"><h4 id="x2-4-10-section-headings"><bdi class="secno">Success Criterion 2.4.10 </bdi>Section Headings</h4><a class="self-link" href="#section-headings" aria-label="Permalink for Section 2.4.10"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/section-headings.html">Understanding Section Headings</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#section-headings">How to Meet Section Headings</a></div><p class="conformance-level">(Level AAA)</p> <p><a href="#dfn-section" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-section-1" title="a self-contained portion of written content that deals with one or more related topics or thoughts">Section</a> headings are used to organize the content. </p> <div class="note" role="note" id="issue-container-generatedID-20"><div role="heading" class="note-title marker" id="h-note-20" aria-level="5"><span>Note</span></div><p class="">"Heading" is used in its general sense and includes titles and other ways to add a heading to different types of content. </p></div> <div class="note" role="note" id="issue-container-generatedID-21"><div role="heading" class="note-title marker" id="h-note-21" aria-level="5"><span>Note</span></div><p class="">This success criterion covers sections within writing, not <a href="#dfn-user-interface-components" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-user-interface-components-6" title="a part of the content that is perceived by users as a single control for a distinct function">user interface components</a>. User interface components are covered under <a href="#name-role-value">Success Criterion 4.1.2</a>. </p></div> </section> </section> <section class="guideline" id="input-modalities"><div class="header-wrapper"><h3 id="x2-5-input-modalities"><bdi class="secno">Guideline 2.5 </bdi>Input Modalities</h3><a class="self-link" href="#input-modalities" aria-label="Permalink for Section 2.5"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/input-modalities.html">Understanding Input Modalities</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#input-modalities">How to Meet Input Modalities</a></div><p class="change">[New]</p> <p>Make it easier for users to operate functionality through various inputs beyond keyboard.</p> <section class="guideline" id="pointer-gestures"><div class="header-wrapper"><h4 id="x2-5-1-pointer-gestures"><bdi class="secno">Success Criterion 2.5.1 </bdi>Pointer Gestures</h4><a class="self-link" href="#pointer-gestures" aria-label="Permalink for Section 2.5.1"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/pointer-gestures.html">Understanding Pointer Gestures</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#pointer-gestures">How to Meet Pointer Gestures</a></div><p class="conformance-level">(Level A)</p> <p>All <a href="#dfn-functionality" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-functionality-3" title="processes and outcomes achievable through user action">functionality</a> that uses multipoint or path-based gestures for operation can be operated with a <a href="#dfn-single-pointer" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-single-pointer-1" title="pointer input that operates with one point of contact with the screen, including single taps and clicks, double-taps and clicks, long presses, and path-based gestures">single pointer</a> without a path-based gesture, unless a multipoint or path-based gesture is <a href="#dfn-essential" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-essential-9" title="if removed, would fundamentally change the information or functionality of the content, and information and functionality cannot be achieved in another way that would conform">essential</a>.</p> <div class="note" role="note" id="issue-container-generatedID-22"><div role="heading" class="note-title marker" id="h-note-22" aria-level="5"><span>Note</span></div><p class="">This requirement applies to web content that interprets pointer actions (i.e. this does not apply to actions that are required to operate the user agent or assistive technology).</p></div> </section> <section class="guideline" id="pointer-cancellation"><div class="header-wrapper"><h4 id="x2-5-2-pointer-cancellation"><bdi class="secno">Success Criterion 2.5.2 </bdi>Pointer Cancellation</h4><a class="self-link" href="#pointer-cancellation" aria-label="Permalink for Section 2.5.2"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/pointer-cancellation.html">Understanding Pointer Cancellation</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#pointer-cancellation">How to Meet Pointer Cancellation</a></div><p class="conformance-level">(Level A)</p> <p>For <a href="#dfn-functionality" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-functionality-4" title="processes and outcomes achievable through user action">functionality</a> that can be operated using a <a href="#dfn-single-pointer" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-single-pointer-2" title="pointer input that operates with one point of contact with the screen, including single taps and clicks, double-taps and clicks, long presses, and path-based gestures">single pointer</a>, at least one of the following is true:</p> <dl> <dt>No Down-Event</dt> <dd>The <a href="#dfn-down-event" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-down-event-1" title="platform event that occurs when the trigger stimulus of a pointer is depressed">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="#dfn-up-event" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-up-event-1" title="platform event that occurs when the trigger stimulus of a pointer is released">up-event</a>, and a <a href="#dfn-mechanism" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-mechanism-7" title="process or technique for achieving a result">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="#dfn-essential" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-essential-10" title="if removed, would fundamentally change the information or functionality of the content, and information and functionality cannot be achieved in another way that would conform">essential</a>.</dd> </dl> <div class="note" role="note" id="issue-container-generatedID-23"><div role="heading" class="note-title marker" id="h-note-23" aria-level="5"><span>Note</span></div><p class="">Functions that emulate a keyboard or numeric keypad key press are considered essential.</p></div> <div class="note" role="note" id="issue-container-generatedID-24"><div role="heading" class="note-title marker" id="h-note-24" aria-level="5"><span>Note</span></div><p class="">This requirement applies to web content that interprets pointer actions (i.e. this does not apply to actions that are required to operate the user agent or assistive technology).</p></div> </section> <section class="guideline" id="label-in-name"><div class="header-wrapper"><h4 id="x2-5-3-label-in-name"><bdi class="secno">Success Criterion 2.5.3 </bdi>Label in Name</h4><a class="self-link" href="#label-in-name" aria-label="Permalink for Section 2.5.3"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/label-in-name.html">Understanding Label in Name</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#label-in-name">How to Meet Label in Name</a></div><p class="conformance-level">(Level A)</p> <p>For <a href="#dfn-user-interface-components" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-user-interface-components-7" title="a part of the content that is perceived by users as a single control for a distinct function">user interface components</a> with <a href="#dfn-labels" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-labels-2" title="text or other component with a text alternative that is presented to a user to identify a component within Web content">labels</a> that include <a href="#dfn-text" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-text-8" title="sequence of characters that can be programmatically determined, where the sequence is expressing something in human language">text</a> or <a href="#dfn-images-of-text" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-images-of-text-6" title="text that has been rendered in a non-text form (e.g., an image) in order to achieve a particular visual effect">images of text</a>, the <a href="#dfn-name" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-name-2" title="text by which software can identify a component within Web content to the user">name</a> contains the text that is presented visually.</p> <div class="note" role="note" id="issue-container-generatedID-25"><div role="heading" class="note-title marker" id="h-note-25" aria-level="5"><span>Note</span></div><p class="">A best practice is to have the text of the label at the start of the name.</p></div> </section> <section class="guideline" id="motion-actuation"><div class="header-wrapper"><h4 id="x2-5-4-motion-actuation"><bdi class="secno">Success Criterion 2.5.4 </bdi>Motion Actuation</h4><a class="self-link" href="#motion-actuation" aria-label="Permalink for Section 2.5.4"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/motion-actuation.html">Understanding Motion Actuation</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#motion-actuation">How to Meet Motion Actuation</a></div><p class="conformance-level">(Level A)</p> <p><a href="#dfn-functionality" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-functionality-5" title="processes and outcomes achievable through user action">Functionality</a> that can be operated by device motion or user motion can also be operated by <a href="#dfn-user-interface-components" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-user-interface-components-8" title="a part of the content that is perceived by users as a single control for a distinct function">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="#dfn-accessibility-supported" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-supported-1" title="supported by users' assistive technologies as well as the accessibility features in browsers and other user agents">accessibility supported</a> interface;</dd> <dt>Essential</dt> <dd>The motion is <a href="#dfn-essential" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-essential-11" title="if removed, would fundamentally change the information or functionality of the content, and information and functionality cannot be achieved in another way that would conform">essential</a> for the function and doing so would invalidate the activity.</dd> </dl> </section> <section class="guideline" id="target-size"><div class="header-wrapper"><h4 id="x2-5-5-target-size"><bdi class="secno">Success Criterion 2.5.5 </bdi>Target Size</h4><a class="self-link" href="#target-size" aria-label="Permalink for Section 2.5.5"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html">Understanding Target Size</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#target-size">How to Meet Target Size</a></div><p class="conformance-level">(Level AAA)</p> <p>The size of the <a href="#dfn-targets" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-targets-1" title="region of the display that will accept a pointer action, such as the interactive area of a user interface component">target</a> for <a href="#dfn-pointer-inputs" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-pointer-inputs-1" title="input from a device that can target a specific coordinate (or set of coordinates) on a screen, such as a mouse, pen, or touch contact">pointer inputs</a> is at least 44 by 44 <a href="#dfn-css-pixels" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-css-pixels-3" title="visual angle of about 0.0213 degrees">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="#dfn-essential" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-essential-12" title="if removed, would fundamentally change the information or functionality of the content, and information and functionality cannot be achieved in another way that would conform">essential</a> to the information being conveyed.</dd> </dl> </section> <section class="guideline" id="concurrent-input-mechanisms"><div class="header-wrapper"><h4 id="x2-5-6-concurrent-input-mechanisms"><bdi class="secno">Success Criterion 2.5.6 </bdi>Concurrent Input Mechanisms</h4><a class="self-link" href="#concurrent-input-mechanisms" aria-label="Permalink for Section 2.5.6"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/concurrent-input-mechanisms.html">Understanding Concurrent Input Mechanisms</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#concurrent-input-mechanisms">How to Meet Concurrent Input Mechanisms</a></div><p class="conformance-level">(Level AAA)</p> <p>Web content does not restrict use of input modalities available on a platform except where the restriction is <a href="#dfn-essential" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-essential-13" title="if removed, would fundamentally change the information or functionality of the content, and information and functionality cannot be achieved in another way that would conform">essential</a>, required to ensure the security of the content, or required to respect user settings.</p> </section> </section> </section> <section class="principle" id="understandable"><div class="header-wrapper"><h2 id="x3-understandable"><bdi class="secno">3. </bdi> Understandable </h2><a class="self-link" href="#understandable" aria-label="Permalink for Section 3."></a></div> <p>Information and the operation of the user interface must be understandable.</p> <section class="guideline" id="readable"><div class="header-wrapper"><h3 id="x3-1-readable"><bdi class="secno">Guideline 3.1 </bdi>Readable</h3><a class="self-link" href="#readable" aria-label="Permalink for Section 3.1"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/readable.html">Understanding Readable</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#readable">How to Meet Readable</a></div><p>Make text content readable and understandable.</p> <section class="guideline" id="language-of-page"><div class="header-wrapper"><h4 id="x3-1-1-language-of-page"><bdi class="secno">Success Criterion 3.1.1 </bdi>Language of Page</h4><a class="self-link" href="#language-of-page" aria-label="Permalink for Section 3.1.1"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/language-of-page.html">Understanding Language of Page</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#language-of-page">How to Meet Language of Page</a></div><p class="conformance-level">(Level A)</p> <p>The default <a href="#dfn-human-language-s" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-human-language-s-1" title="language that is spoken, written or signed (through visual or tactile means) to communicate with humans">human language</a> of each <a href="#dfn-web-page-s" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-web-page-s-7" title="a non-embedded resource obtained from a single URI using HTTP plus any other resources that are used in the rendering or intended to be rendered together with it by a user agent">Web page</a> can be <a href="#dfn-programmatically-determinable" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-programmatically-determinable-5" title="determined by software from author-supplied data provided in a way that different user agents, including assistive technologies, can extract and present this information to users in different modalities">programmatically determined</a>. </p> </section> <section class="guideline" id="language-of-parts"><div class="header-wrapper"><h4 id="x3-1-2-language-of-parts"><bdi class="secno">Success Criterion 3.1.2 </bdi>Language of Parts</h4><a class="self-link" href="#language-of-parts" aria-label="Permalink for Section 3.1.2"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/language-of-parts.html">Understanding Language of Parts</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#language-of-parts">How to Meet Language of Parts</a></div><p class="conformance-level">(Level AA)</p> <p>The <a href="#dfn-human-language-s" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-human-language-s-2" title="language that is spoken, written or signed (through visual or tactile means) to communicate with humans">human language</a> of each passage or phrase in the content can be <a href="#dfn-programmatically-determinable" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-programmatically-determinable-6" title="determined by software from author-supplied data provided in a way that different user agents, including assistive technologies, can extract and present this information to users in different modalities">programmatically determined</a> except for proper names, technical terms, words of indeterminate language, and words or phrases that have become part of the vernacular of the immediately surrounding text. </p> </section> <section class="guideline" id="unusual-words"><div class="header-wrapper"><h4 id="x3-1-3-unusual-words"><bdi class="secno">Success Criterion 3.1.3 </bdi>Unusual Words</h4><a class="self-link" href="#unusual-words" aria-label="Permalink for Section 3.1.3"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/unusual-words.html">Understanding Unusual Words</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#unusual-words">How to Meet Unusual Words</a></div><p class="conformance-level">(Level AAA)</p> <p>A <a href="#dfn-mechanism" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-mechanism-8" title="process or technique for achieving a result">mechanism</a> is available for identifying specific definitions of words or phrases <a href="#dfn-used-in-an-unusual-or-restricted-way" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-used-in-an-unusual-or-restricted-way-1" title="words used in such a way that requires users to know exactly which definition to apply in order to understand the content correctly">used in an unusual or restricted way</a>, including <a href="#dfn-idioms" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-idioms-1" title="phrase whose meaning cannot be deduced from the meaning of the individual words and the specific words cannot be changed without losing the meaning">idioms</a> and <a href="#dfn-jargon" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-jargon-1" title="words used in a particular way by people in a particular field">jargon</a>. </p> </section> <section class="guideline" id="abbreviations"><div class="header-wrapper"><h4 id="x3-1-4-abbreviations"><bdi class="secno">Success Criterion 3.1.4 </bdi>Abbreviations</h4><a class="self-link" href="#abbreviations" aria-label="Permalink for Section 3.1.4"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/abbreviations.html">Understanding Abbreviations</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#abbreviations">How to Meet Abbreviations</a></div><p class="conformance-level">(Level AAA)</p> <p>A <a href="#dfn-mechanism" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-mechanism-9" title="process or technique for achieving a result">mechanism</a> for identifying the expanded form or meaning of <a href="#dfn-abbreviations" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-abbreviations-1" title="shortened form of a word, phrase, or name where the abbreviation has not become part of the language">abbreviations</a> is available. </p> </section> <section class="guideline" id="reading-level"><div class="header-wrapper"><h4 id="x3-1-5-reading-level"><bdi class="secno">Success Criterion 3.1.5 </bdi>Reading Level</h4><a class="self-link" href="#reading-level" aria-label="Permalink for Section 3.1.5"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/reading-level.html">Understanding Reading Level</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#reading-level">How to Meet Reading Level</a></div><p class="conformance-level">(Level AAA)</p> <p>When text requires reading ability more advanced than the <a href="#dfn-lower-secondary-education-level" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-lower-secondary-education-level-1" title="the two or three year period of education that begins after completion of six years of school and ends nine years after the beginning of primary education">lower secondary education level</a> after removal of proper names and titles, <a href="#dfn-supplementary-content" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-supplementary-content-1" title="additional content that illustrates or clarifies the primary content">supplemental content</a>, or a version that does not require reading ability more advanced than the lower secondary education level, is available. </p> </section> <section class="guideline" id="pronunciation"><div class="header-wrapper"><h4 id="x3-1-6-pronunciation"><bdi class="secno">Success Criterion 3.1.6 </bdi>Pronunciation</h4><a class="self-link" href="#pronunciation" aria-label="Permalink for Section 3.1.6"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/pronunciation.html">Understanding Pronunciation</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#pronunciation">How to Meet Pronunciation</a></div><p class="conformance-level">(Level AAA)</p> <p>A <a href="#dfn-mechanism" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-mechanism-10" title="process or technique for achieving a result">mechanism</a> is available for identifying specific pronunciation of words where meaning of the words, in context, is ambiguous without knowing the pronunciation. </p> </section> </section> <section class="guideline" id="predictable"><div class="header-wrapper"><h3 id="x3-2-predictable"><bdi class="secno">Guideline 3.2 </bdi>Predictable</h3><a class="self-link" href="#predictable" aria-label="Permalink for Section 3.2"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/predictable.html">Understanding Predictable</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#predictable">How to Meet Predictable</a></div><p>Make Web pages appear and operate in predictable ways.</p> <section class="guideline" id="on-focus"><div class="header-wrapper"><h4 id="x3-2-1-on-focus"><bdi class="secno">Success Criterion 3.2.1 </bdi>On Focus</h4><a class="self-link" href="#on-focus" aria-label="Permalink for Section 3.2.1"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/on-focus.html">Understanding On Focus</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#on-focus">How to Meet On Focus</a></div><p class="conformance-level">(Level A)</p> <p>When any <a href="#dfn-user-interface-components" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-user-interface-components-9" title="a part of the content that is perceived by users as a single control for a distinct function">user interface component</a> receives focus, it does not initiate a <a href="#dfn-change-of-context" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-change-of-context-1" title="major changes that, if made without user awareness, can disorient users who are not able to view the entire page simultaneously">change of context</a>. </p> </section> <section class="guideline" id="on-input"><div class="header-wrapper"><h4 id="x3-2-2-on-input"><bdi class="secno">Success Criterion 3.2.2 </bdi>On Input</h4><a class="self-link" href="#on-input" aria-label="Permalink for Section 3.2.2"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/on-input.html">Understanding On Input</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#on-input">How to Meet On Input</a></div><p class="conformance-level">(Level A)</p> <p>Changing the setting of any <a href="#dfn-user-interface-components" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-user-interface-components-10" title="a part of the content that is perceived by users as a single control for a distinct function">user interface component</a> does not automatically cause a <a href="#dfn-change-of-context" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-change-of-context-2" title="major changes that, if made without user awareness, can disorient users who are not able to view the entire page simultaneously">change of context</a> unless the user has been advised of the behavior before using the component. </p> </section> <section class="guideline" id="consistent-navigation"><div class="header-wrapper"><h4 id="x3-2-3-consistent-navigation"><bdi class="secno">Success Criterion 3.2.3 </bdi>Consistent Navigation</h4><a class="self-link" href="#consistent-navigation" aria-label="Permalink for Section 3.2.3"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/consistent-navigation.html">Understanding Consistent Navigation</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#consistent-navigation">How to Meet Consistent Navigation</a></div><p class="conformance-level">(Level AA)</p> <p>Navigational mechanisms that are repeated on multiple <a href="#dfn-web-page-s" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-web-page-s-8" title="a non-embedded resource obtained from a single URI using HTTP plus any other resources that are used in the rendering or intended to be rendered together with it by a user agent">Web pages</a> within a <a href="#dfn-set-of-web-pages" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-set-of-web-pages-3" title="collection of web pages that share a common purpose and that are created by the same author, group or organization">set of Web pages</a> occur in the <a href="#dfn-same-relative-order" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-same-relative-order-1" title="same position relative to other items">same relative order</a> each time they are repeated, unless a change is initiated by the user. </p> </section> <section class="guideline" id="consistent-identification"><div class="header-wrapper"><h4 id="x3-2-4-consistent-identification"><bdi class="secno">Success Criterion 3.2.4 </bdi>Consistent Identification</h4><a class="self-link" href="#consistent-identification" aria-label="Permalink for Section 3.2.4"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/consistent-identification.html">Understanding Consistent Identification</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#consistent-identification">How to Meet Consistent Identification</a></div><p class="conformance-level">(Level AA)</p> <p>Components that have the <a href="#dfn-same-functionality" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-same-functionality-1" title="same result when used">same functionality</a> within a <a href="#dfn-set-of-web-pages" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-set-of-web-pages-4" title="collection of web pages that share a common purpose and that are created by the same author, group or organization">set of Web pages</a> are identified consistently. </p> </section> <section class="guideline" id="change-on-request"><div class="header-wrapper"><h4 id="x3-2-5-change-on-request"><bdi class="secno">Success Criterion 3.2.5 </bdi>Change on Request</h4><a class="self-link" href="#change-on-request" aria-label="Permalink for Section 3.2.5"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/change-on-request.html">Understanding Change on Request</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#change-on-request">How to Meet Change on Request</a></div><p class="conformance-level">(Level AAA)</p> <p><a href="#dfn-change-of-context" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-change-of-context-3" title="major changes that, if made without user awareness, can disorient users who are not able to view the entire page simultaneously">Changes of context</a> are initiated only by user request or a <a href="#dfn-mechanism" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-mechanism-11" title="process or technique for achieving a result">mechanism</a> is available to turn off such changes. </p> </section> </section> <section class="guideline" id="input-assistance"><div class="header-wrapper"><h3 id="x3-3-input-assistance"><bdi class="secno">Guideline 3.3 </bdi>Input Assistance</h3><a class="self-link" href="#input-assistance" aria-label="Permalink for Section 3.3"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/input-assistance.html">Understanding Input Assistance</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#input-assistance">How to Meet Input Assistance</a></div><p>Help users avoid and correct mistakes.</p> <section class="guideline" id="error-identification"><div class="header-wrapper"><h4 id="x3-3-1-error-identification"><bdi class="secno">Success Criterion 3.3.1 </bdi>Error Identification</h4><a class="self-link" href="#error-identification" aria-label="Permalink for Section 3.3.1"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/error-identification.html">Understanding Error Identification</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#error-identification">How to Meet Error Identification</a></div><p class="conformance-level">(Level A)</p> <p>If an <a href="#dfn-input-error" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-input-error-2" title="information provided by the user that is not accepted">input error</a> is automatically detected, the item that is in error is identified and the error is described to the user in text. </p> </section> <section class="guideline" id="labels-or-instructions"><div class="header-wrapper"><h4 id="x3-3-2-labels-or-instructions"><bdi class="secno">Success Criterion 3.3.2 </bdi>Labels or Instructions</h4><a class="self-link" href="#labels-or-instructions" aria-label="Permalink for Section 3.3.2"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions.html">Understanding Labels or Instructions</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#labels-or-instructions">How to Meet Labels or Instructions</a></div><p class="conformance-level">(Level A)</p> <p><a href="#dfn-labels" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-labels-3" title="text or other component with a text alternative that is presented to a user to identify a component within Web content">Labels</a> or instructions are provided when content requires user input. </p> </section> <section class="guideline" id="error-suggestion"><div class="header-wrapper"><h4 id="x3-3-3-error-suggestion"><bdi class="secno">Success Criterion 3.3.3 </bdi>Error Suggestion</h4><a class="self-link" href="#error-suggestion" aria-label="Permalink for Section 3.3.3"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/error-suggestion.html">Understanding Error Suggestion</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#error-suggestion">How to Meet Error Suggestion</a></div><p class="conformance-level">(Level AA)</p> <p>If an <a href="#dfn-input-error" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-input-error-3" title="information provided by the user that is not accepted">input error</a> is automatically detected and suggestions for correction are known, then the suggestions are provided to the user, unless it would jeopardize the security or purpose of the content. </p> </section> <section class="guideline" id="error-prevention-legal-financial-data"><div class="header-wrapper"><h4 id="x3-3-4-error-prevention-legal-financial-data"><bdi class="secno">Success Criterion 3.3.4 </bdi>Error Prevention (Legal, Financial, Data)</h4><a class="self-link" href="#error-prevention-legal-financial-data" aria-label="Permalink for Section 3.3.4"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/error-prevention-legal-financial-data.html">Understanding Error Prevention (Legal, Financial, Data)</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#error-prevention-legal-financial-data">How to Meet Error Prevention (Legal, Financial, Data)</a></div><p class="conformance-level">(Level AA)</p> <p>For <a href="#dfn-web-page-s" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-web-page-s-9" title="a non-embedded resource obtained from a single URI using HTTP plus any other resources that are used in the rendering or intended to be rendered together with it by a user agent">Web pages</a> that cause <a href="#dfn-legal-commitments" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-legal-commitments-1" title="transactions where the person incurs a legally binding obligation or benefit">legal commitments</a> or financial transactions for the user to occur, that modify or delete <a href="#dfn-user-controllable" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-user-controllable-1" title="data that is intended to be accessed by users">user-controllable</a> data in data storage systems, or that submit user test responses, at least one of the following is true: </p> <dl> <dt>Reversible</dt><dd>Submissions are reversible.</dd> <dt>Checked</dt><dd>Data entered by the user is checked for input errors and the user is provided an opportunity to correct them.</dd> <dt>Confirmed</dt><dd>A mechanism is available for reviewing, confirming, and correcting information before finalizing the submission.</dd> </dl> </section> <section class="guideline" id="help"><div class="header-wrapper"><h4 id="x3-3-5-help"><bdi class="secno">Success Criterion 3.3.5 </bdi>Help</h4><a class="self-link" href="#help" aria-label="Permalink for Section 3.3.5"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/help.html">Understanding Help</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#help">How to Meet Help</a></div><p class="conformance-level">(Level AAA)</p> <p><a href="#dfn-context-sensitive-help" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-context-sensitive-help-1" title="help text that provides information related to the function currently being performed">Context-sensitive help</a> is available. </p> </section> <section class="guideline" id="error-prevention-all"><div class="header-wrapper"><h4 id="x3-3-6-error-prevention-all"><bdi class="secno">Success Criterion 3.3.6 </bdi>Error Prevention (All)</h4><a class="self-link" href="#error-prevention-all" aria-label="Permalink for Section 3.3.6"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/error-prevention-all.html">Understanding Error Prevention (All)</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#error-prevention-all">How to Meet Error Prevention (All)</a></div><p class="conformance-level">(Level AAA)</p> <p>For <a href="#dfn-web-page-s" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-web-page-s-10" title="a non-embedded resource obtained from a single URI using HTTP plus any other resources that are used in the rendering or intended to be rendered together with it by a user agent">Web pages</a> that require the user to submit information, at least one of the following is true: </p> <dl> <dt>Reversible</dt><dd>Submissions are reversible.</dd> <dt>Checked</dt><dd>Data entered by the user is checked for input errors and the user is provided an opportunity to correct them.</dd> <dt>Confirmed</dt><dd>A mechanism is available for reviewing, confirming, and correcting information before finalizing the submission.</dd> </dl> </section> </section> </section> <section class="principle" id="robust"><div class="header-wrapper"><h2 id="x4-robust"><bdi class="secno">4. </bdi> Robust </h2><a class="self-link" href="#robust" aria-label="Permalink for Section 4."></a></div> <p>Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies. </p> <section class="guideline" id="compatible"><div class="header-wrapper"><h3 id="x4-1-compatible"><bdi class="secno">Guideline 4.1 </bdi>Compatible</h3><a class="self-link" href="#compatible" aria-label="Permalink for Section 4.1"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/compatible.html">Understanding Compatible</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#compatible">How to Meet Compatible</a></div><p>Maximize compatibility with current and future user agents, including assistive technologies.</p> <section class="guideline" id="parsing"><div class="header-wrapper"><h4 id="x4-1-1-parsing"><bdi class="secno">Success Criterion 4.1.1 </bdi>Parsing</h4><a class="self-link" href="#parsing" aria-label="Permalink for Section 4.1.1"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/parsing.html">Understanding Parsing</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#parsing">How to Meet Parsing</a></div><p class="conformance-level">(Level A)</p> <p>In content implemented using markup languages, elements have complete start and end tags, elements are nested according to their specifications, elements do not contain duplicate attributes, and any IDs are unique, except where the specifications allow these features. </p> <div class="note" role="note" id="issue-container-generatedID-26"><div role="heading" class="note-title marker" id="h-note-26" aria-level="5"><span>Note</span></div><p class="">This Success Criterion should be considered as always satisfied for any content using HTML or XML.</p></div> <div class="note" role="note" id="issue-container-generatedID-27"><div role="heading" class="note-title marker" id="h-note-27" aria-level="5"><span>Note</span></div><div class=""> <p>Since this criterion was written, the HTML Living Standard has adopted specific requirements governing how user agents must handle incomplete tags, incorrect element nesting, duplicate attributes, and non-unique IDs. [<cite><a class="bibref" data-link-type="biblio" href="#bib-html" title="HTML Standard">HTML</a></cite>]</p> <p>Although the HTML Standard treats some of these cases as non-conforming for authors, it is considered to "allow these features" for the purposes of this Success Criterion because the specification requires that user agents support handling these cases consistently. In practice, this criterion no longer provides any benefit to people with disabilities in itself.</p> <p>Issues such as missing roles due to inappropriately nested elements or incorrect states or names due to a duplicate ID are covered by different Success Criteria and should be reported under those criteria rather than as issues with 4.1.1.</p> </div></div> </section> <section class="guideline" id="name-role-value"><div class="header-wrapper"><h4 id="x4-1-2-name-role-value"><bdi class="secno">Success Criterion 4.1.2 </bdi>Name, Role, Value</h4><a class="self-link" href="#name-role-value" aria-label="Permalink for Section 4.1.2"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html">Understanding Name, Role, Value</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#name-role-value">How to Meet Name, Role, Value</a></div><p class="conformance-level">(Level A)</p> <p>For all <a href="#dfn-user-interface-components" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-user-interface-components-11" title="a part of the content that is perceived by users as a single control for a distinct function">user interface components</a> (including but not limited to: form elements, links and components generated by scripts), the <a href="#dfn-name" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-name-3" title="text by which software can identify a component within Web content to the user">name</a> and <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-1" title="text or number by which software can identify the function of a component within Web content">role</a> can be <a href="#dfn-programmatically-determinable" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-programmatically-determinable-7" title="determined by software from author-supplied data provided in a way that different user agents, including assistive technologies, can extract and present this information to users in different modalities">programmatically determined</a>; states, properties, and values that can be set by the user can be <a href="#dfn-programmatically-set" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-programmatically-set-1" title="set by software using methods that are supported by user agents, including assistive technologies">programmatically set</a>; and notification of changes to these items is available to <a href="#dfn-user-agents" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-user-agents-1" title="any software that retrieves and presents Web content for users">user agents</a>, including <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-3" title="hardware and/or software that acts as a user agent, or along with a mainstream user agent, to provide functionality to meet the requirements of users with disabilities that go beyond those offered by mainstream user agents">assistive technologies</a>. </p> <div class="note" role="note" id="issue-container-generatedID-28"><div role="heading" class="note-title marker" id="h-note-28" aria-level="5"><span>Note</span></div><p class="">This success criterion is primarily for Web authors who develop or script their own user interface components. For example, standard HTML controls already meet this success criterion when used according to specification. </p></div> </section> <section class="guideline" id="status-messages"><div class="header-wrapper"><h4 id="x4-1-3-status-messages"><bdi class="secno">Success Criterion 4.1.3 </bdi>Status Messages</h4><a class="self-link" href="#status-messages" aria-label="Permalink for Section 4.1.3"></a></div> <div class="doclinks"><a href="https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html">Understanding Status Messages</a> <span class="screenreader">|</span> <br><a href="https://www.w3.org/WAI/WCAG21/quickref/#status-messages">How to Meet Status Messages</a></div><p class="conformance-level">(Level AA)</p> <p>In content implemented using markup languages, <a href="#dfn-status-messages" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-status-messages-1" title="change in content that is not a change of context, and that provides information to the user on the success or results of an action, on the waiting state of an application, on the progress of a process, or on the existence of errors">status messages</a> can be <a href="#dfn-programmatically-determinable" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-programmatically-determinable-8" title="determined by software from author-supplied data provided in a way that different user agents, including assistive technologies, can extract and present this information to users in different modalities">programmatically determined</a> through <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-2" title="text or number by which software can identify the function of a component within Web content">role</a> or properties such that they can be presented to the user by <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-4" title="hardware and/or software that acts as a user agent, or along with a mainstream user agent, to provide functionality to meet the requirements of users with disabilities that go beyond those offered by mainstream user agents">assistive technologies</a> without receiving focus.</p> </section> </section> </section> <section id="conformance"><div class="header-wrapper"><h2 id="x5-conformance"><bdi class="secno">5. </bdi>Conformance</h2><a class="self-link" href="#conformance" aria-label="Permalink for Section 5."></a></div> <p>This section lists requirements for <a href="#dfn-conform" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-conform-1" title="satisfying all the requirements of a given standard, guideline or specification">conformance</a> to WCAG 2.1. It also gives information about how to make conformance claims, which are optional. Finally, it describes what it means to be <a href="#dfn-accessibility-supported" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-supported-2" title="supported by users' assistive technologies as well as the accessibility features in browsers and other user agents">accessibility supported</a>, since only accessibility-supported ways of using technologies can be <a href="#dfn-relied-upon" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-relied-upon-1" title="the content would not conform if that technology is turned off or is not supported">relied upon</a> for conformance. <a href="https://www.w3.org/WAI/WCAG21/Understanding/conformance">Understanding Conformance</a> includes further explanation of the accessibility-supported concept. </p> <section id="interpreting-normative-requirements"><div class="header-wrapper"><h3 id="x5-1-interpreting-normative-requirements"><bdi class="secno">5.1 </bdi>Interpreting Normative Requirements</h3><a class="self-link" href="#interpreting-normative-requirements" aria-label="Permalink for Section 5.1"></a></div> <p>The main content of WCAG 2.1 is <a href="#dfn-normative" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-normative-1" title="required for conformance">normative</a> and defines requirements that impact conformance claims. Introductory material, appendices, sections marked as "non-normative", diagrams, examples, and notes are <a href="#dfn-informative" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-informative-1" title="for information purposes and not required for conformance">informative</a> (non-normative). Non-normative material provides advisory information to help interpret the guidelines but does not create requirements that impact a conformance claim. </p> <p>The key words <em class="rfc2119">MAY</em>, <em class="rfc2119">MUST</em>, <em class="rfc2119">MUST NOT</em>, <em class="rfc2119">NOT RECOMMENDED</em>, <em class="rfc2119">RECOMMENDED</em>, <em class="rfc2119">SHOULD</em>, and <em class="rfc2119">SHOULD NOT</em> are to be interpreted as described in [<cite><a class="bibref" data-link-type="biblio" href="#bib-rfc2119" title="Key words for use in RFCs to Indicate Requirement Levels">RFC2119</a></cite>]. </p> </section> <section id="conformance-reqs"><div class="header-wrapper"><h3 id="x5-2-conformance-requirements"><bdi class="secno">5.2 </bdi>Conformance Requirements</h3><a class="self-link" href="#conformance-reqs" aria-label="Permalink for Section 5.2"></a></div> <p>In order for a Web page to conform to WCAG 2.1, all of the following conformance requirements must be satisfied: </p> <section id="cc1"><div class="header-wrapper"><h4 id="x5-2-1-conformance-level"><bdi class="secno">5.2.1 </bdi>Conformance Level</h4><a class="self-link" href="#cc1" aria-label="Permalink for Section 5.2.1"></a></div> <p>One of the following levels of conformance is met in full.</p> <ul> <li>For Level A conformance (the minimum level of conformance), the <a href="#dfn-web-page-s" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-web-page-s-11" title="a non-embedded resource obtained from a single URI using HTTP plus any other resources that are used in the rendering or intended to be rendered together with it by a user agent">Web page</a> <a href="#dfn-satisfies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-satisfies-1" title="the success criterion does not evaluate to 'false' when applied to the page">satisfies</a> all the Level A Success Criteria, or a <a href="#dfn-conforming-alternate-versions" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-conforming-alternate-versions-1" title="version that">conforming alternate version</a> is provided. </li> <li>For Level AA conformance, the Web page satisfies all the Level A and Level AA Success Criteria, or a Level AA conforming alternate version is provided. </li> <li>For Level AAA conformance, the Web page satisfies all the Level A, Level AA and Level AAA Success Criteria, or a Level AAA conforming alternate version is provided. </li> </ul> <div class="note" role="note" id="issue-container-generatedID-29"><div role="heading" class="note-title marker" id="h-note-29" aria-level="5"><span>Note</span></div><p class="">Although conformance can only be achieved at the stated levels, authors are encouraged to report (in their claim) any progress toward meeting success criteria from all levels beyond the achieved level of conformance. </p></div> <div class="note" role="note" id="issue-container-generatedID-30"><div role="heading" class="note-title marker" id="h-note-30" aria-level="5"><span>Note</span></div><p class="">It is not recommended that Level AAA conformance be required as a general policy for entire sites because it is not possible to satisfy all Level AAA Success Criteria for some content. </p></div> </section> <section id="cc2"><div class="header-wrapper"><h4 id="x5-2-2-full-pages"><bdi class="secno">5.2.2 </bdi>Full pages</h4><a class="self-link" href="#cc2" aria-label="Permalink for Section 5.2.2"></a></div> <p><a href="#dfn-conform" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-conform-2" title="satisfying all the requirements of a given standard, guideline or specification">Conformance</a> (and conformance level) is for full <a href="#dfn-web-page-s" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-web-page-s-12" title="a non-embedded resource obtained from a single URI using HTTP plus any other resources that are used in the rendering or intended to be rendered together with it by a user agent">Web page(s)</a> only, and cannot be achieved if part of a Web page is excluded. </p> <div class="note" role="note" id="issue-container-generatedID-31"><div role="heading" class="note-title marker" id="h-note-31" aria-level="5"><span>Note</span></div><p class="">For the purpose of determining conformance, alternatives to part of a page's content are considered part of the page when the alternatives can be obtained directly from the page, e.g., a long description or an alternative presentation of a video. </p></div> <div class="note" role="note" id="issue-container-generatedID-32"><div role="heading" class="note-title marker" id="h-note-32" aria-level="5"><span>Note</span></div><p class="">Authors of Web pages that cannot conform due to content outside of the author's control may consider a <a href="#conformance-partial">Statement of Partial Conformance</a>. </p></div> <div class="note" role="note" id="issue-container-generatedID-33"><div role="heading" class="note-title marker" id="h-note-33" aria-level="5"><span>Note</span></div><p class="">A full page includes each variation of the page that is automatically presented by the page for various screen sizes (e.g. variations in a responsive Web page). Each of these variations needs to conform (or needs to have a conforming alternate version) in order for the entire page to conform. </p></div> </section> <section id="cc3"><div class="header-wrapper"><h4 id="x5-2-3-complete-processes"><bdi class="secno">5.2.3 </bdi>Complete processes</h4><a class="self-link" href="#cc3" aria-label="Permalink for Section 5.2.3"></a></div> <p>When a <a href="#dfn-web-page-s" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-web-page-s-13" title="a non-embedded resource obtained from a single URI using HTTP plus any other resources that are used in the rendering or intended to be rendered together with it by a user agent">Web page</a> is one of a series of Web pages presenting a <a href="#dfn-processes" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-processes-2" title="series of user actions where each action is required in order to complete an activity">process</a> (i.e., a sequence of steps that need to be completed in order to accomplish an activity), all Web pages in the process conform at the specified level or better. (Conformance is not possible at a particular level if any page in the process does not conform at that level or better.) </p> <p class="example">An online store has a series of pages that are used to select and purchase products. All pages in the series from start to finish (checkout) conform in order for any page that is part of the process to conform. </p> </section> <section id="cc4"><div class="header-wrapper"><h4 id="x5-2-4-only-accessibility-supported-ways-of-using-technologies"><bdi class="secno">5.2.4 </bdi>Only Accessibility-Supported Ways of Using Technologies</h4><a class="self-link" href="#cc4" aria-label="Permalink for Section 5.2.4"></a></div> <p>Only <a href="#dfn-accessibility-supported" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-supported-3" title="supported by users' assistive technologies as well as the accessibility features in browsers and other user agents">accessibility-supported</a> ways of using <a href="#dfn-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-technologies-1" title="mechanism for encoding instructions to be rendered, played or executed by user agents">technologies</a> are <a href="#dfn-relied-upon" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-relied-upon-2" title="the content would not conform if that technology is turned off or is not supported">relied upon</a> to satisfy the success criteria. Any information or functionality that is provided in a way that is not accessibility supported is also available in a way that is accessibility supported. (See <a href="https://www.w3.org/WAI/WCAG21/Understanding/conformance#accessibility-support">Understanding accessibility support</a>.) </p> </section> <section id="cc5"><div class="header-wrapper"><h4 id="x5-2-5-non-interference"><bdi class="secno">5.2.5 </bdi>Non-Interference</h4><a class="self-link" href="#cc5" aria-label="Permalink for Section 5.2.5"></a></div> <p>If <a href="#dfn-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-technologies-2" title="mechanism for encoding instructions to be rendered, played or executed by user agents"> technologies </a> are used in a way that is not <a href="#dfn-accessibility-supported" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-supported-4" title="supported by users' assistive technologies as well as the accessibility features in browsers and other user agents">accessibility supported</a>, or if they are used in a non-conforming way, then they do not block the ability of users to access the rest of the page. In addition, the <a href="#dfn-web-page-s" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-web-page-s-14" title="a non-embedded resource obtained from a single URI using HTTP plus any other resources that are used in the rendering or intended to be rendered together with it by a user agent">Web page</a> as a whole continues to meet the conformance requirements under each of the following conditions: </p> <ol> <li>when any technology that is not <a href="#dfn-relied-upon" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-relied-upon-3" title="the content would not conform if that technology is turned off or is not supported">relied upon</a> is turned on in a user agent, </li> <li>when any technology that is not relied upon is turned off in a user agent, and</li> <li>when any technology that is not relied upon is not supported by a user agent</li> </ol> <p>In addition, the following success criteria apply to all content on the page, including content that is not otherwise relied upon to meet conformance, because failure to meet them could interfere with any use of the page: </p> <ul> <li><strong>1.4.2 - Audio Control</strong>, </li> <li><strong>2.1.2 - No Keyboard Trap</strong>, </li> <li><strong>2.3.1 - Three Flashes or Below Threshold</strong>, and </li> <li><strong>2.2.2 - Pause, Stop, Hide</strong>. </li> </ul> <div class="note" role="note" id="issue-container-generatedID-34"><div role="heading" class="note-title marker" id="h-note-34" aria-level="5"><span>Note</span></div><p class="">If a page cannot conform (for example, a conformance test page or an example page), it cannot be included in the scope of conformance or in a conformance claim. </p></div> <p>For more information, including examples, see <a href="https://www.w3.org/WAI/WCAG21/Understanding/conformance#conformance-requirements">Understanding Conformance Requirements</a>. </p> </section> </section> <section id="conformance-claims"><div class="header-wrapper"><h3 id="x5-3-conformance-claims-optional"><bdi class="secno">5.3 </bdi>Conformance Claims (Optional) </h3><a class="self-link" href="#conformance-claims" aria-label="Permalink for Section 5.3"></a></div> <p>Conformance is defined only for <a href="#dfn-web-page-s" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-web-page-s-15" title="a non-embedded resource obtained from a single URI using HTTP plus any other resources that are used in the rendering or intended to be rendered together with it by a user agent">Web pages</a>. However, a conformance claim may be made to cover one page, a series of pages, or multiple related Web pages. </p> <section id="conformance-required"><div class="header-wrapper"><h4 id="x5-3-1-required-components-of-a-conformance-claim"><bdi class="secno">5.3.1 </bdi>Required Components of a Conformance Claim</h4><a class="self-link" href="#conformance-required" aria-label="Permalink for Section 5.3.1"></a></div> <p>Conformance claims are <strong>not required</strong>. Authors can conform to WCAG 2.1 without making a claim. However, if a conformance claim is made, then the conformance claim <strong>must</strong> include the following information: </p> <ol> <li><strong>Date</strong> of the claim </li> <li><strong>Guidelines title, version and URI </strong> "Web Content Accessibility Guidelines 2.1 at <a href="https://www.w3.org/TR/WCAG21/">https://www.w3.org/TR/WCAG21/</a>" </li> <li><strong>Conformance level</strong> satisfied: (Level A, AA or AAA) </li> <li> <p><strong>A concise description of the Web pages</strong>, such as a list of URIs for which the claim is made, including whether subdomains are included in the claim. </p> <div class="note" role="note" id="issue-container-generatedID-35"><div role="heading" class="note-title marker" id="h-note-35" aria-level="5"><span>Note</span></div><p class="">The Web pages may be described by list or by an expression that describes all of the URIs included in the claim. </p></div> <div class="note" role="note" id="issue-container-generatedID-36"><div role="heading" class="note-title marker" id="h-note-36" aria-level="5"><span>Note</span></div><p class="">Web-based products that do not have a URI prior to installation on the customer's Web site may have a statement that the product would conform when installed. </p></div> </li> <li>A list of the <strong> <a href="#dfn-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-technologies-3" title="mechanism for encoding instructions to be rendered, played or executed by user agents">Web content technologies</a> <a href="#dfn-relied-upon" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-relied-upon-4" title="the content would not conform if that technology is turned off or is not supported">relied upon</a></strong>. </li> </ol> <div class="note" role="note" id="issue-container-generatedID-37"><div role="heading" class="note-title marker" id="h-note-37" aria-level="5"><span>Note</span></div><p class="">If a conformance logo is used, it would constitute a claim and must be accompanied by the required components of a conformance claim listed above. </p></div> </section> <section id="conformance-optional"><div class="header-wrapper"><h4 id="x5-3-2-optional-components-of-a-conformance-claim"><bdi class="secno">5.3.2 </bdi>Optional Components of a Conformance Claim </h4><a class="self-link" href="#conformance-optional" aria-label="Permalink for Section 5.3.2"></a></div> <p>In addition to the required components of a conformance claim above, consider providing additional information to assist users. Recommended additional information includes: </p> <ul> <li>A list of success criteria beyond the level of conformance claimed that have been met. This information should be provided in a form that users can use, preferably machine-readable metadata. </li> <li>A list of the specific technologies that are " <em>used but not <a href="#dfn-relied-upon" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-relied-upon-5" title="the content would not conform if that technology is turned off or is not supported">relied upon</a></em>." </li> <li>A list of user agents, including assistive technologies that were used to test the content. </li> <li class="new">A list of specific accessibility characteristics of the content, provided in machine-readable metadata. </li> <li>Information about any additional steps taken that go beyond the success criteria to enhance accessibility. </li> <li>A machine-readable metadata version of the list of specific technologies that are <a href="#dfn-relied-upon" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-relied-upon-6" title="the content would not conform if that technology is turned off or is not supported">relied upon</a>. </li> <li>A machine-readable metadata version of the conformance claim.</li> </ul> <div class="note" role="note" id="issue-container-generatedID-38"><div role="heading" class="note-title marker" id="h-note-38" aria-level="5"><span>Note</span></div><p class="">Refer to <a href="https://www.w3.org/WAI/WCAG21/Understanding/conformance#conformance-claims">Understanding Conformance Claims</a> for more information and example conformance claims. </p></div> <div class="note" role="note" id="issue-container-generatedID-39"><div role="heading" class="note-title marker" id="h-note-39" aria-level="5"><span>Note</span></div><p class="">Refer to <a href="https://www.w3.org/WAI/WCAG21/Understanding/understanding-metadata">Understanding Metadata</a> for more information about the use of metadata in conformance claims. </p></div> </section> </section> <section id="conformance-partial"><div class="header-wrapper"><h3 id="x5-4-statement-of-partial-conformance-third-party-content"><bdi class="secno">5.4 </bdi>Statement of Partial Conformance - Third Party Content</h3><a class="self-link" href="#conformance-partial" aria-label="Permalink for Section 5.4"></a></div> <p>Sometimes, Web pages are created that will later have additional content added to them. For example, an email program, a blog, an article that allows users to add comments, or applications supporting user-contributed content. Another example would be a page, such as a portal or news site, composed of content aggregated from multiple contributors, or sites that automatically insert content from other sources over time, such as when advertisements are inserted dynamically. </p> <p>In these cases, it is not possible to know at the time of original posting what the uncontrolled content of the pages will be. It is important to note that the uncontrolled content can affect the accessibility of the controlled content as well. Two options are available: </p> <ol> <li> <p>A determination of conformance can be made based on best knowledge. If a page of this type is monitored and repaired (non-conforming content is removed or brought into conformance) within two business days, then a determination or claim of conformance can be made since, except for errors in externally contributed content which are corrected or removed when encountered, the page conforms. No conformance claim can be made if it is not possible to monitor or correct non-conforming content; </p> <p><strong>OR</strong></p> </li> <li> <p>A "statement of partial conformance" may be made that the page does not conform, but could conform if certain parts were removed. The form of that statement would be, "This page does not conform, but would conform to WCAG 2.1 at level X if the following parts from uncontrolled sources were removed." In addition, the following would also be true of uncontrolled content that is described in the statement of partial conformance: </p> <ol> <li>It is not content that is under the author's control.</li> <li>It is described in a way that users can identify (e.g., they cannot be described as "all parts that we do not control" unless they are clearly marked as such.) </li> </ol> </li> </ol> </section> <section id="conformance-partial-lang"><div class="header-wrapper"><h3 id="x5-5-statement-of-partial-conformance-language"><bdi class="secno">5.5 </bdi>Statement of Partial Conformance - Language</h3><a class="self-link" href="#conformance-partial-lang" aria-label="Permalink for Section 5.5"></a></div> <p>A "statement of partial conformance due to language" may be made when the page does not conform, but would conform if <a href="#dfn-accessibility-supported" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-supported-5" title="supported by users' assistive technologies as well as the accessibility features in browsers and other user agents">accessibility support</a> existed for (all of) the language(s) used on the page. The form of that statement would be, "This page does not conform, but would conform to WCAG 2.1 at level X if accessibility support existed for the following language(s):" </p> </section> </section> <section id="glossary"><div class="header-wrapper"><h2 id="x6-glossary"><bdi class="secno">6. </bdi>Glossary</h2><a class="self-link" href="#glossary" aria-label="Permalink for Section 6."></a></div> <dl id="terms"> <dt><dfn data-lt="abbreviations|abbreviation" id="dfn-abbreviations" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">abbreviation</dfn></dt> <dd> <p>shortened form of a word, phrase, or name where the abbreviation has not become part of the language </p> <div class="note" role="note" id="issue-container-generatedID-40"><div role="heading" class="note-title marker" id="h-note-40" aria-level="3"><span>Note</span></div><p class="">This includes initialisms and acronyms where:</p></div> <ol> <li> <p><strong>initialisms</strong> are shortened forms of a name or phrase made from the initial letters of words or syllables contained in that name or phrase </p> <div class="note" role="note" id="issue-container-generatedID-41"><div role="heading" class="note-title marker" id="h-note-41" aria-level="3"><span>Note</span></div><p class="">Not defined in all languages.</p></div> <aside class="example" id="example-1"><div class="marker"> <a class="self-link" href="#example-1">Example<bdi> 1</bdi></a> </div><p>SNCF is a French initialism that contains the initial letters of the <span lang="fr">Société Nationale des Chemins de Fer</span>, the French national railroad. </p></aside> <aside class="example" id="example-2"><div class="marker"> <a class="self-link" href="#example-2">Example<bdi> 2</bdi></a> </div><p>ESP is an initialism for extrasensory perception.</p></aside> </li> <li> <p><strong>acronyms</strong> are abbreviated forms made from the initial letters or parts of other words (in a name or phrase) which may be pronounced as a word </p> <aside class="example" id="example-3"><div class="marker"> <a class="self-link" href="#example-3">Example<bdi> 3</bdi></a> </div><p>NOAA is an acronym made from the initial letters of the National Oceanic and Atmospheric Administration in the United States. </p></aside> </li> </ol> <div class="note" role="note" id="issue-container-generatedID-42"><div role="heading" class="note-title marker" id="h-note-42" aria-level="3"><span>Note</span></div><p class="">Some companies have adopted what used to be an initialism as their company name. In these cases, the new name of the company is the letters (for example, Ecma) and the word is no longer considered an abbreviation. </p></div> </dd> <dt><dfn data-lt="accessibility-supported|accessibility support|accessibility supported" id="dfn-accessibility-supported" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">accessibility supported</dfn></dt> <dd> <p>supported by users' <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-5" title="hardware and/or software that acts as a user agent, or along with a mainstream user agent, to provide functionality to meet the requirements of users with disabilities that go beyond those offered by mainstream user agents">assistive technologies</a> as well as the accessibility features in browsers and other <a href="#dfn-user-agents" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-user-agents-2" title="any software that retrieves and presents Web content for users">user agents</a></p> <p>To qualify as an accessibility-supported use of a Web content technology (or feature of a technology), both 1 and 2 must be satisfied for a Web content technology (or feature): </p> <ol> <li> <p><strong>The way that the <a href="#dfn-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-technologies-4" title="mechanism for encoding instructions to be rendered, played or executed by user agents">Web content technology</a> is used must be supported by users' assistive technology (AT). </strong> This means that the way that the technology is used has been tested for interoperability with users' assistive technology in the <a href="#dfn-human-language-s" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-human-language-s-3" title="language that is spoken, written or signed (through visual or tactile means) to communicate with humans">human language(s)</a> of the content, </p> <p><strong>AND</strong></p> </li> <li> <p><strong>The Web content technology must have accessibility-supported user agents that are available to users. </strong> This means that at least one of the following four statements is true: </p> <ol> <li> <p>The technology is supported natively in widely-distributed user agents that are also accessibility supported (such as HTML and CSS); </p> <p><strong>OR</strong></p> </li> <li> <p>The technology is supported in a widely-distributed plug-in that is also accessibility supported; </p> <p><strong>OR</strong></p> </li> <li> <p>The content is available in a closed environment, such as a university or corporate network, where the user agent required by the technology and used by the organization is also accessibility supported; </p> <p><strong>OR</strong></p> </li> <li> <p>The user agent(s) that support the technology are accessibility supported and are available for download or purchase in a way that: </p> <ul> <li>does not cost a person with a disability any more than a person without a disability <strong>and</strong></li> <li>is as easy to find and obtain for a person with a disability as it is for a person without disabilities. </li> </ul> </li> </ol> </li> </ol> <div class="note" role="note" id="issue-container-generatedID-43"><div role="heading" class="note-title marker" id="h-note-43" aria-level="3"><span>Note</span></div><p class="">The Accessibility Guidelines Working Group and the <abbr title="World Wide Web Consortium">W3C</abbr> do not specify which or how much support by assistive technologies there must be for a particular use of a Web technology in order for it to be classified as accessibility supported. (See <a href="https://www.w3.org/WAI/WCAG21/Understanding/conformance#support-level">Level of Assistive Technology Support Needed for "Accessibility Support"</a>.) </p></div> <div class="note" role="note" id="issue-container-generatedID-44"><div role="heading" class="note-title marker" id="h-note-44" aria-level="3"><span>Note</span></div><p class="">Web technologies can be used in ways that are not accessibility supported as long as they are not <a href="#dfn-relied-upon" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-relied-upon-7" title="the content would not conform if that technology is turned off or is not supported">relied upon</a> and the page as a whole meets the conformance requirements, including <a href="#cc4">Conformance Requirement 4</a> and <a href="#cc5">Conformance Requirement 5</a>. </p></div> <div class="note" role="note" id="issue-container-generatedID-45"><div role="heading" class="note-title marker" id="h-note-45" aria-level="3"><span>Note</span></div><p class="">When a <a href="#dfn-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-technologies-5" title="mechanism for encoding instructions to be rendered, played or executed by user agents">Web Technology</a> is used in a way that is "accessibility supported," it does not imply that the entire technology or all uses of the technology are supported. Most technologies, including HTML, lack support for at least one feature or use. Pages conform to WCAG only if the uses of the technology that are accessibility supported can be relied upon to meet WCAG requirements. </p></div> <div class="note" role="note" id="issue-container-generatedID-46"><div role="heading" class="note-title marker" id="h-note-46" aria-level="3"><span>Note</span></div><p class="">When citing Web content technologies that have multiple versions, the version(s) supported should be specified. </p></div> <div class="note" role="note" id="issue-container-generatedID-47"><div role="heading" class="note-title marker" id="h-note-47" aria-level="3"><span>Note</span></div><p class="">One way for authors to locate uses of a technology that are accessibility supported would be to consult compilations of uses that are documented to be accessibility supported. (See <a href="https://www.w3.org/WAI/WCAG21/Understanding/conformance#documented-lists">Understanding Accessibility-Supported Web Technology Uses</a>.) Authors, companies, technology vendors, or others may document accessibility-supported ways of using Web content technologies. However, all ways of using technologies in the documentation would need to meet the definition of accessibility-supported Web content technologies above. </p></div> </dd> <dt><dfn id="dfn-alternative-for-time-based-media" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">alternative for time-based media</dfn></dt> <dd> <p>document including correctly sequenced text descriptions of time-based visual and auditory information and providing a means for achieving the outcomes of any time-based interaction </p> <div class="note" role="note" id="issue-container-generatedID-48"><div role="heading" class="note-title marker" id="h-note-48" aria-level="3"><span>Note</span></div><p class="">A screenplay used to create the synchronized media content would meet this definition only if it was corrected to accurately represent the final synchronized media after editing. </p></div> </dd> <dt><dfn id="dfn-ambiguous-to-users-in-general" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">ambiguous to users in general</dfn></dt> <dd> <p>the purpose cannot be determined from the link and all information of the Web page presented to the user simultaneously with the link (i.e., readers without disabilities would not know what a link would do until they activated it) </p> <aside class="example" id="example-4"><div class="marker"> <a class="self-link" href="#example-4">Example<bdi> 4</bdi></a> </div><p>The word guava in the following sentence "One of the notable exports is guava" is a link. The link could lead to a definition of guava, a chart listing the quantity of guava exported or a photograph of people harvesting guava. Until the link is activated, all readers are unsure and the person with a disability is not at any disadvantage. </p></aside> </dd> <dt><dfn id="dfn-ascii-art" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">ASCII art</dfn></dt> <dd> <p>picture created by a spatial arrangement of characters or glyphs (typically from the 95 printable characters defined by ASCII) </p> </dd> <dt><dfn data-lt="assistive technologies|assistive technology" id="dfn-assistive-technologies" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">assistive technology</dfn> (as used in this document) </dt> <dd> <p>hardware and/or software that acts as a <a href="#dfn-user-agents" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-user-agents-3" title="any software that retrieves and presents Web content for users">user agent</a>, or along with a mainstream user agent, to provide functionality to meet the requirements of users with disabilities that go beyond those offered by mainstream user agents </p> <div class="note" role="note" id="issue-container-generatedID-49"><div role="heading" class="note-title marker" id="h-note-49" aria-level="3"><span>Note</span></div><p class="">functionality provided by assistive technology includes alternative presentations (e.g., as synthesized speech or magnified content), alternative input methods (e.g., voice), additional navigation or orientation mechanisms, and content transformations (e.g., to make tables more accessible). </p></div> <div class="note" role="note" id="issue-container-generatedID-50"><div role="heading" class="note-title marker" id="h-note-50" aria-level="3"><span>Note</span></div><p class="">Assistive technologies often communicate data and messages with mainstream user agents by using and monitoring APIs. </p></div> <div class="note" role="note" id="issue-container-generatedID-51"><div role="heading" class="note-title marker" id="h-note-51" aria-level="3"><span>Note</span></div><p class="">The distinction between mainstream user agents and assistive technologies is not absolute. Many mainstream user agents provide some features to assist individuals with disabilities. The basic difference is that mainstream user agents target broad and diverse audiences that usually include people with and without disabilities. Assistive technologies target narrowly defined populations of users with specific disabilities. The assistance provided by an assistive technology is more specific and appropriate to the needs of its target users. The mainstream user agent may provide important functionality to assistive technologies like retrieving Web content from program objects or parsing markup into identifiable bundles. </p></div> <aside class="example" id="example-5"><div class="marker"> <a class="self-link" href="#example-5">Example<bdi> 5</bdi></a> </div><p>Assistive technologies that are important in the context of this document include the following: </p></aside> <ul> <li>screen magnifiers, and other visual reading assistants, which are used by people with visual, perceptual and physical print disabilities to change text font, size, spacing, color, synchronization with speech, etc. in order to improve the visual readability of rendered text and images; </li> <li>screen readers, which are used by people who are blind to read textual information through synthesized speech or braille; </li> <li>text-to-speech software, which is used by some people with cognitive, language, and learning disabilities to convert text into synthetic speech; </li> <li>speech recognition software, which may be used by people who have some physical disabilities;</li> <li>alternative keyboards, which are used by people with certain physical disabilities to simulate the keyboard (including alternate keyboards that use head pointers, single switches, sip/puff and other special input devices.); </li> <li>alternative pointing devices, which are used by people with certain physical disabilities to simulate mouse pointing and button activations. </li> </ul> </dd> <dt><dfn id="dfn-audio" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">audio</dfn></dt> <dd> <p>the technology of sound reproduction</p> <div class="note" role="note" id="issue-container-generatedID-52"><div role="heading" class="note-title marker" id="h-note-52" aria-level="3"><span>Note</span></div><p class="">Audio can be created synthetically (including speech synthesis), recorded from real world sounds, or both. </p></div> </dd> <dt><dfn data-lt="audio descriptions|audio description" id="dfn-audio-descriptions" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">audio description</dfn></dt> <dd> <p>narration added to the soundtrack to describe important visual details that cannot be understood from the main soundtrack alone </p> <div class="note" role="note" id="issue-container-generatedID-53"><div role="heading" class="note-title marker" id="h-note-53" aria-level="3"><span>Note</span></div><p class="">Audio description of <a href="#dfn-video" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-video-4" title="the technology of moving or sequenced pictures or images">video</a> provides information about actions, characters, scene changes, on-screen text, and other visual content. </p></div> <div class="note" role="note" id="issue-container-generatedID-54"><div role="heading" class="note-title marker" id="h-note-54" aria-level="3"><span>Note</span></div><p class="">In standard audio description, narration is added during existing pauses in dialogue. (See also <a href="#dfn-extended-audio-description" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-extended-audio-description-2" title="audio description that is added to an audiovisual presentation by pausing the video so that there is time to add additional description">extended audio description</a>.) </p></div> <div class="note" role="note" id="issue-container-generatedID-55"><div role="heading" class="note-title marker" id="h-note-55" aria-level="3"><span>Note</span></div><p class="">Where all of the <a href="#dfn-video" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-video-5" title="the technology of moving or sequenced pictures or images">video</a> information is already provided in existing <a href="#dfn-audio" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-audio-4" title="the technology of sound reproduction">audio</a>, no additional audio description is necessary. </p></div> <div class="note" role="note" id="issue-container-generatedID-56"><div role="heading" class="note-title marker" id="h-note-56" aria-level="3"><span>Note</span></div><p class="">Also called "video description" and "descriptive narration."</p></div> </dd> <dt><dfn id="dfn-audio-only" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">audio-only</dfn></dt> <dd> <p>a time-based presentation that contains only <a href="#dfn-audio" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-audio-5" title="the technology of sound reproduction">audio</a> (no <a href="#dfn-video" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-video-6" title="the technology of moving or sequenced pictures or images">video</a> and no interaction) </p> </dd> <dt><dfn id="dfn-blinking" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">blinking</dfn></dt> <dd> <p>switch back and forth between two visual states in a way that is meant to draw attention</p> <div class="note" role="note" id="issue-container-generatedID-57"><div role="heading" class="note-title marker" id="h-note-57" aria-level="3"><span>Note</span></div><p class="">See also <a href="#dfn-flashes" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-flashes-3" title="a pair of opposing changes in relative luminance that can cause seizures in some people if it is large enough and in the right frequency range">flash</a>. It is possible for something to be large enough and blink brightly enough at the right frequency to be also classified as a flash. </p></div> </dd> <dt><dfn id="dfn-blocks-of-text" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">blocks of text</dfn></dt> <dd> <p>more than one sentence of text</p> </dd> <dt><dfn id="dfn-captcha" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">CAPTCHA</dfn></dt> <dd> <p>initialism for "Completely Automated Public Turing test to tell Computers and Humans Apart" </p> <div class="note" role="note" id="issue-container-generatedID-58"><div role="heading" class="note-title marker" id="h-note-58" aria-level="3"><span>Note</span></div><p class="">CAPTCHA tests often involve asking the user to type in text that is displayed in an obscured image or audio file. </p></div> <div class="note" role="note" id="issue-container-generatedID-59"><div role="heading" class="note-title marker" id="h-note-59" aria-level="3"><span>Note</span></div><p class="">A Turing test is any system of tests designed to differentiate a human from a computer. It is named after famed computer scientist Alan Turing. The term was coined by researchers at Carnegie Mellon University. </p></div> </dd> <dt><dfn id="dfn-captions" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">captions</dfn></dt> <dd> <p>synchronized visual and/or <a href="#dfn-text-alternative" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-text-alternative-2" title="Text that is programmatically associated with non-text content or referred to from text that is programmatically associated with non-text content. Programmatically associated text is text whose location can be programmatically determined from the non-text content.">text alternative</a> for both speech and non-speech audio information needed to understand the media content </p> <div class="note" role="note" id="issue-container-generatedID-60"><div role="heading" class="note-title marker" id="h-note-60" aria-level="3"><span>Note</span></div><p class="">Captions are similar to dialogue-only subtitles except captions convey not only the content of spoken dialogue, but also equivalents for non-dialogue audio information needed to understand the program content, including sound effects, music, laughter, speaker identification and location. </p></div> <div class="note" role="note" id="issue-container-generatedID-61"><div role="heading" class="note-title marker" id="h-note-61" aria-level="3"><span>Note</span></div><p class="">Closed Captions are equivalents that can be turned on and off with some players.</p></div> <div class="note" role="note" id="issue-container-generatedID-62"><div role="heading" class="note-title marker" id="h-note-62" aria-level="3"><span>Note</span></div><p class="">Open Captions are any captions that cannot be turned off. For example, if the captions are visual equivalent <a href="#dfn-images-of-text" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-images-of-text-7" title="text that has been rendered in a non-text form (e.g., an image) in order to achieve a particular visual effect">images of text</a> embedded in <a href="#dfn-video" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-video-7" title="the technology of moving or sequenced pictures or images">video</a>. </p></div> <div class="note" role="note" id="issue-container-generatedID-63"><div role="heading" class="note-title marker" id="h-note-63" aria-level="3"><span>Note</span></div><p class="">Captions should not obscure or obstruct relevant information in the video.</p></div> <div class="note" role="note" id="issue-container-generatedID-64"><div role="heading" class="note-title marker" id="h-note-64" aria-level="3"><span>Note</span></div><p class="">In some countries, captions are called subtitles.</p></div> <div class="note" role="note" id="issue-container-generatedID-65"><div role="heading" class="note-title marker" id="h-note-65" aria-level="3"><span>Note</span></div><p class=""><a href="#dfn-audio-descriptions" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-audio-descriptions-4" title="narration added to the soundtrack to describe important visual details that cannot be understood from the main soundtrack alone">Audio descriptions</a> can be, but do not need to be, captioned since they are descriptions of information that is already presented visually. </p></div> </dd> <dt><dfn data-lt="change of context|changes of context" id="dfn-change-of-context" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">changes of context</dfn></dt> <dd> <p>major changes that, if made without user awareness, can disorient users who are not able to view the entire page simultaneously </p> <p>Changes in context include changes of:</p> <ol> <li><a href="#dfn-user-agents" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-user-agents-4" title="any software that retrieves and presents Web content for users">user agent</a>; </li> <li><a href="#dfn-viewport" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-viewport-1" title="object in which the user agent presents content">viewport</a>; </li> <li>focus;</li> <li><a href="#dfn-content" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-content-1" title="information and sensory experience to be communicated to the user by means of a user agent, including code or markup that defines the content's structure, presentation, and interactions">content</a> that changes the meaning of the <a href="#dfn-web-page-s" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-web-page-s-16" title="a non-embedded resource obtained from a single URI using HTTP plus any other resources that are used in the rendering or intended to be rendered together with it by a user agent">Web page</a> </li> </ol> <div class="note" role="note" id="issue-container-generatedID-66"><div role="heading" class="note-title marker" id="h-note-66" aria-level="3"><span>Note</span></div><p class="">A change of content is not always a change of context. Changes in content, such as an expanding outline, dynamic menu, or a tab control do not necessarily change the context, unless they also change one of the above (e.g., focus). </p></div> <aside class="example" id="example-6"><div class="marker"> <a class="self-link" href="#example-6">Example<bdi> 6</bdi></a> </div><p>Opening a new window, moving focus to a different component, going to a new page (including anything that would look to a user as if they had moved to a new page) or significantly re-arranging the content of a page are examples of changes of context. </p></aside> </dd> <dt><dfn data-lt="conform|conformance" id="dfn-conform" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">conformance</dfn></dt> <dd> <p>satisfying all the requirements of a given standard, guideline or specification</p> </dd> <dt><dfn data-lt="conforming alternate versions|conforming alternate version" id="dfn-conforming-alternate-versions" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">conforming alternate version</dfn></dt> <dd> <p>version that</p> <ol> <li>conforms at the designated level, and</li> <li>provides all of the same information and <a href="#dfn-functionality" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-functionality-6" title="processes and outcomes achievable through user action">functionality</a> in the same <a href="#dfn-human-language-s" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-human-language-s-4" title="language that is spoken, written or signed (through visual or tactile means) to communicate with humans">human language</a>, and </li> <li>is as up to date as the non-conforming content, and</li> <li> <p>for which at least one of the following is true:</p> <ol> <li>the conforming version can be reached from the non-conforming page via an <a href="#dfn-accessibility-supported" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-supported-6" title="supported by users' assistive technologies as well as the accessibility features in browsers and other user agents">accessibility-supported</a> <a href="#dfn-mechanism" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-mechanism-12" title="process or technique for achieving a result">mechanism</a>, or </li> <li>the non-conforming version can only be reached from the conforming version, or</li> <li>the non-conforming version can only be reached from a conforming page that also provides a mechanism to reach the conforming version </li> </ol> </li> </ol> <div class="note" role="note" id="issue-container-generatedID-67"><div role="heading" class="note-title marker" id="h-note-67" aria-level="3"><span>Note</span></div><p class="">In this definition, "can only be reached" means that there is some mechanism, such as a conditional redirect, that prevents a user from "reaching" (loading) the non-conforming page unless the user had just come from the conforming version. </p></div> <div class="note" role="note" id="issue-container-generatedID-68"><div role="heading" class="note-title marker" id="h-note-68" aria-level="3"><span>Note</span></div><p class="">The alternate version does not need to be matched page for page with the original (e.g., the conforming alternate version may consist of multiple pages). </p></div> <div class="note" role="note" id="issue-container-generatedID-69"><div role="heading" class="note-title marker" id="h-note-69" aria-level="3"><span>Note</span></div><p class="">If multiple language versions are available, then conforming alternate versions are required for each language offered. </p></div> <div class="note" role="note" id="issue-container-generatedID-70"><div role="heading" class="note-title marker" id="h-note-70" aria-level="3"><span>Note</span></div><p class="">Alternate versions may be provided to accommodate different technology environments or user groups. Each version should be as conformant as possible. One version would need to be fully conformant in order to meet <a href="#cc1">conformance requirement 1</a>. </p></div> <div class="note" role="note" id="issue-container-generatedID-71"><div role="heading" class="note-title marker" id="h-note-71" aria-level="3"><span>Note</span></div><p class="">The conforming alternative version does not need to reside within the scope of conformance, or even on the same Web site, as long as it is as freely available as the non-conforming version. </p></div> <div class="note" role="note" id="issue-container-generatedID-72"><div role="heading" class="note-title marker" id="h-note-72" aria-level="3"><span>Note</span></div><p class="">Alternate versions should not be confused with <a href="#dfn-supplementary-content" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-supplementary-content-2" title="additional content that illustrates or clarifies the primary content">supplementary content</a>, which support the original page and enhance comprehension. </p></div> <div class="note" role="note" id="issue-container-generatedID-73"><div role="heading" class="note-title marker" id="h-note-73" aria-level="3"><span>Note</span></div><p class="">Setting user preferences within the content to produce a conforming version is an acceptable mechanism for reaching another version as long as the method used to set the preferences is accessibility supported. </p></div> <p>See <a href="https://www.w3.org/WAI/WCAG21/Understanding/conformance#conforming-alt-versions">Understanding Conforming Alternate Versions</a></p> </dd> <dt><dfn id="dfn-content" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">content</dfn> (Web content) </dt> <dd> <p>information and sensory experience to be communicated to the user by means of a <a href="#dfn-user-agents" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-user-agents-5" title="any software that retrieves and presents Web content for users">user agent</a>, including code or markup that defines the content's <a href="#dfn-structure" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-structure-2" title="The way the parts of a Web page are organized in relation to each other; and The way a collection of Web pages is organized">structure</a>, <a href="#dfn-presentation" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-presentation-3" title="rendering of the content in a form to be perceived by users">presentation</a>, and interactions </p> </dd> <dt><dfn id="dfn-context-sensitive-help" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">context-sensitive help</dfn></dt> <dd> <p>help text that provides information related to the function currently being performed</p> <div class="note" role="note" id="issue-container-generatedID-74"><div role="heading" class="note-title marker" id="h-note-74" aria-level="3"><span>Note</span></div><p class="">Clear labels can act as context-sensitive help.</p></div> </dd> <dt><dfn id="dfn-contrast-ratio" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">contrast ratio</dfn></dt> <dd> <p>(L1 + 0.05) / (L2 + 0.05), where</p> <ul> <li>L1 is the <a href="#dfn-relative-luminance" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-relative-luminance-1" title="the relative brightness of any point in a colorspace, normalized to 0 for darkest black and 1 for lightest white">relative luminance</a> of the lighter of the colors, and </li> <li>L2 is the <a href="#dfn-relative-luminance" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-relative-luminance-2" title="the relative brightness of any point in a colorspace, normalized to 0 for darkest black and 1 for lightest white">relative luminance</a> of the darker of the colors. </li> </ul> <div class="note" role="note" id="issue-container-generatedID-75"><div role="heading" class="note-title marker" id="h-note-75" aria-level="3"><span>Note</span></div><p class="">Contrast ratios can range from 1 to 21 (commonly written 1:1 to 21:1).</p></div> <div class="note" role="note" id="issue-container-generatedID-76"><div role="heading" class="note-title marker" id="h-note-76" aria-level="3"><span>Note</span></div><p class="">Because authors do not have control over user settings as to how text is rendered (for example font smoothing or anti-aliasing), the contrast ratio for text can be evaluated with anti-aliasing turned off. </p></div> <div class="note" role="note" id="issue-container-generatedID-77"><div role="heading" class="note-title marker" id="h-note-77" aria-level="3"><span>Note</span></div><p class="">For the purpose of Success Criteria 1.4.3 and 1.4.6, contrast is measured with respect to the specified background over which the text is rendered in normal usage. If no background color is specified, then white is assumed. </p></div> <div class="note" role="note" id="issue-container-generatedID-78"><div role="heading" class="note-title marker" id="h-note-78" aria-level="3"><span>Note</span></div><p class="">Background color is the specified color of content over which the text is to be rendered in normal usage. It is a failure if no background color is specified when the text color is specified, because the user's default background color is unknown and cannot be evaluated for sufficient contrast. For the same reason, it is a failure if no text color is specified when a background color is specified. </p></div> <div class="note" role="note" id="issue-container-generatedID-79"><div role="heading" class="note-title marker" id="h-note-79" aria-level="3"><span>Note</span></div><p class="">When there is a border around the letter, the border can add contrast and would be used in calculating the contrast between the letter and its background. A narrow border around the letter would be used as the letter. A wide border around the letter that fills in the inner details of the letters acts as a halo and would be considered background. </p></div> <div class="note" role="note" id="issue-container-generatedID-80"><div role="heading" class="note-title marker" id="h-note-80" aria-level="3"><span>Note</span></div><p class="">WCAG conformance should be evaluated for color pairs specified in the content that an author would expect to appear adjacent in typical presentation. Authors need not consider unusual presentations, such as color changes made by the user agent, except where caused by authors' code. </p></div> </dd> <dt><dfn id="dfn-correct-reading-sequence" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">correct reading sequence</dfn></dt> <dd> <p>any sequence where words and paragraphs are presented in an order that does not change the meaning of the content </p> </dd> <dt><dfn data-lt="CSS pixels|CSS pixel" data-plurals="css pixels" id="dfn-css-pixels" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">CSS pixel</dfn></dt> <dd> <p>visual angle of about 0.0213 degrees</p> <p>A CSS pixel is the canonical unit of measure for all lengths and measurements in CSS. This unit is density-independent, and distinct from actual hardware pixels present in a display. User agents and operating systems should ensure that a CSS pixel is set as closely as possible to the <a href="https://www.w3.org/TR/css3-values/#reference-pixel">CSS Values and Units Module Level 3 reference pixel</a> [<cite><a class="bibref" data-link-type="biblio" href="#bib-css3-values" title="CSS Values and Units Module Level 3">css3-values</a></cite>], which takes into account the physical dimensions of the display and the assumed viewing distance (factors that cannot be determined by content authors). </p> </dd> <dt><dfn id="dfn-down-event" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">down-event</dfn></dt> <dd> <p>platform event that occurs when the trigger stimulus of a pointer is depressed</p> <p>The down-event may have different names on different platforms, such as "touchstart" or "mousedown".</p> </dd> <dt><dfn id="dfn-emergency" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">emergency</dfn></dt> <dd> <p>a sudden, unexpected situation or occurrence that requires immediate action to preserve health, safety, or property </p> </dd> <dt><dfn id="dfn-essential" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">essential</dfn></dt> <dd> <p>if removed, would fundamentally change the information or functionality of the content, <strong>and</strong> information and functionality cannot be achieved in another way that would conform </p> </dd> <dt><dfn id="dfn-extended-audio-description" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">extended audio description</dfn></dt> <dd> <p>audio description that is added to an audiovisual presentation by pausing the <a href="#dfn-video" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-video-8" title="the technology of moving or sequenced pictures or images">video</a> so that there is time to add additional description </p> <div class="note" role="note" id="issue-container-generatedID-81"><div role="heading" class="note-title marker" id="h-note-81" aria-level="3"><span>Note</span></div><p class="">This technique is only used when the sense of the <a href="#dfn-video" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-video-9" title="the technology of moving or sequenced pictures or images">video</a> would be lost without the additional <a href="#dfn-audio-descriptions" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-audio-descriptions-5" title="narration added to the soundtrack to describe important visual details that cannot be understood from the main soundtrack alone">audio description</a> and the pauses between dialogue/narration are too short. </p></div> </dd> <dt><dfn data-lt="flashes|flash" id="dfn-flashes" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">flash</dfn></dt> <dd> <p>a pair of opposing changes in <a href="#dfn-relative-luminance" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-relative-luminance-3" title="the relative brightness of any point in a colorspace, normalized to 0 for darkest black and 1 for lightest white">relative luminance</a> that can cause seizures in some people if it is large enough and in the right frequency range </p> <div class="note" role="note" id="issue-container-generatedID-82"><div role="heading" class="note-title marker" id="h-note-82" aria-level="3"><span>Note</span></div><p class="">See <a href="#dfn-general-flash-and-red-flash-thresholds" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-general-flash-and-red-flash-thresholds-2" title="a flash or rapidly changing image sequence is below the threshold (i.e., content passes) if any of the following are true:">general flash and red flash thresholds</a> for information about types of flash that are not allowed. </p></div> <div class="note" role="note" id="issue-container-generatedID-83"><div role="heading" class="note-title marker" id="h-note-83" aria-level="3"><span>Note</span></div><p class="">See also <a href="#dfn-blinking" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-blinking-2" title="switch back and forth between two visual states in a way that is meant to draw attention">blinking</a>. </p></div> </dd> <dt><dfn id="dfn-functionality" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">functionality</dfn></dt> <dd> <p><a href="#dfn-processes" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-processes-3" title="series of user actions where each action is required in order to complete an activity">processes</a> and outcomes achievable through user action </p> </dd> <dt><dfn id="dfn-general-flash-and-red-flash-thresholds" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">general flash and red flash thresholds</dfn></dt> <dd> <p>a <a href="#dfn-flashes" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-flashes-4" title="a pair of opposing changes in relative luminance that can cause seizures in some people if it is large enough and in the right frequency range">flash</a> or rapidly changing image sequence is below the threshold (i.e., content <strong>passes</strong>) if any of the following are true: </p> <ol> <li>there are no more than three <strong>general flashes</strong> and / or no more than three <strong>red flashes</strong> within any one-second period; or </li> <li>the combined area of flashes occurring concurrently occupies no more than a total of .006 steradians within any 10 degree visual field on the screen (25% of any 10 degree visual field on the screen) at typical viewing distance </li> </ol> <p>where:</p> <ul> <li>A <strong>general flash</strong> is defined as a pair of opposing changes in <a href="#dfn-relative-luminance" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-relative-luminance-4" title="the relative brightness of any point in a colorspace, normalized to 0 for darkest black and 1 for lightest white">relative luminance</a> of 10% or more of the maximum relative luminance (1.0) where the relative luminance of the darker image is below 0.80; and where "a pair of opposing changes" is an increase followed by a decrease, or a decrease followed by an increase, and </li> <li>A <strong>red flash</strong> is defined as any pair of opposing transitions involving a saturated red </li> </ul> <p><em>Exception:</em> Flashing that is a fine, balanced, pattern such as white noise or an alternating checkerboard pattern with "squares" smaller than 0.1 degree (of visual field at typical viewing distance) on a side does not violate the thresholds. </p> <div class="note" role="note" id="issue-container-generatedID-84"><div role="heading" class="note-title marker" id="h-note-84" aria-level="3"><span>Note</span></div><p class="">For general software or Web content, using a 341 x 256 pixel rectangle anywhere on the displayed screen area when the content is viewed at 1024 x 768 pixels will provide a good estimate of a 10 degree visual field for standard screen sizes and viewing distances (e.g., 15-17 inch screen at 22-26 inches). This resolution of 75 - 85 ppi is known to be lower, and thus more conservative than the nominal CSS pixel resolution of 96 ppi in CSS specifications. Higher resolutions displays showing the same rendering of the content yield smaller and safer images so it is lower resolutions that are used to define the thresholds. </p></div> <div class="note" role="note" id="issue-container-generatedID-85"><div role="heading" class="note-title marker" id="h-note-85" aria-level="3"><span>Note</span></div><p class="">A transition is the change in relative luminance (or relative luminance/color for red flashing) between adjacent peaks and valleys in a plot of relative luminance (or relative luminance/color for red flashing) measurement against time. A flash consists of two opposing transitions. </p></div> <div class="note" role="note" id="issue-container-generatedID-86"><div role="heading" class="note-title marker" id="h-note-86" aria-level="3"><span>Note</span></div><p class="">The working definition (as of 2022) in the field for <strong>"pair of opposing transitions involving a saturated red"</strong> is a pair of opposing transitions where, one transition is either to or from a state with a value R/(R + G + B) that is greater than or equal to 0.8, and the difference between states is more than 0.2 (unitless) in the CIE 1976 UCS chromaticity diagram. [<cite><a class="bibref" data-link-type="biblio" href="#bib-iso_9241-391" title="Ergonomics of human-system interaction—Part 391: Requirements, analysis and compliance test methods for the reduction of photosensitive seizures">ISO_9241-391</a></cite>] </p></div> <div class="note" role="note" id="issue-container-generatedID-87"><div role="heading" class="note-title marker" id="h-note-87" aria-level="3"><span>Note</span></div><p class="">Tools are available that will carry out analysis from video screen capture. However, no tool is necessary to evaluate for this condition if flashing is less than or equal to 3 flashes in any one second. Content automatically passes (see #1 and #2 above). </p></div> </dd> <dt><dfn data-lt="human language(s)|human language" id="dfn-human-language-s" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">human language</dfn></dt> <dd> <p>language that is spoken, written or signed (through visual or tactile means) to communicate with humans </p> <div class="note" role="note" id="issue-container-generatedID-88"><div role="heading" class="note-title marker" id="h-note-88" aria-level="3"><span>Note</span></div><p class="">See also <a href="#dfn-sign-language" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-sign-language-1" title="a language using combinations of movements of the hands and arms, facial expressions, or body positions to convey meaning">sign language</a>. </p></div> </dd> <dt><dfn data-lt="idioms|idiom" id="dfn-idioms" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">idiom</dfn></dt> <dd> <p>phrase whose meaning cannot be deduced from the meaning of the individual words and the specific words cannot be changed without losing the meaning </p> <div class="note" role="note" id="issue-container-generatedID-89"><div role="heading" class="note-title marker" id="h-note-89" aria-level="3"><span>Note</span></div><p class="">idioms cannot be translated directly, word for word, without losing their (cultural or language-dependent) meaning. </p></div> <aside class="example" id="example-7"><div class="marker"> <a class="self-link" href="#example-7">Example<bdi> 7</bdi></a> </div><p>In English, "spilling the beans" means "revealing a secret." However, "knocking over the beans" or "spilling the vegetables" does not mean the same thing. </p></aside> <aside class="example" id="example-8"><div class="marker"> <a class="self-link" href="#example-8">Example<bdi> 8</bdi></a> </div><p>In Japanese, the phrase "<span lang="ja">さじを投げる</span>" literally translates into "he throws a spoon," but it means that there is nothing he can do and finally he gives up. </p></aside> <aside class="example" id="example-9"><div class="marker"> <a class="self-link" href="#example-9">Example<bdi> 9</bdi></a> </div><p>In Dutch, "<span lang="nl">Hij ging met de kippen op stok</span>" literally translates into "He went to roost with the chickens," but it means that he went to bed early. </p></aside> </dd> <dt><dfn data-lt="images of text|image of text" id="dfn-images-of-text" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">image of text</dfn></dt> <dd> <p>text that has been rendered in a non-text form (e.g., an image) in order to achieve a particular visual effect </p> <div class="note" role="note" id="issue-container-generatedID-90"><div role="heading" class="note-title marker" id="h-note-90" aria-level="3"><span>Note</span></div><p class="">This does not include <a href="#dfn-text" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-text-9" title="sequence of characters that can be programmatically determined, where the sequence is expressing something in human language">text</a> that is part of a picture that contains significant other visual content. </p></div> <aside class="example" id="example-10"><div class="marker"> <a class="self-link" href="#example-10">Example<bdi> 10</bdi></a> </div><p>A person's name on a nametag in a photograph.</p></aside> </dd> <dt><dfn id="dfn-informative" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">informative</dfn></dt> <dd> <p>for information purposes and not required for conformance</p> <div class="note" role="note" id="issue-container-generatedID-91"><div role="heading" class="note-title marker" id="h-note-91" aria-level="3"><span>Note</span></div><p class="">Content required for <a href="#dfn-conform" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-conform-3" title="satisfying all the requirements of a given standard, guideline or specification">conformance</a> is referred to as "<a href="#dfn-normative" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-normative-2" title="required for conformance">normative</a>."</p></div> </dd> <dt><dfn id="dfn-input-error" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">input error</dfn></dt> <dd> <p>information provided by the user that is not accepted</p> <div class="note" role="note" id="issue-container-generatedID-92"><div role="heading" class="note-title marker" id="h-note-92" aria-level="3"><span>Note</span></div><div class=""> <p>This includes:</p> <ol> <li>Information that is required by the <a href="#dfn-web-page-s" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-web-page-s-17" title="a non-embedded resource obtained from a single URI using HTTP plus any other resources that are used in the rendering or intended to be rendered together with it by a user agent">Web page</a> but omitted by the user </li> <li>Information that is provided by the user but that falls outside the required data format or values </li> </ol> </div></div> </dd> <dt><dfn id="dfn-jargon" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">jargon</dfn></dt> <dd> <p>words used in a particular way by people in a particular field</p> <aside class="example" id="example-11"><div class="marker"> <a class="self-link" href="#example-11">Example<bdi> 11</bdi></a> </div><p>The word StickyKeys is jargon from the field of assistive technology/accessibility.</p></aside> </dd> <dt><dfn id="dfn-keyboard-interface" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">keyboard interface</dfn></dt> <dd> <p>interface used by software to obtain keystroke input</p> <div class="note" role="note" id="issue-container-generatedID-93"><div role="heading" class="note-title marker" id="h-note-93" aria-level="3"><span>Note</span></div><div class=""> <p>A keyboard interface allows users to provide keystroke input to programs even if the native technology does not contain a keyboard.</p> <aside class="example" id="example-12"><div class="marker"> <a class="self-link" href="#example-12">Example<bdi> 12</bdi></a> </div><p>A touchscreen PDA has a keyboard interface built into its operating system as well as a connector for external keyboards. Applications on the PDA can use the interface to obtain keyboard input either from an external keyboard or from other applications that provide simulated keyboard output, such as handwriting interpreters or speech-to-text applications with "keyboard emulation" functionality.</p></aside> </div></div> <div class="note" role="note" id="issue-container-generatedID-94"><div role="heading" class="note-title marker" id="h-note-94" aria-level="3"><span>Note</span></div><p class="">Operation of the application (or parts of the application) through a keyboard-operated mouse emulator, such as MouseKeys, does not qualify as operation through a keyboard interface because operation of the program is through its pointing device interface, not through its keyboard interface. </p></div> </dd> <dt><dfn data-lt="keyboard shortcuts|keyboard shortcut" id="dfn-keyboard-shortcuts" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">keyboard shortcut</dfn></dt> <dd> <p>alternative means of triggering an action by the pressing of one or more keys</p> </dd> <dt><dfn data-lt="labels|label" id="dfn-labels" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">label</dfn></dt> <dd> <p><a href="#dfn-text" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-text-10" title="sequence of characters that can be programmatically determined, where the sequence is expressing something in human language">text</a> or other component with a <a href="#dfn-text-alternative" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-text-alternative-3" title="Text that is programmatically associated with non-text content or referred to from text that is programmatically associated with non-text content. Programmatically associated text is text whose location can be programmatically determined from the non-text content.">text alternative</a> that is presented to a user to identify a component within Web <a href="#dfn-content" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-content-2" title="information and sensory experience to be communicated to the user by means of a user agent, including code or markup that defines the content's structure, presentation, and interactions">content</a></p> <div class="note" role="note" id="issue-container-generatedID-95"><div role="heading" class="note-title marker" id="h-note-95" aria-level="3"><span>Note</span></div><p class="">A label is presented to all users whereas the <a href="#dfn-name" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-name-4" title="text by which software can identify a component within Web content to the user">name</a> may be hidden and only exposed by assistive technology. In many (but not all) cases the name and the label are the same. </p></div> <div class="note" role="note" id="issue-container-generatedID-96"><div role="heading" class="note-title marker" id="h-note-96" aria-level="3"><span>Note</span></div><p class="">The term label is not limited to the label element in HTML.</p></div> </dd> <dt><dfn data-lt="large-scale|large scale" id="dfn-large-scale" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">large scale</dfn> (text) </dt> <dd> <p>with at least 18 point or 14 point bold or font size that would yield equivalent size for Chinese, Japanese and Korean (CJK) fonts </p> <div class="note" role="note" id="issue-container-generatedID-97"><div role="heading" class="note-title marker" id="h-note-97" aria-level="3"><span>Note</span></div><p class="">Fonts with extraordinarily thin strokes or unusual features and characteristics that reduce the familiarity of their letter forms are harder to read, especially at lower contrast levels. </p></div> <div class="note" role="note" id="issue-container-generatedID-98"><div role="heading" class="note-title marker" id="h-note-98" aria-level="3"><span>Note</span></div><p class="">Font size is the size when the content is delivered. It does not include resizing that may be done by a user. </p></div> <div class="note" role="note" id="issue-container-generatedID-99"><div role="heading" class="note-title marker" id="h-note-99" aria-level="3"><span>Note</span></div><p class="">The actual size of the character that a user sees is dependent both on the author-defined size and the user's display or user agent settings. For many mainstream body text fonts, 14 and 18 point is roughly equivalent to 1.2 and 1.5 em or to 120% or 150% of the default size for body text (assuming that the body font is 100%), but authors would need to check this for the particular fonts in use. When fonts are defined in relative units, the actual point size is calculated by the user agent for display. The point size should be obtained from the user agent, or calculated based on font metrics as the user agent does, when evaluating this success criterion. Users who have low vision would be responsible for choosing appropriate settings. </p></div> <div class="note" role="note" id="issue-container-generatedID-100"><div role="heading" class="note-title marker" id="h-note-100" aria-level="3"><span>Note</span></div><p class="">When using text without specifying the font size, the smallest font size used on major browsers for unspecified text would be a reasonable size to assume for the font. If a level 1 heading is rendered in 14pt bold or higher on major browsers, then it would be reasonable to assume it is large text. Relative scaling can be calculated from the default sizes in a similar fashion. </p></div> <div class="note" role="note" id="issue-container-generatedID-101"><div role="heading" class="note-title marker" id="h-note-101" aria-level="3"><span>Note</span></div><p class="">The 18 and 14 point sizes for roman texts are taken from the minimum size for large print (14pt) and the larger standard font size (18pt). For other fonts such as CJK languages, the "equivalent" sizes would be the minimum large print size used for those languages and the next larger standard large print size. </p></div> </dd> <dt><dfn id="dfn-legal-commitments" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">legal commitments</dfn></dt> <dd> <p>transactions where the person incurs a legally binding obligation or benefit</p> <aside class="example" id="example-13"><div class="marker"> <a class="self-link" href="#example-13">Example<bdi> 13</bdi></a> </div><p>A marriage license, a stock trade (financial and legal), a will, a loan, adoption, signing up for the army, a contract of any type, etc. </p></aside> </dd> <dt><dfn data-lt="purpose of each link|link purpose" id="dfn-purpose-of-each-link" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">link purpose</dfn></dt> <dd> <p>nature of the result obtained by activating a hyperlink</p> </dd> <dt><dfn id="dfn-live" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">live</dfn></dt> <dd> <p>information captured from a real-world event and transmitted to the receiver with no more than a broadcast delay </p> <div class="note" role="note" id="issue-container-generatedID-102"><div role="heading" class="note-title marker" id="h-note-102" aria-level="3"><span>Note</span></div><p class="">A broadcast delay is a short (usually automated) delay, for example used in order to give the broadcaster time to cue or censor the audio (or video) feed, but not sufficient to allow significant editing. </p></div> <div class="note" role="note" id="issue-container-generatedID-103"><div role="heading" class="note-title marker" id="h-note-103" aria-level="3"><span>Note</span></div><p class="">If information is completely computer generated, it is not live.</p></div> </dd> <dt><dfn id="dfn-lower-secondary-education-level" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">lower secondary education level</dfn></dt> <dd> <p>the two or three year period of education that begins after completion of six years of school and ends nine years after the beginning of <a href="#dfn-primary-education" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-primary-education-1" title="six year time period that begins between the ages of five and seven, possibly without any previous education">primary education</a></p> <div class="note" role="note" id="issue-container-generatedID-104"><div role="heading" class="note-title marker" id="h-note-104" aria-level="3"><span>Note</span></div><p class="">This definition is based on the International Standard Classification of Education [<cite><a class="bibref" data-link-type="biblio" href="#bib-unesco" title="International Standard Classification of Education">UNESCO</a></cite>]. </p></div> </dd> <dt><dfn id="dfn-mechanism" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">mechanism</dfn></dt> <dd> <p><a href="#dfn-processes" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-processes-4" title="series of user actions where each action is required in order to complete an activity">process</a> or technique for achieving a result </p> <div class="note" role="note" id="issue-container-generatedID-105"><div role="heading" class="note-title marker" id="h-note-105" aria-level="3"><span>Note</span></div><p class="">The mechanism may be explicitly provided in the content, or may be <a href="#dfn-relied-upon" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-relied-upon-8" title="the content would not conform if that technology is turned off or is not supported">relied upon</a> to be provided by either the platform or by <a href="#dfn-user-agents" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-user-agents-6" title="any software that retrieves and presents Web content for users">user agents</a>, including <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-6" title="hardware and/or software that acts as a user agent, or along with a mainstream user agent, to provide functionality to meet the requirements of users with disabilities that go beyond those offered by mainstream user agents">assistive technologies</a>. </p></div> <div class="note" role="note" id="issue-container-generatedID-106"><div role="heading" class="note-title marker" id="h-note-106" aria-level="3"><span>Note</span></div><p class="">The mechanism needs to meet all success criteria for the conformance level claimed.</p></div> </dd> <dt><dfn id="dfn-media-alternative-for-text" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">media alternative for text</dfn></dt> <dd> <p>media that presents no more information than is already presented in text (directly or via text alternatives) </p> <div class="note" role="note" id="issue-container-generatedID-107"><div role="heading" class="note-title marker" id="h-note-107" aria-level="3"><span>Note</span></div><p class="">A media alternative for text is provided for those who benefit from alternate representations of text. Media alternatives for text may be audio-only, video-only (including sign-language video), or audio-video. </p></div> </dd> <dt><dfn id="dfn-motion-animation" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">motion animation</dfn></dt> <dd> <p>addition of steps between conditions to create the illusion of movement or to give a sense of a smooth transition</p> <aside class="example" id="example-14"><div class="marker"> <a class="self-link" href="#example-14">Example<bdi> 14</bdi></a> </div><p>For example, an element which moves into place or changes size while appearing is considered to be animated. An element which appears instantly without transitioning is not using animation. Motion animation does not include changes of color, blurring, or opacity which do not change the perceived size, shape, or position of the element.</p></aside> </dd> <dt><dfn id="dfn-name" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">name</dfn></dt> <dd> <p>text by which software can identify a component within Web content to the user</p> <div class="note" role="note" id="issue-container-generatedID-108"><div role="heading" class="note-title marker" id="h-note-108" aria-level="3"><span>Note</span></div><p class="">The name may be hidden and only exposed by assistive technology, whereas a <a href="#dfn-labels" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-labels-4" title="text or other component with a text alternative that is presented to a user to identify a component within Web content">label</a> is presented to all users. In many (but not all) cases, the label and the name are the same. </p></div> <div class="note" role="note" id="issue-container-generatedID-109"><div role="heading" class="note-title marker" id="h-note-109" aria-level="3"><span>Note</span></div><p class="">This is unrelated to the name attribute in HTML.</p></div> </dd> <dt><dfn id="dfn-navigated-sequentially" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">navigated sequentially</dfn></dt> <dd> <p>navigated in the order defined for advancing focus (from one element to the next) using a <a href="#dfn-keyboard-interface" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-keyboard-interface-4" title="interface used by software to obtain keystroke input">keyboard interface</a></p> </dd> <dt><dfn id="dfn-non-text-content" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">non-text content</dfn></dt> <dd> <p>any content that is not a sequence of characters that can be <a href="#dfn-programmatically-determinable" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-programmatically-determinable-9" title="determined by software from author-supplied data provided in a way that different user agents, including assistive technologies, can extract and present this information to users in different modalities">programmatically determined</a> or where the sequence is not expressing something in <a href="#dfn-human-language-s" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-human-language-s-5" title="language that is spoken, written or signed (through visual or tactile means) to communicate with humans">human language</a></p> <div class="note" role="note" id="issue-container-generatedID-110"><div role="heading" class="note-title marker" id="h-note-110" aria-level="3"><span>Note</span></div><p class="">This includes <a href="#dfn-ascii-art" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-ascii-art-1" title="picture created by a spatial arrangement of characters or glyphs (typically from the 95 printable characters defined by ASCII)">ASCII Art</a> (which is a pattern of characters), emoticons, leetspeak (which uses character substitution), and images representing text </p></div> </dd> <dt><dfn id="dfn-normative" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">normative</dfn></dt> <dd> <p>required for conformance</p> <div class="note" role="note" id="issue-container-generatedID-111"><div role="heading" class="note-title marker" id="h-note-111" aria-level="3"><span>Note</span></div><p class="">One may conform in a variety of well-defined ways to this document.</p></div> <div class="note" role="note" id="issue-container-generatedID-112"><div role="heading" class="note-title marker" id="h-note-112" aria-level="3"><span>Note</span></div><p class="">Content identified as "<a href="#dfn-informative" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-informative-2" title="for information purposes and not required for conformance">informative</a>" or "non-normative" is never required for <a href="#dfn-conform" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-conform-4" title="satisfying all the requirements of a given standard, guideline or specification">conformance</a>.</p></div> </dd> <dt><dfn id="dfn-on-a-full-screen-window" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">on a full-screen window</dfn></dt> <dd> <p>on the most common sized desktop/laptop display with the viewport maximized</p> <div class="note" role="note" id="issue-container-generatedID-113"><div role="heading" class="note-title marker" id="h-note-113" aria-level="3"><span>Note</span></div><p class="">Since people generally keep their computers for several years, it is best not to rely on the latest desktop/laptop display resolutions but to consider the common desktop/laptop display resolutions over the course of several years when making this evaluation. </p></div> </dd> <dt><dfn data-lt="pause|paused" id="dfn-pause" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">paused</dfn></dt> <dd> <p>stopped by user request and not resumed until requested by user</p> </dd> <dt><dfn data-lt="pointer inputs|pointer input" id="dfn-pointer-inputs" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">pointer input</dfn></dt> <dd> <p>input from a device that can target a specific coordinate (or set of coordinates) on a screen, such as a mouse, pen, or touch contact </p> <div class="note" role="note" id="issue-container-generatedID-114"><div role="heading" class="note-title marker" id="h-note-114" aria-level="3"><span>Note</span></div><p class="">See the <a href="https://www.w3.org/TR/pointerevents/#dfn-pointer">Pointer Events definition for "pointer"</a> [<cite><a class="bibref" data-link-type="biblio" href="#bib-pointerevents" title="Pointer Events">pointerevents</a></cite>].</p></div> </dd> <dt><dfn id="dfn-prerecorded" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">prerecorded</dfn></dt> <dd> <p>information that is not <a href="#dfn-live" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-live-3" title="information captured from a real-world event and transmitted to the receiver with no more than a broadcast delay">live</a></p> </dd> <dt><dfn id="dfn-presentation" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">presentation</dfn></dt> <dd> <p>rendering of the <a href="#dfn-content" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-content-3" title="information and sensory experience to be communicated to the user by means of a user agent, including code or markup that defines the content's structure, presentation, and interactions">content</a> in a form to be perceived by users </p> </dd> <dt><dfn data-lt="primary education|primary education level" id="dfn-primary-education" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">primary education level</dfn></dt> <dd> <p>six year time period that begins between the ages of five and seven, possibly without any previous education </p> <div class="note" role="note" id="issue-container-generatedID-115"><div role="heading" class="note-title marker" id="h-note-115" aria-level="3"><span>Note</span></div><p class="">This definition is based on the International Standard Classification of Education [<cite><a class="bibref" data-link-type="biblio" href="#bib-unesco" title="International Standard Classification of Education">UNESCO</a></cite>]. </p></div> </dd> <dt><dfn data-lt="processes|process" id="dfn-processes" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">process</dfn></dt> <dd> <p>series of user actions where each action is required in order to complete an activity</p> <aside class="example" id="example-15"><div class="marker"> <a class="self-link" href="#example-15">Example<bdi> 15</bdi></a> </div><p>Successful use of a series of Web pages on a shopping site requires users to view alternative products, prices and offers, select products, submit an order, provide shipping information and provide payment information. </p></aside> <aside class="example" id="example-16"><div class="marker"> <a class="self-link" href="#example-16">Example<bdi> 16</bdi></a> </div><p>An account registration page requires successful completion of a <a href="https://www.w3.org/TR/turingtest/">Turing test</a> before the registration form can be accessed. </p></aside> </dd> <dt><dfn data-lt="programmatically determinable|programmatically determined" id="dfn-programmatically-determinable" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">programmatically determined</dfn> (programmatically determinable) </dt> <dd> <p>determined by software from author-supplied data provided in a way that different <a href="#dfn-user-agents" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-user-agents-7" title="any software that retrieves and presents Web content for users">user agents</a>, including <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-7" title="hardware and/or software that acts as a user agent, or along with a mainstream user agent, to provide functionality to meet the requirements of users with disabilities that go beyond those offered by mainstream user agents">assistive technologies</a>, can extract and present this information to users in different modalities </p> <aside class="example" id="example-17"><div class="marker"> <a class="self-link" href="#example-17">Example<bdi> 17</bdi></a> </div><p>Determined in a markup language from elements and attributes that are accessed directly by commonly available assistive technology. </p></aside> <aside class="example" id="example-18"><div class="marker"> <a class="self-link" href="#example-18">Example<bdi> 18</bdi></a> </div><p>Determined from technology-specific data structures in a non-markup language and exposed to assistive technology via an accessibility API that is supported by commonly available assistive technology. </p></aside> </dd> <dt><dfn id="dfn-programmatically-determined-link-context" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">programmatically determined link context</dfn></dt> <dd> <p>additional information that can be <a href="#dfn-programmatically-determinable" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-programmatically-determinable-10" title="determined by software from author-supplied data provided in a way that different user agents, including assistive technologies, can extract and present this information to users in different modalities">programmatically determined</a> from <a href="#dfn-relationships" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-relationships-2" title="meaningful associations between distinct pieces of content">relationships</a> with a link, combined with the link text, and presented to users in different modalities </p> <aside class="example" id="example-19"><div class="marker"> <a class="self-link" href="#example-19">Example<bdi> 19</bdi></a> </div><p>In HTML, information that is programmatically determinable from a link in English includes text that is in the same paragraph, list, or table cell as the link or in a table header cell that is associated with the table cell that contains the link. </p></aside> <div class="note" role="note" id="issue-container-generatedID-116"><div role="heading" class="note-title marker" id="h-note-116" aria-level="3"><span>Note</span></div><p class="">Since screen readers interpret punctuation, they can also provide the context from the current sentence, when the focus is on a link in that sentence. </p></div> </dd> <dt><dfn id="dfn-programmatically-set" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">programmatically set</dfn></dt> <dd> <p>set by software using methods that are supported by user agents, including assistive technologies </p> </dd> <dt><dfn id="dfn-pure-decoration" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">pure decoration</dfn></dt> <dd> <p>serving only an aesthetic purpose, providing no information, and having no functionality</p> <div class="note" role="note" id="issue-container-generatedID-117"><div role="heading" class="note-title marker" id="h-note-117" aria-level="3"><span>Note</span></div><p class="">Text is only purely decorative if the words can be rearranged or substituted without changing their purpose. </p></div> <aside class="example" id="example-20"><div class="marker"> <a class="self-link" href="#example-20">Example<bdi> 20</bdi></a> </div><p>The cover page of a dictionary has random words in very light text in the background.</p></aside> </dd> <dt><dfn data-lt="real-time events|real-time event" id="dfn-real-time-events" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">real-time event</dfn></dt> <dd> <p>event that a) occurs at the same time as the viewing and b) is not completely generated by the content </p> <aside class="example" id="example-21"><div class="marker"> <a class="self-link" href="#example-21">Example<bdi> 21</bdi></a> </div><p>A Webcast of a live performance (occurs at the same time as the viewing and is not prerecorded). </p></aside> <aside class="example" id="example-22"><div class="marker"> <a class="self-link" href="#example-22">Example<bdi> 22</bdi></a> </div><p>An on-line auction with people bidding (occurs at the same time as the viewing).</p></aside> <aside class="example" id="example-23"><div class="marker"> <a class="self-link" href="#example-23">Example<bdi> 23</bdi></a> </div><p>Live humans interacting in a virtual world using avatars (is not completely generated by the content and occurs at the same time as the viewing). </p></aside> </dd> <dt><dfn data-lt="regions|region" id="dfn-regions" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">region</dfn></dt> <dd> <p>perceivable, programmatically determined section of content</p> <div class="note" role="note" id="issue-container-generatedID-118"><div role="heading" class="note-title marker" id="h-note-118" aria-level="3"><span>Note</span></div><p class="">In HTML, any area designated with a landmark role would be a region.</p></div> </dd> <dt><dfn id="dfn-relationships" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">relationships</dfn></dt> <dd> <p>meaningful associations between distinct pieces of content</p> </dd> <dt><dfn id="dfn-relative-luminance" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">relative luminance</dfn></dt> <dd> <p>the relative brightness of any point in a colorspace, normalized to 0 for darkest black and 1 for lightest white </p> <div class="note" role="note" id="issue-container-generatedID-119"><div role="heading" class="note-title marker" id="h-note-119" aria-level="3"><span>Note</span></div><div class=""> <p>For the sRGB colorspace, the relative luminance of a color is defined as L = 0.2126 * <strong>R</strong> + 0.7152 * <strong>G</strong> + 0.0722 * <strong>B</strong> where <strong>R</strong>, <strong>G</strong> and <strong>B</strong> are defined as: </p> <ul> <li>if RsRGB <= 0.04045 then <strong>R</strong> = RsRGB/12.92 else <strong>R</strong> = ((RsRGB+0.055)/1.055) ^ 2.4 </li> <li>if GsRGB <= 0.04045 then <strong>G</strong> = GsRGB/12.92 else <strong>G</strong> = ((GsRGB+0.055)/1.055) ^ 2.4 </li> <li>if BsRGB <= 0.04045 then <strong>B</strong> = BsRGB/12.92 else <strong>B</strong> = ((BsRGB+0.055)/1.055) ^ 2.4 </li> </ul> <p>and RsRGB, GsRGB, and BsRGB are defined as:</p> <ul> <li>RsRGB = R8bit/255</li> <li>GsRGB = G8bit/255</li> <li>BsRGB = B8bit/255</li> </ul> <p>The "^" character is the exponentiation operator. (Formula taken from [<cite><a class="bibref" data-link-type="biblio" href="#bib-srgb" title="Multimedia systems and equipment - Colour measurement and management - Part 2-1: Colour management - Default RGB colour space - sRGB">SRGB</a></cite>].) </p> </div></div> <div class="note" role="note" id="issue-container-generatedID-120"><div role="heading" class="note-title marker" id="h-note-120" aria-level="3"><span>Note</span></div><p class="">Before May 2021 the value of 0.04045 in the definition was different (0.03928). It was taken from an older version of the specification and has been updated. It has no practical effect on the calculations in the context of these guidelines.</p></div> <div class="note" role="note" id="issue-container-generatedID-121"><div role="heading" class="note-title marker" id="h-note-121" aria-level="3"><span>Note</span></div><p class="">Almost all systems used today to view Web content assume sRGB encoding. Unless it is known that another color space will be used to process and display the content, authors should evaluate using sRGB colorspace. If using other color spaces, see <a href="https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum">Understanding Success Criterion 1.4.3</a>. </p></div> <div class="note" role="note" id="issue-container-generatedID-122"><div role="heading" class="note-title marker" id="h-note-122" aria-level="3"><span>Note</span></div><p class="">If dithering occurs after delivery, then the source color value is used. For colors that are dithered at the source, the average values of the colors that are dithered should be used (average R, average G, and average B). </p></div> <div class="note" role="note" id="issue-container-generatedID-123"><div role="heading" class="note-title marker" id="h-note-123" aria-level="3"><span>Note</span></div><p class="">Tools are available that automatically do the calculations when testing contrast and flash. </p></div> <div class="note" role="note" id="issue-container-generatedID-124"><div role="heading" class="note-title marker" id="h-note-124" aria-level="3"><span>Note</span></div><p class="">A <a href="relative-luminance.html">separate page giving the relative luminance definition using MathML</a> to display the formulas is available. </p></div> </dd> <dt><dfn id="dfn-relied-upon" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">relied upon</dfn> (technologies that are) </dt> <dd> <p>the content would not <a href="#dfn-conform" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-conform-5" title="satisfying all the requirements of a given standard, guideline or specification">conform</a> if that <a href="#dfn-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-technologies-6" title="mechanism for encoding instructions to be rendered, played or executed by user agents">technology</a> is turned off or is not supported </p> </dd> <dt><dfn id="dfn-role" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">role</dfn></dt> <dd> <p>text or number by which software can identify the function of a component within Web content </p> <aside class="example" id="example-24"><div class="marker"> <a class="self-link" href="#example-24">Example<bdi> 24</bdi></a> </div><p>A number that indicates whether an image functions as a hyperlink, command button, or check box. </p></aside> </dd> <dt><dfn id="dfn-same-functionality" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">same functionality</dfn></dt> <dd> <p>same result when used</p> <aside class="example" id="example-25"><div class="marker"> <a class="self-link" href="#example-25">Example<bdi> 25</bdi></a> </div><p>A submit "search" button on one Web page and a "find" button on another Web page may both have a field to enter a term and list topics in the Web site related to the term submitted. In this case, they would have the same functionality but would not be labeled consistently. </p></aside> </dd> <dt><dfn id="dfn-same-relative-order" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">same relative order</dfn></dt> <dd> <p>same position relative to other items</p> <div class="note" role="note" id="issue-container-generatedID-125"><div role="heading" class="note-title marker" id="h-note-125" aria-level="3"><span>Note</span></div><p class="">Items are considered to be in the same relative order even if other items are inserted or removed from the original order. For example, expanding navigation menus may insert an additional level of detail or a secondary navigation section may be inserted into the reading order. </p></div> </dd> <dt><dfn data-lt="satisfies|satisfies a success criterion" id="dfn-satisfies" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">satisfies a success criterion</dfn></dt> <dd> <p>the success criterion does not evaluate to 'false' when applied to the page</p> </dd> <dt><dfn id="dfn-section" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">section</dfn></dt> <dd> <p>a self-contained portion of written content that deals with one or more related topics or thoughts </p> <div class="note" role="note" id="issue-container-generatedID-126"><div role="heading" class="note-title marker" id="h-note-126" aria-level="3"><span>Note</span></div><p class="">A section may consist of one or more paragraphs and include graphics, tables, lists and sub-sections. </p></div> </dd> <dt><dfn id="dfn-set-of-web-pages" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">set of web pages</dfn></dt> <dd> <p>collection of <a href="#dfn-web-page-s" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-web-page-s-18" title="a non-embedded resource obtained from a single URI using HTTP plus any other resources that are used in the rendering or intended to be rendered together with it by a user agent">web pages</a> that share a common purpose and that are created by the same author, group or organization </p> <aside class="example" id="example-26"><div class="marker"> <a class="self-link" href="#example-26">Example<bdi> 26</bdi></a> </div><p>Examples include:</p> <ul> <li>a publication which is split across multiple Web pages, where each page contains one chapter or other significant section of the work. The publication is logically a single contiguous unit, and contains navigation features that enable access to the full set of pages.</li> <li>an e-commerce website shows products in a set of Web pages that all share the same navigation and identification. However, when progressing to the checkout process, the template changes; the navigation and other elements are removed, so the pages in that process are functionally and visually different. The checkout pages are not part of the set of product pages.</li> <li>a blog on a sub-domain (e.g. blog.example.com) which has a different navigation and is authored by a distinct set of people from the pages on the primary domain (example.com).</li> </ul></aside> <div class="note" role="note" id="issue-container-generatedID-127"><div role="heading" class="note-title marker" id="h-note-127" aria-level="3"><span>Note</span></div><p class="">Different language versions would be considered different sets of Web pages.</p></div> </dd> <dt><dfn id="dfn-sign-language" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">sign language</dfn></dt> <dd> <p>a language using combinations of movements of the hands and arms, facial expressions, or body positions to convey meaning </p> </dd> <dt><dfn id="dfn-sign-language-interpretation" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">sign language interpretation</dfn></dt> <dd> <p>translation of one language, generally a spoken language, into a <a href="#dfn-sign-language" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-sign-language-2" title="a language using combinations of movements of the hands and arms, facial expressions, or body positions to convey meaning">sign language</a></p> <div class="note" role="note" id="issue-container-generatedID-128"><div role="heading" class="note-title marker" id="h-note-128" aria-level="3"><span>Note</span></div><p class="">True sign languages are independent languages that are unrelated to the spoken language(s) of the same country or region. </p></div> </dd> <dt><dfn id="dfn-single-pointer" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">single pointer</dfn></dt> <dd> <p>pointer input that operates with one point of contact with the screen, including single taps and clicks, double-taps and clicks, long presses, and path-based gestures</p> </dd> <dt><dfn id="dfn-specific-sensory-experience" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">specific sensory experience</dfn></dt> <dd> <p>a sensory experience that is not purely decorative and does not primarily convey important information or perform a function </p> <aside class="example" id="example-27"><div class="marker"> <a class="self-link" href="#example-27">Example<bdi> 27</bdi></a> </div><p>Examples include a performance of a flute solo, works of visual art etc.</p></aside> </dd> <dt><dfn data-lt="states|state" id="dfn-states" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">state</dfn></dt> <dd> <p>dynamic property expressing characteristics of a user interface component that may change in response to user action or automated processes</p> <p>States do not affect the nature of the component, but represent data associated with the component or user interaction possibilities. Examples include focus, hover, select, press, check, visited/unvisited, and expand/collapse.</p> </dd> <dt><dfn data-lt="status messages|status message" id="dfn-status-messages" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">status message</dfn></dt> <dd> <p>change in content that is not a <a href="#dfn-change-of-context" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-change-of-context-4" title="major changes that, if made without user awareness, can disorient users who are not able to view the entire page simultaneously">change of context</a>, and that provides information to the user on the success or results of an action, on the waiting state of an application, on the progress of a process, or on the existence of errors</p> </dd> <dt><dfn id="dfn-structure" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">structure</dfn></dt> <dd> <ol> <li>The way the parts of a <a href="#dfn-web-page-s" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-web-page-s-19" title="a non-embedded resource obtained from a single URI using HTTP plus any other resources that are used in the rendering or intended to be rendered together with it by a user agent">Web page</a> are organized in relation to each other; and </li> <li>The way a collection of <a href="#dfn-web-page-s" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-web-page-s-20" title="a non-embedded resource obtained from a single URI using HTTP plus any other resources that are used in the rendering or intended to be rendered together with it by a user agent">Web pages</a> is organized </li> </ol> </dd> <dt><dfn data-lt="style properties|style property" id="dfn-style-properties" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">style property</dfn></dt> <dd> <p>property whose value determines the presentation (e.g. font, color, size, location, padding, volume, synthesized speech prosody) of content elements as they are rendered (e.g. onscreen, via loudspeaker, via braille display) by user agents</p> <p>Style properties can have several origins:</p> <ul> <li>User agent default styles: The default style property values applied in the absence of any author or user styles. Some web content technologies specify a default rendering, others do not;</li> <li>Author styles: Style property values that are set by the author as part of the content (e.g. in-line styles, author style sheets);</li> <li>User styles: Style property values that are set by the user (e.g. via user agent interface settings, user style sheets)</li> </ul> </dd> <dt><dfn data-lt="supplementary content|supplemental content" id="dfn-supplementary-content" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">supplemental content</dfn></dt> <dd> <p>additional <a href="#dfn-content" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-content-4" title="information and sensory experience to be communicated to the user by means of a user agent, including code or markup that defines the content's structure, presentation, and interactions">content</a> that illustrates or clarifies the primary content </p> <aside class="example" id="example-28"><div class="marker"> <a class="self-link" href="#example-28">Example<bdi> 28</bdi></a> </div><p>An audio version of a <a href="#dfn-web-page-s" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-web-page-s-21" title="a non-embedded resource obtained from a single URI using HTTP plus any other resources that are used in the rendering or intended to be rendered together with it by a user agent">Web page</a>. </p></aside> <aside class="example" id="example-29"><div class="marker"> <a class="self-link" href="#example-29">Example<bdi> 29</bdi></a> </div><p>An illustration of a complex <a href="#dfn-processes" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-processes-5" title="series of user actions where each action is required in order to complete an activity">process</a>. </p></aside> <aside class="example" id="example-30"><div class="marker"> <a class="self-link" href="#example-30">Example<bdi> 30</bdi></a> </div><p>A paragraph summarizing the major outcomes and recommendations made in a research study. </p></aside> </dd> <dt><dfn id="dfn-synchronized-media" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">synchronized media</dfn></dt> <dd> <p><a href="#dfn-audio" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-audio-6" title="the technology of sound reproduction">audio</a> or <a href="#dfn-video" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-video-10" title="the technology of moving or sequenced pictures or images">video</a> synchronized with another format for presenting information and/or with time-based interactive components, unless the media is a <a href="#dfn-media-alternative-for-text" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-media-alternative-for-text-4" title="media that presents no more information than is already presented in text (directly or via text alternatives)">media alternative for text</a> that is clearly labeled as such </p> </dd> <dt><dfn data-lt="targets|target" id="dfn-targets" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">target</dfn></dt> <dd> <p>region of the display that will accept a pointer action, such as the interactive area of a user interface component</p> <div class="note" role="note" id="issue-container-generatedID-129"><div role="heading" class="note-title marker" id="h-note-129" aria-level="3"><span>Note</span></div><p class="">If two or more targets are overlapping, the overlapping area should not be included in the measurement of the target size, except when the overlapping targets perform the same action or open the same page.</p></div> </dd> <dt><dfn data-lt="technologies|web technology|web content technology|web content technologies|technology" id="dfn-technologies" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">technology</dfn> (Web content) </dt> <dd> <p><a href="#dfn-mechanism" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-mechanism-13" title="process or technique for achieving a result">mechanism</a> for encoding instructions to be rendered, played or executed by <a href="#dfn-user-agents" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-user-agents-8" title="any software that retrieves and presents Web content for users">user agents</a></p> <div class="note" role="note" id="issue-container-generatedID-130"><div role="heading" class="note-title marker" id="h-note-130" aria-level="3"><span>Note</span></div><p class="">As used in these guidelines "Web Technology" and the word "technology" (when used alone) both refer to Web Content Technologies. </p></div> <div class="note" role="note" id="issue-container-generatedID-131"><div role="heading" class="note-title marker" id="h-note-131" aria-level="3"><span>Note</span></div><p class="">Web content technologies may include markup languages, data formats, or programming languages that authors may use alone or in combination to create end-user experiences that range from static Web pages to synchronized media presentations to dynamic Web applications. </p></div> <aside class="example" id="example-31"><div class="marker"> <a class="self-link" href="#example-31">Example<bdi> 31</bdi></a> </div><p>Some common examples of Web content technologies include HTML, CSS, SVG, PNG, PDF, Flash, and JavaScript. </p></aside> </dd> <dt><dfn id="dfn-text" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">text</dfn></dt> <dd> <p>sequence of characters that can be <a href="#dfn-programmatically-determinable" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-programmatically-determinable-11" title="determined by software from author-supplied data provided in a way that different user agents, including assistive technologies, can extract and present this information to users in different modalities">programmatically determined</a>, where the sequence is expressing something in <a href="#dfn-human-language-s" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-human-language-s-6" title="language that is spoken, written or signed (through visual or tactile means) to communicate with humans">human language</a></p> </dd> <dt><dfn id="dfn-text-alternative" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">text alternative</dfn></dt> <dd> <p><a href="#dfn-text" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-text-11" title="sequence of characters that can be programmatically determined, where the sequence is expressing something in human language">Text</a> that is programmatically associated with <a href="#dfn-non-text-content" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-non-text-content-2" title="any content that is not a sequence of characters that can be programmatically determined or where the sequence is not expressing something in human language">non-text content</a> or referred to from text that is programmatically associated with non-text content. Programmatically associated text is text whose location can be programmatically determined from the non-text content. </p> <aside class="example" id="example-32"><div class="marker"> <a class="self-link" href="#example-32">Example<bdi> 32</bdi></a> </div><p>An image of a chart is described in text in the paragraph after the chart. The short text alternative for the chart indicates that a description follows. </p></aside> <div class="note" role="note" id="issue-container-generatedID-132"><div role="heading" class="note-title marker" id="h-note-132" aria-level="3"><span>Note</span></div><p class="">Refer to <a href="https://www.w3.org/WAI/WCAG21/Understanding/conformance#text-alternatives">Understanding Text Alternatives</a> for more information. </p></div> </dd> <dt><dfn id="dfn-up-event" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">up-event</dfn></dt> <dd> <p>platform event that occurs when the trigger stimulus of a pointer is released</p> <p>The up-event may have different names on different platforms, such as "touchend" or "mouseup".</p> </dd> <dt><dfn id="dfn-used-in-an-unusual-or-restricted-way" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">used in an unusual or restricted way</dfn></dt> <dd> <p>words used in such a way that requires users to know exactly which definition to apply in order to understand the content correctly </p> <aside class="example" id="example-33"><div class="marker"> <a class="self-link" href="#example-33">Example<bdi> 33</bdi></a> </div><p>The term "gig" means something different if it occurs in a discussion of music concerts than it does in article about computer hard drive space, but the appropriate definition can be determined from context. By contrast, the word "text" is used in a very specific way in WCAG 2.1, so a definition is supplied in the glossary. </p></aside> </dd> <dt><dfn data-lt="user agents|user agent" id="dfn-user-agents" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">user agent</dfn></dt> <dd> <p>any software that retrieves and presents Web content for users</p> <aside class="example" id="example-34"><div class="marker"> <a class="self-link" href="#example-34">Example<bdi> 34</bdi></a> </div><p>Web browsers, media players, plug-ins, and other programs — including <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-8" title="hardware and/or software that acts as a user agent, or along with a mainstream user agent, to provide functionality to meet the requirements of users with disabilities that go beyond those offered by mainstream user agents">assistive technologies</a> — that help in retrieving, rendering, and interacting with Web content. </p></aside> </dd> <dt><dfn id="dfn-user-controllable" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">user-controllable</dfn></dt> <dd> <p>data that is intended to be accessed by users</p> <div class="note" role="note" id="issue-container-generatedID-133"><div role="heading" class="note-title marker" id="h-note-133" aria-level="3"><span>Note</span></div><p class="">This does not refer to such things as Internet logs and search engine monitoring data.</p></div> <aside class="example" id="example-35"><div class="marker"> <a class="self-link" href="#example-35">Example<bdi> 35</bdi></a> </div><p>Name and address fields for a user's account.</p></aside> </dd> <dt><dfn data-lt="user interface components|user interface component" id="dfn-user-interface-components" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">user interface component</dfn></dt> <dd> <p>a part of the content that is perceived by users as a single control for a distinct function </p> <div class="note" role="note" id="issue-container-generatedID-134"><div role="heading" class="note-title marker" id="h-note-134" aria-level="3"><span>Note</span></div><p class="">Multiple user interface components may be implemented as a single programmatic element. "Components" here is not tied to programming techniques, but rather to what the user perceives as separate controls. </p></div> <div class="note" role="note" id="issue-container-generatedID-135"><div role="heading" class="note-title marker" id="h-note-135" aria-level="3"><span>Note</span></div><p class="">User interface components include form elements and links as well as components generated by scripts. </p></div> <div class="note" role="note" id="issue-container-generatedID-136"><div role="heading" class="note-title marker" id="h-note-136" aria-level="3"><span>Note</span></div><p class="">What is meant by "component" or "user interface component" here is also sometimes called "user interface element". </p></div> <aside class="example" id="example-36"><div class="marker"> <a class="self-link" href="#example-36">Example<bdi> 36</bdi></a> </div><p>An applet has a "control" that can be used to move through content by line or page or random access. Since each of these would need to have a name and be settable independently, they would each be a "user interface component." </p></aside> </dd> <dt><dfn id="dfn-user-inactivity" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">user inactivity</dfn></dt> <dd> <p>any continuous period of time where no user actions occur</p> <p>The method of tracking will be determined by the web site or application.</p> </dd> <dt><dfn id="dfn-video" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">video</dfn></dt> <dd> <p>the technology of moving or sequenced pictures or images</p> <div class="note" role="note" id="issue-container-generatedID-137"><div role="heading" class="note-title marker" id="h-note-137" aria-level="3"><span>Note</span></div><p class="">Video can be made up of animated or photographic images, or both.</p></div> </dd> <dt><dfn id="dfn-video-only" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">video-only</dfn></dt> <dd> <p>a time-based presentation that contains only <a href="#dfn-video" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-video-11" title="the technology of moving or sequenced pictures or images">video</a> (no <a href="#dfn-audio" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-audio-7" title="the technology of sound reproduction">audio</a> and no interaction) </p> </dd> <dt><dfn id="dfn-viewport" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">viewport</dfn></dt> <dd> <p>object in which the user agent presents content</p> <div class="note" role="note" id="issue-container-generatedID-138"><div role="heading" class="note-title marker" id="h-note-138" aria-level="3"><span>Note</span></div><p class="">The <a href="#dfn-user-agents" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-user-agents-9" title="any software that retrieves and presents Web content for users">user agent</a> presents content through one or more viewports. Viewports include windows, frames, loudspeakers, and virtual magnifying glasses. A viewport may contain another viewport (e.g., nested frames). Interface components created by the user agent such as prompts, menus, and alerts are not viewports. </p></div> <div class="note" role="note" id="issue-container-generatedID-139"><div role="heading" class="note-title marker" id="h-note-139" aria-level="3"><span>Note</span></div><p class="">This definition is based on <a href="https://www.w3.org/TR/WAI-USERAGENT/glossary.html">User Agent Accessibility Guidelines 1.0 Glossary</a> [<cite><a class="bibref" data-link-type="biblio" href="#bib-uaag10" title="User Agent Accessibility Guidelines 1.0">UAAG10</a></cite>]. </p></div> </dd> <dt><dfn id="dfn-visually-customized" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">visually customized</dfn></dt> <dd> <p>the font, size, color, and background can be set</p> </dd> <dt><dfn data-lt="web page(s)|web pages|Web page" id="dfn-web-page-s" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">Web page</dfn></dt> <dd> <p>a non-embedded resource obtained from a single URI using HTTP plus any other resources that are used in the rendering or intended to be rendered together with it by a <a href="#dfn-user-agents" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-user-agents-10" title="any software that retrieves and presents Web content for users">user agent</a></p> <div class="note" role="note" id="issue-container-generatedID-140"><div role="heading" class="note-title marker" id="h-note-140" aria-level="3"><span>Note</span></div><p class="">Although any "other resources" would be rendered together with the primary resource, they would not necessarily be rendered simultaneously with each other. </p></div> <div class="note" role="note" id="issue-container-generatedID-141"><div role="heading" class="note-title marker" id="h-note-141" aria-level="3"><span>Note</span></div><p class="">For the purposes of conformance with these guidelines, a resource must be "non-embedded" within the scope of conformance to be considered a Web page. </p></div> <aside class="example" id="example-37"><div class="marker"> <a class="self-link" href="#example-37">Example<bdi> 37</bdi></a> </div><p>A Web resource including all embedded images and media.</p></aside> <aside class="example" id="example-38"><div class="marker"> <a class="self-link" href="#example-38">Example<bdi> 38</bdi></a> </div><p>A Web mail program built using Asynchronous JavaScript and XML (AJAX). The program lives entirely at http://example.com/mail, but includes an inbox, a contacts area and a calendar. Links or buttons are provided that cause the inbox, contacts, or calendar to display, but do not change the URI of the page as a whole. </p></aside> <aside class="example" id="example-39"><div class="marker"> <a class="self-link" href="#example-39">Example<bdi> 39</bdi></a> </div><p>A customizable portal site, where users can choose content to display from a set of different content modules. </p></aside> <aside class="example" id="example-40"><div class="marker"> <a class="self-link" href="#example-40">Example<bdi> 40</bdi></a> </div><p>When you enter "http://shopping.example.com/" in your browser, you enter a movie-like interactive shopping environment where you visually move around in a store dragging products off of the shelves around you and into a visual shopping cart in front of you. Clicking on a product causes it to be demonstrated with a specification sheet floating alongside. This might be a single-page Web site or just one page within a Web site. </p></aside> </dd> </dl> </section> <section id="input-purposes"><div class="header-wrapper"><h2 id="x7-input-purposes-for-user-interface-components"><bdi class="secno">7. </bdi>Input Purposes for User Interface Components</h2><a class="self-link" href="#input-purposes" aria-label="Permalink for Section 7."></a></div> <p>This section contains a listing of common <a href="#dfn-user-interface-components" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-user-interface-components-12" title="a part of the content that is perceived by users as a single control for a distinct function">user interface component</a> input purposes. The terms below are not keywords that must be used, but instead represent purposes that must be captured in the taxonomy adopted by a webpage. Where applicable, authors mark up controls with the chosen taxonomy to indicate the semantic purpose. This provides the potential for user agents and assistive technologies to apply personalized presentations that can enable more people to understand and use the content.</p> <div class="note" role="note" id="issue-container-generatedID-142"><div role="heading" class="note-title marker" id="h-note-142" aria-level="3"><span>Note</span></div><p class="">The list of input type purposes is based on the control purposes defined in the <a href="https://www.w3.org/TR/html52/sec-forms.html#sec-autofill">HTML 5.2 Autofill field section</a>, but it is important to understand that a different technology may have some or all of the same concepts defined in its specification and only the concepts that are mapped to the meanings below are required.</p></div> <p>The following input control purposes are intended to relate to the user of the content and pertain only to information related to that individual.</p> <ul> <li><strong>name</strong> - Full name</li> <li><strong>honorific-prefix</strong> - Prefix or title (e.g., "Mr.", "Ms.", "Dr.", "M<sup>lle</sup>")</li> <li><strong>given-name</strong> - Given name (in some Western cultures, also known as the <i>first name</i>)</li> <li><strong>additional-name</strong> - Additional names (in some Western cultures, also known as <i>middle names</i>, forenames other than the first name)</li> <li><strong>family-name</strong> - Family name (in some Western cultures, also known as the <i>last name</i> or <i>surname</i>)</li> <li><strong>honorific-suffix</strong> - Suffix (e.g., "Jr.", "B.Sc.", "MBASW", "II")</li> <li><strong>nickname</strong> - Nickname, screen name, handle: a typically short name used instead of the full name</li> <li><strong>organization-title</strong> - Job title (e.g., "Software Engineer", "Senior Vice President", "Deputy Managing Director")</li> <li><strong>username</strong> - A username</li> <li><strong>new-password</strong> - A new password (e.g., when creating an account or changing a password)</li> <li><strong>current-password</strong> - The current password for the account identified by the <strong>username</strong> field (e.g., when logging in)</li> <li><strong>organization</strong> - Company name corresponding to the person, address, or contact information in the other fields associated with this field</li> <li><strong>street-address</strong> - Street address (multiple lines, newlines preserved)</li> <li><strong>address-line1</strong> - Street address (one line per field, line 1)</li> <li><strong>address-line2</strong> - Street address (one line per field, line 2)</li> <li><strong>address-line3</strong> - Street address (one line per field, line 3)</li> <li><strong>address-level4</strong> - The most fine-grained administrative level, in addresses with four administrative levels</li> <li><strong>address-level3</strong> - The third administrative level, in addresses with three or more administrative levels</li> <li><strong>address-level2</strong> - The second administrative level, in addresses with two or more administrative levels; in the countries with two administrative levels, this would typically be the city, town, village, or other locality within which the relevant street address is found</li> <li><strong>address-level1</strong> - The broadest administrative level in the address, i.e., the province within which the locality is found; for example, in the US, this would be the state; in Switzerland it would be the canton; in the UK, the post town</li> <li><strong>country</strong> - Country code</li> <li><strong>country-name</strong> - Country name</li> <li><strong>postal-code</strong> - Postal code, post code, ZIP code, CEDEX code (if CEDEX, append "CEDEX", and the <i lang="fr">dissement</i>, if relevant, to the <strong>address-level2</strong> field)</li> <li><strong>cc-name</strong> - Full name as given on the payment instrument</li> <li><strong>cc-given-name</strong> - Given name as given on the payment instrument (in some Western cultures, also known as the <i>first name</i>)</li> <li><strong>cc-additional-name</strong> - Additional names given on the payment instrument (in some Western cultures, also known as <i>middle names</i>, forenames other than the first name)</li> <li><strong>cc-family-name</strong> - Family name given on the payment instrument (in some Western cultures, also known as the <i>last name</i> or <i>surname</i>)</li> <li><strong>cc-number</strong> - Code identifying the payment instrument (e.g., the credit card number)</li> <li><strong>cc-exp</strong> - Expiration date of the payment instrument</li> <li><strong>cc-exp-month</strong> - Month component of the expiration date of the payment instrument</li> <li><strong>cc-exp-year</strong> - Year component of the expiration date of the payment instrument</li> <li><strong>cc-csc</strong> - Security code for the payment instrument (also known as the card security code (CSC), card validation code (CVC), card verification value (CVV), signature panel code (SPC), credit card ID (CCID), etc)</li> <li><strong>cc-type</strong> - Type of payment instrument</li> <li><strong>transaction-currency</strong> - The currency that the user would prefer the transaction to use</li> <li><strong>transaction-amount</strong> - The amount that the user would like for the transaction (e.g., when entering a bid or sale price)</li> <li><strong>language</strong> - Preferred language</li> <li><strong>bday</strong> - Birthday</li> <li><strong>bday-day</strong> - Day component of birthday</li> <li><strong>bday-month</strong> - Month component of birthday</li> <li><strong>bday-year</strong> - Year component of birthday</li> <li><strong>sex</strong> - Gender identity (e.g., Female, Fa’afafine)</li> <li><strong>url</strong> - Home page or other Web page corresponding to the company, person, address, or contact information in the other fields associated with this field</li> <li><strong>photo</strong> - Photograph, icon, or other image corresponding to the company, person, address, or contact information in the other fields associated with this field</li> <li><strong>tel</strong> - Full telephone number, including country code</li> <li><strong>tel-country-code</strong> - Country code component of the telephone number</li> <li><strong>tel-national</strong> - Telephone number without the country code component, with a country-internal prefix applied if applicable</li> <li><strong>tel-area-code</strong> - Area code component of the telephone number, with a country-internal prefix applied if applicable</li> <li><strong>tel-local</strong> - Telephone number without the country code and area code components</li> <li><strong>tel-local-prefix</strong> - First part of the component of the telephone number that follows the area code, when that component is split into two components</li> <li><strong>tel-local-suffix</strong> - Second part of the component of the telephone number that follows the area code, when that component is split into two components</li> <li><strong>tel-extension</strong> - Telephone number internal extension code</li> <li><strong>email</strong> - E-mail address</li> <li><strong>impp</strong> - URL representing an instant messaging protocol endpoint (for example, "<strong>aim:goim?screenname=example</strong>" or "<strong>xmpp:fred@example.net</strong>")</li> </ul> </section> <section class="appendix" id="changelog"><div class="header-wrapper"><h2 id="a-change-log"><bdi class="secno">A. </bdi>Change Log</h2><a class="self-link" href="#changelog" aria-label="Permalink for Appendix A."></a></div> <p>This section shows changes for WCAG 2.1 since its publication as a <abbr title="World Wide Web Consortium">W3C</abbr> Recommendation. These changes are also recorded as <a href="https://www.w3.org/WAI/WCAG21/errata/">errata</a>. </p> <p>Changes since the <a href="https://www.w3.org/TR/2018/REC-WCAG21-20180605/"><abbr title="World Wide Web Consortium">W3C</abbr> Recommendation of 05 June 2018</a>: </p> <ul> <li>In the <a href="https://www.w3.org/TR/WCAG21/#sotd">Status of This Document</a> the paragraph beginning "This document has been reviewed by <abbr title="World Wide Web Consortium">W3C</abbr> Members..." appears twice. The first instance of this paragraph has been removed. </li> <li>In the <a href="https://www.w3.org/TR/WCAG21/#intro">Introduction</a>, several (but not all) references to "WCAG 2.0" has been changed to "WCAG 2.1". </li> <li>In the <a href="https://www.w3.org/TR/WCAG21/#numbering-in-wcag-2-1">0.5.2 Numbering in WCAG 2.1</a>, the words "critera" and "ccriteria" have been changed to "criteria". </li> <li>In <a href="https://www.w3.org/TR/WCAG21/#reflow">1.4.10 Reflow</a>, the first note had a supernumary "Note" indicator which has been removed. </li> <li>In <a href="https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus">1.4.13 Content on Hover or Focus</a>, the word "dismissable" has been changed to "dismissible". </li> <li>In <a href="https://www.w3.org/TR/WCAG21/#robust">4. Robust</a>, repetition of the word "by" has been removed. </li> <li>In <a href="https://www.w3.org/TR/WCAG21/#cc2">5.2.2 Full pages</a>, the third note began with "New" which has been removed. </li> <li>In <a href="https://www.w3.org/TR/WCAG21/#conformance-required">5.3.1 Required Components of a Conformance Claim</a> the editorial note "In WCAG 2.0 this was a dated URI, which may need to be adjusted when this becomes a Rec." has been removed. </li> <li>In the definition for <a href="https://www.w3.org/TR/WCAG21/#dfn-keyboard-interface">keyboard interface</a>, the second (of three) note has been changed to be an example of the first note, leaving only two actual notes. </li> <li>In the definition for <a href="https://www.w3.org/TR/WCAG21/#dfn-technologies">technology</a>, the third note has been changed to be an example. </li> <li>In <a href="https://www.w3.org/TR/WCAG21/#input-purposes">7. Input Purposes for User Interface Components</a>, the word "county" has been changed to "country". </li> <li>In <a href="https://www.w3.org/TR/WCAG21/#orientation">1.3.4 Orientation</a>, the note referencing "binary display orientation" has been clarified to read "content is not necessarily restricted to landscape or portrait display orientation". </li> <li>In <a href="https://www.w3.org/TR/WCAG21/#issue-container-generatedID-43">a note in the definition of accessibility supported</a>, references to "Conformance Criterion" were changed to "Conformance Requirement". </li> <li>In the <a href="https://www.w3.org/TR/WCAG21/#dfn-relative-luminance">definition of relative luminance</a>, the red threshold was updated from 0.03928 to 0.04045. </li> <li>In <a href="https://www.w3.org/TR/WCAG21/#parsing">4.1.1 Parsing</a> one note was deleted, and two notes were added, including: "This Success Criterion should be considered as always satisfied for any content using HTML or XML." </li> </ul> <p>The full <a href="https://github.com/w3c/wcag/commits/WCAG-2.1/guidelines/index.html">commit history to WCAG 2.1</a> is available. </p> </section> <section class="appendix informative section" id="acknowledgements"><div class="header-wrapper"><h2 id="b-acknowledgments"><bdi class="secno">B. </bdi>Acknowledgments</h2><a class="self-link" href="#acknowledgements" aria-label="Permalink for Appendix B."></a></div><p><em>This section is non-normative.</em></p> <p>Additional information about participation in the Accessibility Guidelines Working Group (AG WG) can be found on the <a href="https://www.w3.org/WAI/GL/">Working Group home page</a>. </p> <section id="ack_participants-active"><div class="header-wrapper"><h3 id="b-1-participants-of-the-ag-wg-active-in-the-development-of-this-document"><bdi class="secno">B.1 </bdi>Participants of the AG WG active in the development of this document:</h3><a class="self-link" href="#ack_participants-active" aria-label="Permalink for Appendix B.1"></a></div> <ul> <li>Jake Abma (Invited Expert)</li> <li>Shadi Abou-Zahra (<abbr title="World Wide Web Consortium">W3C</abbr>)</li> <li>Chuck Adams (Oracle Corporation)</li> <li>Amani Ali (Nomensa)</li> <li>Jim Allan (Invited Expert)</li> <li>Paul Adam (Deque Systems, Inc.)</li> <li>Christopher Auclair (VitalSource | Ingram Content Group)</li> <li>Jon Avila (Level Access)</li> <li>Tom Babinszki (IBM Corporation)</li> <li>Bruce Bailey (U.S. Access Board)</li> <li>Renaldo Bernard (University of Southampton)</li> <li>Chris Blouch (Level Access)</li> <li>Denis Boudreau (Deque Systems, Inc.)</li> <li>Judy Brewer (<abbr title="World Wide Web Consortium">W3C</abbr>)</li> <li>Shari Butler (Pearson plc)</li> <li>Thaddeus Cambron (Invited Expert)</li> <li>Alastair Campbell (Nomensa)</li> <li>Laura Carlson (Invited Expert)</li> <li>Louis Cheng (Google)</li> <li>Pietro Cirrincione (Invited Expert)</li> <li>Vivienne Conway (Web Key IT Pty Ltd)</li> <li>Michael Cooper (<abbr title="World Wide Web Consortium">W3C</abbr>)</li> <li>Jennifer Delisi (Invited Expert)</li> <li>Romain Deltour (DAISY Consortium)</li> <li>Wayne Dick (Knowbility, Inc)</li> <li>Chaohai Ding (University of Southampton)</li> <li>Kim Dirks (Thomson Reuters)</li> <li>Shwetank Dixit (BarrierBreak Technologies)</li> <li>Anthony Doran (TextHelp)</li> <li>E.A. Draffan (University of Southampton)</li> <li>Eric Eggert (<abbr title="World Wide Web Consortium">W3C</abbr>)</li> <li>Michael Elledge (Invited Expert)</li> <li>David Fazio (Invited Expert)</li> <li>Wilco Fiers (Deque Systems, Inc.)</li> <li>Detlev Fischer (Invited Expert)</li> <li>John Foliot (Deque Systems, Inc.)</li> <li>Matt Garrish (DAISY Consortium)</li> <li>Alistair Garrison (Level Access)</li> <li>Michael Gower (IBM Corporation)</li> <li>Jon Gunderson</li> <li>Markku Hakkinen (Educational Testing Service)</li> <li>Katie Haritos-Shea (Knowbility, Inc)</li> <li>Andy Heath (Invited Expert)</li> <li>Shawn Henry (<abbr title="World Wide Web Consortium">W3C</abbr>)</li> <li>Thomas Hoffman (Educational Testing Service)</li> <li>Sarah Horton (The Paciello Group, LLC)</li> <li>Stefan Johansson (Invited Expert)</li> <li>Marc Johlic (IBM Corporation)</li> <li>Rick Johnson (VitalSource | Ingram Content Group)</li> <li>Crystal Jones (Microsoft Corporation)</li> <li>Andrew Kirkpatrick (Adobe)</li> <li>John Kirkwood (Invited Expert)</li> <li>Jason Kiss (Department of Internal Affairs, New Zealand Government)</li> <li>Maureen Kraft (IBM Corporation)</li> <li>JaEun Ku (University of Illinois at Urbana-Champaign)</li> <li>Patrick Lauke (The Paciello Group, LLC)</li> <li>Shawn Lauriat (Google, Inc.)</li> <li>Steve Lee (Invited Expert)</li> <li>Alex Li (Microsoft Corporation)</li> <li>Chris Loiselle (Invited Expert)</li> <li>Greg Lowney (Invited Expert)</li> <li>Adam Lund (Thomson Reuters)</li> <li>David MacDonald (Invited Expert)</li> <li>Erich Manser (IBM Corporation)</li> <li>Kurt Mattes (Deque Systems, Inc.)</li> <li>Scott McCormack (Level Access)</li> <li>Chris McMeeking (Deque Systems, Inc.)</li> <li>Jan McSorley (Pearson plc)</li> <li>Neil Milliken (Unify Software and Solutions)</li> <li>Rachael Montgomery (Invited Expert)</li> <li>Mary Jo Mueller (IBM Corporation)</li> <li>Brooks Newton (Thomson Reuters)</li> <li>James Nurthen (Oracle Corporation)</li> <li>Joshue O Connor (Invited Expert)</li> <li>Sailesh Panchang (Deque Systems, Inc.)</li> <li>Charu Pandhi (IBM Corporation)</li> <li>Kim Patch (Invited Expert)</li> <li>Melanie Philipp (Deque Systems, Inc.)</li> <li>Mike Pluke (Invited Expert)</li> <li>Ian Pouncey (The Paciello Group, LLC)</li> <li>Ruoxi Ran (<abbr title="World Wide Web Consortium">W3C</abbr>)</li> <li>Stephen Repsher (Invited Expert)</li> <li>Jan Richards (Invited Expert)</li> <li>John Rochford (Invited Expert)</li> <li>Marla Runyan (Invited Expert)</li> <li>Stefan Schnabel (SAP SE)</li> <li>Ayelet Seeman (Invited Expert)</li> <li>Lisa Seeman-Kestenbaum (Invited Expert)</li> <li>Glenda Sims (Deque Systems, Inc.)</li> <li>Avneesh Singh (DAISY Consortium)</li> <li>David Sloan (The Paciello Group, LLC)</li> <li>Alan Smith (Invited Expert)</li> <li>Jim Smith (Unify Software and Solutions)</li> <li>Andrew Somers (Invited Expert)</li> <li>Adam Solomon (Invited Expert)</li> <li>Jaeil Song (National Information Society Agency (NIA))</li> <li>Jeanne Spellman (The Paciello Group, LLC)</li> <li>Makoto Ueki (Invited Expert)</li> <li>Jatin Vaishnav (Deque Systems, Inc.)</li> <li>Gregg Vanderheiden (Raising the Floor)</li> <li>Evangelos Vlachogiannis (Fraunhofer Gesellschaft)</li> <li>Kathleen Wahlbin (Invited Expert)</li> <li>Can Wang (Zhejiang University)</li> <li>Léonie Watson (The Paciello Group, LLC)</li> <li>Jason White (Educational Testing Service)</li> <li>Mark Wilcock (Unify Software and Solutions)</li> </ul> </section> <section id="ack_participants-previous"><div class="header-wrapper"><h3 id="b-2-other-previously-active-wcag-wg-participants-and-other-contributors-to-wcag-2-0-wcag-2-1-or-supporting-resources"><bdi class="secno">B.2 </bdi>Other previously active WCAG WG participants and other contributors to WCAG 2.0, WCAG 2.1, or supporting resources </h3><a class="self-link" href="#ack_participants-previous" aria-label="Permalink for Appendix B.2"></a></div> <p>Paul Adam, Jenae Andershonis, Wilhelm Joys Andersen, Andrew Arch, Avi Arditti, Aries Arditi, Mark Barratt, Mike Barta, Sandy Bartell, Kynn Bartlett, Chris Beer, Charles Belov, Marco Bertoni, Harvey Bingham, Chris Blouch, Paul Bohman, Frederick Boland, Denis Boudreau, Patrice Bourlon, Andy Brown, Dick Brown, Doyle Burnett, Raven Calais, Ben Caldwell, Tomas Caspers, Roberto Castaldo, Sofia Celic-Li, Sambhavi Chandrashekar, Mike Cherim, Jonathan Chetwynd, Wendy Chisholm, Alan Chuter, David M Clark, Joe Clark, Darcy Clarke, James Coltham, Earl Cousins, James Craig, Tom Croucher, Pierce Crowell, Nir Dagan, Daniel Dardailler, Geoff Deering, Sébastien Delorme, Pete DeVasto, Iyad Abu Doush, Sylvie Duchateau, Cherie Eckholm, Roberto Ellero, Don Evans, Gavin Evans, Neal Ewers, Steve Faulkner, Bengt Farre, Lainey Feingold, Wilco Fiers, Michel Fitos, Alan J. Flavell, Nikolaos Floratos, Kentarou Fukuda, Miguel Garcia, P.J. Gardner, Alistair Garrison, Greg Gay, Becky Gibson, Al Gilman, Kerstin Goldsmith, Michael Grade, Karl Groves, Loretta Guarino Reid, Jon Gunderson, Emmanuelle Gutiérrez y Restrepo, Brian Hardy, Eric Hansen, Benjamin Hawkes-Lewis, Sean Hayes, Shawn Henry, Hans Hillen, Donovan Hipke, Bjoern Hoehrmann, Allen Hoffman, Chris Hofstader, Yvette Hoitink, Martijn Houtepen, Carlos Iglesias, Richard Ishida, Jonas Jacek, Ian Jacobs, Phill Jenkins, Barry Johnson, Duff Johnson, Jyotsna Kaki, Shilpi Kapoor, Leonard R. Kasday, Kazuhito Kidachi, Ken Kipness, Johannes Koch, Marja-Riitta Koivunen, Preety Kumar, Kristjan Kure, Andrew LaHart, Gez Lemon, Chuck Letourneau, Aurélien Levy, Harry Loots, Scott Luebking, Tim Lacy, Jim Ley, Alex Li, William Loughborough, N Maffeo, Mark Magennis, Kapsi Maria, Luca Mascaro, Matt May, Sheena McCullagh, Liam McGee, Jens Oliver Meiert, Niqui Merret, Jonathan Metz, Alessandro Miele, Steven Miller, Mathew J Mirabella, Matt May, Marti McCuller, Sorcha Moore, Charles F. Munat, Robert Neff, Charles Nevile, Liddy Nevile, Dylan Nicholson, Bruno von Niman, Tim Noonan, Sebastiano Nutarelli, Graham Oliver, Sean B. Palmer, Devarshi Pant, Nigel Peck, Anne Pemberton, David Poehlman, Ian Pouncey, Charles Pritchard, Kerstin Probiesch, W Reagan, Adam Victor Reed, Chris Reeve, Chris Ridpath, Lee Roberts, Mark Rogers, Raph de Rooij, Gregory J. Rosmaita, Matthew Ross, Sharron Rush, Joel Sanda, Janina Sajka, Roberto Scano, Gordon Schantz, Tim van Schie, Wolf Schmidt, Stefan Schnabel, Cynthia Shelly, Glenda Sims, John Slatin, Becky Smith, Jared Smith, Andi Snow-Weaver, Neil Soiffer, Mike Squillace, Michael Stenitzer, Diane Stottlemyer, Christophe Strobbe, Sarah J Swierenga, Jim Thatcher, Terry Thompson, Justin Thorp, David Todd, Mary Utt, Jean Vanderdonckt, Carlos A Velasco, Eric Velleman, Gijs Veyfeyken, Dena Wainwright, Paul Walsch, Daman Wandke, Richard Warren, Elle Waters, Takayuki Watanabe, Gian Wild, David Wooley, Wu Wei, Kenny Zhang, Leona Zumbo.</p> </section> <section id="enabling-funders"><div class="header-wrapper"><h3 id="b-3-enabling-funders"><bdi class="secno">B.3 </bdi>Enabling funders</h3><a class="self-link" href="#enabling-funders" aria-label="Permalink for Appendix B.3"></a></div> <p>This publication has been funded in part with U.S. Federal funds from the Health and Human Services, National Institute on Disability, Independent Living, and Rehabilitation Research (NIDILRR), initially under contract number ED-OSE-10-C-0067 and now under contract number HHSP23301500054C. The content of this publication does not necessarily reflect the views or policies of the U.S. Department of Health and Human Services or the U.S. Department of Education, nor does mention of trade names, commercial products, or organizations imply endorsement by the U.S. Government.</p> </section> </section> <section id="references" class="appendix"><div class="header-wrapper"><h2 id="c-references"><bdi class="secno">C. </bdi>References</h2><a class="self-link" href="#references" aria-label="Permalink for Appendix C."></a></div><section id="informative-references"><div class="header-wrapper"><h3 id="c-1-informative-references"><bdi class="secno">C.1 </bdi>Informative references</h3><a class="self-link" href="#informative-references" aria-label="Permalink for Appendix C.1"></a></div> <dl class="bibliography"><dt id="bib-css3-values">[css3-values]</dt><dd> <a href="https://www.w3.org/TR/css-values-3/"><cite>CSS Values and Units Module Level 3</cite></a>. Tab Atkins Jr.; Elika Etemad. W3C. 1 December 2022. W3C Candidate Recommendation. URL: <a href="https://www.w3.org/TR/css-values-3/">https://www.w3.org/TR/css-values-3/</a> </dd><dt id="bib-html">[HTML]</dt><dd> <a href="https://html.spec.whatwg.org/multipage/"><cite>HTML Standard</cite></a>. Anne van Kesteren; Domenic Denicola; Ian Hickson; Philip Jägenstedt; Simon Pieters. WHATWG. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a> </dd><dt id="bib-iso_9241-391">[ISO_9241-391]</dt><dd> <a href="https://www.iso.org/standard/56350.html"><cite>Ergonomics of human-system interaction—Part 391: Requirements, analysis and compliance test methods for the reduction of photosensitive seizures</cite></a>. International Standards Organization. URL: <a href="https://www.iso.org/standard/56350.html">https://www.iso.org/standard/56350.html</a> </dd><dt id="bib-pointerevents">[pointerevents]</dt><dd> <a href="https://www.w3.org/TR/pointerevents/"><cite>Pointer Events</cite></a>. Jacob Rossi; Matt Brubeck. W3C. 4 April 2019. W3C Recommendation. URL: <a href="https://www.w3.org/TR/pointerevents/">https://www.w3.org/TR/pointerevents/</a> </dd><dt id="bib-rfc2119">[RFC2119]</dt><dd> <a href="https://www.rfc-editor.org/rfc/rfc2119"><cite>Key words for use in RFCs to Indicate Requirement Levels</cite></a>. S. Bradner. IETF. March 1997. Best Current Practice. URL: <a href="https://www.rfc-editor.org/rfc/rfc2119">https://www.rfc-editor.org/rfc/rfc2119</a> </dd><dt id="bib-srgb">[SRGB]</dt><dd> <a href="https://webstore.iec.ch/publication/6169"><cite>Multimedia systems and equipment - Colour measurement and management - Part 2-1: Colour management - Default RGB colour space - sRGB</cite></a>. IEC. URL: <a href="https://webstore.iec.ch/publication/6169">https://webstore.iec.ch/publication/6169</a> </dd><dt id="bib-uaag10">[UAAG10]</dt><dd> <a href="https://www.w3.org/TR/UAAG10/"><cite>User Agent Accessibility Guidelines 1.0</cite></a>. Ian Jacobs; Jon Gunderson; Eric Hansen. W3C. 17 December 2002. W3C Recommendation. URL: <a href="https://www.w3.org/TR/UAAG10/">https://www.w3.org/TR/UAAG10/</a> </dd><dt id="bib-unesco">[UNESCO]</dt><dd> <a href="http://www.unesco.org/education/information/nfsunesco/doc/isced_1997.htm"><cite>International Standard Classification of Education</cite></a>. 1997. URL: <a href="http://www.unesco.org/education/information/nfsunesco/doc/isced_1997.htm">http://www.unesco.org/education/information/nfsunesco/doc/isced_1997.htm</a> </dd><dt id="bib-wai-webcontent">[WAI-WEBCONTENT]</dt><dd> <a href="https://www.w3.org/TR/WAI-WEBCONTENT/"><cite>Web Content Accessibility Guidelines 1.0</cite></a>. Wendy Chisholm; Gregg Vanderheiden; Ian Jacobs. W3C. 5 May 1999. W3C Recommendation. URL: <a href="https://www.w3.org/TR/WAI-WEBCONTENT/">https://www.w3.org/TR/WAI-WEBCONTENT/</a> </dd><dt id="bib-wcag20">[WCAG20]</dt><dd> <a href="https://www.w3.org/TR/WCAG20/"><cite>Web Content Accessibility Guidelines (WCAG) 2.0</cite></a>. Ben Caldwell; Michael Cooper; Loretta Guarino Reid; Gregg Vanderheiden et al. W3C. 11 December 2008. W3C Recommendation. URL: <a href="https://www.w3.org/TR/WCAG20/">https://www.w3.org/TR/WCAG20/</a> </dd></dl> </section></section><p role="navigation" id="back-to-top"> <a href="#title"><abbr title="Back to Top">↑</abbr></a> </p><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-abbreviations" aria-label="Links in this document to definition: abbreviation"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-abbreviations" aria-label="Permalink for definition: abbreviation. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-abbreviations-1" title="§ 3.1.4 Abbreviations">§ 3.1.4 Abbreviations</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-accessibility-supported" aria-label="Links in this document to definition: accessibility supported"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-accessibility-supported" aria-label="Permalink for definition: accessibility supported. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-accessibility-supported-1" title="§ 2.5.4 Motion Actuation">§ 2.5.4 Motion Actuation</a> </li><li> <a href="#ref-for-dfn-accessibility-supported-2" title="§ 5. Conformance">§ 5. Conformance</a> </li><li> <a href="#ref-for-dfn-accessibility-supported-3" title="§ 5.2.4 Only Accessibility-Supported Ways of Using Technologies">§ 5.2.4 Only Accessibility-Supported Ways of Using Technologies</a> </li><li> <a href="#ref-for-dfn-accessibility-supported-4" title="§ 5.2.5 Non-Interference">§ 5.2.5 Non-Interference</a> </li><li> <a href="#ref-for-dfn-accessibility-supported-5" title="§ 5.5 Statement of Partial Conformance - Language">§ 5.5 Statement of Partial Conformance - Language</a> </li><li> <a href="#ref-for-dfn-accessibility-supported-6" title="§ 6. Glossary">§ 6. Glossary</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-alternative-for-time-based-media" aria-label="Links in this document to definition: alternative for time-based media"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-alternative-for-time-based-media" aria-label="Permalink for definition: alternative for time-based media. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-alternative-for-time-based-media-1" title="§ 1.2.1 Audio-only and Video-only (Prerecorded)">§ 1.2.1 Audio-only and Video-only (Prerecorded)</a> </li><li> <a href="#ref-for-dfn-alternative-for-time-based-media-2" title="§ 1.2.3 Audio Description or Media Alternative (Prerecorded)">§ 1.2.3 Audio Description or Media Alternative (Prerecorded)</a> </li><li> <a href="#ref-for-dfn-alternative-for-time-based-media-3" title="§ 1.2.8 Media Alternative (Prerecorded)">§ 1.2.8 Media Alternative (Prerecorded)</a> </li><li> <a href="#ref-for-dfn-alternative-for-time-based-media-4" title="§ 1.2.9 Audio-only (Live)">§ 1.2.9 Audio-only (Live)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-ambiguous-to-users-in-general" aria-label="Links in this document to definition: ambiguous to users in general"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-ambiguous-to-users-in-general" aria-label="Permalink for definition: ambiguous to users in general. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-ambiguous-to-users-in-general-1" title="§ 2.4.4 Link Purpose (In Context)">§ 2.4.4 Link Purpose (In Context)</a> </li><li> <a href="#ref-for-dfn-ambiguous-to-users-in-general-2" title="§ 2.4.9 Link Purpose (Link Only)">§ 2.4.9 Link Purpose (Link Only)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-ascii-art" aria-label="Links in this document to definition: ASCII art"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-ascii-art" aria-label="Permalink for definition: ASCII art. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-ascii-art-1" title="§ 6. Glossary">§ 6. Glossary</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-assistive-technologies" aria-label="Links in this document to definition: assistive technology"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-assistive-technologies" aria-label="Permalink for definition: assistive technology. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-assistive-technologies-1" title="§ 1.1.1 Non-text Content">§ 1.1.1 Non-text Content</a> </li><li> <a href="#ref-for-dfn-assistive-technologies-2" title="§ 1.4.4 Resize Text">§ 1.4.4 Resize Text</a> </li><li> <a href="#ref-for-dfn-assistive-technologies-3" title="§ 4.1.2 Name, Role, Value">§ 4.1.2 Name, Role, Value</a> </li><li> <a href="#ref-for-dfn-assistive-technologies-4" title="§ 4.1.3 Status Messages">§ 4.1.3 Status Messages</a> </li><li> <a href="#ref-for-dfn-assistive-technologies-5" title="§ 6. Glossary">§ 6. Glossary</a> <a href="#ref-for-dfn-assistive-technologies-6" title="Reference 2">(2)</a> <a href="#ref-for-dfn-assistive-technologies-7" title="Reference 3">(3)</a> <a href="#ref-for-dfn-assistive-technologies-8" title="Reference 4">(4)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-audio" aria-label="Links in this document to definition: audio"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-audio" aria-label="Permalink for definition: audio. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-audio-1" title="§ 1.2.2 Captions (Prerecorded)">§ 1.2.2 Captions (Prerecorded)</a> </li><li> <a href="#ref-for-dfn-audio-2" title="§ 1.2.4 Captions (Live)">§ 1.2.4 Captions (Live)</a> </li><li> <a href="#ref-for-dfn-audio-3" title="§ 1.2.6 Sign Language (Prerecorded)">§ 1.2.6 Sign Language (Prerecorded)</a> </li><li> <a href="#ref-for-dfn-audio-4" title="§ 6. Glossary">§ 6. Glossary</a> <a href="#ref-for-dfn-audio-5" title="Reference 2">(2)</a> <a href="#ref-for-dfn-audio-6" title="Reference 3">(3)</a> <a href="#ref-for-dfn-audio-7" title="Reference 4">(4)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-audio-descriptions" aria-label="Links in this document to definition: audio description"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-audio-descriptions" aria-label="Permalink for definition: audio description. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-audio-descriptions-1" title="§ 1.2.3 Audio Description or Media Alternative (Prerecorded)">§ 1.2.3 Audio Description or Media Alternative (Prerecorded)</a> </li><li> <a href="#ref-for-dfn-audio-descriptions-2" title="§ 1.2.5 Audio Description (Prerecorded)">§ 1.2.5 Audio Description (Prerecorded)</a> </li><li> <a href="#ref-for-dfn-audio-descriptions-3" title="§ 1.2.7 Extended Audio Description (Prerecorded)">§ 1.2.7 Extended Audio Description (Prerecorded)</a> </li><li> <a href="#ref-for-dfn-audio-descriptions-4" title="§ 6. Glossary">§ 6. Glossary</a> <a href="#ref-for-dfn-audio-descriptions-5" title="Reference 2">(2)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-audio-only" aria-label="Links in this document to definition: audio-only"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-audio-only" aria-label="Permalink for definition: audio-only. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-audio-only-1" title="§ 1.2.1 Audio-only and Video-only (Prerecorded)">§ 1.2.1 Audio-only and Video-only (Prerecorded)</a> </li><li> <a href="#ref-for-dfn-audio-only-2" title="§ 1.2.9 Audio-only (Live)">§ 1.2.9 Audio-only (Live)</a> </li><li> <a href="#ref-for-dfn-audio-only-3" title="§ 1.4.7 Low or No Background Audio">§ 1.4.7 Low or No Background Audio</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-blinking" aria-label="Links in this document to definition: blinking"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-blinking" aria-label="Permalink for definition: blinking. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-blinking-1" title="§ 2.2.2 Pause, Stop, Hide">§ 2.2.2 Pause, Stop, Hide</a> </li><li> <a href="#ref-for-dfn-blinking-2" title="§ 6. Glossary">§ 6. Glossary</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-blocks-of-text" aria-label="Links in this document to definition: blocks of text"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-blocks-of-text" aria-label="Permalink for definition: blocks of text. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-blocks-of-text-1" title="§ 1.4.8 Visual Presentation">§ 1.4.8 Visual Presentation</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-captcha" aria-label="Links in this document to definition: CAPTCHA"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-captcha" aria-label="Permalink for definition: CAPTCHA. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-captcha-1" title="§ 1.1.1 Non-text Content">§ 1.1.1 Non-text Content</a> </li><li> <a href="#ref-for-dfn-captcha-2" title="§ 1.4.7 Low or No Background Audio">§ 1.4.7 Low or No Background Audio</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-captions" aria-label="Links in this document to definition: captions"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-captions" aria-label="Permalink for definition: captions. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-captions-1" title="§ 1.2.2 Captions (Prerecorded)">§ 1.2.2 Captions (Prerecorded)</a> </li><li> <a href="#ref-for-dfn-captions-2" title="§ 1.2.4 Captions (Live)">§ 1.2.4 Captions (Live)</a> </li><li> <a href="#ref-for-dfn-captions-3" title="§ 1.4.4 Resize Text">§ 1.4.4 Resize Text</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-change-of-context" aria-label="Links in this document to definition: changes of context"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-change-of-context" aria-label="Permalink for definition: changes of context. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-change-of-context-1" title="§ 3.2.1 On Focus">§ 3.2.1 On Focus</a> </li><li> <a href="#ref-for-dfn-change-of-context-2" title="§ 3.2.2 On Input">§ 3.2.2 On Input</a> </li><li> <a href="#ref-for-dfn-change-of-context-3" title="§ 3.2.5 Change on Request">§ 3.2.5 Change on Request</a> </li><li> <a href="#ref-for-dfn-change-of-context-4" title="§ 6. Glossary">§ 6. Glossary</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-conform" aria-label="Links in this document to definition: conformance"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-conform" aria-label="Permalink for definition: conformance. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-conform-1" title="§ 5. Conformance">§ 5. Conformance</a> </li><li> <a href="#ref-for-dfn-conform-2" title="§ 5.2.2 Full pages">§ 5.2.2 Full pages</a> </li><li> <a href="#ref-for-dfn-conform-3" title="§ 6. Glossary">§ 6. Glossary</a> <a href="#ref-for-dfn-conform-4" title="Reference 2">(2)</a> <a href="#ref-for-dfn-conform-5" title="Reference 3">(3)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-conforming-alternate-versions" aria-label="Links in this document to definition: conforming alternate version"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-conforming-alternate-versions" aria-label="Permalink for definition: conforming alternate version. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-conforming-alternate-versions-1" title="§ 5.2.1 Conformance Level">§ 5.2.1 Conformance Level</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-content" aria-label="Links in this document to definition: content"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-content" aria-label="Permalink for definition: content. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-content-1" title="§ 6. Glossary">§ 6. Glossary</a> <a href="#ref-for-dfn-content-2" title="Reference 2">(2)</a> <a href="#ref-for-dfn-content-3" title="Reference 3">(3)</a> <a href="#ref-for-dfn-content-4" title="Reference 4">(4)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-context-sensitive-help" aria-label="Links in this document to definition: context-sensitive help"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-context-sensitive-help" aria-label="Permalink for definition: context-sensitive help. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-context-sensitive-help-1" title="§ 3.3.5 Help">§ 3.3.5 Help</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-contrast-ratio" aria-label="Links in this document to definition: contrast ratio"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-contrast-ratio" aria-label="Permalink for definition: contrast ratio. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-contrast-ratio-1" title="§ 1.4.3 Contrast (Minimum)">§ 1.4.3 Contrast (Minimum)</a> </li><li> <a href="#ref-for-dfn-contrast-ratio-2" title="§ 1.4.6 Contrast (Enhanced)">§ 1.4.6 Contrast (Enhanced)</a> </li><li> <a href="#ref-for-dfn-contrast-ratio-3" title="§ 1.4.11 Non-text Contrast">§ 1.4.11 Non-text Contrast</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-correct-reading-sequence" aria-label="Links in this document to definition: correct reading sequence"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-correct-reading-sequence" aria-label="Permalink for definition: correct reading sequence. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-correct-reading-sequence-1" title="§ 1.3.2 Meaningful Sequence">§ 1.3.2 Meaningful Sequence</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-css-pixels" aria-label="Links in this document to definition: CSS pixel"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-css-pixels" aria-label="Permalink for definition: CSS pixel. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-css-pixels-1" title="§ 1.4.10 Reflow">§ 1.4.10 Reflow</a> <a href="#ref-for-dfn-css-pixels-2" title="Reference 2">(2)</a> </li><li> <a href="#ref-for-dfn-css-pixels-3" title="§ 2.5.5 Target Size">§ 2.5.5 Target Size</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-down-event" aria-label="Links in this document to definition: down-event"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-down-event" aria-label="Permalink for definition: down-event. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-down-event-1" title="§ 2.5.2 Pointer Cancellation">§ 2.5.2 Pointer Cancellation</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-emergency" aria-label="Links in this document to definition: emergency"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-emergency" aria-label="Permalink for definition: emergency. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-emergency-1" title="§ 2.2.4 Interruptions">§ 2.2.4 Interruptions</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-essential" aria-label="Links in this document to definition: essential"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-essential" aria-label="Permalink for definition: essential. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-essential-1" title="§ 1.3.4 Orientation">§ 1.3.4 Orientation</a> </li><li> <a href="#ref-for-dfn-essential-2" title="§ 1.4.5 Images of Text">§ 1.4.5 Images of Text</a> </li><li> <a href="#ref-for-dfn-essential-3" title="§ 1.4.9 Images of Text (No Exception)">§ 1.4.9 Images of Text (No Exception)</a> </li><li> <a href="#ref-for-dfn-essential-4" title="§ 1.4.11 Non-text Contrast">§ 1.4.11 Non-text Contrast</a> </li><li> <a href="#ref-for-dfn-essential-5" title="§ 2.2.1 Timing Adjustable">§ 2.2.1 Timing Adjustable</a> </li><li> <a href="#ref-for-dfn-essential-6" title="§ 2.2.2 Pause, Stop, Hide">§ 2.2.2 Pause, Stop, Hide</a> </li><li> <a href="#ref-for-dfn-essential-7" title="§ 2.2.3 No Timing">§ 2.2.3 No Timing</a> </li><li> <a href="#ref-for-dfn-essential-8" title="§ 2.3.3 Animation from Interactions">§ 2.3.3 Animation from Interactions</a> </li><li> <a href="#ref-for-dfn-essential-9" title="§ 2.5.1 Pointer Gestures">§ 2.5.1 Pointer Gestures</a> </li><li> <a href="#ref-for-dfn-essential-10" title="§ 2.5.2 Pointer Cancellation">§ 2.5.2 Pointer Cancellation</a> </li><li> <a href="#ref-for-dfn-essential-11" title="§ 2.5.4 Motion Actuation">§ 2.5.4 Motion Actuation</a> </li><li> <a href="#ref-for-dfn-essential-12" title="§ 2.5.5 Target Size">§ 2.5.5 Target Size</a> </li><li> <a href="#ref-for-dfn-essential-13" title="§ 2.5.6 Concurrent Input Mechanisms">§ 2.5.6 Concurrent Input Mechanisms</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-extended-audio-description" aria-label="Links in this document to definition: extended audio description"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-extended-audio-description" aria-label="Permalink for definition: extended audio description. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-extended-audio-description-1" title="§ 1.2.7 Extended Audio Description (Prerecorded)">§ 1.2.7 Extended Audio Description (Prerecorded)</a> </li><li> <a href="#ref-for-dfn-extended-audio-description-2" title="§ 6. Glossary">§ 6. Glossary</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-flashes" aria-label="Links in this document to definition: flash"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-flashes" aria-label="Permalink for definition: flash. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-flashes-1" title="§ 2.3.1 Three Flashes or Below Threshold">§ 2.3.1 Three Flashes or Below Threshold</a> </li><li> <a href="#ref-for-dfn-flashes-2" title="§ 2.3.2 Three Flashes">§ 2.3.2 Three Flashes</a> </li><li> <a href="#ref-for-dfn-flashes-3" title="§ 6. Glossary">§ 6. Glossary</a> <a href="#ref-for-dfn-flashes-4" title="Reference 2">(2)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-functionality" aria-label="Links in this document to definition: functionality"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-functionality" aria-label="Permalink for definition: functionality. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-functionality-1" title="§ 2.1.1 Keyboard">§ 2.1.1 Keyboard</a> </li><li> <a href="#ref-for-dfn-functionality-2" title="§ 2.1.3 Keyboard (No Exception)">§ 2.1.3 Keyboard (No Exception)</a> </li><li> <a href="#ref-for-dfn-functionality-3" title="§ 2.5.1 Pointer Gestures">§ 2.5.1 Pointer Gestures</a> </li><li> <a href="#ref-for-dfn-functionality-4" title="§ 2.5.2 Pointer Cancellation">§ 2.5.2 Pointer Cancellation</a> </li><li> <a href="#ref-for-dfn-functionality-5" title="§ 2.5.4 Motion Actuation">§ 2.5.4 Motion Actuation</a> </li><li> <a href="#ref-for-dfn-functionality-6" title="§ 6. Glossary">§ 6. Glossary</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-general-flash-and-red-flash-thresholds" aria-label="Links in this document to definition: general flash and red flash thresholds"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-general-flash-and-red-flash-thresholds" aria-label="Permalink for definition: general flash and red flash thresholds. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-general-flash-and-red-flash-thresholds-1" title="§ 2.3.1 Three Flashes or Below Threshold">§ 2.3.1 Three Flashes or Below Threshold</a> </li><li> <a href="#ref-for-dfn-general-flash-and-red-flash-thresholds-2" title="§ 6. Glossary">§ 6. Glossary</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-human-language-s" aria-label="Links in this document to definition: human language"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-human-language-s" aria-label="Permalink for definition: human language. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-human-language-s-1" title="§ 3.1.1 Language of Page">§ 3.1.1 Language of Page</a> </li><li> <a href="#ref-for-dfn-human-language-s-2" title="§ 3.1.2 Language of Parts">§ 3.1.2 Language of Parts</a> </li><li> <a href="#ref-for-dfn-human-language-s-3" title="§ 6. Glossary">§ 6. Glossary</a> <a href="#ref-for-dfn-human-language-s-4" title="Reference 2">(2)</a> <a href="#ref-for-dfn-human-language-s-5" title="Reference 3">(3)</a> <a href="#ref-for-dfn-human-language-s-6" title="Reference 4">(4)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-idioms" aria-label="Links in this document to definition: idiom"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-idioms" aria-label="Permalink for definition: idiom. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-idioms-1" title="§ 3.1.3 Unusual Words">§ 3.1.3 Unusual Words</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-images-of-text" aria-label="Links in this document to definition: image of text"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-images-of-text" aria-label="Permalink for definition: image of text. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-images-of-text-1" title="§ 1.4.3 Contrast (Minimum)">§ 1.4.3 Contrast (Minimum)</a> </li><li> <a href="#ref-for-dfn-images-of-text-2" title="§ 1.4.4 Resize Text">§ 1.4.4 Resize Text</a> </li><li> <a href="#ref-for-dfn-images-of-text-3" title="§ 1.4.5 Images of Text">§ 1.4.5 Images of Text</a> </li><li> <a href="#ref-for-dfn-images-of-text-4" title="§ 1.4.6 Contrast (Enhanced)">§ 1.4.6 Contrast (Enhanced)</a> </li><li> <a href="#ref-for-dfn-images-of-text-5" title="§ 1.4.9 Images of Text (No Exception)">§ 1.4.9 Images of Text (No Exception)</a> </li><li> <a href="#ref-for-dfn-images-of-text-6" title="§ 2.5.3 Label in Name">§ 2.5.3 Label in Name</a> </li><li> <a href="#ref-for-dfn-images-of-text-7" title="§ 6. Glossary">§ 6. Glossary</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-informative" aria-label="Links in this document to definition: informative"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-informative" aria-label="Permalink for definition: informative. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-informative-1" title="§ 5.1 Interpreting Normative Requirements">§ 5.1 Interpreting Normative Requirements</a> </li><li> <a href="#ref-for-dfn-informative-2" title="§ 6. Glossary">§ 6. Glossary</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-input-error" aria-label="Links in this document to definition: input error"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-input-error" aria-label="Permalink for definition: input error. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-input-error-1" title="§ 1.4.13 Content on Hover or Focus">§ 1.4.13 Content on Hover or Focus</a> </li><li> <a href="#ref-for-dfn-input-error-2" title="§ 3.3.1 Error Identification">§ 3.3.1 Error Identification</a> </li><li> <a href="#ref-for-dfn-input-error-3" title="§ 3.3.3 Error Suggestion">§ 3.3.3 Error Suggestion</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-jargon" aria-label="Links in this document to definition: jargon"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-jargon" aria-label="Permalink for definition: jargon. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-jargon-1" title="§ 3.1.3 Unusual Words">§ 3.1.3 Unusual Words</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-keyboard-interface" aria-label="Links in this document to definition: keyboard interface"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-keyboard-interface" aria-label="Permalink for definition: keyboard interface. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-keyboard-interface-1" title="§ 2.1.1 Keyboard">§ 2.1.1 Keyboard</a> </li><li> <a href="#ref-for-dfn-keyboard-interface-2" title="§ 2.1.2 No Keyboard Trap">§ 2.1.2 No Keyboard Trap</a> </li><li> <a href="#ref-for-dfn-keyboard-interface-3" title="§ 2.1.3 Keyboard (No Exception)">§ 2.1.3 Keyboard (No Exception)</a> </li><li> <a href="#ref-for-dfn-keyboard-interface-4" title="§ 6. Glossary">§ 6. Glossary</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-keyboard-shortcuts" aria-label="Links in this document to definition: keyboard shortcut"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-keyboard-shortcuts" aria-label="Permalink for definition: keyboard shortcut. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-keyboard-shortcuts-1" title="§ 2.1.4 Character Key Shortcuts">§ 2.1.4 Character Key Shortcuts</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-labels" aria-label="Links in this document to definition: label"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-labels" aria-label="Permalink for definition: label. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-labels-1" title="§ 2.4.6 Headings and Labels">§ 2.4.6 Headings and Labels</a> </li><li> <a href="#ref-for-dfn-labels-2" title="§ 2.5.3 Label in Name">§ 2.5.3 Label in Name</a> </li><li> <a href="#ref-for-dfn-labels-3" title="§ 3.3.2 Labels or Instructions">§ 3.3.2 Labels or Instructions</a> </li><li> <a href="#ref-for-dfn-labels-4" title="§ 6. Glossary">§ 6. Glossary</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-large-scale" aria-label="Links in this document to definition: large scale"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-large-scale" aria-label="Permalink for definition: large scale. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-large-scale-1" title="§ 1.4.3 Contrast (Minimum)">§ 1.4.3 Contrast (Minimum)</a> </li><li> <a href="#ref-for-dfn-large-scale-2" title="§ 1.4.6 Contrast (Enhanced)">§ 1.4.6 Contrast (Enhanced)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-legal-commitments" aria-label="Links in this document to definition: legal commitments"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-legal-commitments" aria-label="Permalink for definition: legal commitments. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-legal-commitments-1" title="§ 3.3.4 Error Prevention (Legal, Financial, Data)">§ 3.3.4 Error Prevention (Legal, Financial, Data)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-purpose-of-each-link" aria-label="Links in this document to definition: link purpose"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-purpose-of-each-link" aria-label="Permalink for definition: link purpose. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-purpose-of-each-link-1" title="§ 2.4.4 Link Purpose (In Context)">§ 2.4.4 Link Purpose (In Context)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-live" aria-label="Links in this document to definition: live"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-live" aria-label="Permalink for definition: live. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-live-1" title="§ 1.2.4 Captions (Live)">§ 1.2.4 Captions (Live)</a> </li><li> <a href="#ref-for-dfn-live-2" title="§ 1.2.9 Audio-only (Live)">§ 1.2.9 Audio-only (Live)</a> </li><li> <a href="#ref-for-dfn-live-3" title="§ 6. Glossary">§ 6. Glossary</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-lower-secondary-education-level" aria-label="Links in this document to definition: lower secondary education level"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-lower-secondary-education-level" aria-label="Permalink for definition: lower secondary education level. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-lower-secondary-education-level-1" title="§ 3.1.5 Reading Level">§ 3.1.5 Reading Level</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-mechanism" aria-label="Links in this document to definition: mechanism"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-mechanism" aria-label="Permalink for definition: mechanism. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-mechanism-1" title="§ 1.4.2 Audio Control">§ 1.4.2 Audio Control</a> </li><li> <a href="#ref-for-dfn-mechanism-2" title="§ 1.4.8 Visual Presentation">§ 1.4.8 Visual Presentation</a> </li><li> <a href="#ref-for-dfn-mechanism-3" title="§ 1.4.13 Content on Hover or Focus">§ 1.4.13 Content on Hover or Focus</a> </li><li> <a href="#ref-for-dfn-mechanism-4" title="§ 2.1.4 Character Key Shortcuts">§ 2.1.4 Character Key Shortcuts</a> </li><li> <a href="#ref-for-dfn-mechanism-5" title="§ 2.4.1 Bypass Blocks">§ 2.4.1 Bypass Blocks</a> </li><li> <a href="#ref-for-dfn-mechanism-6" title="§ 2.4.9 Link Purpose (Link Only)">§ 2.4.9 Link Purpose (Link Only)</a> </li><li> <a href="#ref-for-dfn-mechanism-7" title="§ 2.5.2 Pointer Cancellation">§ 2.5.2 Pointer Cancellation</a> </li><li> <a href="#ref-for-dfn-mechanism-8" title="§ 3.1.3 Unusual Words">§ 3.1.3 Unusual Words</a> </li><li> <a href="#ref-for-dfn-mechanism-9" title="§ 3.1.4 Abbreviations">§ 3.1.4 Abbreviations</a> </li><li> <a href="#ref-for-dfn-mechanism-10" title="§ 3.1.6 Pronunciation">§ 3.1.6 Pronunciation</a> </li><li> <a href="#ref-for-dfn-mechanism-11" title="§ 3.2.5 Change on Request">§ 3.2.5 Change on Request</a> </li><li> <a href="#ref-for-dfn-mechanism-12" title="§ 6. Glossary">§ 6. Glossary</a> <a href="#ref-for-dfn-mechanism-13" title="Reference 2">(2)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-media-alternative-for-text" aria-label="Links in this document to definition: media alternative for text"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-media-alternative-for-text" aria-label="Permalink for definition: media alternative for text. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-media-alternative-for-text-1" title="§ 1.2.1 Audio-only and Video-only (Prerecorded)">§ 1.2.1 Audio-only and Video-only (Prerecorded)</a> </li><li> <a href="#ref-for-dfn-media-alternative-for-text-2" title="§ 1.2.2 Captions (Prerecorded)">§ 1.2.2 Captions (Prerecorded)</a> </li><li> <a href="#ref-for-dfn-media-alternative-for-text-3" title="§ 1.2.3 Audio Description or Media Alternative (Prerecorded)">§ 1.2.3 Audio Description or Media Alternative (Prerecorded)</a> </li><li> <a href="#ref-for-dfn-media-alternative-for-text-4" title="§ 6. Glossary">§ 6. Glossary</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-motion-animation" aria-label="Links in this document to definition: motion animation"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-motion-animation" aria-label="Permalink for definition: motion animation. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-motion-animation-1" title="§ 2.3.3 Animation from Interactions">§ 2.3.3 Animation from Interactions</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-name" aria-label="Links in this document to definition: name"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-name" aria-label="Permalink for definition: name. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-name-1" title="§ 1.1.1 Non-text Content">§ 1.1.1 Non-text Content</a> </li><li> <a href="#ref-for-dfn-name-2" title="§ 2.5.3 Label in Name">§ 2.5.3 Label in Name</a> </li><li> <a href="#ref-for-dfn-name-3" title="§ 4.1.2 Name, Role, Value">§ 4.1.2 Name, Role, Value</a> </li><li> <a href="#ref-for-dfn-name-4" title="§ 6. Glossary">§ 6. Glossary</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-navigated-sequentially" aria-label="Links in this document to definition: navigated sequentially"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-navigated-sequentially" aria-label="Permalink for definition: navigated sequentially. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-navigated-sequentially-1" title="§ 2.4.3 Focus Order">§ 2.4.3 Focus Order</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-non-text-content" aria-label="Links in this document to definition: non-text content"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-non-text-content" aria-label="Permalink for definition: non-text content. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-non-text-content-1" title="§ 1.1.1 Non-text Content">§ 1.1.1 Non-text Content</a> </li><li> <a href="#ref-for-dfn-non-text-content-2" title="§ 6. Glossary">§ 6. Glossary</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-normative" aria-label="Links in this document to definition: normative"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-normative" aria-label="Permalink for definition: normative. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-normative-1" title="§ 5.1 Interpreting Normative Requirements">§ 5.1 Interpreting Normative Requirements</a> </li><li> <a href="#ref-for-dfn-normative-2" title="§ 6. Glossary">§ 6. Glossary</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-on-a-full-screen-window" aria-label="Links in this document to definition: on a full-screen window"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-on-a-full-screen-window" aria-label="Permalink for definition: on a full-screen window. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-on-a-full-screen-window-1" title="§ 1.4.8 Visual Presentation">§ 1.4.8 Visual Presentation</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-pause" aria-label="Links in this document to definition: paused"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-pause" aria-label="Permalink for definition: paused. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-pause-1" title="§ 2.2.2 Pause, Stop, Hide">§ 2.2.2 Pause, Stop, Hide</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-pointer-inputs" aria-label="Links in this document to definition: pointer input"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-pointer-inputs" aria-label="Permalink for definition: pointer input. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-pointer-inputs-1" title="§ 2.5.5 Target Size">§ 2.5.5 Target Size</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-prerecorded" aria-label="Links in this document to definition: prerecorded"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-prerecorded" aria-label="Permalink for definition: prerecorded. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-prerecorded-1" title="§ 1.2.1 Audio-only and Video-only (Prerecorded)">§ 1.2.1 Audio-only and Video-only (Prerecorded)</a> </li><li> <a href="#ref-for-dfn-prerecorded-2" title="§ 1.2.2 Captions (Prerecorded)">§ 1.2.2 Captions (Prerecorded)</a> </li><li> <a href="#ref-for-dfn-prerecorded-3" title="§ 1.2.3 Audio Description or Media Alternative (Prerecorded)">§ 1.2.3 Audio Description or Media Alternative (Prerecorded)</a> </li><li> <a href="#ref-for-dfn-prerecorded-4" title="§ 1.2.5 Audio Description (Prerecorded)">§ 1.2.5 Audio Description (Prerecorded)</a> </li><li> <a href="#ref-for-dfn-prerecorded-5" title="§ 1.2.6 Sign Language (Prerecorded)">§ 1.2.6 Sign Language (Prerecorded)</a> </li><li> <a href="#ref-for-dfn-prerecorded-6" title="§ 1.2.7 Extended Audio Description (Prerecorded)">§ 1.2.7 Extended Audio Description (Prerecorded)</a> </li><li> <a href="#ref-for-dfn-prerecorded-7" title="§ 1.2.8 Media Alternative (Prerecorded)">§ 1.2.8 Media Alternative (Prerecorded)</a> </li><li> <a href="#ref-for-dfn-prerecorded-8" title="§ 1.4.7 Low or No Background Audio">§ 1.4.7 Low or No Background Audio</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-presentation" aria-label="Links in this document to definition: presentation"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-presentation" aria-label="Permalink for definition: presentation. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-presentation-1" title="§ 1.3.1 Info and Relationships">§ 1.3.1 Info and Relationships</a> </li><li> <a href="#ref-for-dfn-presentation-2" title="§ 1.4.11 Non-text Contrast">§ 1.4.11 Non-text Contrast</a> </li><li> <a href="#ref-for-dfn-presentation-3" title="§ 6. Glossary">§ 6. Glossary</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-primary-education" aria-label="Links in this document to definition: primary education level"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-primary-education" aria-label="Permalink for definition: primary education level. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-primary-education-1" title="§ 6. Glossary">§ 6. Glossary</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-processes" aria-label="Links in this document to definition: process"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-processes" aria-label="Permalink for definition: process. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-processes-1" title="§ 2.4.5 Multiple Ways">§ 2.4.5 Multiple Ways</a> </li><li> <a href="#ref-for-dfn-processes-2" title="§ 5.2.3 Complete processes">§ 5.2.3 Complete processes</a> </li><li> <a href="#ref-for-dfn-processes-3" title="§ 6. Glossary">§ 6. Glossary</a> <a href="#ref-for-dfn-processes-4" title="Reference 2">(2)</a> <a href="#ref-for-dfn-processes-5" title="Reference 3">(3)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-programmatically-determinable" aria-label="Links in this document to definition: programmatically determined"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-programmatically-determinable" aria-label="Permalink for definition: programmatically determined. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-programmatically-determinable-1" title="§ 1.3.1 Info and Relationships">§ 1.3.1 Info and Relationships</a> </li><li> <a href="#ref-for-dfn-programmatically-determinable-2" title="§ 1.3.2 Meaningful Sequence">§ 1.3.2 Meaningful Sequence</a> </li><li> <a href="#ref-for-dfn-programmatically-determinable-3" title="§ 1.3.5 Identify Input Purpose">§ 1.3.5 Identify Input Purpose</a> </li><li> <a href="#ref-for-dfn-programmatically-determinable-4" title="§ 1.3.6 Identify Purpose">§ 1.3.6 Identify Purpose</a> </li><li> <a href="#ref-for-dfn-programmatically-determinable-5" title="§ 3.1.1 Language of Page">§ 3.1.1 Language of Page</a> </li><li> <a href="#ref-for-dfn-programmatically-determinable-6" title="§ 3.1.2 Language of Parts">§ 3.1.2 Language of Parts</a> </li><li> <a href="#ref-for-dfn-programmatically-determinable-7" title="§ 4.1.2 Name, Role, Value">§ 4.1.2 Name, Role, Value</a> </li><li> <a href="#ref-for-dfn-programmatically-determinable-8" title="§ 4.1.3 Status Messages">§ 4.1.3 Status Messages</a> </li><li> <a href="#ref-for-dfn-programmatically-determinable-9" title="§ 6. Glossary">§ 6. Glossary</a> <a href="#ref-for-dfn-programmatically-determinable-10" title="Reference 2">(2)</a> <a href="#ref-for-dfn-programmatically-determinable-11" title="Reference 3">(3)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-programmatically-determined-link-context" aria-label="Links in this document to definition: programmatically determined link context"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-programmatically-determined-link-context" aria-label="Permalink for definition: programmatically determined link context. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-programmatically-determined-link-context-1" title="§ 2.4.4 Link Purpose (In Context)">§ 2.4.4 Link Purpose (In Context)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-programmatically-set" aria-label="Links in this document to definition: programmatically set"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-programmatically-set" aria-label="Permalink for definition: programmatically set. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-programmatically-set-1" title="§ 4.1.2 Name, Role, Value">§ 4.1.2 Name, Role, Value</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-pure-decoration" aria-label="Links in this document to definition: pure decoration"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-pure-decoration" aria-label="Permalink for definition: pure decoration. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-pure-decoration-1" title="§ 1.1.1 Non-text Content">§ 1.1.1 Non-text Content</a> </li><li> <a href="#ref-for-dfn-pure-decoration-2" title="§ 1.4.3 Contrast (Minimum)">§ 1.4.3 Contrast (Minimum)</a> </li><li> <a href="#ref-for-dfn-pure-decoration-3" title="§ 1.4.6 Contrast (Enhanced)">§ 1.4.6 Contrast (Enhanced)</a> </li><li> <a href="#ref-for-dfn-pure-decoration-4" title="§ 1.4.9 Images of Text (No Exception)">§ 1.4.9 Images of Text (No Exception)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-real-time-events" aria-label="Links in this document to definition: real-time event"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-real-time-events" aria-label="Permalink for definition: real-time event. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-real-time-events-1" title="§ 2.2.3 No Timing">§ 2.2.3 No Timing</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-regions" aria-label="Links in this document to definition: region"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-regions" aria-label="Permalink for definition: region. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-regions-1" title="§ 1.3.6 Identify Purpose">§ 1.3.6 Identify Purpose</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-relationships" aria-label="Links in this document to definition: relationships"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-relationships" aria-label="Permalink for definition: relationships. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-relationships-1" title="§ 1.3.1 Info and Relationships">§ 1.3.1 Info and Relationships</a> </li><li> <a href="#ref-for-dfn-relationships-2" title="§ 6. Glossary">§ 6. Glossary</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-relative-luminance" aria-label="Links in this document to definition: relative luminance"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-relative-luminance" aria-label="Permalink for definition: relative luminance. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-relative-luminance-1" title="§ 6. Glossary">§ 6. Glossary</a> <a href="#ref-for-dfn-relative-luminance-2" title="Reference 2">(2)</a> <a href="#ref-for-dfn-relative-luminance-3" title="Reference 3">(3)</a> <a href="#ref-for-dfn-relative-luminance-4" title="Reference 4">(4)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-relied-upon" aria-label="Links in this document to definition: relied upon"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-relied-upon" aria-label="Permalink for definition: relied upon. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-relied-upon-1" title="§ 5. Conformance">§ 5. Conformance</a> </li><li> <a href="#ref-for-dfn-relied-upon-2" title="§ 5.2.4 Only Accessibility-Supported Ways of Using Technologies">§ 5.2.4 Only Accessibility-Supported Ways of Using Technologies</a> </li><li> <a href="#ref-for-dfn-relied-upon-3" title="§ 5.2.5 Non-Interference">§ 5.2.5 Non-Interference</a> </li><li> <a href="#ref-for-dfn-relied-upon-4" title="§ 5.3.1 Required Components of a Conformance Claim">§ 5.3.1 Required Components of a Conformance Claim</a> </li><li> <a href="#ref-for-dfn-relied-upon-5" title="§ 5.3.2 Optional Components of a Conformance Claim">§ 5.3.2 Optional Components of a Conformance Claim</a> <a href="#ref-for-dfn-relied-upon-6" title="Reference 2">(2)</a> </li><li> <a href="#ref-for-dfn-relied-upon-7" title="§ 6. Glossary">§ 6. Glossary</a> <a href="#ref-for-dfn-relied-upon-8" title="Reference 2">(2)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-role" aria-label="Links in this document to definition: role"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-role" aria-label="Permalink for definition: role. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-role-1" title="§ 4.1.2 Name, Role, Value">§ 4.1.2 Name, Role, Value</a> </li><li> <a href="#ref-for-dfn-role-2" title="§ 4.1.3 Status Messages">§ 4.1.3 Status Messages</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-same-functionality" aria-label="Links in this document to definition: same functionality"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-same-functionality" aria-label="Permalink for definition: same functionality. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-same-functionality-1" title="§ 3.2.4 Consistent Identification">§ 3.2.4 Consistent Identification</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-same-relative-order" aria-label="Links in this document to definition: same relative order"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-same-relative-order" aria-label="Permalink for definition: same relative order. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-same-relative-order-1" title="§ 3.2.3 Consistent Navigation">§ 3.2.3 Consistent Navigation</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-satisfies" aria-label="Links in this document to definition: satisfies a success criterion"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-satisfies" aria-label="Permalink for definition: satisfies a success criterion. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-satisfies-1" title="§ 5.2.1 Conformance Level">§ 5.2.1 Conformance Level</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-section" aria-label="Links in this document to definition: section"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-section" aria-label="Permalink for definition: section. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-section-1" title="§ 2.4.10 Section Headings">§ 2.4.10 Section Headings</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-set-of-web-pages" aria-label="Links in this document to definition: set of web pages"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-set-of-web-pages" aria-label="Permalink for definition: set of web pages. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-set-of-web-pages-1" title="§ 2.4.5 Multiple Ways">§ 2.4.5 Multiple Ways</a> </li><li> <a href="#ref-for-dfn-set-of-web-pages-2" title="§ 2.4.8 Location">§ 2.4.8 Location</a> </li><li> <a href="#ref-for-dfn-set-of-web-pages-3" title="§ 3.2.3 Consistent Navigation">§ 3.2.3 Consistent Navigation</a> </li><li> <a href="#ref-for-dfn-set-of-web-pages-4" title="§ 3.2.4 Consistent Identification">§ 3.2.4 Consistent Identification</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-sign-language" aria-label="Links in this document to definition: sign language"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-sign-language" aria-label="Permalink for definition: sign language. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-sign-language-1" title="§ 6. Glossary">§ 6. Glossary</a> <a href="#ref-for-dfn-sign-language-2" title="Reference 2">(2)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-sign-language-interpretation" aria-label="Links in this document to definition: sign language interpretation"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-sign-language-interpretation" aria-label="Permalink for definition: sign language interpretation. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-sign-language-interpretation-1" title="§ 1.2.6 Sign Language (Prerecorded)">§ 1.2.6 Sign Language (Prerecorded)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-single-pointer" aria-label="Links in this document to definition: single pointer"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-single-pointer" aria-label="Permalink for definition: single pointer. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-single-pointer-1" title="§ 2.5.1 Pointer Gestures">§ 2.5.1 Pointer Gestures</a> </li><li> <a href="#ref-for-dfn-single-pointer-2" title="§ 2.5.2 Pointer Cancellation">§ 2.5.2 Pointer Cancellation</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-specific-sensory-experience" aria-label="Links in this document to definition: specific sensory experience"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-specific-sensory-experience" aria-label="Permalink for definition: specific sensory experience. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-specific-sensory-experience-1" title="§ 1.1.1 Non-text Content">§ 1.1.1 Non-text Content</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-states" aria-label="Links in this document to definition: state"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-states" aria-label="Permalink for definition: state. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-states-1" title="§ 1.4.11 Non-text Contrast">§ 1.4.11 Non-text Contrast</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-status-messages" aria-label="Links in this document to definition: status message"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-status-messages" aria-label="Permalink for definition: status message. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-status-messages-1" title="§ 4.1.3 Status Messages">§ 4.1.3 Status Messages</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-structure" aria-label="Links in this document to definition: structure"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-structure" aria-label="Permalink for definition: structure. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-structure-1" title="§ 1.3.1 Info and Relationships">§ 1.3.1 Info and Relationships</a> </li><li> <a href="#ref-for-dfn-structure-2" title="§ 6. Glossary">§ 6. Glossary</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-style-properties" aria-label="Links in this document to definition: style property"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-style-properties" aria-label="Permalink for definition: style property. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-style-properties-1" title="§ 1.4.12 Text Spacing">§ 1.4.12 Text Spacing</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-supplementary-content" aria-label="Links in this document to definition: supplemental content"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-supplementary-content" aria-label="Permalink for definition: supplemental content. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-supplementary-content-1" title="§ 3.1.5 Reading Level">§ 3.1.5 Reading Level</a> </li><li> <a href="#ref-for-dfn-supplementary-content-2" title="§ 6. Glossary">§ 6. Glossary</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-synchronized-media" aria-label="Links in this document to definition: synchronized media"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-synchronized-media" aria-label="Permalink for definition: synchronized media. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-synchronized-media-1" title="§ 1.2.2 Captions (Prerecorded)">§ 1.2.2 Captions (Prerecorded)</a> </li><li> <a href="#ref-for-dfn-synchronized-media-2" title="§ 1.2.3 Audio Description or Media Alternative (Prerecorded)">§ 1.2.3 Audio Description or Media Alternative (Prerecorded)</a> </li><li> <a href="#ref-for-dfn-synchronized-media-3" title="§ 1.2.4 Captions (Live)">§ 1.2.4 Captions (Live)</a> </li><li> <a href="#ref-for-dfn-synchronized-media-4" title="§ 1.2.5 Audio Description (Prerecorded)">§ 1.2.5 Audio Description (Prerecorded)</a> </li><li> <a href="#ref-for-dfn-synchronized-media-5" title="§ 1.2.6 Sign Language (Prerecorded)">§ 1.2.6 Sign Language (Prerecorded)</a> </li><li> <a href="#ref-for-dfn-synchronized-media-6" title="§ 1.2.7 Extended Audio Description (Prerecorded)">§ 1.2.7 Extended Audio Description (Prerecorded)</a> </li><li> <a href="#ref-for-dfn-synchronized-media-7" title="§ 1.2.8 Media Alternative (Prerecorded)">§ 1.2.8 Media Alternative (Prerecorded)</a> </li><li> <a href="#ref-for-dfn-synchronized-media-8" title="§ 2.2.3 No Timing">§ 2.2.3 No Timing</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-targets" aria-label="Links in this document to definition: target"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-targets" aria-label="Permalink for definition: target. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-targets-1" title="§ 2.5.5 Target Size">§ 2.5.5 Target Size</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-technologies" aria-label="Links in this document to definition: technology"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-technologies" aria-label="Permalink for definition: technology. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-technologies-1" title="§ 5.2.4 Only Accessibility-Supported Ways of Using Technologies">§ 5.2.4 Only Accessibility-Supported Ways of Using Technologies</a> </li><li> <a href="#ref-for-dfn-technologies-2" title="§ 5.2.5 Non-Interference">§ 5.2.5 Non-Interference</a> </li><li> <a href="#ref-for-dfn-technologies-3" title="§ 5.3.1 Required Components of a Conformance Claim">§ 5.3.1 Required Components of a Conformance Claim</a> </li><li> <a href="#ref-for-dfn-technologies-4" title="§ 6. Glossary">§ 6. Glossary</a> <a href="#ref-for-dfn-technologies-5" title="Reference 2">(2)</a> <a href="#ref-for-dfn-technologies-6" title="Reference 3">(3)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-text" aria-label="Links in this document to definition: text"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-text" aria-label="Permalink for definition: text. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-text-1" title="§ 1.1.1 Non-text Content">§ 1.1.1 Non-text Content</a> </li><li> <a href="#ref-for-dfn-text-2" title="§ 1.4.3 Contrast (Minimum)">§ 1.4.3 Contrast (Minimum)</a> </li><li> <a href="#ref-for-dfn-text-3" title="§ 1.4.4 Resize Text">§ 1.4.4 Resize Text</a> </li><li> <a href="#ref-for-dfn-text-4" title="§ 1.4.5 Images of Text">§ 1.4.5 Images of Text</a> </li><li> <a href="#ref-for-dfn-text-5" title="§ 1.4.6 Contrast (Enhanced)">§ 1.4.6 Contrast (Enhanced)</a> </li><li> <a href="#ref-for-dfn-text-6" title="§ 1.4.9 Images of Text (No Exception)">§ 1.4.9 Images of Text (No Exception)</a> </li><li> <a href="#ref-for-dfn-text-7" title="§ 1.4.12 Text Spacing">§ 1.4.12 Text Spacing</a> </li><li> <a href="#ref-for-dfn-text-8" title="§ 2.5.3 Label in Name">§ 2.5.3 Label in Name</a> </li><li> <a href="#ref-for-dfn-text-9" title="§ 6. Glossary">§ 6. Glossary</a> <a href="#ref-for-dfn-text-10" title="Reference 2">(2)</a> <a href="#ref-for-dfn-text-11" title="Reference 3">(3)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-text-alternative" aria-label="Links in this document to definition: text alternative"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-text-alternative" aria-label="Permalink for definition: text alternative. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-text-alternative-1" title="§ 1.1.1 Non-text Content">§ 1.1.1 Non-text Content</a> </li><li> <a href="#ref-for-dfn-text-alternative-2" title="§ 6. Glossary">§ 6. Glossary</a> <a href="#ref-for-dfn-text-alternative-3" title="Reference 2">(2)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-up-event" aria-label="Links in this document to definition: up-event"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-up-event" aria-label="Permalink for definition: up-event. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-up-event-1" title="§ 2.5.2 Pointer Cancellation">§ 2.5.2 Pointer Cancellation</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-used-in-an-unusual-or-restricted-way" aria-label="Links in this document to definition: used in an unusual or restricted way"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-used-in-an-unusual-or-restricted-way" aria-label="Permalink for definition: used in an unusual or restricted way. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-used-in-an-unusual-or-restricted-way-1" title="§ 3.1.3 Unusual Words">§ 3.1.3 Unusual Words</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-user-agents" aria-label="Links in this document to definition: user agent"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-user-agents" aria-label="Permalink for definition: user agent. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-user-agents-1" title="§ 4.1.2 Name, Role, Value">§ 4.1.2 Name, Role, Value</a> </li><li> <a href="#ref-for-dfn-user-agents-2" title="§ 6. Glossary">§ 6. Glossary</a> <a href="#ref-for-dfn-user-agents-3" title="Reference 2">(2)</a> <a href="#ref-for-dfn-user-agents-4" title="Reference 3">(3)</a> <a href="#ref-for-dfn-user-agents-5" title="Reference 4">(4)</a> <a href="#ref-for-dfn-user-agents-6" title="Reference 5">(5)</a> <a href="#ref-for-dfn-user-agents-7" title="Reference 6">(6)</a> <a href="#ref-for-dfn-user-agents-8" title="Reference 7">(7)</a> <a href="#ref-for-dfn-user-agents-9" title="Reference 8">(8)</a> <a href="#ref-for-dfn-user-agents-10" title="Reference 9">(9)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-user-controllable" aria-label="Links in this document to definition: user-controllable"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-user-controllable" aria-label="Permalink for definition: user-controllable. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-user-controllable-1" title="§ 3.3.4 Error Prevention (Legal, Financial, Data)">§ 3.3.4 Error Prevention (Legal, Financial, Data)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-user-interface-components" aria-label="Links in this document to definition: user interface component"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-user-interface-components" aria-label="Permalink for definition: user interface component. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-user-interface-components-1" title="§ 1.3.6 Identify Purpose">§ 1.3.6 Identify Purpose</a> </li><li> <a href="#ref-for-dfn-user-interface-components-2" title="§ 1.4.3 Contrast (Minimum)">§ 1.4.3 Contrast (Minimum)</a> </li><li> <a href="#ref-for-dfn-user-interface-components-3" title="§ 1.4.6 Contrast (Enhanced)">§ 1.4.6 Contrast (Enhanced)</a> </li><li> <a href="#ref-for-dfn-user-interface-components-4" title="§ 1.4.11 Non-text Contrast">§ 1.4.11 Non-text Contrast</a> </li><li> <a href="#ref-for-dfn-user-interface-components-5" title="§ 2.1.4 Character Key Shortcuts">§ 2.1.4 Character Key Shortcuts</a> </li><li> <a href="#ref-for-dfn-user-interface-components-6" title="§ 2.4.10 Section Headings">§ 2.4.10 Section Headings</a> </li><li> <a href="#ref-for-dfn-user-interface-components-7" title="§ 2.5.3 Label in Name">§ 2.5.3 Label in Name</a> </li><li> <a href="#ref-for-dfn-user-interface-components-8" title="§ 2.5.4 Motion Actuation">§ 2.5.4 Motion Actuation</a> </li><li> <a href="#ref-for-dfn-user-interface-components-9" title="§ 3.2.1 On Focus">§ 3.2.1 On Focus</a> </li><li> <a href="#ref-for-dfn-user-interface-components-10" title="§ 3.2.2 On Input">§ 3.2.2 On Input</a> </li><li> <a href="#ref-for-dfn-user-interface-components-11" title="§ 4.1.2 Name, Role, Value">§ 4.1.2 Name, Role, Value</a> </li><li> <a href="#ref-for-dfn-user-interface-components-12" title="§ 7. Input Purposes for User Interface Components">§ 7. Input Purposes for User Interface Components</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-user-inactivity" aria-label="Links in this document to definition: user inactivity"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-user-inactivity" aria-label="Permalink for definition: user inactivity. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-user-inactivity-1" title="§ 2.2.6 Timeouts">§ 2.2.6 Timeouts</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-video" aria-label="Links in this document to definition: video"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-video" aria-label="Permalink for definition: video. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-video-1" title="§ 1.2.3 Audio Description or Media Alternative (Prerecorded)">§ 1.2.3 Audio Description or Media Alternative (Prerecorded)</a> </li><li> <a href="#ref-for-dfn-video-2" title="§ 1.2.5 Audio Description (Prerecorded)">§ 1.2.5 Audio Description (Prerecorded)</a> </li><li> <a href="#ref-for-dfn-video-3" title="§ 1.2.7 Extended Audio Description (Prerecorded)">§ 1.2.7 Extended Audio Description (Prerecorded)</a> </li><li> <a href="#ref-for-dfn-video-4" title="§ 6. Glossary">§ 6. Glossary</a> <a href="#ref-for-dfn-video-5" title="Reference 2">(2)</a> <a href="#ref-for-dfn-video-6" title="Reference 3">(3)</a> <a href="#ref-for-dfn-video-7" title="Reference 4">(4)</a> <a href="#ref-for-dfn-video-8" title="Reference 5">(5)</a> <a href="#ref-for-dfn-video-9" title="Reference 6">(6)</a> <a href="#ref-for-dfn-video-10" title="Reference 7">(7)</a> <a href="#ref-for-dfn-video-11" title="Reference 8">(8)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-video-only" aria-label="Links in this document to definition: video-only"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-video-only" aria-label="Permalink for definition: video-only. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-video-only-1" title="§ 1.2.1 Audio-only and Video-only (Prerecorded)">§ 1.2.1 Audio-only and Video-only (Prerecorded)</a> </li><li> <a href="#ref-for-dfn-video-only-2" title="§ 1.2.8 Media Alternative (Prerecorded)">§ 1.2.8 Media Alternative (Prerecorded)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-viewport" aria-label="Links in this document to definition: viewport"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-viewport" aria-label="Permalink for definition: viewport. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-viewport-1" title="§ 6. Glossary">§ 6. Glossary</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-visually-customized" aria-label="Links in this document to definition: visually customized"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-visually-customized" aria-label="Permalink for definition: visually customized. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-visually-customized-1" title="§ 1.4.5 Images of Text">§ 1.4.5 Images of Text</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-web-page-s" aria-label="Links in this document to definition: Web page"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-web-page-s" aria-label="Permalink for definition: Web page. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-web-page-s-1" title="§ 2.3.1 Three Flashes or Below Threshold">§ 2.3.1 Three Flashes or Below Threshold</a> </li><li> <a href="#ref-for-dfn-web-page-s-2" title="§ 2.3.2 Three Flashes">§ 2.3.2 Three Flashes</a> </li><li> <a href="#ref-for-dfn-web-page-s-3" title="§ 2.4.1 Bypass Blocks">§ 2.4.1 Bypass Blocks</a> </li><li> <a href="#ref-for-dfn-web-page-s-4" title="§ 2.4.2 Page Titled">§ 2.4.2 Page Titled</a> </li><li> <a href="#ref-for-dfn-web-page-s-5" title="§ 2.4.3 Focus Order">§ 2.4.3 Focus Order</a> </li><li> <a href="#ref-for-dfn-web-page-s-6" title="§ 2.4.5 Multiple Ways">§ 2.4.5 Multiple Ways</a> </li><li> <a href="#ref-for-dfn-web-page-s-7" title="§ 3.1.1 Language of Page">§ 3.1.1 Language of Page</a> </li><li> <a href="#ref-for-dfn-web-page-s-8" title="§ 3.2.3 Consistent Navigation">§ 3.2.3 Consistent Navigation</a> </li><li> <a href="#ref-for-dfn-web-page-s-9" title="§ 3.3.4 Error Prevention (Legal, Financial, Data)">§ 3.3.4 Error Prevention (Legal, Financial, Data)</a> </li><li> <a href="#ref-for-dfn-web-page-s-10" title="§ 3.3.6 Error Prevention (All)">§ 3.3.6 Error Prevention (All)</a> </li><li> <a href="#ref-for-dfn-web-page-s-11" title="§ 5.2.1 Conformance Level">§ 5.2.1 Conformance Level</a> </li><li> <a href="#ref-for-dfn-web-page-s-12" title="§ 5.2.2 Full pages">§ 5.2.2 Full pages</a> </li><li> <a href="#ref-for-dfn-web-page-s-13" title="§ 5.2.3 Complete processes">§ 5.2.3 Complete processes</a> </li><li> <a href="#ref-for-dfn-web-page-s-14" title="§ 5.2.5 Non-Interference">§ 5.2.5 Non-Interference</a> </li><li> <a href="#ref-for-dfn-web-page-s-15" title="§ 5.3 Conformance Claims (Optional)">§ 5.3 Conformance Claims (Optional)</a> </li><li> <a href="#ref-for-dfn-web-page-s-16" title="§ 6. Glossary">§ 6. Glossary</a> <a href="#ref-for-dfn-web-page-s-17" title="Reference 2">(2)</a> <a href="#ref-for-dfn-web-page-s-18" title="Reference 3">(3)</a> <a href="#ref-for-dfn-web-page-s-19" title="Reference 4">(4)</a> <a href="#ref-for-dfn-web-page-s-20" title="Reference 5">(5)</a> <a href="#ref-for-dfn-web-page-s-21" title="Reference 6">(6)</a> </li> </ul> </div><script id="respec-dfn-panel">(() => { // @ts-check if (document.respec) { document.respec.ready.then(setupPanel); } else { setupPanel(); } function setupPanel() { const listener = panelListener(); document.body.addEventListener("keydown", listener); document.body.addEventListener("click", listener); } function panelListener() { /** @type {HTMLElement} */ let panel = null; return event => { const { target, type } = event; if (!(target instanceof HTMLElement)) return; // For keys, we only care about Enter key to activate the panel // otherwise it's activated via a click. if (type === "keydown" && event.key !== "Enter") return; const action = deriveAction(event); switch (action) { case "show": { hidePanel(panel); /** @type {HTMLElement} */ const dfn = target.closest("dfn, .index-term"); panel = document.getElementById(`dfn-panel-for-${dfn.id}`); const coords = deriveCoordinates(event); displayPanel(dfn, panel, coords); break; } case "dock": { panel.style.left = null; panel.style.top = null; panel.classList.add("docked"); break; } case "hide": { hidePanel(panel); panel = null; break; } } }; } /** * @param {MouseEvent|KeyboardEvent} event */ function deriveCoordinates(event) { const target = /** @type HTMLElement */ (event.target); // We prevent synthetic AT clicks from putting // the dialog in a weird place. The AT events sometimes // lack coordinates, so they have clientX/Y = 0 const rect = target.getBoundingClientRect(); if ( event instanceof MouseEvent && event.clientX >= rect.left && event.clientY >= rect.top ) { // The event probably happened inside the bounding rect... return { x: event.clientX, y: event.clientY }; } // Offset to the middle of the element const x = rect.x + rect.width / 2; // Placed at the bottom of the element const y = rect.y + rect.height; return { x, y }; } /** * @param {Event} event */ function deriveAction(event) { const target = /** @type {HTMLElement} */ (event.target); const hitALink = !!target.closest("a"); if (target.closest("dfn:not([data-cite]), .index-term")) { return hitALink ? "none" : "show"; } if (target.closest(".dfn-panel")) { if (hitALink) { return target.classList.contains("self-link") ? "hide" : "dock"; } const panel = target.closest(".dfn-panel"); return panel.classList.contains("docked") ? "hide" : "none"; } if (document.querySelector(".dfn-panel:not([hidden])")) { return "hide"; } return "none"; } /** * @param {HTMLElement} dfn * @param {HTMLElement} panel * @param {{ x: number, y: number }} clickPosition */ function displayPanel(dfn, panel, { x, y }) { panel.hidden = false; // distance (px) between edge of panel and the pointing triangle (caret) const MARGIN = 20; const dfnRects = dfn.getClientRects(); // Find the `top` offset when the `dfn` can be spread across multiple lines let closestTop = 0; let minDiff = Infinity; for (const rect of dfnRects) { const { top, bottom } = rect; const diffFromClickY = Math.abs((top + bottom) / 2 - y); if (diffFromClickY < minDiff) { minDiff = diffFromClickY; closestTop = top; } } const top = window.scrollY + closestTop + dfnRects[0].height; const left = x - MARGIN; panel.style.left = `${left}px`; panel.style.top = `${top}px`; // Find if the panel is flowing out of the window const panelRect = panel.getBoundingClientRect(); const SCREEN_WIDTH = Math.min(window.innerWidth, window.screen.width); if (panelRect.right > SCREEN_WIDTH) { const newLeft = Math.max(MARGIN, x + MARGIN - panelRect.width); const newCaretOffset = left - newLeft; panel.style.left = `${newLeft}px`; /** @type {HTMLElement} */ const caret = panel.querySelector(".caret"); caret.style.left = `${newCaretOffset}px`; } // As it's a dialog, we trap focus. // TODO: when <dialog> becomes a implemented, we should really // use that. trapFocus(panel, dfn); } /** * @param {HTMLElement} panel * @param {HTMLElement} dfn * @returns */ function trapFocus(panel, dfn) { /** @type NodeListOf<HTMLAnchorElement> elements */ const anchors = panel.querySelectorAll("a[href]"); // No need to trap focus if (!anchors.length) return; // Move focus to first anchor element const first = anchors.item(0); first.focus(); const trapListener = createTrapListener(anchors, panel, dfn); panel.addEventListener("keydown", trapListener); // Hiding the panel releases the trap const mo = new MutationObserver(records => { const [record] = records; const target = /** @type HTMLElement */ (record.target); if (target.hidden) { panel.removeEventListener("keydown", trapListener); mo.disconnect(); } }); mo.observe(panel, { attributes: true, attributeFilter: ["hidden"] }); } /** * * @param {NodeListOf<HTMLAnchorElement>} anchors * @param {HTMLElement} panel * @param {HTMLElement} dfn * @returns */ function createTrapListener(anchors, panel, dfn) { const lastIndex = anchors.length - 1; let currentIndex = 0; return event => { switch (event.key) { // Hitting "Tab" traps us in a nice loop around elements. case "Tab": { event.preventDefault(); currentIndex += event.shiftKey ? -1 : +1; if (currentIndex < 0) { currentIndex = lastIndex; } else if (currentIndex > lastIndex) { currentIndex = 0; } anchors.item(currentIndex).focus(); break; } // Hitting "Enter" on an anchor releases the trap. case "Enter": hidePanel(panel); break; // Hitting "Escape" returns focus to dfn. case "Escape": hidePanel(panel); dfn.focus(); return; } }; } /** @param {HTMLElement} panel */ function hidePanel(panel) { if (!panel) return; panel.hidden = true; panel.classList.remove("docked"); } })()</script><script src="https://www.w3.org/scripts/TR/2021/fixup.js"></script></body></html>

CINXE.COM

Web Content Accessibility Guidelines (WCAG) 2.1