CINXE.COM

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US"><head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta name="generator" content="ReSpec 35.2.2"> <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} aside.example div.example{border-left-width:.1em;border-color:#999;background:#fff} </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-color:var(--warning-border,#f11);border-width:.2em;border-style:solid;background:#fbe9e9;background:var(--warning-bg,#fbe9e9);color:#000;color:var(--text,#000)} .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> pre.idl{padding:1em;position:relative} pre.idl>code{color:#000;color:var(--text,#000)} @media print{ pre.idl{white-space:pre-wrap} } .idlHeader{display:block;width:150px;background:#8ccbf2;background:var(--def-border,#8ccbf2);color:#fff;color:var(--defrow-border,#fff);font-family:sans-serif;font-weight:700;margin:-1em 0 1em -1em;height:28px;line-height:28px} .idlHeader a.self-link{margin-left:.3cm;text-decoration:none;border-bottom:none;color:inherit} .idlID{font-weight:700;color:#005a9c} .idlType{color:#005a9c} .idlName{color:#ff4500} .idlName a{color:#ff4500;border-bottom:1px dotted #ff4500;text-decoration:none} a.idlEnumItem{color:#000;border-bottom:1px dotted #ccc;text-decoration:none} .idlSuperclass{font-style:italic;color:#005a9c} .idlDefaultValue,.idlParamName{font-style:italic} .extAttr{color:#666} .idlSectionComment{color:gray} .idlIncludes a{font-weight:700} .respec-button-copy-paste:focus{text-decoration:none;border-color:#51a7e8;outline:0;box-shadow:0 0 5px rgba(81,167,232,.5)} .respec-button-copy-paste:is(:focus:hover,.selected:focus){border-color:#51a7e8} .respec-button-copy-paste:is(:hover,:active,.zeroclipboard-is-hover,.zeroclipboard-is-active){text-decoration:none;background-color:#ddd;background-image:linear-gradient(#eee,#ddd);border-color:#ccc} .respec-button-copy-paste:is(:active,.selected,.zeroclipboard-is-active){background-color:#dcdcdc;background-image:none;border-color:#b5b5b5;box-shadow:inset 0 2px 4px rgba(0,0,0,.15)} .respec-button-copy-paste.selected:hover{background-color:#cfcfcf} .respec-button-copy-paste:is(:disabled,:disabled:hover,.disabled,.disabled:hover){color:rgba(102,102,102,.5);cursor:default;background-color:rgba(229,229,229,.5);background-image:none;border-color:rgba(197,197,197,.5);box-shadow:none} @media print{ .respec-button-copy-paste{visibility:hidden} } </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;background:var(--indextable-hover-bg,#fff);color:#000;color:var(--text,#000);box-shadow:0 1em 3em -.4em rgba(0,0,0,.3),0 0 1px 1px rgba(0,0,0,.05);box-shadow:0 1em 3em -.4em var(--tocsidebar-shadow,rgba(0,0,0,.3)),0 0 1px 1px var(--tocsidebar-shadow,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;border-bottom-color:var(--indextable-hover-bg,#fff);top:0} .dfn-panel:not(.docked)>.caret::before{border-bottom:9px solid #a2a9b1;border-bottom-color:var(--indextable-hover-bg,#a2a9b1)} .dfn-panel *{margin:0} .dfn-panel b{display:block;color:#000;color:var(--text,#000);margin-top:.25em} .dfn-panel ul a[href]{color:#333;color:var(--text,#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>Accessible Rich Internet Applications (WAI-ARIA) 1.3</title> <meta name="color-scheme" content="light dark"> <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)} } 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} ol.tof,ul.tof{list-style:none outside none} .caption{margin-top:.5em;font-style:italic} #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 href="common/css/common.css" rel="stylesheet" type="text/css"> <meta name="description" content="Accessibility of web content requires semantic information about widgets, structures, and behaviors, in order to allow assistive technologies to convey appropriate information to persons with disabilities. This specification provides an ontology of roles, states, and properties that define accessible user interface elements and can be used to improve the accessibility and interoperability of web content and applications. These semantics are designed to allow an author to properly convey user interface behaviors and structural information to assistive technologies in document-level markup. This version adds features new since WAI-ARIA 1.1 [wai-aria-1.1] to improve interoperability with assistive technologies to form a more consistent accessibility model for [HTML] and [SVG2]. This specification complements both [HTML] and [SVG2]."> <style> .hljs{--base:#fafafa;--mono-1:#383a42;--mono-2:#686b77;--mono-3:#717277;--hue-1:#0b76c5;--hue-2:#336ae3;--hue-3:#a626a4;--hue-4:#42803c;--hue-5:#ca4706;--hue-5-2:#c91243;--hue-6:#986801;--hue-6-2:#9a6a01} @media (prefers-color-scheme:dark){ .hljs{--base:#282c34;--mono-1:#abb2bf;--mono-2:#818896;--mono-3:#5c6370;--hue-1:#56b6c2;--hue-2:#61aeee;--hue-3:#c678dd;--hue-4:#98c379;--hue-5:#e06c75;--hue-5-2:#be5046;--hue-6:#d19a66;--hue-6-2:#e6c07b} } .hljs{display:block;overflow-x:auto;padding:.5em;color:#383a42;color:var(--mono-1,#383a42);background:#fafafa;background:var(--base,#fafafa)} .hljs-comment,.hljs-quote{color:#717277;color:var(--mono-3,#717277);font-style:italic} .hljs-doctag,.hljs-formula,.hljs-keyword{color:#a626a4;color:var(--hue-3,#a626a4)} .hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#ca4706;color:var(--hue-5,#ca4706);font-weight:700} .hljs-literal{color:#0b76c5;color:var(--hue-1,#0b76c5)} .hljs-addition,.hljs-attribute,.hljs-meta-string,.hljs-regexp,.hljs-string{color:#42803c;color:var(--hue-4,#42803c)} .hljs-built_in,.hljs-class .hljs-title{color:#9a6a01;color:var(--hue-6-2,#9a6a01)} .hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#986801;color:var(--hue-6,#986801)} .hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#336ae3;color:var(--hue-2,#336ae3)} .hljs-emphasis{font-style:italic} .hljs-strong{font-weight:700} .hljs-link{text-decoration:underline} </style> <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:#222} var[data-type]::after{content:attr(data-type);transform:translateX(-50%) translateY(-100%);background:#222;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">{ "github": "w3c/aria", "doJsonLd": true, "specStatus": "ED", "shortName": "wai-aria-1.3", "copyrightStart": "2013", "prevRecURI": "https://www.w3.org/TR/wai-aria/", "edDraftURI": "https://w3c.github.io/aria/", "editors": [ { "name": "James Nurthen", "company": "Adobe", "companyURL": "https://www.adobe.com/", "w3cid": 37155 }, { "name": "Peter Krautzberger", "company": "krautzource UG", "companyURL": "https://www.krautzource.com", "w3cid": 60398 }, { "name": "Daniel Montalvo", "company": "W3C", "companyURL": "http://www.w3.org", "w3cid": 114058 } ], "formerEditors": [ { "name": "Michael Cooper", "company": "W3C", "companyURL": "https://www.w3.org", "w3cid": 34017, "note": "Editor until 2023" }, { "name": "Joanmarie Diggs", "company": "Igalia, S.L.", "companyURL": "https://www.igalia.com", "w3cid": 68182, "note": "Editor until 2021" }, { "name": "Shane McCarron", "company": "Spec-Ops", "w3cid": 89030, "note": "Editor until 2018" }, { "name": "Richard Schwerdtfeger", "company": "Knowbility", "companyURL": "https://knowbility.org/", "w3cid": 2460, "note": "Editor until October 2017" }, { "name": "James Craig", "company": "Apple Inc.", "companyURL": "https://www.apple.com/accessibility", "w3cid": 42459, "note": "Editor until May 2016" } ], "group": "aria", "maxTocLevel": 4, "ariaSpecURLs": { "ED": "https://w3c.github.io/aria/", "FPWD": "https://www.w3.org/TR/wai-aria-1.3/", "WD": "https://www.w3.org/TR/wai-aria-1.3/", "CR": "https://www.w3.org/TR/wai-aria-1.3/", "REC": "https://www.w3.org/TR/wai-aria-1.3/" }, "accNameURLs": { "ED": "https://w3c.github.io/accname/", "WD": "https://www.w3.org/TR/accname-1.2/", "FPWD": "https://www.w3.org/TR/accname-1.2/", "CR": "https://www.w3.org/TR/accname-1.2/", "REC": "https://www.w3.org/TR/accname-1.2/" }, "coreMappingURLs": { "ED": "https://w3c.github.io/core-aam/", "WD": "https://www.w3.org/TR/core-aam-1.2/", "FPWD": "https://www.w3.org/TR/core-aam-1.2/", "CR": "https://www.w3.org/TR/core-aam-1.2/", "REC": "https://www.w3.org/TR/core-aam-1.2/" }, "dpubModURLs": { "ED": "https://w3c.github.io/dpub-aria/", "FPWD": "https://www.w3.org/TR/dpub-aria-1.1/", "WD": "https://www.w3.org/TR/dpub-aria-1.1/", "REC": "https://www.w3.org/TR/dpub-aria-1.1/" }, "graphicsMappingModURLs": { "ED": "https://w3c.github.io/graphics-aam/", "FPWD": "https://www.w3.org/TR/graphics-aam-1.0/", "WD": "https://www.w3.org/TR/graphics-aam-1.0/", "CR": "https://www.w3.org/TR/graphics-aam-1.0/", "PR": "https://www.w3.org/TR/graphics-aam-1.0/", "REC": "https://www.w3.org/TR/graphics-aam-1.0/" }, "graphicsModURLs": { "ED": "https://w3c.github.io/graphics-aria/", "FPWD": "https://www.w3.org/TR/graphics-aria/", "WD": "https://www.w3.org/TR/graphics-aria/", "REC": "https://www.w3.org/TR/graphics-aria/" }, "htmlMappingURLs": { "ED": "https://w3c.github.io/html-aam/", "FPWD": "https://www.w3.org/TR/html-aam-1.0/", "WD": "https://www.w3.org/TR/html-aam/", "REC": "https://www.w3.org/TR/html-aam/" }, "practicesURLs": { "ED": "https://www.w3.org/WAI/ARIA/apg/", "WD": "https://www.w3.org/WAI/ARIA/apg/", "FPWD": "https://www.w3.org/WAI/ARIA/apg/", "CR": "https://www.w3.org/WAI/ARIA/apg/", "REC": "https://www.w3.org/WAI/ARIA/apg/" }, "preProcess": [ null, null ], "postProcess": [ null ], "xref": [ "dom", "accname-1.2", "core-aam-1.2", "infra", "HTML" ], "definitionMap": [], "localBiblio": { "ACCNAME-AAM": { "aliasOf": "ACCNAME-AAM-1.1" }, "ARIA-PRACTICES": { "aliasOf": "WAI-ARIA-PRACTICES-1.2" }, "CORE-AAM": { "aliasOf": "CORE-AAM-1.1" }, "DPUB-ARIA": { "aliasOf": "DPUB-ARIA-1.0" }, "GRAPHICS-ARIA": { "aliasOf": "GRAPHICS-ARIA-1.0" }, "GRAPHICS-AAM": { "aliasOf": "GRAPHICS-AAM-1.0" }, "EPUB-Content": { "href": "http://www.idpf.org/epub/31/spec/epub-contentdocs.html", "title": "EPUB Content Documents 3.1", "publisher": "IDPF" }, "HTML-AAM": { "aliasOf": "HTML-AAM-1.0" }, "MathML-Core": { "href": "https://mathml-refresh.github.io/mathml-core/", "title": "MathML Core", "authors": [ "David Carlisle", "Frédéric Wang" ] }, "SVG-AAM": { "aliasOf": "SVG-AAM-1.0" }, "SVG1": { "aliasOf": "SVG" }, "WAI-ARIA": { "aliasOf": "WAI-ARIA-1.1" } }, "publishISODate": "2025-02-12T00:00:00.000Z", "generatedSubtitle": "W3C Editor's Draft 12 February 2025" }</script> <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2021/W3C-ED"> <link rel="stylesheet" media="(prefers-color-scheme: dark)" href="https://www.w3.org/StyleSheets/TR/2021/dark.css"></head> <body class="h-entry" data-cite="dom accname-1.2 core-aam-1.2 infra HTML"><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">Accessible Rich Internet Applications (WAI-ARIA) 1.3</h1> <p id="w3c-state"><a href="https://www.w3.org/standards/types#ED">W3C Editor's Draft</a> <time class="dt-published" datetime="2025-02-12">12 February 2025</time></p> <details open=""> <summary>More details about this document</summary> <dl> <dt>This version:</dt><dd> <a class="u-url" href="https://w3c.github.io/aria/">https://w3c.github.io/aria/</a> </dd> <dt>Latest published version:</dt><dd> <a href="https://www.w3.org/TR/wai-aria-1.3/">https://www.w3.org/TR/wai-aria-1.3/</a> </dd> <dt>Latest editor's draft:</dt><dd><a href="https://w3c.github.io/aria/">https://w3c.github.io/aria/</a></dd> <dt>History:</dt><dd> <a href="https://www.w3.org/standards/history/wai-aria-1.3/">https://www.w3.org/standards/history/wai-aria-1.3/</a> </dd><dd> <a href="https://github.com/w3c/aria/commits/">Commit history</a> </dd> <dt>Latest Recommendation:</dt><dd><a href="https://www.w3.org/TR/wai-aria/">https://www.w3.org/TR/wai-aria/</a></dd> <dt>Editors:</dt><dd class="editor p-author h-card vcard" data-editor-id="37155"> <span class="p-name fn">James Nurthen</span> (<a class="p-org org h-org" href="https://www.adobe.com/">Adobe</a>) </dd><dd class="editor p-author h-card vcard" data-editor-id="60398"> <span class="p-name fn">Peter Krautzberger</span> (<a class="p-org org h-org" href="https://www.krautzource.com">krautzource UG</a>) </dd><dd class="editor p-author h-card vcard" data-editor-id="114058"> <span class="p-name fn">Daniel Montalvo</span> (<a class="p-org org h-org" href="http://www.w3.org">W3C</a>) </dd> <dt> Former editors: </dt><dd class="editor p-author h-card vcard" data-editor-id="34017"> <span class="p-name fn">Michael Cooper</span> (<a class="p-org org h-org" href="https://www.w3.org">W3C</a>) (Editor until 2023) </dd><dd class="editor p-author h-card vcard" data-editor-id="68182"> <span class="p-name fn">Joanmarie Diggs</span> (<a class="p-org org h-org" href="https://www.igalia.com">Igalia, S.L.</a>) (Editor until 2021) </dd><dd class="editor p-author h-card vcard" data-editor-id="89030"> <span class="p-name fn">Shane McCarron</span> (<span class="p-org org h-org">Spec-Ops</span>) (Editor until 2018) </dd><dd class="editor p-author h-card vcard" data-editor-id="2460"> <span class="p-name fn">Richard Schwerdtfeger</span> (<a class="p-org org h-org" href="https://knowbility.org/">Knowbility</a>) (Editor until October 2017) </dd><dd class="editor p-author h-card vcard" data-editor-id="42459"> <span class="p-name fn">James Craig</span> (<a class="p-org org h-org" href="https://www.apple.com/accessibility">Apple Inc.</a>) (Editor until May 2016) </dd> <dt>Feedback:</dt><dd> <a href="https://github.com/w3c/aria/">GitHub w3c/aria</a> (<a href="https://github.com/w3c/aria/pulls/">pull requests</a>, <a href="https://github.com/w3c/aria/issues/new/choose">new issue</a>, <a href="https://github.com/w3c/aria/issues/">open issues</a>) </dd> </dl> </details> <p class="copyright"> <a href="https://www.w3.org/policies/#copyright">Copyright</a> © 2013-2025 <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/policies/#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/policies/#W3C_Trademarks">trademark</a> and <a rel="license" href="https://www.w3.org/copyright/software-license-2023/" title="W3C Software and Document Notice and License">permissive document license</a> rules apply. </p> <hr title="Separator for header"> </div> <section id="abstract" class="introductory"><h2>Abstract</h2> <p>Accessibility of web content requires semantic information about widgets, structures, and behaviors, in order to allow assistive technologies to convey appropriate information to persons with disabilities. This specification provides an ontology of roles, states, and properties that define accessible user interface elements and can be used to improve the accessibility and interoperability of web content and applications. These semantics are designed to allow an author to properly convey user interface behaviors and structural information to assistive technologies in document-level markup. This version adds features new since <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> 1.1 [<cite><a class="bibref" data-link-type="biblio" href="#bib-wai-aria-1.1" title="Accessible Rich Internet Applications (WAI-ARIA) 1.1">wai-aria-1.1</a></cite>] to improve interoperability with assistive technologies to form a more consistent accessibility model for [<cite><a class="bibref" data-link-type="biblio" href="#bib-html" title="HTML Standard">HTML</a></cite>] and [<cite><a class="bibref" data-link-type="biblio" href="#bib-svg2" title="Scalable Vector Graphics (SVG) 2">SVG2</a></cite>]. This specification complements both [<cite><a class="bibref" data-link-type="biblio" href="#bib-html" title="HTML Standard">HTML</a></cite>] and [<cite><a class="bibref" data-link-type="biblio" href="#bib-svg2" title="Scalable Vector Graphics (SVG) 2">SVG2</a></cite>].</p> <p>This document is part of the <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> suite described in the <a href="https://www.w3.org/WAI/standards-guidelines/aria/"><abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> Overview</a>.</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>The Accessible Rich Internet Applications Working Group seeks feedback on any aspect of the specification. When submitting feedback, please consider issues in the context of the companion documents. To comment, <a href="https://github.com/w3c/aria/issues/new">file an issue in the <abbr title="World Wide Web Consortium">W3C</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> GitHub repository</a>. If this is not feasible, send email to <a href="mailto:public-aria@w3.org?subject=Comment%20on%20WAI-ARIA%201.2">public-aria@w3.org</a> (<a href="http://lists.w3.org/Archives/Public/public-aria/">comment archive</a>). In-progress updates to the document can be viewed in the <a href="https://w3c.github.io/aria/">publicly visible editors' draft</a>.</p> <p> This document was published by the <a href="https://www.w3.org/groups/wg/aria">Accessible Rich Internet Applications Working Group</a> as an Editor's Draft. </p><p>Publication as an Editor's Draft does not imply endorsement by <abbr title="World Wide Web Consortium">W3C</abbr> and its Members. </p><p> This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress. </p><p> This document was produced by a group operating under the <a href="https://www.w3.org/policies/patent-policy/"><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/aria/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/policies/patent-policy/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/policies/patent-policy/#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/policies/process/20231103/">03 November 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="#introduction"><bdi class="secno">1. </bdi>Introduction</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#intro_ria_accessibility"><bdi class="secno">1.1 </bdi>Rich Internet Application Accessibility</a></li><li class="tocline"><a class="tocxref" href="#target-audience"><bdi class="secno">1.2 </bdi>Target Audience</a></li><li class="tocline"><a class="tocxref" href="#ua-support"><bdi class="secno">1.3 </bdi>User Agent Support</a></li><li class="tocline"><a class="tocxref" href="#co-evolution"><bdi class="secno">1.4 </bdi>Co-Evolution of <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> and Host Languages</a></li><li class="tocline"><a class="tocxref" href="#authoring_practices"><bdi class="secno">1.5 </bdi>Authoring Practices</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#authoring_tools"><bdi class="secno">1.5.1 </bdi>Authoring Tools</a></li><li class="tocline"><a class="tocxref" href="#authoring_testing"><bdi class="secno">1.5.2 </bdi>Testing Practices and Tools</a></li></ol></li><li class="tocline"><a class="tocxref" href="#at_support"><bdi class="secno">1.6 </bdi>Assistive Technologies</a></li></ol></li><li class="tocline"><a class="tocxref" href="#terms"><bdi class="secno">2. </bdi>Important Terms</a></li><li class="tocline"><a class="tocxref" href="#conformance"><bdi class="secno">3. </bdi>Conformance</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#ua_noninterference"><bdi class="secno">3.1 </bdi>Non-interference with the Host Language</a></li><li class="tocline"><a class="tocxref" href="#ua_dom"><bdi class="secno">3.2 </bdi>All <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> in <abbr title="Document Object Model">DOM</abbr></a></li><li class="tocline"><a class="tocxref" href="#ua_domchanges"><bdi class="secno">3.3 </bdi>Assistive Technology Notifications Communicated to Web Applications</a></li><li class="tocline"><a class="tocxref" href="#conformance_checkers"><bdi class="secno">3.4 </bdi>Conformance Checkers</a></li><li class="tocline"><a class="tocxref" href="#deprecated"><bdi class="secno">3.5 </bdi>Deprecated Requirements</a></li></ol></li><li class="tocline"><a class="tocxref" href="#usage"><bdi class="secno">4. </bdi>Using <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr></a><ol class="toc"><li class="tocline"><a class="tocxref" href="#introroles"><bdi class="secno">4.1 </bdi><abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> Roles</a></li><li class="tocline"><a class="tocxref" href="#introstates"><bdi class="secno">4.2 </bdi><abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> States and Properties</a></li><li class="tocline"><a class="tocxref" href="#managingfocus"><bdi class="secno">4.3 </bdi>Managing Focus and Supporting Keyboard Navigation</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#managingfocus_authors"><bdi class="secno">4.3.1 </bdi>Information for Authors</a></li><li class="tocline"><a class="tocxref" href="#managingfocus_useragents"><bdi class="secno">4.3.2 </bdi>Information for User Agents</a></li></ol></li></ol></li><li class="tocline"><a class="tocxref" href="#roles"><bdi class="secno">5. </bdi>The Roles Model</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#relationshipsconcepts"><bdi class="secno">5.1 </bdi>Relationships Between Concepts</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#superclassrole"><bdi class="secno">5.1.1 </bdi>Superclass Role</a></li><li class="tocline"><a class="tocxref" href="#subclassroles"><bdi class="secno">5.1.2 </bdi>Subclass Roles</a></li><li class="tocline"><a class="tocxref" href="#relatedConcept"><bdi class="secno">5.1.3 </bdi>Related Concepts</a></li><li class="tocline"><a class="tocxref" href="#baseConcept"><bdi class="secno">5.1.4 </bdi>Base Concept</a></li></ol></li><li class="tocline"><a class="tocxref" href="#Properties"><bdi class="secno">5.2 </bdi>Characteristics of Roles</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#isAbstract"><bdi class="secno">5.2.1 </bdi>Abstract Roles</a></li><li class="tocline"><a class="tocxref" href="#requiredState"><bdi class="secno">5.2.2 </bdi>Required States and Properties</a></li><li class="tocline"><a class="tocxref" href="#supportedState"><bdi class="secno">5.2.3 </bdi>Supported States and Properties</a></li><li class="tocline"><a class="tocxref" href="#inheritedattributes"><bdi class="secno">5.2.4 </bdi>Inherited States and Properties</a></li><li class="tocline"><a class="tocxref" href="#prohibitedattributes"><bdi class="secno">5.2.5 </bdi><span>Prohibited</span> States and Properties</a></li><li class="tocline"><a class="tocxref" href="#mustContain"><bdi class="secno">5.2.6 </bdi>Allowed Accessibility Child Roles</a></li><li class="tocline"><a class="tocxref" href="#scope"><bdi class="secno">5.2.7 </bdi>Required Accessibility Parent Role</a></li><li class="tocline"><a class="tocxref" href="#namecalculation"><bdi class="secno">5.2.8 </bdi>Accessible Name Calculation</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#namecomputation"><bdi class="secno">5.2.8.1 </bdi>Name Computation</a></li><li class="tocline"><a class="tocxref" href="#descriptioncomputation"><bdi class="secno">5.2.8.2 </bdi>Description Computation</a></li><li class="tocline"><a class="tocxref" href="#textalternativecomputation"><bdi class="secno">5.2.8.3 </bdi>Accessible Name and Description Computation</a></li><li class="tocline"><a class="tocxref" href="#namefromauthor"><bdi class="secno">5.2.8.4 </bdi>Roles Supporting Name from Author</a></li><li class="tocline"><a class="tocxref" href="#namefromcontent"><bdi class="secno">5.2.8.5 </bdi>Roles Supporting Name from Content</a></li><li class="tocline"><a class="tocxref" href="#namefromprohibited"><bdi class="secno">5.2.8.6 </bdi>Roles which cannot be named (Name prohibited)</a></li></ol></li><li class="tocline"><a class="tocxref" href="#childrenArePresentational"><bdi class="secno">5.2.9 </bdi>Presentational Children</a></li><li class="tocline"><a class="tocxref" href="#implictValueForRole"><bdi class="secno">5.2.10 </bdi>Implicit Value for Role</a></li></ol></li><li class="tocline"><a class="tocxref" href="#roles_categorization"><bdi class="secno">5.3 </bdi>Categorization of Roles</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#abstract_roles"><bdi class="secno">5.3.1 </bdi>Abstract Roles</a></li><li class="tocline"><a class="tocxref" href="#widget_roles"><bdi class="secno">5.3.2 </bdi>Widget Roles</a></li><li class="tocline"><a class="tocxref" href="#document_structure_roles"><bdi class="secno">5.3.3 </bdi>Document Structure Roles</a></li><li class="tocline"><a class="tocxref" href="#landmark_roles"><bdi class="secno">5.3.4 </bdi>Landmark Roles</a></li><li class="tocline"><a class="tocxref" href="#live_region_roles"><bdi class="secno">5.3.5 </bdi>Live Region Roles</a></li><li class="tocline"><a class="tocxref" href="#window_roles"><bdi class="secno">5.3.6 </bdi>Window Roles</a></li></ol></li><li class="tocline"><a class="tocxref" href="#role_definitions"><bdi class="secno">5.4 </bdi>Definition of Roles</a></li></ol></li><li class="tocline"><a class="tocxref" href="#states_and_properties"><bdi class="secno">6. </bdi>Supported States and Properties</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#statevsprop"><bdi class="secno">6.1 </bdi>Clarification of States versus Properties</a></li><li class="tocline"><a class="tocxref" href="#state_prop_att"><bdi class="secno">6.2 </bdi>Characteristics of States and Properties</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#propcharacteristic_relatedconcept"><bdi class="secno">6.2.1 </bdi>Related Concepts</a></li><li class="tocline"><a class="tocxref" href="#propcharacteristic_usedinrole"><bdi class="secno">6.2.2 </bdi>Used in Roles</a></li><li class="tocline"><a class="tocxref" href="#propcharacteristic_inheritsintoroles"><bdi class="secno">6.2.3 </bdi>Inherits into Roles</a></li><li class="tocline"><a class="tocxref" href="#propcharacteristic_value"><bdi class="secno">6.2.4 </bdi>Value</a></li></ol></li><li class="tocline"><a class="tocxref" href="#aria-attributes"><bdi class="secno">6.3 </bdi><abbr title="Accessible Rich Internet Applications">ARIA</abbr> Attributes</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#enumerated-attribute-values"><bdi class="secno">6.3.1 </bdi>Multi-value Attribute Values</a></li><li class="tocline"><a class="tocxref" href="#idl-reflection-attribute-values"><bdi class="secno">6.3.2 </bdi>IDL reflection of <abbr title="Accessible Rich Internet Applications">ARIA</abbr> attributes</a></li><li class="tocline"><a class="tocxref" href="#os-aapi-attribute-mapping"><bdi class="secno">6.3.3 </bdi>Operating System Accessibility <abbr title="application programming interface">API</abbr> mapping of multi-value <abbr title="Accessible Rich Internet Applications">ARIA</abbr> attributes</a></li><li class="tocline"><a class="tocxref" href="#enumerated-attribute-values-html"><bdi class="secno">6.3.4 </bdi><abbr title="Accessible Rich Internet Applications">ARIA</abbr> nullable DOMString Attributes</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#enumeration-example"><bdi class="secno">6.3.4.1 </bdi>Example Attribute Usage</a></li></ol></li></ol></li><li class="tocline"><a class="tocxref" href="#translatable-attributes"><bdi class="secno">6.4 </bdi>Translatable Attributes</a></li><li class="tocline"><a class="tocxref" href="#global_states"><bdi class="secno">6.5 </bdi><span>Global</span> States and Properties</a></li><li class="tocline"><a class="tocxref" href="#state_prop_taxonomy"><bdi class="secno">6.6 </bdi>Taxonomy of <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> States and Properties</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#attrs_widgets"><bdi class="secno">6.6.1 </bdi>Widget Attributes</a></li><li class="tocline"><a class="tocxref" href="#attrs_liveregions"><bdi class="secno">6.6.2 </bdi>Live Region Attributes</a></li><li class="tocline"><a class="tocxref" href="#attrs_dragdrop"><bdi class="secno">6.6.3 </bdi>Drag-and-Drop Attributes</a></li><li class="tocline"><a class="tocxref" href="#attrs_relationships"><bdi class="secno">6.6.4 </bdi>Relationship Attributes</a></li></ol></li><li class="tocline"><a class="tocxref" href="#state_changes"><bdi class="secno">6.7 </bdi>State change notification</a></li><li class="tocline"><a class="tocxref" href="#state_prop_def"><bdi class="secno">6.8 </bdi>Definitions of States and Properties (all aria-* attributes)</a></li></ol></li><li class="tocline"><a class="tocxref" href="#accessibility_tree"><bdi class="secno">7. </bdi><span class="export" data-export="">Accessibility Tree</span></a><ol class="toc"><li class="tocline"><a class="tocxref" href="#tree_exclusion"><bdi class="secno">7.1 </bdi>Excluding Elements from the Accessibility Tree</a></li><li class="tocline"><a class="tocxref" href="#tree_inclusion"><bdi class="secno">7.2 </bdi>Including Elements in the Accessibility Tree</a></li><li class="tocline"><a class="tocxref" href="#tree_relationships"><bdi class="secno">7.3 </bdi>Relationships in the Accessibility Tree</a></li></ol></li><li class="tocline"><a class="tocxref" href="#host_languages"><bdi class="secno">8. </bdi>Implementation in Host Languages</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#host_general_role"><bdi class="secno">8.1 </bdi>Role Attribute</a></li><li class="tocline"><a class="tocxref" href="#host_general_attrs"><bdi class="secno">8.2 </bdi>State and Property Attributes</a></li><li class="tocline"><a class="tocxref" href="#host_general_focus"><bdi class="secno">8.3 </bdi>Focus Navigation</a></li><li class="tocline"><a class="tocxref" href="#implicit_semantics"><bdi class="secno">8.4 </bdi>Implicit <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> Semantics</a></li><li class="tocline"><a class="tocxref" href="#host_general_conflict"><bdi class="secno">8.5 </bdi>Conflicts with Host Language Semantics</a></li><li class="tocline"><a class="tocxref" href="#state_property_processing"><bdi class="secno">8.6 </bdi>State and Property Attribute Processing</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#mapping_additional_relations_error_processing"><bdi class="secno">8.6.1 </bdi>ID Reference Error Processing</a></li></ol></li><li class="tocline"><a class="tocxref" href="#document-handling_css-selectors"><bdi class="secno">8.7 </bdi><abbr title="Cascading Style Sheets">CSS</abbr> Selectors</a></li></ol></li><li class="tocline"><a class="tocxref" href="#document-handling_author-errors"><bdi class="secno">9. </bdi>Handling Author Errors</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#document-handling_author-errors_roles"><bdi class="secno">9.1 </bdi>Roles</a></li><li class="tocline"><a class="tocxref" href="#document-handling_author-errors_states-properties"><bdi class="secno">9.2 </bdi>States and Properties</a></li><li class="tocline"><a class="tocxref" href="#conflict_resolution_presentation_none"><bdi class="secno">9.3 </bdi>Presentational Roles Conflict Resolution</a></li></ol></li><li class="tocline"><a class="tocxref" href="#idl-interface"><bdi class="secno">10. </bdi>IDL Interface</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#ARIAMixin"><bdi class="secno">10.1 </bdi>Interface Mixin <span data-export="" data-dfn-type="interface" data-idl="interface mixin" data-title="ARIAMixin" data-dfn-for=""><code>ARIAMixin</code></span></a></li><li class="tocline"><a class="tocxref" href="#accessibilityroleandproperties-correspondence"><bdi class="secno">10.2 </bdi><abbr title="Accessible Rich Internet Applications">ARIA</abbr> Attribute Correspondence</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#idl_attr_disambiguation"><bdi class="secno">10.2.1 </bdi>Disambiguation Pattern</a></li><li class="tocline"><a class="tocxref" href="#idl_attr_exceptions"><bdi class="secno">10.2.2 </bdi>IDL Attribute Name Notes or Exceptions</a></li></ol></li><li class="tocline"><a class="tocxref" href="#idl_example_usage"><bdi class="secno">10.3 </bdi>Example IDL Attribute Usage</a></li></ol></li><li class="tocline"><a class="tocxref" href="#security-considerations"><bdi class="secno">11. </bdi>Security Considerations</a></li><li class="tocline"><a class="tocxref" href="#privacy-considerations"><bdi class="secno">12. </bdi>Privacy Considerations</a></li><li class="tocline"><a class="tocxref" href="#typemapping"><bdi class="secno">A. </bdi>Mapping <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> Value types to languages</a></li><li class="tocline"><a class="tocxref" href="#changelog"><bdi class="secno">B. </bdi>Change Log</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#major-feature-in-this-release"><bdi class="secno">B.1 </bdi>Major feature in this release</a></li><li class="tocline"><a class="tocxref" href="#substantive-changes-since-aria-1-2"><bdi class="secno">B.2 </bdi>Substantive changes since <abbr title="Accessible Rich Internet Applications">ARIA</abbr> 1.2</a></li></ol></li><li class="tocline"><a class="tocxref" href="#acknowledgements"><bdi class="secno">C. </bdi>Acknowledgments</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#ack_group"><bdi class="secno">C.1 </bdi><abbr title="Accessible Rich Internet Applications">ARIA</abbr> WG participants at the time of publication</a></li><li class="tocline"><a class="tocxref" href="#ack_funders"><bdi class="secno">C.2 </bdi>Enabling funders</a></li></ol></li><li class="tocline"><a class="tocxref" href="#references"><bdi class="secno">D. </bdi>References</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#normative-references"><bdi class="secno">D.1 </bdi>Normative references</a></li><li class="tocline"><a class="tocxref" href="#informative-references"><bdi class="secno">D.2 </bdi>Informative references</a></li></ol></li></ol></nav> <section class="informative" id="introduction"><div class="header-wrapper"><h2 id="x1-introduction"><bdi class="secno">1. </bdi>Introduction</h2><a class="self-link" href="#introduction" aria-label="Permalink for Section 1."></a></div><p><em>This section is non-normative.</em></p> <p>The goals of this specification include:</p> <ul> <li>expanding the accessibility information that can be supplied by the author;</li> <li>requiring that supporting host languages provide full keyboard support that can be implemented in a device-independent way, for example, by telephones, handheld devices, e-book readers, and televisions;</li> <li>improving the accessibility of dynamic content generated by scripts; and</li> <li>providing for interoperability with <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-1">assistive technologies</a>.</li> </ul> <p><abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> is a technical specification that provides a framework to improve the accessibility and interoperability of web content and applications. This document is primarily for developers creating custom widgets and other web application components. Please see the <a href="http://www.w3.org/WAI/intro/aria"><abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> Overview</a> for links to related documents for other audiences, such as <cite><a href="https://www.w3.org/WAI/ARIA/apg/" class="practices"><abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices Guide</a></cite> [<cite><a class="bibref" data-link-type="biblio" href="#bib-wai-aria-practices-1.2" title="WAI-ARIA Authoring Practices 1.2">WAI-ARIA-PRACTICES-1.2</a></cite>] that introduces developers to the accessibility problems that <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> is intended to solve, the fundamental concepts, and the technical approach of <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr>.</p> <p>This document currently handles two aspects of <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-1">roles</a>: user interface functionality and structural <a href="#dfn-relationship" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-relationship-1">relationships</a>. For more information and use cases, see <cite><a href="https://www.w3.org/WAI/ARIA/apg/" class="practices"><abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices Guide</a></cite> [<cite><a class="bibref" data-link-type="biblio" href="#bib-wai-aria-practices-1.2" title="WAI-ARIA Authoring Practices 1.2">WAI-ARIA-PRACTICES-1.2</a></cite>] for the use of roles in making interactive content accessible.</p> <p>Roles defined by this specification are designed to support the roles used by platform <a href="#dfn-accessibility-api" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-api-1">accessibility <abbr title="Application Programing Interfaces">APIs</abbr></a>. Declaration of these roles on elements within dynamic web content is intended to support interoperability between the web content and assistive technologies that utilize <a href="#dfn-accessibility-api" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-api-2">accessibility <abbr title="Application Programing Interfaces">APIs</abbr></a>.</p> <p>The schema to support this standard has been designed to be extensible so that custom roles can be created by extending base roles. This allows <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agents</a> to support at least the base role, and user agents that support the custom role can provide enhanced access. Note that much of this could be formalized in [<cite><a class="bibref" data-link-type="biblio" href="#bib-xmlschema11-2" title="W3C XML Schema Definition Language (XSD) 1.1 Part 2: Datatypes">XMLSCHEMA11-2</a></cite>]. However, being able to define similarities between roles, such as <a href="#baseConcept">baseConcepts</a> and more descriptive definitions, would not be available in <abbr title="Extensible Markup Language Schema Datatypes">XSD</abbr>.</p> <p><abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> 1.2 is a member of the <a href="https://www.w3.org/WAI/intro/aria"><abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> 1.2 suite</a> that defines how to expose semantics of <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> and other web content languages to <a href="#dfn-accessibility-api" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-api-3">accessibility <abbr title="Application Programing Interfaces">APIs</abbr></a>. </p> <section class="section" id="intro_ria_accessibility"><div class="header-wrapper"><h3 id="x1-1-rich-internet-application-accessibility"><bdi class="secno">1.1 </bdi>Rich Internet Application Accessibility</h3><a class="self-link" href="#intro_ria_accessibility" aria-label="Permalink for Section 1.1"></a></div> <p>The domain of web accessibility defines how to make web content usable by persons with disabilities. Persons with certain types of disabilities use <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-2">assistive technologies</a> (<abbr title="Assistive Technologies">AT</abbr>) to interact with content. Assistive technologies can transform the presentation of content into a format more suitable to the user, and can allow the user to interact in different ways. For example, the user might need to, or choose to, interact with a slider widget via arrow keys, instead of dragging and dropping with a mouse. In order to accomplish this effectively, the software needs to understand the <a href="#dfn-semantics" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-semantics-1">semantics</a> of the content. Semantics is the science of meaning; in this case, used to assign roles, states, and properties that apply to user interface and content elements as a human would understand. For instance, if a paragraph is semantically identified as such, assistive technologies can interact with it as a unit separable from the rest of the content, knowing the exact boundaries of that paragraph. An adjustable range slider or collapsible list (a.k.a. a tree <a href="#dfn-widget" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-widget-1">widget</a>) are more complex examples, in which various parts of the widget have semantics that need to be properly identified for assistive technologies to support effective interaction.</p> <p>New technologies often overlook semantics required for accessibility, and new authoring practices often misuse the intended semantics of those technologies. <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">Elements</a> that have one defined meaning in the language are used with a different meaning intended to be understood by the user.</p> <p>For example, web application developers create collapsible tree widgets in <abbr title="Hypertext Markup Language">HTML</abbr> using <abbr title="Cascading Style Sheets">CSS</abbr> and JavaScript even though <abbr title="Hypertext Markup Language">HTML</abbr> has no semantic <code>tree</code> element. To a non-disabled user, it might look and act like a collapsible tree widget, but without appropriate semantics, the tree widget might not be <a href="#dfn-perceivable" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-perceivable-1">perceivable</a> to, or <a href="#dfn-operable" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-operable-1">operable</a> by, a person with a disability because assistive technologies might not recognize the role. Similarly, web application developers create interactive button widgets in <abbr title="Scalable Vector Graphics">SVG</abbr> using JavaScript even though <abbr title="Scalable Vector Graphics">SVG</abbr> has no semantic <code>button</code> element. To a non-disabled user, it might look and act like a button widget, but without appropriate semantics, the button widget might not be <a href="#dfn-perceivable" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-perceivable-2">perceivable</a> to, or <a href="#dfn-operable" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-operable-2">operable</a> by, a person with a disability because assistive technologies might not recognize the role.</p> <p>The incorporation of <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> is a way for an author to provide proper semantics for custom widgets to make these widgets accessible, usable, and interoperable with assistive technologies. This specification identifies the types of widgets and structures that are commonly recognized by accessibility products, by providing an <a href="#dfn-ontology" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-ontology-1">ontology</a> of corresponding <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-2">roles</a> that can be attached to content. This allows elements with a given role to be understood as a particular widget or structural type regardless of any semantics inherited from the implementing host language. Roles are a common property of platform <a href="#dfn-accessibility-api" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-api-4">accessibility <abbr title="Application Programing Interfaces">APIs</abbr></a> which assistive technologies use to provide the user with effective presentation and interaction.</p> <p>The Roles Model includes interaction <a href="#dfn-widget" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-widget-2">widgets</a> and elements denoting document structure. The Roles Model describes inheritance and details the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attributes</a> each role supports. Information about mapping of roles to accessibility <abbr title="Application Programing Interfaces">APIs</abbr> is provided by the <cite><a href="https://w3c.github.io/core-aam/" class="core-mapping">Core Accessibility <abbr title="application programming interface">API</abbr> Mappings</a></cite> [<cite><a class="bibref" data-link-type="biblio" href="#bib-core-aam-1.2" title="Core Accessibility API Mappings 1.2">CORE-AAM-1.2</a></cite>].</p> <p>Roles are element types and will not change with time or user actions. Role information is used by assistive technologies, through interaction with the user agent, to provide normal processing of the specified element type.</p> <p>States and properties are used to declare important attributes of an element that affect and describe interaction. They enable the <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agent</a> and operating system to properly handle the element even when the attributes are dynamically changed by client-side scripts. For example, alternative input and output technology, such as screen readers and speech dictation software, need to be able to recognize and effectively manipulate and communicate various interaction states (e.g., disabled, checked) to the user.</p> <p>While it is possible for assistive technologies to access these properties directly through the <cite><a href="https://www.w3.org/TR/dom/">Document Object Model</a></cite> [<cite><a class="bibref" data-link-type="biblio" href="#bib-dom" title="DOM Standard">DOM</a></cite>], the preferred mechanism is for the user agent to map the states and properties to the accessibility <abbr title="Application Programing Interfaces">API</abbr> of the operating system. See the <cite><a href="https://w3c.github.io/core-aam/" class="core-mapping">Core Accessibility <abbr title="application programming interface">API</abbr> Mappings</a></cite> [<cite><a class="bibref" data-link-type="biblio" href="#bib-core-aam-1.2" title="Core Accessibility API Mappings 1.2">CORE-AAM-1.2</a></cite>] and the <cite><a href="https://w3c.github.io/accname/" class="accname">Accessible Name and Description Computation</a></cite> [<cite><a class="bibref" data-link-type="biblio" href="#bib-accname-1.2" title="Accessible Name and Description Computation 1.2">ACCNAME-1.2</a></cite>] for details.</p> <p id="desc_contractmodel">Figure 1.0 illustrates the relationship between user agents (e.g., browsers), accessibility <abbr title="Application Programing Interfaces">APIs</abbr>, and assistive technologies. It describes the "contract" provided by the user agent to assistive technologies, which includes typical accessibility information found in the accessibility <abbr title="Application Programing Interfaces">API</abbr> for many of our accessible platforms for GUIs (role, state, selection, <a href="#dfn-event" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-event-1">event</a> notification, <a href="#dfn-relationship" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-relationship-2">relationship</a> information, and descriptions). The <abbr title="Document Object Model">DOM</abbr>, usually <abbr title="Hypertext Markup Language">HTML</abbr>, acts as the data model and view in a typical model-view-controller relationship, and JavaScript acts as the controller by manipulating the style and content of the displayed data. The user agent conveys relevant information to the operating system's accessibility <abbr title="application programming interface">API</abbr>, which can be used by any assistive technologies, such as screen readers.</p> <div class="image"> <p><img alt="The contract model with accessibility APIs" height="389" id="contractmodel" src="img/accessibleelement.png" width="723"></p> <p class="img-caption">Figure 1: The contract model with accessibility <abbr title="Application Programing Interfaces">APIs</abbr></p> </div> <p>For more information see <cite><a href="https://www.w3.org/WAI/ARIA/apg/" class="practices"><abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices Guide</a></cite> for the use of roles in making interactive content accessible.</p> <p>Users of alternate input devices need <a href="#dfn-keyboard-accessible" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-keyboard-accessible-1">keyboard accessible</a> content. The new semantics, when combined with the recommended keyboard interactions provided in <cite><a href="https://www.w3.org/WAI/ARIA/apg/" class="practices"><abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices Guide</a></cite>, will allow alternate input solutions to facilitate command and control via an alternate input solution.</p> <p><abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> introduces navigational <a href="#dfn-landmark" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-landmark-1">landmarks</a> through its Roles Model and the <abbr title="Extensible Hypertext Markup Language">XHTML</abbr> role landmarks, which can help persons with dexterity and vision impairments by providing for improved keyboard navigation. <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> can also be used to assist persons with cognitive learning disabilities. The additional semantics allow authors to restructure and substitute alternative content as needed.</p> <p><a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-3">Assistive technologies</a> need the ability to support alternative inputs by getting and setting the current value of <a href="#dfn-widget" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-widget-3">widget</a> states and properties. Assistive technologies also need to determine what <a href="#dfn-object" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-object-1">objects</a> are selected and manage widgets that allow multiple selections, such as list boxes and grids.</p> <p>Speech-based command and control systems can benefit from <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> semantics like the <code>role</code> attribute to assist in conveying audio information to the user. For example, upon encountering an element with a role of <a href="https://w3c.github.io/aria/#menu" class="role-reference"><code>menu</code></a> with child elements of role <a href="https://w3c.github.io/aria/#menuitem" class="role-reference"><code>menuitem</code></a> each containing text content representing a different flavor, a speech system might state to the user, "Select one of three choices: chocolate, strawberry, or vanilla."</p> <p><abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> is intended to be used as a supplement for native language semantics, not a replacement. When the host language provides a feature that provides equivalent accessibility to the <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> feature, use the host language feature. <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> should only be used in cases where the host language lacks the needed <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-3">role</a>, <a href="#dfn-state" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-state-1">state</a>, and <a data-link-type="dfn|abstract-op" href="#dfn-property" class="internalDFN" id="ref-for-dfn-property-1">property</a> indicators. Use a host language feature that is as similar as possible to the <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> feature, then refine the meaning by adding <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr>. For instance, a multi-selectable grid could be implemented as a table, and then <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> used to clarify that it is an interactive grid, not just a static data table. This allows for the best possible fallback for user agents that do not support <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> and preserves the integrity of the host language semantics.</p> </section> <section id="target-audience"><div class="header-wrapper"><h3 id="x1-2-target-audience"><bdi class="secno">1.2 </bdi>Target Audience</h3><a class="self-link" href="#target-audience" aria-label="Permalink for Section 1.2"></a></div> <p>This specification defines the basic model for <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr>, including roles, states, properties, and values. It impacts several audiences:</p> <ul> <li><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agents</a> that process content containing <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> features;</li> <li><a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-4">Assistive technologies</a> that present content in special ways to user with disabilities;</li> <li>Authors who create content;</li> <li>Authoring tools that help authors create conforming content; and</li> <li>Conformance checkers that verify appropriate use of <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr>.</li> </ul> <p>Each conformance requirement indicates the audience to which it applies.</p> <p>Although this specification is applicable to the above audiences, it is not specifically targeted to, nor is it intended to be the sole source of information for, any of these audiences. The following documents provide important supporting information:</p> <ul> <li><cite><a data-matched-text="[[[WAI-ARIA-PRACTICES-1.2]]]" href="https://www.w3.org/TR/wai-aria-practices-1.2/">WAI-ARIA Authoring Practices 1.2</a></cite> addresses authoring recommendations for <abbr title="Hypertext Markup Language">HTML</abbr>, and is also of interest to developers of authoring tools and conformance checkers.</li> <li><cite><a data-matched-text="[[[CORE-AAM-1.2]]]" href="https://www.w3.org/TR/core-aam-1.2/">Core Accessibility API Mappings 1.2</a></cite> addresses developers of <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agents</a> and <a class="termref informative internalDFN" href="#dfn-assistive-technologies" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-5">assistive technologies</a>.</li> <li><cite><a data-matched-text="[[[ACCNAME-1.2]]]" href="https://www.w3.org/TR/accname-1.2/">Accessible Name and Description Computation 1.2</a></cite> also addresses developers of <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agents</a> and <a class="termref informative internalDFN" href="#dfn-assistive-technologies" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-6">assistive technologies</a>.</li> </ul> </section> <section id="ua-support"><div class="header-wrapper"><h3 id="x1-3-user-agent-support"><bdi class="secno">1.3 </bdi>User Agent Support</h3><a class="self-link" href="#ua-support" aria-label="Permalink for Section 1.3"></a></div> <p><abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> relies on user agent support for its features in two ways:</p> <ul> <li>Mainstream <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agents</a> use <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> to alter how host language features are exposed to <a href="#dfn-accessibility-api" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-api-5">accessibility <abbr title="Application Programing Interfaces">APIs</abbr></a> in order to improve accessibility. The mechanism for this is defined in the <cite><a href="https://w3c.github.io/core-aam/" class="core-mapping">Core Accessibility <abbr title="application programming interface">API</abbr> Mappings</a></cite>.</li> <li><a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-7">Assistive technologies</a> use the enhanced information available in an accessibility <abbr title="application programming interface">API</abbr>, or uses the <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> markup directly via the <abbr title="Document Object Model">DOM</abbr>, to convey semantic and interaction information to the user.</li> </ul> <p>Aside from using <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> markup to improve what is exposed to accessibility <abbr title="Application Programing Interfaces">APIs</abbr>, user agents behave as they would natively. Assistive technologies react to the extra information in the accessibility <abbr title="application programming interface">API</abbr> as they already do for the same information on non-web content. User agents that are not assistive technologies, however, need do nothing beyond providing appropriate updates to the accessibility <abbr title="application programming interface">API</abbr>.</p> <p>The <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> specification neither requires nor forbids user agents from enhancing native presentation and interaction behaviors on the basis of <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> markup. Mainstream user agents might expose <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> navigational landmarks (for example, as a dialog box or through a keyboard command) with the intention to facilitate navigation for all users. User agents are encouraged to maximize their usefulness to users, including users without disabilities. </p> <p><abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> is intended to provide missing semantics so that the intent of the author can be conveyed to assistive technologies. Generally, authors using <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> will provide the appropriate presentation and interaction features. Over time, host languages can add <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> equivalents, such as new form controls, that are implemented as standard accessible user interface controls by the user agent. This allows authors to use them instead of custom <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> enabled user interface components. In this case the user agent would support the native host language feature. Developers of host languages that implement <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> are advised to continue supporting <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> semantics when they do not adversely conflict with implicit host language semantics, as <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> semantics more clearly reflect the intent of the author if the host language features are inadequate to meet the author's needs.</p> </section> <section id="co-evolution"><div class="header-wrapper"><h3 id="x1-4-co-evolution-of-wai-aria-and-host-languages"><bdi class="secno">1.4 </bdi>Co-Evolution of <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> and Host Languages</h3><a class="self-link" href="#co-evolution" aria-label="Permalink for Section 1.4"></a></div> <p><abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> is intended to augment semantics in supporting languages like [<cite><a class="bibref" data-link-type="biblio" href="#bib-html" title="HTML Standard">HTML</a></cite>] and [<cite><a class="bibref" data-link-type="biblio" href="#bib-svg2" title="Scalable Vector Graphics (SVG) 2">SVG2</a></cite>], or to be used as an accessibility enhancement technology in other markup-based languages that do not explicitly include support for <abbr title="Accessible Rich Internet Applications">ARIA</abbr>. It clarifies semantics to assistive technologies when authors create new types of objects, via style and script, that are not yet directly supported by the language of the page, because the invention of new types of objects is faster than standardized support for them appears in web languages.</p> <p>It is not appropriate to create objects with style and script when the host language provides a semantic element for that type of object. While <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> can improve the accessibility of these objects, accessibility is best provided by allowing the user agent to handle the object natively. For example, it's better to use an <code>h1</code> element in <abbr title="Hypertext Markup Language">HTML</abbr> than to use the <a href="https://w3c.github.io/aria/#heading" class="role-reference"><code>heading</code></a> role on a <code>div</code> element.</p> <p>It is expected that, over time, host languages will evolve to provide semantics for objects that currently can only be declared with <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr>. This is natural and desirable, as one goal of <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> is to help stimulate the emergence of more semantic and accessible markup. When native semantics for a given feature become available, it is appropriate for authors to use the native feature and stop using <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> for that feature. Legacy content can continue to use <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr>, however, so the need for user agents to support <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> remains.</p> <p>While specific features of <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> might lose importance over time, the general possibility of <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> to add semantics to web pages is expected to be a persistent need. Host languages might not implement all the semantics <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> provides, and various host languages can implement different subsets of the features. New types of objects are continually being developed, and one goal of <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> is to provide a way to make such objects accessible, because authoring practices often advance faster than host language standards. In this way, <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> and host languages both evolve together but at different rates.</p> <p>Some host languages exist to create semantics for features other than the user interface. For example, <abbr title="Scalable Vector Graphics">SVG</abbr> expresses the semantics behind production of graphical objects, not of user interface components that those objects can represent. Host languages might, by design, not provide native semantics that map to <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> features. In these cases, <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> could be adopted as a long-term approach to add semantic information to user interface components.</p> </section> <section id="authoring_practices"><div class="header-wrapper"><h3 id="x1-5-authoring-practices"><bdi class="secno">1.5 </bdi>Authoring Practices</h3><a class="self-link" href="#authoring_practices" aria-label="Permalink for Section 1.5"></a></div> <section id="authoring_tools"><div class="header-wrapper"><h4 id="x1-5-1-authoring-tools"><bdi class="secno">1.5.1 </bdi>Authoring Tools</h4><a class="self-link" href="#authoring_tools" aria-label="Permalink for Section 1.5.1"></a></div> <p>Many of the requirements in the definitions of <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-4">roles</a>, <a href="#dfn-state" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-state-2">states</a>, and <a data-link-type="dfn|abstract-op" href="#dfn-property" class="internalDFN" id="ref-for-dfn-property-2">properties</a> can be checked automatically during the development process, similar to other quality control processes used for validating code. To assist authors who are creating custom widgets, authoring tools can compare widget roles, states, and properties to those supported in <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> as well as those supported in related and cross-referenced roles, states, and properties. Authoring tools can notify authors of errors in widget design patterns, and can also prompt developers for information that cannot be determined from context alone. For example, a scripting library can determine the labels for the tree items in a tree view, but would need to prompt the author to label the entire tree. To help authors visualize a logical accessibility structure, an authoring environment might provide an outline view of a web resource based on the <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> markup.</p> <p>In both <abbr title="Hypertext Markup Language">HTML</abbr> and <abbr title="Scalable Vector Graphics">SVG</abbr>, <code>tabindex</code> is an important way browsers support keyboard <a href="#host_general_focus">focus navigation</a> for implementations of <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr>; authoring and debugging tools can check to make sure <code>tabindex</code> values are properly set. For example, error conditions can include cases where more than one treeitem in a tree has a <code>tabindex</code> value greater than or equal to 0, where <code>tabindex</code> is not set on any treeitem, or where <a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a> is not defined when the element with the role tree has a <code>tabindex</code> value of greater than or equal to 0.</p> </section> <section id="authoring_testing"><div class="header-wrapper"><h4 id="x1-5-2-testing-practices-and-tools"><bdi class="secno">1.5.2 </bdi>Testing Practices and Tools</h4><a class="self-link" href="#authoring_testing" aria-label="Permalink for Section 1.5.2"></a></div> <p>The accessibility of interactive content cannot be confirmed by static checks alone. Developers of interactive content should test for device-independent access to <a href="#dfn-widget" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-widget-4">widgets</a> and applications, and should verify accessibility <abbr title="application programing interface">API</abbr> access to all content and changes during user interaction.</p> </section> </section> <section id="at_support"><div class="header-wrapper"><h3 id="x1-6-assistive-technologies"><bdi class="secno">1.6 </bdi>Assistive Technologies</h3><a class="self-link" href="#at_support" aria-label="Permalink for Section 1.6"></a></div> <p>Programmatic access to accessibility semantics is essential for assistive technologies. Most assistive technologies interact with user agents, like other applications, through a recognized accessibility <abbr title="application programming interface">API</abbr>. Perceivable objects in the user interface are exposed to assistive technologies as accessible objects, defined by the accessibility <abbr title="application programming interface">API</abbr> interfaces. To do this properly, accessibility information – role, states, properties as well as contextual information – needs to be accurately conveyed to the assistive technologies through the accessibility <abbr title="application programming interface">API</abbr>. When a state change occurs, the user agent provides the appropriate event notification to the accessibility <abbr title="application programming interface">API</abbr>. Contextual information, in many host languages like <abbr title="Hypertext Markup Language">HTML</abbr>, can be determined from the <abbr title="Document Object Model">DOM</abbr> itself as it provides a contextual tree hierarchy.</p> <p>While some assistive technologies interact with these accessibility <abbr title="Application Programing Interfaces">APIs</abbr>, others might access the content directly from the <abbr title="Document Object Model">DOM</abbr>. These technologies can restructure, simplify, style, or reflow the content to help a different set of users. Common use cases for these types of adaptations might be the aging population, persons with cognitive impairments, or persons in environments that interfere with use of their tools. For example, the availability of regional navigational landmarks can allow for a mobile device adaptation that shows only portions of the content at any one time based on its semantics. This could reduce the amount of information the user needs to process at any one time. In other situations it might be appropriate to replace a custom user interface control with something that is easier to navigate with a keyboard, or touch screen device.</p> </section> </section> <section class="informative" id="terms"><div class="header-wrapper"><h2 id="x2-important-terms"><bdi class="secno">2. </bdi>Important Terms</h2><a class="self-link" href="#terms" aria-label="Permalink for Section 2."></a></div><p><em>This section is non-normative.</em></p> <div> <p>While some terms are defined in place, the following definitions are used throughout this document. </p> <dl class="termlist"> <dt><dfn data-export="" data-plurals="accessibility apis" id="dfn-accessibility-api" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">Accessibility <abbr title="Application Programming Interface">API</abbr></dfn></dt> <dd> <p>Operating systems and other platforms provide a set of interfaces that expose information about <a class="termref informative internalDFN" href="#dfn-object" data-link-type="dfn" id="ref-for-dfn-object-2">objects</a> and <a class="termref informative internalDFN" href="#dfn-event" data-link-type="dfn" id="ref-for-dfn-event-2">events</a> to <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-8">assistive technologies</a>. Assistive technologies use these interfaces to get information about and interact with those <a class="termref informative internalDFN" href="#dfn-widget" data-link-type="dfn" id="ref-for-dfn-widget-5">widgets</a>. Examples of accessibility <abbr title="Application Programing Interfaces">APIs</abbr> are <a href="https://docs.microsoft.com/en-us/windows/win32/winauto/microsoft-active-accessibility">Microsoft Active Accessibility</a> [<cite><a class="bibref" data-link-type="biblio" href="#bib-msaa" title="Microsoft Active Accessibility (MSAA)">MSAA</a></cite>], <a href="https://learn.microsoft.com/en-us/windows/win32/winauto/entry-uiauto-win32">Microsoft User Interface Automation</a> [<cite><a class="bibref" data-link-type="biblio" href="#bib-ui-automation" title="UI Automation">UI-AUTOMATION</a></cite>], <abbr title="Microsoft Active Accessibility">MSAA</abbr> with <cite><a href="https://learn.microsoft.com/en-us/windows/win32/winauto/iaccessibleex"><abbr title="User Interface Automation">UIA</abbr> Express</a></cite> [<cite><a class="bibref" data-link-type="biblio" href="#bib-uia-express" title="The IAccessibleEx Interface">UIA-EXPRESS</a></cite>], the <a href="https://developer.apple.com/documentation/appkit/nsaccessibility">Mac <abbr title="OS Ten">OS X</abbr> Accessibility Protocol</a> [<cite><a class="bibref" data-link-type="biblio" href="#bib-axapi" title="The NSAccessibility Protocol for macOS">AXAPI</a></cite>], the <cite><a href="https://gnome.pages.gitlab.gnome.org/atk/">Linux/Unix Accessibility Toolkit</a></cite> [<cite><a class="bibref" data-link-type="biblio" href="#bib-atk" title="ATK - Accessibility Toolkit">ATK</a></cite>] and <cite><a href="https://gnome.pages.gitlab.gnome.org/at-spi2-core/libatspi/">Assistive Technology Service Provider Interface</a></cite> [<cite><a class="bibref" data-link-type="biblio" href="#bib-at-spi" title="Assistive Technology Service Provider Interface">AT-SPI</a></cite>], and <a href="https://wiki.linuxfoundation.org/accessibility/iaccessible2/start">IAccessible2</a> [<cite><a class="bibref" data-link-type="biblio" href="#bib-iaccessible2" title="IAccessible2">IAccessible2</a></cite>].</p> </dd> <dt><dfn data-export="" data-plurals="accessible objects" id="dfn-accessible-object" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">Accessible object</dfn></dt> <dd> <p>A <a data-link-type="dfn" data-lt="nodes" href="https://dom.spec.whatwg.org/#concept-node">node</a> in the <a class="termref informative internalDFN" href="#dfn-accessibility-tree" data-link-type="dfn" id="ref-for-dfn-accessibility-tree-1">accessibility tree</a> of a platform <a href="#dfn-accessibility-api" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-api-6">accessibility <abbr title="application programming interface">API</abbr></a>. Accessible objects expose various <a class="termref informative internalDFN" href="#dfn-state" data-link-type="dfn" id="ref-for-dfn-state-3">states</a>, <a data-link-type="dfn|abstract-op" href="#dfn-property" class="internalDFN" id="ref-for-dfn-property-3">properties</a>, and <a class="termref informative internalDFN" href="#dfn-event" data-link-type="dfn" id="ref-for-dfn-event-3">events</a> for use by <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-9">assistive technologies</a>. In the context of markup languages (e.g., <abbr title="Hypertext Markup Language">HTML</abbr> and <abbr title="Scalable Vector Graphics">SVG</abbr>) in general, and of <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> in particular, markup <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a> and their <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attributes</a> are represented as accessible objects. </p> </dd> <dt><dfn data-export="" data-plurals="assistive technology" id="dfn-assistive-technologies" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">Assistive Technologies</dfn></dt> <dd><p>Hardware and/or software that:</p> <ul> <li>relies on services provided by a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agent</a> to retrieve and render Web content </li> <li>works with a user agent or web content itself through the use of <abbr title="Application Programing Interfaces">APIs</abbr>, and</li> <li>provides services beyond those offered by the user agent to facilitate user interaction with web content by people with disabilities</li> </ul> <p>This definition might differ from that used in other documents.</p> <p>Examples of assistive technologies that are important in the context of this document include the following:</p> <ul> <li>screen magnifiers, which are used to enlarge and improve the visual readability of rendered text and images;</li> <li>screen readers, which are most-often used to convey information through synthesized speech or a refreshable Braille display;</li> <li>text-to-speech software, which is used to convert text into synthetic speech;</li> <li>speech recognition software, which is used to allow spoken control and dictation;</li> <li>alternate input technologies (including head pointers, on-screen keyboards, single switches, and sip/puff devices), which are used to simulate the keyboard;</li> <li>alternate pointing devices, which are used to simulate mouse pointing and clicking.</li> </ul> </dd> <dt><dfn data-local-lt="deprecate|deprecation" data-lt="Deprecated|deprecate|deprecation" id="dfn-deprecated" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">Deprecated</dfn></dt> <dd> <p>A deprecated <a class="termref informative" href="#dfn-role" id="ref-for-dfn-role-5">role</a>, <a class="termref informative" href="#dfn-state" id="ref-for-dfn-state-4">state</a>, or <a class="termref informative" href="#dfn-property" id="ref-for-dfn-property-4">property</a> is one which has been outdated by newer constructs or changed circumstances, and which might be removed in future versions of the <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> specification. <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agents</a> are encouraged to continue to support items identified as deprecated for backward compatibility. For more information, see <a href="https://w3c.github.io/aria/#deprecated" class="specref">Deprecated Requirements</a> in the Conformance section.</p> </dd> <dt><dfn id="dfn-defines" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">Defines</dfn></dt> <dd> <p>Used in an attribute description to denote that the value <a href="#propcharacteristic_value">type</a> is an <a href="#valuetype_integer">integer</a>, <a href="#valuetype_number">number</a>, or <a href="#valuetype_string">string</a>.</p> <p>Related Terms: <a href="#dfn-identifies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-identifies-1">Identifies</a>, <a href="#dfn-indicates" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-indicates-1">Indicates</a></p> </dd> <dt><dfn data-local-lt="desktop focus" data-lt="Desktop focus event|desktop focus" data-plurals="desktop focus events" id="dfn-desktop-focus-event" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">Desktop focus event</dfn></dt> <dd> <p>Event from/to the host operating system via the accessibility <abbr title="application programming interface">API</abbr>, notifying of a change of input focus.</p> </dd> <dt><dfn data-plurals="events" id="dfn-event" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">Event</dfn></dt> <dd> <p>A programmatic message used to communicate discrete changes in the <a href="#dfn-state" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-state-5">state</a> of an <a href="#dfn-object" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-object-3">object</a> to other objects in a computational system. User input to a web page is commonly mediated through abstract events that describe the interaction and can provide notice of changes to the state of a document object. In some programming languages, events are more commonly known as notifications.</p> </dd> <dt><dfn id="dfn-expose" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn" class="respec-offending-element" title="Found definition for "Expose", but nothing links to it. This is usually a spec bug!">Expose</dfn></dt> <dd> <p>Translated to platform-specific <a class="termref informative internalDFN" href="#dfn-accessibility-api" data-link-type="dfn" id="ref-for-dfn-accessibility-api-7">accessibility <abbr title="Application Programing Interfaces">APIs</abbr></a> as defined in the <a href="https://w3c.github.io/core-aam/" class="core-mapping">Core Accessibility <abbr title="application programming interface">API</abbr> Mappings</a>.</p> </dd> <dt><dfn id="dfn-graphical-document" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">Graphical Document</dfn></dt> <dd> <p>A document containing graphic representations with user-navigable parts. Charts, maps, diagrams, blueprints, and dashboards are examples of graphical documents. A graphical document is composed using any combination of symbols, images, text, and graphic primitives (shapes such as circles, points, lines, paths, rectangles, etc).</p> </dd> <dt><dfn data-dfn-for="element" data-export="" id="dfn-hidden" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">Hidden</dfn></dt> <dd> <p>Indicates that the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> is excluded from the accessibility tree and therefore not exposed to accessibility <abbr title="Application Programing Interfaces">APIs</abbr>.</p> <p>Related: <a href="#tree_exclusion">Excluding Elements in the Accessibility Tree</a>, <a data-link-type="dfn|abstract-op" href="#dfn-hide-from-all-users" class="internalDFN" id="ref-for-dfn-hide-from-all-users-1">hidden from all users</a>, <a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a>.</p> </dd><dt><dfn data-dfn-for="element" data-lt="hide from all users|Hidden From All Users" data-export="" id="dfn-hide-from-all-users" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">Hidden From All Users</dfn></dt> <dd> <p>Indicates that the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> is not visible, <a href="#dfn-perceivable" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-perceivable-3">perceivable</a>, or interactive for <em>any</em> user. Note that an <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> can be <a data-link-type="dfn|abstract-op" href="#dfn-hidden" class="internalDFN" id="ref-for-dfn-hidden-1">hidden</a> but not <a data-link-type="dfn|abstract-op" href="#dfn-hide-from-all-users" class="internalDFN" id="ref-for-dfn-hide-from-all-users-2">hidden from all users</a> by using <code>aria-hidden</code>.</p> <p>Related: <a href="#tree_exclusion">Excluding Elements in the Accessibility Tree</a>, <a data-link-type="dfn|abstract-op" href="#dfn-hidden" class="internalDFN" id="ref-for-dfn-hidden-2">hidden</a>, <a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a>.</p><p> </p></dd> <dt><dfn id="dfn-identifies" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">Identifies</dfn></dt> <dd> <p>Used in an attribute description to denote that the value <a href="#propcharacteristic_value">type</a> is an <a href="#valuetype_idref">ID reference</a> (identifying a single element) or <a href="#valuetype_idref_list">ID reference list</a> (identifying one or more elements).</p> <p>Related Terms: <a href="#dfn-defines" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-defines-1">Defines</a>, <a href="#dfn-indicates" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-indicates-2">Indicates</a></p> </dd> <dt><dfn id="dfn-indicates" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">Indicates</dfn></dt> <dd> <p>Used in an attribute description to denote that the value <a href="#propcharacteristic_value">type</a> is a named token or otherwise token-like, including the Boolean-like <a href="#valuetype_true-false">true/false</a>, <a href="#valuetype_true-false-undefined">true/false/undefined</a>, <a href="#valuetype_tristate">tristate (true/false/mixed)</a>, a single named <a href="#valuetype_token">token</a>, or a <a href="#valuetype_token_list">token list</a>.</p> <p>Related Terms: <a href="#dfn-defines" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-defines-2">Defines</a>, <a href="#dfn-identifies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-identifies-2">Identifies</a></p> </dd> <dt><dfn id="dfn-keyboard-accessible" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">Keyboard Accessible</dfn></dt> <dd> <p>Accessible to the user using a keyboard or <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-10">assistive technologies</a> that mimic keyboard input, such as a sip and puff tube. References in this document relate to <cite><a href="https://www.w3.org/TR/WCAG21/#keyboard-accessible"><abbr title="Web Content Accessibility Guidelines">WCAG</abbr> 2.1 Guideline 2.1: Make all functionality available from a keyboard</a></cite> [<cite><a class="bibref" data-link-type="biblio" href="#bib-wcag21" title="Web Content Accessibility Guidelines (WCAG) 2.1">WCAG21</a></cite>].</p> </dd> <dt><dfn data-plurals="landmarks" id="dfn-landmark" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">Landmark</dfn></dt> <dd> <p>A type of region on a page to which the user might want quick access. Content in such a region is different from that of other regions on the page and relevant to a specific user purpose, such as navigating, searching, perusing the primary content, etc.</p> </dd> <dt><dfn data-export="" data-plurals="live regions" id="dfn-live-region" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">Live Region</dfn></dt> <dd> <p>Live regions are perceivable regions of a web page that are typically updated as a result of an external event. These regions are not always updated as a result of a user interaction and can receive these updates even when they do not have focus. Examples of live regions include a chat log, stock ticker, or a sport scoring section that updates periodically to reflect game statistics. Since these asynchronous areas are expected to update outside the user's area of focus, assistive technologies such as screen readers have either been unaware of their existence or unable to process them for the user. <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> has provided a collection of properties that allow the author to identify these live regions and process them: aria-live, aria-relevant, aria-atomic, and aria-busy.</p> </dd> <dt><dfn data-export="" data-plurals="managed states" id="dfn-managed-state" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">Managed State</dfn></dt> <dd> <p><a href="#dfn-accessibility-api" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-api-8">Accessibility <abbr title="application programming interface">API</abbr></a> <a href="#dfn-state" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-state-6">state</a> that is controlled by the user agent, such as focus and selection. These are contrasted with "unmanaged states" that are typically controlled by the author. Nevertheless, authors can override some managed states, such as aria-posinset and aria-setsize. Many managed states have corresponding <abbr title="Cascading Style Sheets">CSS</abbr> pseudo-classes, such as :focus, and pseudo-elements, such as ::selection, that are also updated by the user agent.</p> </dd> <dt><dfn id="dfn-nemeth-braille" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">Nemeth Braille</dfn></dt> <dd> <p>The Nemeth Braille Code for Mathematics is a braille code for encoding mathematical and scientific notation. See <cite><a href="https://en.wikipedia.org/wiki/Nemeth_Braille">Nemeth Braille on Wikipedia</a>.</cite></p> </dd> <dt><dfn data-plurals="objects" id="dfn-object" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">Object</dfn></dt> <dd> <p>In the context of user interfaces, an item in the perceptual user experience, represented in markup languages by one or more <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a>, and rendered by <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agents</a>.</p> In the context of programming, the instantiation of one or more classes and interfaces which define the general characteristics of similar objects. An object in an <a href="#dfn-accessibility-api" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-api-9">accessibility <abbr title="Application Programming Interfaces">API</abbr></a> can represent one or more <abbr title="Document Object Model">DOM</abbr> objects. <a class="termref informative internalDFN" href="#dfn-accessibility-api" data-link-type="dfn" id="ref-for-dfn-accessibility-api-10">Accessibility <abbr title="Application Programing Interfaces">APIs</abbr></a> have defined interfaces that are distinct from <abbr title="Document Object Model">DOM</abbr> interfaces.</dd> <dt><dfn id="dfn-ontology" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">Ontology</dfn></dt> <dd> <p>A description of the characteristics of classes and how they relate to each other.</p> </dd> <dt><dfn id="dfn-operable" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">Operable</dfn></dt> <dd> <p>Usable by users in ways they can control. References in this document relate to <cite><a href="https://www.w3.org/TR/WCAG21/#operable"><abbr title="Web Content Accessibility Guidelines">WCAG</abbr> 2.1 Principle 2: Content must be operable</a></cite> [<cite><a class="bibref" data-link-type="biblio" href="#bib-wcag21" title="Web Content Accessibility Guidelines (WCAG) 2.1">WCAG21</a></cite>]. See <a href="#dfn-keyboard-accessible" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-keyboard-accessible-2">Keyboard Accessible</a>.</p> </dd> <dt><dfn data-export="" id="dfn-perceivable" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">Perceivable</dfn></dt> <dd> <p>Presentable to users in ways they can sense. References in this document relate to <cite><a href="https://www.w3.org/TR/WCAG21/#perceivable"><abbr title="Web Content Accessibility Guidelines">WCAG</abbr> 2.1 Principle 1: Content must be perceivable</a></cite> [<cite><a class="bibref" data-link-type="biblio" href="#bib-wcag21" title="Web Content Accessibility Guidelines (WCAG) 2.1">WCAG21</a></cite>].</p> </dd> <dt><dfn data-export="" data-dfn-for="ARIA" data-plurals="properties" id="dfn-property" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">Property</dfn></dt> <dd> <p><a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attributes</a> that are essential to the nature of a given <a href="#dfn-object" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-object-4">object</a>, or that represent a data value associated with the object. A change of a property can significantly impact the meaning or presentation of an object. Certain properties (for example, <a href="https://w3c.github.io/aria/#aria-multiline" class="property-reference"><code>aria-multiline</code></a>) are less likely to change than <a class="termref informative" href="#dfn-state" id="ref-for-dfn-state-7">states</a>, but note that the frequency of change difference is not a rule. A few properties, such as <a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a>, <a href="https://w3c.github.io/aria/#aria-valuenow" class="property-reference"><code>aria-valuenow</code></a>, and <a href="https://w3c.github.io/aria/#aria-valuetext" class="property-reference"><code>aria-valuetext</code></a> are expected to change often. See <a class="specref" href="https://w3c.github.io/aria/#statevsprop">clarification of states versus properties</a>.</p> </dd> <dt><dfn data-export="" data-plurals="relationships" id="dfn-relationship" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">Relationship</dfn></dt> <dd> <p>A connection between two distinct things. Relationships can be of various types to indicate which <a href="#dfn-object" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-object-5">object</a> labels another, controls another, etc.</p> </dd> <dt><dfn data-export="" data-plurals="roles" id="dfn-role" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">Role</dfn></dt> <dd> <p>Main indicator of type. This <a class="termref informative internalDFN" data-lt="semantics" href="#dfn-semantics" data-link-type="dfn" id="ref-for-dfn-semantics-2">semantic</a> association allows tools to present and support interaction with the object in a manner that is consistent with user expectations about other objects of that type.</p> </dd> <dt><dfn data-export="" data-local-lt="semantically" data-lt="Semantics|semantically" data-plurals="semantic" id="dfn-semantics" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">Semantics</dfn></dt> <dd> <p>The meaning of something as understood by a human, defined in a way that computers can process a representation of an <a href="#dfn-object" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-object-6">object</a>, such as <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a> and <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attributes</a>, and reliably represent the object in a way that various humans will achieve a mutually consistent understanding of the object.</p> </dd> <dt><dfn data-export="" data-plurals="states" id="dfn-state" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">State</dfn></dt> <dd> <p>A state is a dynamic <a class="termref informative" href="#dfn-property" id="ref-for-dfn-property-5">property</a> expressing characteristics of an <a href="#dfn-object" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-object-7">object</a> that can change in response to user action or automated processes. States do not affect the essential nature of the object, but represent data associated with the object or user interaction possibilities. See <a class="specref" href="https://w3c.github.io/aria/#statevsprop">clarification of states versus properties</a>.</p> </dd> <dt><dfn id="dfn-target-element" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn" class="respec-offending-element" title="Found definition for "Target Element", but nothing links to it. This is usually a spec bug!">Target Element</dfn></dt> <dd> <p>An element specified in a <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> relation. For example, in <code> <div aria-controls=”elem1”></code>, where <code>“elem1”</code> is the ID for the target element.</p> </dd> <dt><dfn data-lt="unicode braille|Unicode Braille Patterns" id="dfn-unicode-braille" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">Unicode Braille Patterns</dfn></dt> <dd> <p>In Unicode, braille is represented in a block called Braille Patterns (U+2800..U+28FF). The block contains all 256 possible patterns of an 8-dot braille cell; this includes the complete 6-dot cell range which is represented by U+2800..U+283F. In all braille systems, the braille pattern dots-0 (U+2800) is used to represent a space or the lack of content; it is also called a blank Braille pattern. See <cite><a href="https://en.wikipedia.org/wiki/Braille_Patterns">Braille Patterns on Wikipedia</a>.</cite></p> </dd> <dt><dfn data-export="" data-plurals="widgets" id="dfn-widget" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">Widget</dfn></dt> <dd> <p>Discrete user interface <a class="termref informative" href="#dfn-object" id="ref-for-dfn-object-8">object</a> with which the user can interact. Widgets range from simple objects that have one value or operation (e.g., check boxes and menu items), to complex objects that contain many managed sub-objects (e.g., trees and grids).</p> </dd> </dl> </div> </section> <section class="normative override" id="conformance"><div class="header-wrapper"><h2 id="x3-conformance"><bdi class="secno">3. </bdi>Conformance</h2><a class="self-link" href="#conformance" aria-label="Permalink for Section 3."></a></div> <p>The main content of Accessible Rich Internet Applications is normative and defines requirements that impact conformance claims. Introductory material, appendices, sections marked as "non-normative" and their subsections, diagrams, examples, and notes are informative (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>Normative sections provide requirements that authors and <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agents</a> must follow for an implementation to conform to this specification. The keywords <em class="rfc2119"><em class="rfc2119">MUST</em></em>, <em class="rfc2119"><em class="rfc2119">MUST NOT</em></em>, <em class="rfc2119"><em class="rfc2119">REQUIRED</em></em>, <em class="rfc2119"><em class="rfc2119">SHALL</em></em>, <em class="rfc2119"><em class="rfc2119">SHALL NOT</em></em>, <em class="rfc2119"><em class="rfc2119">SHOULD</em></em>, <em class="rfc2119"><em class="rfc2119">RECOMMENDED</em></em>, <em class="rfc2119"><em class="rfc2119">MAY</em></em>, and <em class="rfc2119"><em class="rfc2119">OPTIONAL</em></em> in this document are to be interpreted as described in <cite><a href="http://www.rfc-editor.org/rfc/rfc2119.txt">Keywords for use in RFCs to indicate requirement levels</a></cite> [<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>]. RFC-2119 keywords are formatted in uppercase and contained in an element with <code>class="rfc2119"</code>. When the keywords shown above are used, but do not share this format, they do not convey formal information in the RFC 2119 sense, and are merely explanatory, i.e., informative. As much as possible, such usages are avoided in this specification.</p> <p>Non-normative (informative) sections provide information useful to understanding the specification. Such sections might contain examples of recommended practice, but it is not required to follow such recommendations in order to conform to this specification.</p> <section id="ua_noninterference"><div class="header-wrapper"><h3 id="x3-1-non-interference-with-the-host-language"><bdi class="secno">3.1 </bdi>Non-interference with the Host Language</h3><a class="self-link" href="#ua_noninterference" aria-label="Permalink for Section 3.1"></a></div> <p><abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> processing by the <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agent</a> <em class="rfc2119">MUST NOT</em> interfere with the normal operation of the built-in features of the host language.</p> <p>If a <abbr title="Cascading Style Sheets">CSS</abbr> selector includes a <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> attribute (e.g., <code class="highlight lang-css hljs" aria-busy="false">input[aria-invalid="true"]</code>), user agents <em class="rfc2119">MUST</em> update the visual display of any elements matching (or no longer matching) the selector any time the attribute is added/changed/removed in the <abbr title="Document Object Model">DOM</abbr>. The user agent <em class="rfc2119">MAY</em> alter the mapping of the host language features into an <a href="#dfn-accessibility-api" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-api-11">accessibility <abbr title="Application Programing Interface">API</abbr></a>, but the user agent <em class="rfc2119">MUST NOT</em> alter the <abbr title="Document Object Model">DOM</abbr> in order to remap <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> markup into host language features.</p> </section> <section id="ua_dom"><div class="header-wrapper"><h3 id="x3-2-all-wai-aria-in-dom"><bdi class="secno">3.2 </bdi>All <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> in <abbr title="Document Object Model">DOM</abbr></h3><a class="self-link" href="#ua_dom" aria-label="Permalink for Section 3.2"></a></div> <p>A conforming <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agent</a> which implements a document object model that does not conform to the <abbr title="World Wide Web Consortium">W3C</abbr> <abbr title="Document Object Model">DOM</abbr> specification <em class="rfc2119">MUST</em> include the content attribute for role and its <a href="#roles_categorization"><abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> role values</a>, as well as the <a href="#states_and_properties"><abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> States and Properties</a> in the <abbr title="Document Object Model">DOM</abbr> as specified by the author, even though processing might affect how the elements are exposed to accessibility <abbr title="Application Programing Interfaces">APIs</abbr>. Doing so ensures that each role attribute and all <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> states and properties, including their values, are in the document in an unmodified form so other tools, such as assistive technologies, can access them. A conforming <abbr title="World Wide Web Consortium">W3C</abbr> <abbr title="Document Object Model">DOM</abbr> meets this criterion.</p> </section> <section id="ua_domchanges"><div class="header-wrapper"><h3 id="x3-3-assistive-technology-notifications-communicated-to-web-applications"><bdi class="secno">3.3 </bdi>Assistive Technology Notifications Communicated to Web Applications</h3><a class="self-link" href="#ua_domchanges" aria-label="Permalink for Section 3.3"></a></div> <p><a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-11">Assistive technologies</a>, such as speech recognition systems and alternate input devices for users with mobility impairments, require the ability to control a web application in a device-independent way. <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> <a href="#dfn-state" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-state-8">states</a> and <a data-link-type="dfn|abstract-op" href="#dfn-property" class="internalDFN" id="ref-for-dfn-property-6">properties</a> reflect the current state of rich internet application components. The ability for assistive technologies to notify web applications of necessary changes is essential because it allows these alternative input solutions to control an application without being dependent on the standard input device which the user is unable to effectively control directly.</p> <p>User agents <em class="rfc2119">MUST</em> provide a method to notify the web application when a change occurs to states or properties in the system accessibility <abbr title="application programming interface">API</abbr>. Likewise, authors <em class="rfc2119">SHOULD</em> update the web application accordingly when notified of a change request from the user agent or assistive technology.</p> </section> <section id="conformance_checkers"><div class="header-wrapper"><h3 id="x3-4-conformance-checkers"><bdi class="secno">3.4 </bdi>Conformance Checkers</h3><a class="self-link" href="#conformance_checkers" aria-label="Permalink for Section 3.4"></a></div> <p>Any application or script verifying document conformance or validity <em class="rfc2119">SHOULD</em> include a test for all of the normative author requirements in this specification. If testing for a given requirement, conformance checkers <em class="rfc2119">MUST</em> issue an error if an author "<em class="rfc2119">MUST</em>" requirement isn't met, and <em class="rfc2119">MUST</em> issue a warning if an author "<em class="rfc2119">SHOULD</em>" requirement isn't met.</p> </section> <section id="deprecated"><div class="header-wrapper"><h3 id="x3-5-deprecated-requirements"><bdi class="secno">3.5 </bdi>Deprecated Requirements</h3><a class="self-link" href="#deprecated" aria-label="Permalink for Section 3.5"></a></div> <p>As the technology evolves, sometimes new ways to meet a use case become available, that work better than a feature that was previously defined. But because of existing implementation of the older feature, that feature cannot be removed from the conformance model without rendering formerly conforming content non-conforming. In this case, the older feature is marked as "deprecated". This indicates that the feature is allowed in the conformance model and expected to be supported by user agents, but it is recommended that authors do not use it for new content. In future versions of the specification, if the feature is no longer widely used, the feature could be removed and no longer expected to be supported by user agents.</p> </section> </section> <section class="normative" id="usage"><div class="header-wrapper"><h2 id="x4-using-wai-aria"><bdi class="secno">4. </bdi>Using <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr></h2><a class="self-link" href="#usage" aria-label="Permalink for Section 4."></a></div> <p>Complex web applications become inaccessible when <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-12">assistive technologies</a> cannot determine the <a href="#dfn-semantics" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-semantics-3">semantics</a> behind portions of a document or when the user is unable to effectively navigate to all parts of it in a usable way (see <cite><a href="https://www.w3.org/WAI/ARIA/apg/" class="practices"><abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices Guide</a></cite>). <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> divides the semantics into <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-6">roles</a> (the type defining a user interface element) and <a href="#dfn-state" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-state-9">states</a> and <a data-link-type="dfn|abstract-op" href="#dfn-property" class="internalDFN" id="ref-for-dfn-property-7">properties</a> supported by the roles.</p> <p>Authors need to associate <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a> in the document to a <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> role and the appropriate states and properties (aria-* <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attributes</a>) during its life-cycle, unless the elements already have the appropriate <a href="#implicit_semantics">implicit <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> semantics</a> for states and properties. In these instances the equivalent host language states and properties take precedence to avoid a conflict while the role attribute will take precedence over the implicit role of the host language element.</p> <section id="introroles" class="normative"><div class="header-wrapper"><h3 id="x4-1-wai-aria-roles"><bdi class="secno">4.1 </bdi><abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> Roles</h3><a class="self-link" href="#introroles" aria-label="Permalink for Section 4.1"></a></div> <p>A <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-7">role</a> is set on an <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> using a <code>role</code> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attribute</a>, similar to the <code>role</code> attribute defined in <cite><a href="https://www.w3.org/TR/role-attribute/">Role Attribute</a></cite> [<cite><a class="bibref" data-link-type="biblio" href="#bib-role-attribute" title="Role Attribute 1.0">ROLE-ATTRIBUTE</a></cite>].</p> <div class="example" id="example-1"> <div class="marker"> <a class="self-link" href="#example-1">Example<bdi> 1</bdi></a> </div> <pre class="highlight" aria-busy="false"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"menuitem"</span>></span>Open file…<span class="hljs-tag"></<span class="hljs-name">li</span>></span></code></pre> </div> <p>The definition of each role in the model provides the following information :</p> <ul> <li>an informative description of the role;</li> <li>hierarchical information about related roles (e.g., a <a href="https://w3c.github.io/aria/#searchbox" class="role-reference"><code>searchbox</code></a> is a type of <a href="https://w3c.github.io/aria/#textbox" class="role-reference"><code>textbox</code></a>);</li> <li>context of the role (e.g., a <a href="https://w3c.github.io/aria/#listitem" class="role-reference"><code>listitem</code></a> is contained inside a <a href="https://w3c.github.io/aria/#list" class="role-reference"><code>list</code></a>);</li> <li>references to related concepts in other specifications;</li> <li>supported <a href="#dfn-state" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-state-10">states</a> and <a data-link-type="dfn|abstract-op" href="#dfn-property" class="internalDFN" id="ref-for-dfn-property-8">properties</a> for each role (e.g., a <a href="https://w3c.github.io/aria/#checkbox" class="role-reference"><code>checkbox</code></a> supports being checked via <a href="https://w3c.github.io/aria/#aria-checked" class="state-reference"><code>aria-checked</code></a>).</li> </ul> <p>Attaching a role gives <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-13">assistive technologies</a> information about how to handle each element. When <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> roles override host language semantics, there are no changes in the <abbr title="Document Object Model">DOM</abbr>, only in the <a class="termref informative internalDFN" href="#dfn-accessibility-tree" data-link-type="dfn" id="ref-for-dfn-accessibility-tree-2">accessibility tree</a>.</p> <p>User agents <em class="rfc2119">MUST</em> use the first token in the sequence of tokens in the <code>role</code> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attribute</a> value that matches the name of any non-abstract <abbr title="Accessible Internet Application">WAI-ARIA</abbr> <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-8">role</a>. Refer to the section on <a href="#host_general_role"><code>role</code> attribute implementation in Host Languages</a> for further details.</p> </section> <section id="introstates"><div class="header-wrapper"><h3 id="x4-2-wai-aria-states-and-properties"><bdi class="secno">4.2 </bdi><abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> States and Properties</h3><a class="self-link" href="#introstates" aria-label="Permalink for Section 4.2"></a></div> <p><abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> provides a collection of accessibility <a href="#dfn-state" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-state-11">states</a> and <a data-link-type="dfn|abstract-op" href="#dfn-property" class="internalDFN" id="ref-for-dfn-property-9">properties</a> which are used to support platform <a href="#dfn-accessibility-api" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-api-12">accessibility <abbr title="Application Programing Interfaces">APIs</abbr></a> on various operating system platforms. <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-14">Assistive technologies</a> can access this information through an exposed <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agent</a> <abbr title="Document Object Model">DOM</abbr> or through a mapping to the platform accessibility <abbr title="Application Programing Interfaces">API</abbr>. When combined with <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-9">roles</a>, the user agent can supply the assistive technologies with user interface information to convey to the user at any time. Changes in states or properties will result in a notification to assistive technologies, which could alert the user that a change has occurred.</p> <p>In the following example, a list item (<code>html:li</code>) has been used to create a checkable menu item, and JavaScript <a href="#dfn-event" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-event-4">events</a> will capture mouse and keyboard events to toggle the value of <a href="https://w3c.github.io/aria/#aria-checked" class="state-reference"><code>aria-checked</code></a>. A role is used to make the behavior of this simple <a href="#dfn-widget" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-widget-6">widget</a> known to the user agent. <a data-link-type="dfn" data-lt="attribute" href="https://dom.spec.whatwg.org/#concept-attribute">Attributes</a> that change with user actions (such as <a href="https://w3c.github.io/aria/#aria-checked" class="state-reference"><code>aria-checked</code></a>) are defined in the <a href="#states_and_properties">states and properties</a> section.</p> <div class="example" id="example-2"> <div class="marker"> <a class="self-link" href="#example-2">Example<bdi> 2</bdi></a> </div> <pre class="highlight" aria-busy="false"><code class="hljs abnf"><li role<span class="hljs-operator">=</span><span class="hljs-string">"menuitemcheckbox"</span> aria-checked<span class="hljs-operator">=</span><span class="hljs-string">"true"</span>>Sort by Last Modified</li></code></pre> </div> <p>Some accessibility states, called <em><a href="#dfn-managed-state" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-managed-state-1">managed states</a></em>, are controlled by the user agent. Examples of managed state include keyboard focus and selection. Managed states often have corresponding <abbr title="Cascading Style Sheets">CSS</abbr> pseudo-classes (such as <code>:focus</code> and <code>::selection</code>) to define style changes. In contrast, the states in this specification are typically controlled by the author and are called <em>unmanaged states.</em> Some states are managed by the user agent, such as <a href="https://w3c.github.io/aria/#aria-posinset" class="property-reference"><code>aria-posinset</code></a> and <a href="https://w3c.github.io/aria/#aria-setsize" class="property-reference"><code>aria-setsize</code></a>, but the author can override them if the <abbr title="Document Object Model">DOM</abbr> is incomplete and would cause the user agent calculation to be incorrect. User agents map both managed and unmanaged states to the platform accessibility <abbr title="Application Programing Interfaces">APIs</abbr>.</p> <p>Most modern user agents support <cite><a href="https://www.w3.org/TR/css3-selectors/#attribute-selectors"><abbr title="Cascading Style Sheets">CSS</abbr> attribute selectors</a></cite> ([<cite><a class="bibref" data-link-type="biblio" href="#bib-css3-selectors" title="Selectors Level 3">CSS3-SELECTORS</a></cite>]), and can allow the author to create <abbr title="User Interface">UI</abbr> changes based on <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> attribute information, reducing the amount of scripts necessary to achieve equivalent functionality. In the following example, a <abbr title="Cascading Style Sheets">CSS</abbr> selector is used to determine whether or not the text is bold and an image of a check mark is shown, based on the value of the <a href="https://w3c.github.io/aria/#aria-checked" class="state-reference"><code>aria-checked</code></a> attribute.</p> <div class="example" id="example-3"> <div class="marker"> <a class="self-link" href="#example-3">Example<bdi> 3</bdi></a> </div> <pre class="highlight lang-css" aria-busy="false"><code class="hljs">[aria-checked="true"] { font-weight: bold; } [aria-checked="true"]::before { background-image: url(checked.gif); }</code></pre> </div> <p>If <abbr title="Cascading Style Sheets">CSS</abbr> is not used to toggle the visual representation of the check mark, the author could include additional markup and scripts to manage an image that represents whether or not the <a href="https://w3c.github.io/aria/#menuitemcheckbox" class="role-reference"><code>menuitemcheckbox</code></a> is checked.</p> <div class="example" id="example-4"> <div class="marker"> <a class="self-link" href="#example-4">Example<bdi> 4</bdi></a> </div> <pre class="highlight" aria-busy="false"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"menuitemcheckbox"</span> <span class="hljs-attr">aria-checked</span>=<span class="hljs-string">"true"</span>></span> <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"checked.gif"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">""</span>></span> <span class="hljs-comment"></span> Sort by Last Modified <span class="hljs-tag"></<span class="hljs-name">li</span>></span></code></pre> </div> </section> <section id="managingfocus" class="normative"><div class="header-wrapper"><h3 id="x4-3-managing-focus-and-supporting-keyboard-navigation"><bdi class="secno">4.3 </bdi>Managing Focus and Supporting Keyboard Navigation</h3><a class="self-link" href="#managingfocus" aria-label="Permalink for Section 4.3"></a></div> <p>When using standard <abbr title="Hypertext Markup Language">HTML</abbr> interactive elements and simple <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> <a href="#dfn-widget" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-widget-7">widgets</a>, application developers can manipulate the tab order or associate keyboard shortcuts with elements in the document.</p> <p><abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> includes a number of "managing container" widgets, also known as "composite" widgets. When appropriate, the container is responsible for tracking the last descendant that was active (the default is usually the first item in the container). It is essential that a container maintain a usable and consistent strategy when focus leaves a container and is then later refocused. While there can be exceptions, it is recommended that when a previously focused container is refocused, the active descendant be the same element as the active descendant when the container was last focused. Exceptions include cases where the contents of a container widget have changed, and widgets like a menubar where the user expects to always return to the first item when focus leaves the menu bar. For example, if the second item of a tree group was the active descendant when the user tabbed out of the tree group, then the second item of the tree group remains the active descendant when the tree group gets focus again. The user can also activate the container by clicking on one of the descendants within it. When the container or its active descendant has focus, the user can navigate through the container by pressing additional keys, such as the arrow keys, to change the currently active descendant. Any additional press of the main navigation key (generally the <kbd>TAB</kbd> key) will move out of the container to the next widget.</p> <p>Usable keyboard navigation in a rich internet application is different from the tabbing paradigm among interactive elements, such as links and form controls, in a static document. In rich internet applications, the user tabs to significantly complex <a class="termref informative internalDFN" href="#dfn-widget" data-link-type="dfn" id="ref-for-dfn-widget-8">widgets</a>, such as a menu or spreadsheet, and uses the arrow keys to navigate within the widget. The changes that <abbr title="accessible rich internet applications">WAI-ARIA</abbr> introduces to keyboard navigation make this enhanced accessibility possible. In <abbr title="accessible rich internet applications">WAI-ARIA</abbr>, any element can be keyboard focusable. In addition to host language mechanisms such as <code>tabindex</code>, <a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a> provides another mechanism for keyboard operation. Most other aspects of <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> widget development depend on keyboard navigation functioning properly.</p> <p> When implementing <a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a> as described below, the user agent keeps the <abbr title="Document Object Model">DOM</abbr> focus on the container element or on an input element that controls the container element. However, the user agent communicates <a href="#dfn-desktop-focus-event" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-desktop-focus-event-1">desktop focus events</a> and states to the assistive technology as if the element referenced by <a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a> has focus. User agents are not expected to validate that the active descendant is a descendant of the container element. It is the responsibility of the user agent to ensure that keyboard events are processed at the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> that has <abbr title="Document Object Model">DOM</abbr> focus. Any keyboard events directed at the active descendant bubble up to the <abbr title="Document Object Model">DOM</abbr> element with focus for processing. </p> <section id="managingfocus_authors"><div class="header-wrapper"><h4 id="x4-3-1-information-for-authors"><bdi class="secno">4.3.1 </bdi>Information for Authors</h4><a class="self-link" href="#managingfocus_authors" aria-label="Permalink for Section 4.3.1"></a></div> <p>If the author removes the element with focus, the author <em class="rfc2119">SHOULD</em> move focus to a logical element. Similarly, authors <em class="rfc2119">SHOULD</em> not scroll the element with focus off screen unless the user performed a scrolling action.</p> <p>Authors <em class="rfc2119">SHOULD</em> ensure that all interactive <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a> are focusable and that all parts of composite widgets are either focusable or have a documented alternative method to achieve their function.</p> <p>Authors <em class="rfc2119">MUST</em> manage focus on the following container roles:</p> <ul> <li><a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a></li> <li><a href="https://w3c.github.io/aria/#listbox" class="role-reference"><code>listbox</code></a></li> <li><a href="https://w3c.github.io/aria/#menu" class="role-reference"><code>menu</code></a></li> <li><a href="https://w3c.github.io/aria/#menubar" class="role-reference"><code>menubar</code></a></li> <li><a href="https://w3c.github.io/aria/#radiogroup" class="role-reference"><code>radiogroup</code></a></li> <li><a href="https://w3c.github.io/aria/#tree" class="role-reference"><code>tree</code></a></li> <li><a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a></li> <li><a href="https://w3c.github.io/aria/#tablist" class="role-reference"><code>tablist</code></a></li> </ul> <p>User agents that support <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> expand the usage of host language mechanisms such as <code>tabindex</code>, <code>focus</code>, and <code>blur</code> to allow them on all <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a>. Where the host language supports it, authors <em class="rfc2119">MAY</em> add any element such as a <code>div</code>, <code>span</code>, or <code>img</code> to the default tab order by setting <code>tabindex="0"</code>. In addition, any item with <code>tabindex</code> equal to a negative integer is focusable via script or a mouse click, but is not part of the default tab order. This is supported in both [<cite><a class="bibref" data-link-type="biblio" href="#bib-html" title="HTML Standard">HTML</a></cite>] and [<cite><a class="bibref" data-link-type="biblio" href="#bib-svg2" title="Scalable Vector Graphics (SVG) 2">SVG2</a></cite>].</p> <p>Authors <em class="rfc2119">MAY</em> use <a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a> to inform <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-15">assistive technologies</a> which descendant of a <a href="https://w3c.github.io/aria/#widget" class="role-reference"><code>widget</code></a> element is treated as having keyboard focus in the user interface if the role of the widget element supports <code>aria-activedescendant</code>. This is often a more convenient way of providing keyboard navigation within widgets, such as a <a href="https://w3c.github.io/aria/#listbox" class="role-reference"><code>listbox</code></a>, where the widget occupies only one stop in the page <kbd>Tab</kbd> sequence and other keys, typically arrow keys, are used to focus elements inside the widget.</p> <p>Typically, the author will use host language <a href="#dfn-semantics" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-semantics-4">semantics</a> to put the widget in the <kbd>Tab</kbd> sequence (e.g., <code>tabindex="0"</code> in <abbr title="Hypertext Markup Language">HTML</abbr>) and <code>aria-activedescendant</code> to point to the ID of the currently active descendant. The author, not the user agent, is responsible for styling the currently active descendant to show it has keyboard focus. The author cannot use <code>:<span class="css-selector">focus</span></code> to style the currently active descendant since the actual focus is on the container.</p> <p>More information on managing focus can be found in the <a href="https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface" class="practices">Developing a Keyboard Interface</a> section of the <cite><abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> Authoring Practices</cite>.</p> </section> <section id="managingfocus_useragents"><div class="header-wrapper"><h4 id="x4-3-2-information-for-user-agents"><bdi class="secno">4.3.2 </bdi>Information for User Agents</h4><a class="self-link" href="#managingfocus_useragents" aria-label="Permalink for Section 4.3.2"></a></div> <p>The user agent <em class="rfc2119">MUST</em> do the following to implement <a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a>:</p> <ol> <li>Implement the host language method for keyboard navigation so that widgets that support <code>aria-activedescendant</code> can be included in the tab order.</li> <li>For platforms that expose <a href="#dfn-desktop-focus-event" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-desktop-focus-event-2">desktop focus</a> or <a href="#dfn-accessibility-api" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-api-13">accessibility <abbr title="Application Programing Interfaces">API</abbr></a> focus separately from <abbr title="Document Object Model">DOM</abbr> focus, do not expose the focused state in the accessibility <abbr title="application programming interface">API</abbr> for any element when it has <abbr title="Document Object Model">DOM</abbr> focus and also has <a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a> which points to a valid <a href="#valuetype_idref">ID reference</a>.</li> <li>When the <a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a> attribute changes on an element that currently has <abbr title="Document Object Model">DOM</abbr> focus, remove the focused state from the previously focused object and fire an accessibility <abbr title="application programming interface">API</abbr> <a href="#dfn-desktop-focus-event" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-desktop-focus-event-3">desktop focus event</a> on the new element referenced by <code>aria-activedescendant</code>. If <a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a> is cleared or does not point to an element in the current document, fire a desktop focus event for the <a href="#dfn-object" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-object-9">object</a> that had the attribute change.</li> <li>Apply the following accessibility <abbr title="Application Programming Interface">API</abbr> states to any element with an ID attribute that can be referenced by an element with both an <a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a> attribute and has <abbr title="Document Object Model">DOM</abbr> focus. There are two ways an element can be referenced by <a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a>. One way is when it is an <a href="#dfn-accessibility-descendant" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-descendant-1">accessibility descendant</a> of the element with <a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a> and the other is when it is an <a href="#dfn-accessibility-descendant" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-descendant-2">accessibility descendant</a> of an element that is controlled by an element with role of <a href="https://w3c.github.io/aria/#combobox" class="role-reference"><code>combobox</code></a>, <a href="https://w3c.github.io/aria/#textbox" class="role-reference"><code>textbox</code></a> or <a href="https://w3c.github.io/aria/#searchbox" class="role-reference"><code>searchbox</code></a> with an <a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a> attribute: <ol> <li>Focusable, if the element also has a <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> <a class="termref informative internalDFN" href="#dfn-role" data-link-type="dfn" id="ref-for-dfn-role-10">role</a>. The element needs to be focusable because it could be referenced by the <a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a> attribute. Native elements that have no <a class="termref informative internalDFN" href="#dfn-role" data-link-type="dfn" id="ref-for-dfn-role-11">role</a> attribute do not need to be checked; their native semantics determine the focusable state.</li> <li>Focused, whenever the element is the target of the <a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a> attribute and the element with the <a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a> attribute has <abbr title="Document Object Model">DOM</abbr> focus.</li> </ol> </li> </ol> <p>When an assistive technology uses its platform's accessibility <abbr title="Application Programming Interfaces">API</abbr> to request a change of focus, user agents <em class="rfc2119">MUST</em> do the following:</p> <ol> <li>Remove the platform's focused state from the previously focused object.</li> <li>Set the <abbr title="Document Object Model">DOM</abbr> focus: <ol> <li>If the <a class="termref informative" data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> can take <abbr title="Document Object Model">DOM</abbr> focus, the <a class="termref informative" data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agent</a> <em class="rfc2119">MUST</em> set the <abbr title="Document Object Model">DOM</abbr> focus to it.</li> <li>Otherwise, if the element being focused has an ID and the ID is referenced by the <a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a> attribute of an element that is focusable, the user agent <em class="rfc2119">MUST</em> set <abbr title="Document Object Model">DOM</abbr> focus to the element that has the <a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a> attribute. <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="">An element with an ID can be referenced when it is an <a href="#dfn-accessibility-descendant" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-descendant-3">accessibility descendant</a> of a container element that has the <a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a> attribute or by a container element that is controlled by an element that has the <a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a> attribute (e.g. see <a href="https://w3c.github.io/aria/#combobox" class="role-reference"><code>combobox</code></a>). Otherwise the <a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a> attribute reference indicates an author error.</p></div> <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="">The inability to set <abbr title="Document Object Model">DOM</abbr> focus to the containing element indicates an author error.</p></div> </li> <li>Otherwise, the user agent <em class="rfc2119">MAY</em> attempt to set <abbr title="Document Object Model">DOM</abbr> focus to the child element itself.</li> </ol> </li> <li>If the element being focused has an ID and is an <a href="#dfn-accessibility-descendant" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-descendant-4">accessibility descendant</a> of either a container element with both an <code>aria-activedescendant</code> attribute and has <abbr title="Document Object Model">DOM</abbr> focus, or by a container element that is controlled by an element with both an <a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a> attribute and has <abbr title="Document Object Model">DOM</abbr> focus, the user agent <em class="rfc2119">MUST</em> set the accessibility <abbr title="Application Programming Interface">API</abbr> focused state and fire an accessibility <abbr title="Application Programming Interface">API</abbr> focus <a href="#dfn-event" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-event-5">event</a> on the element identified by the value of <code>aria-activedescendant</code>.</li> </ol> </section> </section> </section> <section class="normative" id="roles"><div class="header-wrapper"><h2 id="x5-the-roles-model"><bdi class="secno">5. </bdi>The Roles Model</h2><a class="self-link" href="#roles" aria-label="Permalink for Section 5."></a></div> <p>This section defines <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-12">roles</a> and describes their characteristics and properties.</p> <p>The roles, their characteristics, the states and properties they support, and specification of how they can be used in markup, shall be considered normative.</p> <p>In order to reflect the content in the <abbr title="Document Object Model">DOM</abbr>, user agents <em class="rfc2119">SHOULD</em> map the role attribute to the appropriate value in the implemented accessibility <abbr title="application programming interface">API</abbr>, and user agents <em class="rfc2119">SHOULD</em> update the mapping when the role attribute changes.</p> <section id="relationshipsconcepts"><div class="header-wrapper"><h3 id="x5-1-relationships-between-concepts"><bdi class="secno">5.1 </bdi>Relationships Between Concepts</h3><a class="self-link" href="#relationshipsconcepts" aria-label="Permalink for Section 5.1"></a></div> <p>The Roles Model uses the following relationships to relate <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> roles to each other and to concepts from other specifications, such as <abbr title="Hypertext Markup Language">HTML</abbr>.</p> <section id="superclassrole"><div class="header-wrapper"><h4 id="x5-1-1-superclass-role"><bdi class="secno">5.1.1 </bdi>Superclass Role</h4><a class="self-link" href="#superclassrole" aria-label="Permalink for Section 5.1.1"></a></div> <p>The <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-13">role</a> that the current subclassed role extends in the Roles Model. This extension causes all the states and properties of the superclass role to propagate to the subclass role. Other than well known stable specifications, inheritance can be restricted to items defined inside this specification, so that external items cannot be changed and affect inherited classes.</p> </section> <section id="subclassroles"><div class="header-wrapper"><h4 id="x5-1-2-subclass-roles"><bdi class="secno">5.1.2 </bdi>Subclass Roles</h4><a class="self-link" href="#subclassroles" aria-label="Permalink for Section 5.1.2"></a></div> <p>Informative list of <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-14">roles</a> for which this role is the superclass. This is provided to facilitate reading of the specification but adds no new information.</p> </section> <section id="relatedConcept"><div class="header-wrapper"><h4 id="x5-1-3-related-concepts"><bdi class="secno">5.1.3 </bdi>Related Concepts</h4><a class="self-link" href="#relatedConcept" aria-label="Permalink for Section 5.1.3"></a></div> <p>Informative data about a similar or related idea from other specifications. Concepts that are related are not necessarily identical. Related concepts do not inherit properties from each other. Hence if the definition of one concept changes, the properties, behavior, and definition of its related concept is not affected.</p> <p>For example, a progress bar is like a status indicator. Therefore, the <a href="https://w3c.github.io/aria/#progressbar" class="role-reference"><code>progressbar</code></a> <a href="#dfn-widget" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-widget-9">widget</a> has a related concept which includes <a href="https://w3c.github.io/aria/#status" class="role-reference"><code>status</code></a>. However, if the definition of <a href="https://w3c.github.io/aria/#status" class="role-reference"><code>status</code></a> is modified, the definition of a <a href="https://w3c.github.io/aria/#progressbar" class="role-reference"><code>progressbar</code></a> is not affected.</p> </section> <section id="baseConcept"><div class="header-wrapper"><h4 id="x5-1-4-base-concept"><bdi class="secno">5.1.4 </bdi>Base Concept</h4><a class="self-link" href="#baseConcept" aria-label="Permalink for Section 5.1.4"></a></div> <p>Informative data about <a href="#dfn-object" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-object-10">objects</a> that are considered prototypes for the <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-15">role</a>. Base concept is similar to type, but without inheritance of limitations and properties. Base concepts are designed as a substitute for inheritance for external concepts. A base concept is like a <a href="#relatedConcept">related concept</a> except that the base concept is almost identical to the role definition.</p> <p>For example, the <a href="https://w3c.github.io/aria/#checkbox" class="role-reference"><code>checkbox</code></a> defined in this document has similar functionality and anticipated behavior to a <code><input type="<code><a data-link-type="attr-value" href="https://html.spec.whatwg.org/multipage/input.html#attr-input-type-checkbox-keyword">checkbox</a></code>"></code> defined in <abbr title="Hypertext Markup Language">HTML</abbr>. Therefore, a <a href="https://w3c.github.io/aria/#checkbox" class="role-reference"><code>checkbox</code></a> has an [<cite><a class="bibref" data-link-type="biblio" href="#bib-html" title="HTML Standard">HTML</a></cite>] <code>checkbox</code> as a <code>baseConcept</code>. However, if the original [<cite><a class="bibref" data-link-type="biblio" href="#bib-html" title="HTML Standard">HTML</a></cite>] checkbox baseConcept definition is modified, the definition of a <a href="https://w3c.github.io/aria/#checkbox" class="role-reference"><code>checkbox</code></a> in this document will not be affected, because there is no actual inheritance of the respective type.</p> </section> </section> <section id="Properties"><div class="header-wrapper"><h3 id="x5-2-characteristics-of-roles"><bdi class="secno">5.2 </bdi>Characteristics of Roles</h3><a class="self-link" href="#Properties" aria-label="Permalink for Section 5.2"></a></div> <p>Roles are defined and described by their characteristics. Characteristics define the structural function of a role, such as what a role is, concepts behind it, and what instances the role can or must contain. In the case of <a href="#dfn-widget" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-widget-10">widgets</a> this also includes how it interacts with the <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agent</a> based on mapping to <abbr title="Hypertext Markup Language">HTML</abbr> forms. States and properties from <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> that are supported by the role are also indicated.</p> <p>Roles define the following characteristics. </p> <section id="isAbstract"><div class="header-wrapper"><h4 id="x5-2-1-abstract-roles"><bdi class="secno">5.2.1 </bdi>Abstract Roles</h4><a class="self-link" href="#isAbstract" aria-label="Permalink for Section 5.2.1"></a></div> <dl class="runin"> <dt>Values</dt> <dd>Boolean</dd> </dl> <p>Abstract <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-16">roles</a> are the foundation upon which all other <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> roles are built. Authors <em class="rfc2119">MUST NOT</em> use abstract roles because they are not implemented in the <abbr title="application programing interface">API</abbr> binding. User agents <em class="rfc2119">MUST NOT</em> map abstract roles to the standard role mechanism of the accessibility <abbr title="application programming interface">API</abbr>. Abstract roles are provided to help with the following:</p> <ol> <li>Organize the Roles Model and provide roles with a meaning in the context of known concepts.</li> <li>Streamline the addition of roles that include necessary features.</li> </ol> </section> <section id="requiredState"><div class="header-wrapper"><h4 id="x5-2-2-required-states-and-properties"><bdi class="secno">5.2.2 </bdi>Required States and Properties</h4><a class="self-link" href="#requiredState" aria-label="Permalink for Section 5.2.2"></a></div> <p><a href="#dfn-state" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-state-12">States</a> and <a data-link-type="dfn|abstract-op" href="#dfn-property" class="internalDFN" id="ref-for-dfn-property-10">properties</a> specifically required for the <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-17">role</a> and subclass roles. Authors <em class="rfc2119">MUST</em> provide a non-empty <span>value</span> for required states and properties. Authors <em class="rfc2119">MUST NOT</em> use the value <code>undefined</code> for required states and properties, unless <code>undefined</code> is an explicitly-supported value of that state or property.</p> <p>When an <a href="#dfn-object" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-object-11">object</a> inherits from multiple ancestors and one ancestor indicates that property is supported while another ancestor indicates that it is required, the property is required in the inheriting object.</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="">A host language attribute with the appropriate <a href="#implicit_semantics">implicit <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> semantic</a> fulfills this requirement.</p></div> </section> <section id="supportedState"><div class="header-wrapper"><h4 id="x5-2-3-supported-states-and-properties"><bdi class="secno">5.2.3 </bdi>Supported States and Properties</h4><a class="self-link" href="#supportedState" aria-label="Permalink for Section 5.2.3"></a></div> <p><a href="#dfn-state" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-state-13">States</a> and <a data-link-type="dfn|abstract-op" href="#dfn-property" class="internalDFN" id="ref-for-dfn-property-11">properties</a> specifically applicable to the <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-18">role</a> and child roles. Authors <em class="rfc2119">MAY</em> provide <span>values</span> for supported states and properties, but need not in cases where default values are sufficient. <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agents</a> <em class="rfc2119">MUST</em> map all supported states and properties for the role to an accessibility <abbr title="application programming interface">API</abbr>. If the state or property is undefined and it has a default value for the role, <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agents</a> <em class="rfc2119">SHOULD</em> expose the default value.</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="">A host language attribute with the appropriate <a href="#implicit_semantics">implicit <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> semantic</a> fulfills this requirement.</p></div> </section> <section id="inheritedattributes"><div class="header-wrapper"><h4 id="x5-2-4-inherited-states-and-properties"><bdi class="secno">5.2.4 </bdi>Inherited States and Properties</h4><a class="self-link" href="#inheritedattributes" aria-label="Permalink for Section 5.2.4"></a></div> <p>Informative list of properties that are inherited by a <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-19">role</a> from superclass roles. <a href="#dfn-state" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-state-14">States</a> and <a data-link-type="dfn|abstract-op" href="#dfn-property" class="internalDFN" id="ref-for-dfn-property-12">properties</a> are inherited from superclass roles in the Roles Model, not from ancestor <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a> in the <abbr title="Document Object Model">DOM</abbr> tree. These properties are not explicitly defined on the role, as the inheritance of properties is automatic. This information is provided to facilitate reading of the specification. The set of supported states and properties combined with inherited states and properties forms the full set of states and properties supported by the role.</p> </section> <section id="prohibitedattributes"><div class="header-wrapper"><h4 id="x5-2-5-prohibited-states-and-properties"><bdi class="secno">5.2.5 </bdi><dfn id="dfn-prohibited" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">Prohibited</dfn> States and Properties</h4><a class="self-link" href="#prohibitedattributes" aria-label="Permalink for Section 5.2.5"></a></div> <p>List of states and properties that are prohibited on a <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-20">role</a>. Authors <em class="rfc2119">MUST NOT</em> specify a prohibited state or property.</p> <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="">A host language attribute with the appropriate <a href="#implicit_semantics">implicit <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> semantic</a> would also prohibit a state or property in this section. </p></div> </section> <section id="mustContain"><div class="header-wrapper"><h4 id="x5-2-6-allowed-accessibility-child-roles"><bdi class="secno">5.2.6 </bdi>Allowed Accessibility Child Roles</h4><a class="self-link" href="#mustContain" aria-label="Permalink for Section 5.2.6"></a></div> <p>A list of roles which are allowed on an <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-child-1">accessibility child</a> (simplified as "child") of the element with this <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-21">role</a>. Authors <em class="rfc2119">MUST</em> only add child element with allowed roles. For example, an element with the role <a href="https://w3c.github.io/aria/#list" class="role-reference"><code>list</code></a> can own child elements with the role <a href="https://w3c.github.io/aria/#listitem" class="role-reference"><code>listitem</code></a>, but cannot own elements with the role <a href="https://w3c.github.io/aria/#option" class="role-reference"><code>option</code></a>.</p> <p>To determine whether an element is the <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-child-2">child</a> of an element, <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agents</a> <em class="rfc2119">MUST</em> ignore any intervening elements with the role <a href="https://w3c.github.io/aria/#generic" class="role-reference"><code>generic</code></a> or <a href="https://w3c.github.io/aria/#none" class="role-reference"><code>none</code></a>.</p> <p>Descendants which are not children of an element ancestor are not constrained by <em>allowed accessibility child roles</em>. For example, an <code>image</code> is not an allowed child of a <code>list</code>, but it is a valid descendant if it is also a descendant of the <code>list</code>'s allowed child <code>listitem</code>.</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="">A role that has 'allowed accessibility child roles' does not imply the reverse relationship. Elements with roles in this list do not always have to be found within elements of the given role. See <a href="#scope">required accessibility parent roles</a> for requirements about the context where elements of a given role will be contained.</p></div> <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="">An element with a <a href="#subclassroles">subclass role</a> of the 'allowed accessibility child role' does not fulfill this requirement. For example, the <a href="https://w3c.github.io/aria/#listbox" class="role-reference"><code>listbox</code></a> role allows a child element using the <a href="https://w3c.github.io/aria/#option" class="role-reference"><code>option</code></a> or <a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a> role. Although the <a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a> role is the superclass of <a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a>, adding a child element with a role of <a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a> will not fulfill the requirement that <a href="https://w3c.github.io/aria/#listbox" class="role-reference"><code>listbox</code></a> allows children with <a href="https://w3c.github.io/aria/#option" class="role-reference"><code>option</code></a> or <a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a> roles.</p></div> <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="">An element with the appropriate <a href="#implicit_semantics">implicit <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> semantic</a> fulfills this requirement.</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 valid ways to mark up allowed accessibility child roles include: </p></div> <ol> <li>Direct <abbr title="Document Object Model">DOM</abbr> child: <pre aria-busy="false"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"listbox"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"option"</span>></span>option text<span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> </li> <li><abbr title="Document Object Model">DOM</abbr> child with generics intervening: <pre aria-busy="false"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"listbox"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"option"</span>></span>option text<span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> </li> <li>Direct <code>aria-owns</code> relationship: <pre aria-busy="false"><code class="hljs abnf"><div role<span class="hljs-operator">=</span><span class="hljs-string">"listbox"</span> aria-owns<span class="hljs-operator">=</span><span class="hljs-string">"id1"</span>></div> <div role<span class="hljs-operator">=</span><span class="hljs-string">"option"</span> id<span class="hljs-operator">=</span><span class="hljs-string">"id1"</span>>option text</div></code></pre> </li> <li><code>aria-owns</code> relationship with generics intervening: <pre aria-busy="false"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"listbox"</span> <span class="hljs-attr">aria-owns</span>=<span class="hljs-string">"id1"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"id1"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"option"</span>></span>option text<span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> </li> </ol> </section> <section id="scope"><div class="header-wrapper"><h4 id="x5-2-7-required-accessibility-parent-role"><bdi class="secno">5.2.7 </bdi>Required Accessibility Parent Role</h4><a class="self-link" href="#scope" aria-label="Permalink for Section 5.2.7"></a></div> <p>The required <a href="#dfn-accessibility-parent" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-parent-1">accessibility parent</a> (simplified as "parent") role defines the container where this <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-22">role</a> is allowed. If a role has a required accessibility parent, authors <em class="rfc2119">MUST</em> ensure that an element with the role is an <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-child-3">accessibility child</a> of an element with the required accessibility parent role. For example, an element with role <code>listitem</code> is only meaningful when it is a child of an element with role <code>list</code>.</p> <p>To determine whether an element has a parent with the required role, <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agents</a> <em class="rfc2119">MUST</em> ignore any elements with the role <a href="https://w3c.github.io/aria/#generic" class="role-reference"><code>generic</code></a> or <a href="https://w3c.github.io/aria/#none" class="role-reference"><code>none</code></a>.</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="">An element with the appropriate <a href="#implicit_semantics">implicit <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> semantic</a> fulfills this requirement.</p></div> </section> <section id="namecalculation"><div class="header-wrapper"><h4 id="x5-2-8-accessible-name-calculation"><bdi class="secno">5.2.8 </bdi>Accessible Name Calculation</h4><a class="self-link" href="#namecalculation" aria-label="Permalink for Section 5.2.8"></a></div> <dl class="runin"> <dt>Values</dt> <dd>One of the following values: <ol> <li>author: name comes from values provided by the author in explicit markup features such as the <a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a> attribute, the <a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a> attribute, or the host language labeling mechanism, such as the <code>alt</code> or <code>title</code> attributes in <abbr title="Hypertext Markup Language">HTML</abbr>, with <abbr title="Hypertext Markup Language">HTML</abbr> <code>title</code> attribute having the lowest precedence for specifying a text alternative.</li> <li>contents: name comes from the text value of the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> node. Although this might be allowed in addition to "author" in some <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-23">roles</a>, this is used in content only if higher priority "author" features are not provided. Priority is defined by the <a href="https://w3c.github.io/accname/#mapping_additional_nd_te" class="accname">accessible name and description computation</a> algorithm [<cite><a class="bibref" data-link-type="biblio" href="#bib-accname-1.2" title="Accessible Name and Description Computation 1.2">ACCNAME-1.2</a></cite>].</li> <li>prohibited: the element does not support name from author. Authors <em class="rfc2119">MUST NOT</em> use the <a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a> or <a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a> attributes to name the element.</li> </ol> </dd> </dl> <section id="namecomputation"><div class="header-wrapper"><h5 id="x5-2-8-1-name-computation"><bdi class="secno">5.2.8.1 </bdi>Name Computation</h5><a class="self-link" href="#namecomputation" aria-label="Permalink for Section 5.2.8.1"></a></div> <p><a href="https://w3c.github.io/accname/#mapping_additional_nd_name" class="accname">Name Computation</a> is defined in the Accessible Name and Description specification.</p> </section> <section id="descriptioncomputation"><div class="header-wrapper"><h5 id="x5-2-8-2-description-computation"><bdi class="secno">5.2.8.2 </bdi>Description Computation</h5><a class="self-link" href="#descriptioncomputation" aria-label="Permalink for Section 5.2.8.2"></a></div> <p><a href="https://w3c.github.io/accname/#mapping_additional_nd_description" class="accname">Description Computation</a> is defined in the Accessible Name and Description specification.</p> </section> <section id="textalternativecomputation"><div class="header-wrapper"><h5 id="x5-2-8-3-accessible-name-and-description-computation"><bdi class="secno">5.2.8.3 </bdi>Accessible Name and Description Computation</h5><a class="self-link" href="#textalternativecomputation" aria-label="Permalink for Section 5.2.8.3"></a></div> <p><a href="https://w3c.github.io/accname/#mapping_additional_nd_te" class="accname">Accessible Name and Description Computation</a> is defined in the Accessible Name and Description specification.</p> </section> <section id="namefromauthor"><div class="header-wrapper"><h5 id="x5-2-8-4-roles-supporting-name-from-author"><bdi class="secno">5.2.8.4 </bdi>Roles Supporting Name from Author</h5><a class="self-link" href="#namefromauthor" aria-label="Permalink for Section 5.2.8.4"></a></div> <ul id="index_fromauthor" class="compact"><li><a href="#alert" class="role-reference"><code>alert</code></a></li><li><a href="#alertdialog" class="role-reference"><code>alertdialog</code></a> (name required)</li><li><a href="#application" class="role-reference"><code>application</code></a> (name required)</li><li><a href="#article" class="role-reference"><code>article</code></a></li><li><a href="#banner" class="role-reference"><code>banner</code></a></li><li><a href="#blockquote" class="role-reference"><code>blockquote</code></a></li><li><a href="#button" class="role-reference"><code>button</code></a> (name required)</li><li><a href="#cell" class="role-reference"><code>cell</code></a></li><li><a href="#checkbox" class="role-reference"><code>checkbox</code></a> (name required)</li><li><a href="#columnheader" class="role-reference"><code>columnheader</code></a> (name required)</li><li><a href="#combobox" class="role-reference"><code>combobox</code></a> (name required)</li><li><a href="#comment" class="role-reference"><code>comment</code></a></li><li><a href="#complementary" class="role-reference"><code>complementary</code></a></li><li><a href="#contentinfo" class="role-reference"><code>contentinfo</code></a></li><li><a href="#dialog" class="role-reference"><code>dialog</code></a> (name required)</li><li><a href="#directory" class="role-reference"><code>directory</code></a></li><li><a href="#document" class="role-reference"><code>document</code></a></li><li><a href="#feed" class="role-reference"><code>feed</code></a></li><li><a href="#figure" class="role-reference"><code>figure</code></a></li><li><a href="#form" class="role-reference"><code>form</code></a> (name required)</li><li><a href="#grid" class="role-reference"><code>grid</code></a> (name required)</li><li><a href="#gridcell" class="role-reference"><code>gridcell</code></a></li><li><a href="#group" class="role-reference"><code>group</code></a></li><li><a href="#heading" class="role-reference"><code>heading</code></a> (name required)</li><li><a href="#image" class="role-reference"><code>image</code></a> (name required)</li><li><a href="#link" class="role-reference"><code>link</code></a> (name required)</li><li><a href="#list" class="role-reference"><code>list</code></a></li><li><a href="#listbox" class="role-reference"><code>listbox</code></a> (name required)</li><li><a href="#listitem" class="role-reference"><code>listitem</code></a></li><li><a href="#log" class="role-reference"><code>log</code></a></li><li><a href="#main" class="role-reference"><code>main</code></a></li><li><a href="#marquee" class="role-reference"><code>marquee</code></a></li><li><a href="#math" class="role-reference"><code>math</code></a></li><li><a href="#menu" class="role-reference"><code>menu</code></a></li><li><a href="#menubar" class="role-reference"><code>menubar</code></a></li><li><a href="#menuitem" class="role-reference"><code>menuitem</code></a> (name required)</li><li><a href="#menuitemcheckbox" class="role-reference"><code>menuitemcheckbox</code></a> (name required)</li><li><a href="#menuitemradio" class="role-reference"><code>menuitemradio</code></a> (name required)</li><li><a href="#meter" class="role-reference"><code>meter</code></a> (name required)</li><li><a href="#navigation" class="role-reference"><code>navigation</code></a></li><li><a href="#note" class="role-reference"><code>note</code></a></li><li><a href="#option" class="role-reference"><code>option</code></a> (name required)</li><li><a href="#progressbar" class="role-reference"><code>progressbar</code></a> (name required)</li><li><a href="#radio" class="role-reference"><code>radio</code></a> (name required)</li><li><a href="#radiogroup" class="role-reference"><code>radiogroup</code></a> (name required)</li><li><a href="#region" class="role-reference"><code>region</code></a> (name required)</li><li><a href="#row" class="role-reference"><code>row</code></a></li><li><a href="#rowgroup" class="role-reference"><code>rowgroup</code></a></li><li><a href="#rowheader" class="role-reference"><code>rowheader</code></a> (name required)</li><li><a href="#scrollbar" class="role-reference"><code>scrollbar</code></a></li><li><a href="#search" class="role-reference"><code>search</code></a></li><li><a href="#searchbox" class="role-reference"><code>searchbox</code></a> (name required)</li><li><a href="#sectionfooter" class="role-reference"><code>sectionfooter</code></a></li><li><a href="#sectionheader" class="role-reference"><code>sectionheader</code></a></li><li><a href="#separator" class="role-reference"><code>separator</code></a></li><li><a href="#slider" class="role-reference"><code>slider</code></a> (name required)</li><li><a href="#spinbutton" class="role-reference"><code>spinbutton</code></a> (name required)</li><li><a href="#status" class="role-reference"><code>status</code></a></li><li><a href="#switch" class="role-reference"><code>switch</code></a> (name required)</li><li><a href="#tab" class="role-reference"><code>tab</code></a> (name required)</li><li><a href="#table" class="role-reference"><code>table</code></a> (name required)</li><li><a href="#tablist" class="role-reference"><code>tablist</code></a></li><li><a href="#tabpanel" class="role-reference"><code>tabpanel</code></a> (name required)</li><li><a href="#textbox" class="role-reference"><code>textbox</code></a> (name required)</li><li><a href="#timer" class="role-reference"><code>timer</code></a></li><li><a href="#toolbar" class="role-reference"><code>toolbar</code></a></li><li><a href="#tooltip" class="role-reference"><code>tooltip</code></a></li><li><a href="#tree" class="role-reference"><code>tree</code></a> (name required)</li><li><a href="#treegrid" class="role-reference"><code>treegrid</code></a> (name required)</li><li><a href="#treeitem" class="role-reference"><code>treeitem</code></a> (name required)</li></ul> </section> <section id="namefromcontent"><div class="header-wrapper"><h5 id="x5-2-8-5-roles-supporting-name-from-content"><bdi class="secno">5.2.8.5 </bdi>Roles Supporting Name from Content</h5><a class="self-link" href="#namefromcontent" aria-label="Permalink for Section 5.2.8.5"></a></div> <ul id="index_fromcontent" class="compact"><li><a href="#button" class="role-reference"><code>button</code></a> (name required)</li><li><a href="#cell" class="role-reference"><code>cell</code></a></li><li><a href="#checkbox" class="role-reference"><code>checkbox</code></a> (name required)</li><li><a href="#columnheader" class="role-reference"><code>columnheader</code></a> (name required)</li><li><a href="#comment" class="role-reference"><code>comment</code></a></li><li><a href="#gridcell" class="role-reference"><code>gridcell</code></a></li><li><a href="#heading" class="role-reference"><code>heading</code></a> (name required)</li><li><a href="#link" class="role-reference"><code>link</code></a> (name required)</li><li><a href="#menuitem" class="role-reference"><code>menuitem</code></a> (name required)</li><li><a href="#menuitemcheckbox" class="role-reference"><code>menuitemcheckbox</code></a> (name required)</li><li><a href="#menuitemradio" class="role-reference"><code>menuitemradio</code></a> (name required)</li><li><a href="#option" class="role-reference"><code>option</code></a> (name required)</li><li><a href="#radio" class="role-reference"><code>radio</code></a> (name required)</li><li><a href="#row" class="role-reference"><code>row</code></a></li><li><a href="#rowheader" class="role-reference"><code>rowheader</code></a> (name required)</li><li><a href="#switch" class="role-reference"><code>switch</code></a> (name required)</li><li><a href="#tab" class="role-reference"><code>tab</code></a> (name required)</li><li><a href="#tooltip" class="role-reference"><code>tooltip</code></a></li><li><a href="#treeitem" class="role-reference"><code>treeitem</code></a> (name required)</li></ul> </section> <section id="namefromprohibited"><div class="header-wrapper"><h5 id="x5-2-8-6-roles-which-cannot-be-named-name-prohibited"><bdi class="secno">5.2.8.6 </bdi>Roles which cannot be named (Name prohibited)</h5><a class="self-link" href="#namefromprohibited" aria-label="Permalink for Section 5.2.8.6"></a></div> <ul id="index_fromprohibited" class="compact"><li><a href="#caption" class="role-reference"><code>caption</code></a></li><li><a href="#code" class="role-reference"><code>code</code></a></li><li><a href="#definition" class="role-reference"><code>definition</code></a></li><li><a href="#deletion" class="role-reference"><code>deletion</code></a></li><li><a href="#emphasis" class="role-reference"><code>emphasis</code></a></li><li><a href="#generic" class="role-reference"><code>generic</code></a></li><li><a href="#insertion" class="role-reference"><code>insertion</code></a></li><li><a href="#mark" class="role-reference"><code>mark</code></a></li><li><a href="#none" class="role-reference"><code>none</code></a></li><li><a href="#paragraph" class="role-reference"><code>paragraph</code></a></li><li><a href="#strong" class="role-reference"><code>strong</code></a></li><li><a href="#subscript" class="role-reference"><code>subscript</code></a></li><li><a href="#suggestion" class="role-reference"><code>suggestion</code></a></li><li><a href="#superscript" class="role-reference"><code>superscript</code></a></li><li><a href="#term" class="role-reference"><code>term</code></a></li><li><a href="#time" class="role-reference"><code>time</code></a></li></ul> </section> </section> <section id="childrenArePresentational"><div class="header-wrapper"><h4 id="x5-2-9-presentational-children"><bdi class="secno">5.2.9 </bdi>Presentational Children</h4><a class="self-link" href="#childrenArePresentational" aria-label="Permalink for Section 5.2.9"></a></div> <dl class="runin"> <dt>Values</dt> <dd> <p>Boolean (<code>true</code> | <code>false</code>)</p> </dd> </dl> <p>The <abbr title="Document Object Model">DOM</abbr> descendants are presentational. <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agents</a> <em class="rfc2119">SHOULD NOT</em> expose descendants of this <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> through the platform <a href="#dfn-accessibility-api" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-api-14">accessibility <abbr title="Application Programing Interface">API</abbr></a>. If <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agents</a> do not hide the descendant nodes, some information might be read twice.</p> <p>Authors <em class="rfc2119">MUST NOT</em> specify <a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a> on an element which has Presentational Children.</p> </section> <section id="implictValueForRole"><div class="header-wrapper"><h4 id="x5-2-10-implicit-value-for-role"><bdi class="secno">5.2.10 </bdi>Implicit Value for Role</h4><a class="self-link" href="#implictValueForRole" aria-label="Permalink for Section 5.2.10"></a></div> <p>Many states and properties have default values. Occasionally, the default value when used on a given role should be different from the usual default. Roles that require a state or property to have a non-standard default value indicate this in the "Implicit Value for Role". This is expressed in the form "Default for <code>state or property name</code> is <code>new default value</code>". Roles that define this have the new default value for the state or property if the author does not provide an explicit value.</p> </section> </section> <section id="roles_categorization"><div class="header-wrapper"><h3 id="x5-3-categorization-of-roles"><bdi class="secno">5.3 </bdi>Categorization of Roles</h3><a class="self-link" href="#roles_categorization" aria-label="Permalink for Section 5.3"></a></div> <p>To support the current user scenario, this specification categorizes <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-24">roles</a> that define user interface <a href="#dfn-widget" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-widget-11">widgets</a> (sliders, tree controls, etc.) and those that define page structure (sections, navigation, etc.). Note that some assistive technologies provide special modes of interaction for regions marked with role <code>application</code> or <code>document</code>.</p> <p>A visual description of the relationships among roles is available in the <a href="https://www.w3.org/WAI/ARIA/1.2/class-diagram/"><abbr title="Accessible Rich Internet Applications">ARIA</abbr> 1.2 Class Diagram</a>.</p> <p>Roles are categorized as follows:</p> <ol> <li><a href="#abstract_roles">Abstract Roles</a></li> <li><a href="#widget_roles">Widget Roles</a></li> <li><a href="#document_structure_roles">Document Structure Roles</a></li> <li><a href="#landmark_roles">Landmark Roles</a></li> <li><a href="#live_region_roles">Live Region Roles</a></li> <li><a href="#window_roles">Window Roles</a></li> </ol> <section id="abstract_roles"><div class="header-wrapper"><h4 id="x5-3-1-abstract-roles"><bdi class="secno">5.3.1 </bdi>Abstract Roles</h4><a class="self-link" href="#abstract_roles" aria-label="Permalink for Section 5.3.1"></a></div> <p>The following <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-25">roles</a> are used to support the <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> Roles Model for the purpose of defining general role concepts.</p> <p>Abstract roles are used for the ontology. Authors <em class="rfc2119">MUST NOT</em> use abstract roles in content.</p> <ul> <li><a href="https://w3c.github.io/aria/#command" class="role-reference"><code>command</code></a></li> <li><a href="https://w3c.github.io/aria/#composite" class="role-reference"><code>composite</code></a></li> <li><a href="https://w3c.github.io/aria/#input" class="role-reference"><code>input</code></a></li> <li><a href="https://w3c.github.io/aria/#landmark" class="role-reference"><code>landmark</code></a></li> <li><a href="https://w3c.github.io/aria/#range" class="role-reference"><code>range</code></a></li> <li><a href="https://w3c.github.io/aria/#roletype" class="role-reference"><code>roletype</code></a></li> <li><a href="https://w3c.github.io/aria/#section" class="role-reference"><code>section</code></a></li> <li><a href="https://w3c.github.io/aria/#sectionhead" class="role-reference"><code>sectionhead</code></a></li> <li><a href="https://w3c.github.io/aria/#select" class="role-reference"><code>select</code></a></li> <li><a href="https://w3c.github.io/aria/#structure" class="role-reference"><code>structure</code></a></li> <li><a href="https://w3c.github.io/aria/#widget" class="role-reference"><code>widget</code></a></li> <li><a href="https://w3c.github.io/aria/#window" class="role-reference"><code>window</code></a></li> </ul> </section> <section id="widget_roles"><div class="header-wrapper"><h4 id="x5-3-2-widget-roles"><bdi class="secno">5.3.2 </bdi>Widget Roles</h4><a class="self-link" href="#widget_roles" aria-label="Permalink for Section 5.3.2"></a></div> <p>The following roles act as standalone user interface widgets or as part of larger, composite widgets.</p> <ul> <li><a href="https://w3c.github.io/aria/#button" class="role-reference"><code>button</code></a></li> <li><a href="https://w3c.github.io/aria/#checkbox" class="role-reference"><code>checkbox</code></a></li> <li><a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a></li> <li><a href="https://w3c.github.io/aria/#link" class="role-reference"><code>link</code></a></li> <li><a href="https://w3c.github.io/aria/#menuitem" class="role-reference"><code>menuitem</code></a></li> <li><a href="https://w3c.github.io/aria/#menuitemcheckbox" class="role-reference"><code>menuitemcheckbox</code></a></li> <li><a href="https://w3c.github.io/aria/#menuitemradio" class="role-reference"><code>menuitemradio</code></a></li> <li><a href="https://w3c.github.io/aria/#option" class="role-reference"><code>option</code></a></li> <li><a href="https://w3c.github.io/aria/#progressbar" class="role-reference"><code>progressbar</code></a></li> <li><a href="https://w3c.github.io/aria/#radio" class="role-reference"><code>radio</code></a></li> <li><a href="https://w3c.github.io/aria/#scrollbar" class="role-reference"><code>scrollbar</code></a></li> <li><a href="https://w3c.github.io/aria/#searchbox" class="role-reference"><code>searchbox</code></a></li> <li><a href="https://w3c.github.io/aria/#separator" class="role-reference"><code>separator</code></a> (when focusable)</li> <li><a href="https://w3c.github.io/aria/#slider" class="role-reference"><code>slider</code></a></li> <li><a href="https://w3c.github.io/aria/#spinbutton" class="role-reference"><code>spinbutton</code></a></li> <li><a href="https://w3c.github.io/aria/#switch" class="role-reference"><code>switch</code></a></li> <li><a href="https://w3c.github.io/aria/#tab" class="role-reference"><code>tab</code></a></li> <li><a href="https://w3c.github.io/aria/#tabpanel" class="role-reference"><code>tabpanel</code></a></li> <li><a href="https://w3c.github.io/aria/#textbox" class="role-reference"><code>textbox</code></a></li> <li><a href="https://w3c.github.io/aria/#treeitem" class="role-reference"><code>treeitem</code></a></li> </ul> <p>The following roles act as composite user interface widgets. These roles typically act as containers that manage other, contained widgets.</p> <ul> <li><a href="https://w3c.github.io/aria/#combobox" class="role-reference"><code>combobox</code></a></li> <li><a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a></li> <li><a href="https://w3c.github.io/aria/#listbox" class="role-reference"><code>listbox</code></a></li> <li><a href="https://w3c.github.io/aria/#menu" class="role-reference"><code>menu</code></a></li> <li><a href="https://w3c.github.io/aria/#menubar" class="role-reference"><code>menubar</code></a></li> <li><a href="https://w3c.github.io/aria/#radiogroup" class="role-reference"><code>radiogroup</code></a></li> <li><a href="https://w3c.github.io/aria/#tablist" class="role-reference"><code>tablist</code></a></li> <li><a href="https://w3c.github.io/aria/#tree" class="role-reference"><code>tree</code></a></li> <li><a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a></li> </ul> </section> <section id="document_structure_roles"><div class="header-wrapper"><h4 id="x5-3-3-document-structure-roles"><bdi class="secno">5.3.3 </bdi>Document Structure Roles</h4><a class="self-link" href="#document_structure_roles" aria-label="Permalink for Section 5.3.3"></a></div> <p>The following <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-26">roles</a> describe structures that organize content in a page. Document structures are not usually interactive.</p> <ul> <li><a href="https://w3c.github.io/aria/#application" class="role-reference"><code>application</code></a></li> <li><a href="https://w3c.github.io/aria/#article" class="role-reference"><code>article</code></a></li> <li><a href="https://w3c.github.io/aria/#blockquote" class="role-reference"><code>blockquote</code></a></li> <li><a href="https://w3c.github.io/aria/#caption" class="role-reference"><code>caption</code></a></li> <li><a href="https://w3c.github.io/aria/#cell" class="role-reference"><code>cell</code></a></li> <li><a href="https://w3c.github.io/aria/#code" class="role-reference"><code>code</code></a></li> <li><a href="https://w3c.github.io/aria/#columnheader" class="role-reference"><code>columnheader</code></a></li> <li><a href="https://w3c.github.io/aria/#comment" class="role-reference"><code>comment</code></a></li> <li><a href="https://w3c.github.io/aria/#definition" class="role-reference"><code>definition</code></a></li> <li><a href="https://w3c.github.io/aria/#deletion" class="role-reference"><code>deletion</code></a></li> <li><a href="https://w3c.github.io/aria/#directory" class="role-reference"><code>directory</code></a></li> <li><a href="https://w3c.github.io/aria/#document" class="role-reference"><code>document</code></a></li> <li><a href="https://w3c.github.io/aria/#emphasis" class="role-reference"><code>emphasis</code></a></li> <li><a href="https://w3c.github.io/aria/#feed" class="role-reference"><code>feed</code></a></li> <li><a href="https://w3c.github.io/aria/#figure" class="role-reference"><code>figure</code></a></li> <li><a href="https://w3c.github.io/aria/#generic" class="role-reference"><code>generic</code></a></li> <li><a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a></li> <li><a href="https://w3c.github.io/aria/#heading" class="role-reference"><code>heading</code></a></li> <li><a href="https://w3c.github.io/aria/#img" class="role-reference"><code>img</code></a></li> <li><a href="https://w3c.github.io/aria/#insertion" class="role-reference"><code>insertion</code></a></li> <li><a href="https://w3c.github.io/aria/#list" class="role-reference"><code>list</code></a></li> <li><a href="https://w3c.github.io/aria/#listitem" class="role-reference"><code>listitem</code></a></li> <li><a href="https://w3c.github.io/aria/#mark" class="role-reference"><code>mark</code></a></li> <li><a href="https://w3c.github.io/aria/#math" class="role-reference"><code>math</code></a></li> <li><a href="https://w3c.github.io/aria/#meter" class="role-reference"><code>meter</code></a></li> <li><a href="https://w3c.github.io/aria/#none" class="role-reference"><code>none</code></a></li> <li><a href="https://w3c.github.io/aria/#note" class="role-reference"><code>note</code></a></li> <li><a href="https://w3c.github.io/aria/#paragraph" class="role-reference"><code>paragraph</code></a></li> <li><a href="https://w3c.github.io/aria/#presentation" class="role-reference"><code>presentation</code></a></li> <li><a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a></li> <li><a href="https://w3c.github.io/aria/#rowgroup" class="role-reference"><code>rowgroup</code></a></li> <li><a href="https://w3c.github.io/aria/#rowheader" class="role-reference"><code>rowheader</code></a></li> <li><a href="https://w3c.github.io/aria/#separator" class="role-reference"><code>separator</code></a> (when not focusable)</li> <li><a href="https://w3c.github.io/aria/#strong" class="role-reference"><code>strong</code></a></li> <li><a href="https://w3c.github.io/aria/#subscript" class="role-reference"><code>subscript</code></a></li> <li><a href="https://w3c.github.io/aria/#suggestion" class="role-reference"><code>suggestion</code></a></li> <li><a href="https://w3c.github.io/aria/#superscript" class="role-reference"><code>superscript</code></a></li> <li><a href="https://w3c.github.io/aria/#table" class="role-reference"><code>table</code></a></li> <li><a href="https://w3c.github.io/aria/#term" class="role-reference"><code>term</code></a></li> <li><a href="https://w3c.github.io/aria/#time" class="role-reference"><code>time</code></a></li> <li><a href="https://w3c.github.io/aria/#toolbar" class="role-reference"><code>toolbar</code></a></li> <li><a href="https://w3c.github.io/aria/#tooltip" class="role-reference"><code>tooltip</code></a></li> </ul> </section> <section id="landmark_roles"><div class="header-wrapper"><h4 id="x5-3-4-landmark-roles"><bdi class="secno">5.3.4 </bdi>Landmark Roles</h4><a class="self-link" href="#landmark_roles" aria-label="Permalink for Section 5.3.4"></a></div> <p>The following <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-27">roles</a> are regions of the page intended as navigational <a href="#dfn-landmark" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-landmark-2">landmarks</a>. All of these roles inherit from the <code>landmark</code> base type and all are imported from the <cite><a href="https://www.w3.org/TR/role-attribute/#s_role_module_attributes">Role Attribute</a></cite> [<cite><a class="bibref" data-link-type="biblio" href="#bib-role-attribute" title="Role Attribute 1.0">ROLE-ATTRIBUTE</a></cite>]. The roles are included here in order to make them clearly part of the <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> Roles Model.</p> <ul> <li><a href="https://w3c.github.io/aria/#banner" class="role-reference"><code>banner</code></a></li> <li><a href="https://w3c.github.io/aria/#complementary" class="role-reference"><code>complementary</code></a></li> <li><a href="https://w3c.github.io/aria/#contentinfo" class="role-reference"><code>contentinfo</code></a></li> <li><a href="https://w3c.github.io/aria/#form" class="role-reference"><code>form</code></a></li> <li><a href="https://w3c.github.io/aria/#main" class="role-reference"><code>main</code></a></li> <li><a href="https://w3c.github.io/aria/#navigation" class="role-reference"><code>navigation</code></a></li> <li><a href="https://w3c.github.io/aria/#region" class="role-reference"><code>region</code></a></li> <li><a href="https://w3c.github.io/aria/#search" class="role-reference"><code>search</code></a></li> </ul> </section> <section id="live_region_roles"><div class="header-wrapper"><h4 id="x5-3-5-live-region-roles"><bdi class="secno">5.3.5 </bdi>Live Region Roles</h4><a class="self-link" href="#live_region_roles" aria-label="Permalink for Section 5.3.5"></a></div> <p>The following <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-28">roles</a> are <a href="#dfn-live-region" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-live-region-1">live regions</a> and can be modified by <a href="#attrs_liveregions">live region attributes</a>.</p> <ul> <li><a href="https://w3c.github.io/aria/#alert" class="role-reference"><code>alert</code></a></li> <li><a href="https://w3c.github.io/aria/#log" class="role-reference"><code>log</code></a></li> <li><a href="https://w3c.github.io/aria/#marquee" class="role-reference"><code>marquee</code></a></li> <li><a href="https://w3c.github.io/aria/#status" class="role-reference"><code>status</code></a></li> <li><a href="https://w3c.github.io/aria/#timer" class="role-reference"><code>timer</code></a></li> </ul> </section> <section id="window_roles"><div class="header-wrapper"><h4 id="x5-3-6-window-roles"><bdi class="secno">5.3.6 </bdi>Window Roles</h4><a class="self-link" href="#window_roles" aria-label="Permalink for Section 5.3.6"></a></div> <p>The following <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-29">roles</a> act as windows within the browser or application.</p> <ul> <li><a href="https://w3c.github.io/aria/#alertdialog" class="role-reference"><code>alertdialog</code></a></li> <li><a href="https://w3c.github.io/aria/#dialog" class="role-reference"><code>dialog</code></a></li> </ul> </section> </section> <section id="role_definitions"><div class="header-wrapper"><h3 id="x5-4-definition-of-roles"><bdi class="secno">5.4 </bdi>Definition of Roles</h3><a class="self-link" href="#role_definitions" aria-label="Permalink for Section 5.4"></a></div> <p>Below is an alphabetical list of <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-30">roles</a>.</p> <p>Abstract roles are used for the ontology. Authors <em class="rfc2119">MUST NOT</em> use abstract roles in content.</p> <dl id="index_role" class="compact"><dt><a href="#alert" class="role-reference"><code>alert</code></a></dt> <dd>A type of <a href="#dfn-live-region" class="internalDFN" data-link-type="dfn">live region</a> with important, and usually time-sensitive, information. See related <a href="https://w3c.github.io/aria/#alertdialog" class="role-reference"><code>alertdialog</code></a> and <a href="https://w3c.github.io/aria/#status" class="role-reference"><code>status</code></a>.</dd> <dt><a href="#alertdialog" class="role-reference"><code>alertdialog</code></a></dt> <dd>A type of dialog that contains an alert message, where initial focus goes to an <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> within the dialog. See related <a href="https://w3c.github.io/aria/#alert" class="role-reference"><code>alert</code></a> and <a href="https://w3c.github.io/aria/#dialog" class="role-reference"><code>dialog</code></a>.</dd> <dt><a href="#application" class="role-reference"><code>application</code></a></dt> <dd>A <a href="https://w3c.github.io/aria/#structure" class="role-reference"><code>structure</code></a> containing one or more focusable elements requiring user input, such as keyboard or gesture events, that do not follow a standard interaction pattern supported by a <a href="https://w3c.github.io/aria/#widget" class="role-reference"><code>widget</code></a> role.</dd> <dt><a href="#article" class="role-reference"><code>article</code></a></dt> <dd>A section of a page that consists of a composition that forms an independent part of a document, page, or site.</dd> <dt><a href="#banner" class="role-reference"><code>banner</code></a></dt> <dd>A <a href="https://w3c.github.io/aria/#landmark" class="role-reference"><code>landmark</code></a> that contains mostly site-oriented content, rather than page-specific content.</dd> <dt><a href="#blockquote" class="role-reference"><code>blockquote</code></a></dt> <dd>A section of content that is quoted from another source.</dd> <dt><a href="#button" class="role-reference"><code>button</code></a></dt> <dd>An input that allows for user-triggered actions when clicked or pressed. See related <a href="https://w3c.github.io/aria/#link" class="role-reference"><code>link</code></a>.</dd> <dt><a href="#caption" class="role-reference"><code>caption</code></a></dt> <dd>Visible content that names, or describes a <a href="https://w3c.github.io/aria/#figure" class="role-reference"><code>figure</code></a>, <a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a>, <a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a>, <a href="https://w3c.github.io/aria/#radiogroup" class="role-reference"><code>radiogroup</code></a>, <a href="https://w3c.github.io/aria/#table" class="role-reference"><code>table</code></a> or <a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a>.</dd> <dt><a href="#cell" class="role-reference"><code>cell</code></a></dt> <dd>A cell in a tabular container. See related <a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a>.</dd> <dt><a href="#checkbox" class="role-reference"><code>checkbox</code></a></dt> <dd>A checkable input that has three possible <span>values</span>: <code>true</code>, <code>false</code>, or <code>mixed</code>.</dd> <dt><a href="#code" class="role-reference"><code>code</code></a></dt> <dd>A section whose content represents a fragment of computer code.</dd> <dt><a href="#columnheader" class="role-reference"><code>columnheader</code></a></dt> <dd>A cell containing header information for a column.</dd> <dt><a href="#combobox" class="role-reference"><code>combobox</code></a></dt> <dd>An <a href="https://w3c.github.io/aria/#input" class="role-reference"><code>input</code></a> that controls another element, such as a <a href="https://w3c.github.io/aria/#listbox" class="role-reference"><code>listbox</code></a> or <a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a>, that can dynamically pop up to help the user set the value of the <a href="https://w3c.github.io/aria/#input" class="role-reference"><code>input</code></a>.</dd> <dt><a href="#command" class="role-reference"><code>command</code></a></dt> <dd>A form of widget that performs an action but does not receive input data.</dd> <dt><a href="#comment" class="role-reference"><code>comment</code></a></dt> <dd>A comment contains content expressing reaction to other content.</dd> <dt><a href="#complementary" class="role-reference"><code>complementary</code></a></dt> <dd>A <a href="https://w3c.github.io/aria/#landmark" class="role-reference"><code>landmark</code></a> that is designed to be complementary to the main content that it is a sibling to, or a direct descendant of. The contents of a complementary landmark would be expected to remain meaningful if it were to be separated from the main content it is relevant to.</dd> <dt><a href="#composite" class="role-reference"><code>composite</code></a></dt> <dd>A <a href="#dfn-widget" class="internalDFN" data-link-type="dfn">widget</a> that can contain navigable <a href="#dfn-accessibility-descendant" class="internalDFN" data-link-type="dfn">accessibility descendants</a>.</dd> <dt><a href="#contentinfo" class="role-reference"><code>contentinfo</code></a></dt> <dd>A <a href="https://w3c.github.io/aria/#landmark" class="role-reference"><code>landmark</code></a> that contains information about the parent document.</dd> <dt><a href="#definition" class="role-reference"><code>definition</code></a></dt> <dd>A definition of a term or concept. See related <a href="https://w3c.github.io/aria/#term" class="role-reference"><code>term</code></a>.</dd> <dt><a href="#deletion" class="role-reference"><code>deletion</code></a></dt> <dd>A deletion represents content that is marked as removed, content that is being suggested for removal, or content that is no longer relevant in the context of its accompanying content. See related <a href="https://w3c.github.io/aria/#insertion" class="role-reference"><code>insertion</code></a>.</dd> <dt><a href="#dialog" class="role-reference"><code>dialog</code></a></dt> <dd>A dialog is a descendant window of the primary window of a web application. For <abbr title="Hypertext Markup Language">HTML</abbr> pages, the primary application window is the entire web document.</dd> <dt><a href="#directory" class="role-reference"><code>directory</code></a></dt> <dd>[Deprecated in <abbr title="Accessible Rich Internet Applications">ARIA</abbr> 1.2] A list of references to members of a group, such as a static table of contents.</dd> <dt><a href="#document" class="role-reference"><code>document</code></a></dt> <dd>An <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> containing content that <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn">assistive technology</a> users might want to browse in a reading mode.</dd> <dt><a href="#emphasis" class="role-reference"><code>emphasis</code></a></dt> <dd>One or more emphasized characters. See related <a href="https://w3c.github.io/aria/#strong" class="role-reference"><code>strong</code></a>.</dd> <dt><a href="#feed" class="role-reference"><code>feed</code></a></dt> <dd>A scrollable <a href="https://w3c.github.io/aria/#list" class="role-reference"><code>list</code></a> of <a href="https://w3c.github.io/aria/#article" class="role-reference"><code>articles</code></a> where scrolling might cause <a href="https://w3c.github.io/aria/#article" class="role-reference"><code>articles</code></a> to be added to or removed from either end of the list.</dd> <dt><a href="#figure" class="role-reference"><code>figure</code></a></dt> <dd>A perceivable <a href="https://w3c.github.io/aria/#section" class="role-reference"><code>section</code></a> of content that typically contains a <a href="#dfn-graphical-document" class="internalDFN" data-link-type="dfn">graphical document</a>, images, media player, code snippets, or example text. The parts of a <code>figure</code> <em class="rfc2119">MAY</em> be user-navigable.</dd> <dt><a href="#form" class="role-reference"><code>form</code></a></dt> <dd>A <a href="https://w3c.github.io/aria/#landmark" class="role-reference"><code>landmark</code></a> region that contains a collection of items and objects that, as a whole, combine to create a form. See related <a href="https://w3c.github.io/aria/#search" class="role-reference"><code>search</code></a>.</dd> <dt><a href="#generic" class="role-reference"><code>generic</code></a></dt> <dd>A nameless container <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> that has no semantic meaning on its own.</dd> <dt><a href="#grid" class="role-reference"><code>grid</code></a></dt> <dd>A composite <a href="https://w3c.github.io/aria/#widget" class="role-reference"><code>widget</code></a> containing a collection of one or more rows with one or more cells where some or all cells in the grid are focusable by using methods of two-dimensional navigation, such as directional arrow keys.</dd> <dt><a href="#gridcell" class="role-reference"><code>gridcell</code></a></dt> <dd>A <a href="https://w3c.github.io/aria/#cell" class="role-reference"><code>cell</code></a> in a <a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a> or <a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a>.</dd> <dt><a href="#group" class="role-reference"><code>group</code></a></dt> <dd>A set of user interface <a href="#dfn-object" class="internalDFN" data-link-type="dfn">objects</a> that is not intended to be included in a page summary or table of contents by <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn">assistive technologies</a>.</dd> <dt><a href="#heading" class="role-reference"><code>heading</code></a></dt> <dd>A heading for a section of the page.</dd> <dt><a href="#image" class="role-reference"><code>image</code></a></dt> <dd>A container for a collection of <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a> that form an image. See synonym <a href="https://w3c.github.io/aria/#img" class="role-reference"><code>img</code></a>.</dd> <dt><a href="#img" class="role-reference"><code>img</code></a></dt> <dd>A container for a collection of <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a> that form an image. See synonym <a href="https://w3c.github.io/aria/#image" class="role-reference"><code>image</code></a>.</dd> <dt><a href="#input" class="role-reference"><code>input</code></a></dt> <dd>A generic type of <a href="#dfn-widget" class="internalDFN" data-link-type="dfn">widget</a> that allows user input.</dd> <dt><a href="#insertion" class="role-reference"><code>insertion</code></a></dt> <dd>An insertion contains content that is marked as added or content that is being suggested for addition. See related <a href="https://w3c.github.io/aria/#deletion" class="role-reference"><code>deletion</code></a>.</dd> <dt><a href="#landmark" class="role-reference"><code>landmark</code></a></dt> <dd>A perceivable <a href="https://w3c.github.io/aria/#section" class="role-reference"><code>section</code></a> containing content that is relevant to a specific, author-specified purpose and sufficiently important that users will likely want to be able to navigate to the section easily and to have it listed in a summary of the page. Such a page summary could be generated dynamically by a user agent or assistive technology.</dd> <dt><a href="#link" class="role-reference"><code>link</code></a></dt> <dd>An interactive reference to an internal or external resource that, when activated, causes the user agent to navigate to that resource. See related <a href="https://w3c.github.io/aria/#button" class="role-reference"><code>button</code></a>.</dd> <dt><a href="#list" class="role-reference"><code>list</code></a></dt> <dd>A <a href="https://w3c.github.io/aria/#section" class="role-reference"><code>section</code></a> containing <a href="https://w3c.github.io/aria/#listitem" class="role-reference"><code>listitem</code></a> elements. See related <a href="https://w3c.github.io/aria/#listbox" class="role-reference"><code>listbox</code></a>.</dd> <dt><a href="#listbox" class="role-reference"><code>listbox</code></a></dt> <dd>A <a href="#dfn-widget" class="internalDFN" data-link-type="dfn">widget</a> that allows the user to select one or more items from a list of choices. See related <a href="https://w3c.github.io/aria/#combobox" class="role-reference"><code>combobox</code></a> and <a href="https://w3c.github.io/aria/#list" class="role-reference"><code>list</code></a>.</dd> <dt><a href="#listitem" class="role-reference"><code>listitem</code></a></dt> <dd>A single item in a list or directory.</dd> <dt><a href="#log" class="role-reference"><code>log</code></a></dt> <dd>A type of <a href="#dfn-live-region" class="internalDFN" data-link-type="dfn">live region</a> where new information is added in meaningful order and old information can disappear. See related <a href="https://w3c.github.io/aria/#marquee" class="role-reference"><code>marquee</code></a>.</dd> <dt><a href="#main" class="role-reference"><code>main</code></a></dt> <dd>A <a href="https://w3c.github.io/aria/#landmark" class="role-reference"><code>landmark</code></a> containing the main content of a document.</dd> <dt><a href="#mark" class="role-reference"><code>mark</code></a></dt> <dd>Content which is marked or highlighted for reference or notation purposes, due to the content's relevance in the enclosing context.</dd> <dt><a href="#marquee" class="role-reference"><code>marquee</code></a></dt> <dd>A type of <a href="#dfn-live-region" class="internalDFN" data-link-type="dfn">live region</a> where non-essential information changes frequently. See related <a href="https://w3c.github.io/aria/#log" class="role-reference"><code>log</code></a>.</dd> <dt><a href="#math" class="role-reference"><code>math</code></a></dt> <dd>Content that represents a mathematical expression.</dd> <dt><a href="#menu" class="role-reference"><code>menu</code></a></dt> <dd>A type of <a href="#dfn-widget" class="internalDFN" data-link-type="dfn">widget</a> that offers a list of choices to the user.</dd> <dt><a href="#menubar" class="role-reference"><code>menubar</code></a></dt> <dd>A presentation of <a href="https://w3c.github.io/aria/#menu" class="role-reference"><code>menu</code></a> that usually remains visible and is usually presented horizontally.</dd> <dt><a href="#menuitem" class="role-reference"><code>menuitem</code></a></dt> <dd>An option in a set of choices contained by a <a href="https://w3c.github.io/aria/#menu" class="role-reference"><code>menu</code></a> or <a href="https://w3c.github.io/aria/#menubar" class="role-reference"><code>menubar</code></a>.</dd> <dt><a href="#menuitemcheckbox" class="role-reference"><code>menuitemcheckbox</code></a></dt> <dd>A <a href="https://w3c.github.io/aria/#menuitem" class="role-reference"><code>menuitem</code></a> with a checkable state whose possible <span>values</span> are <code>true</code>, <code>false</code>, or <code>mixed</code>.</dd> <dt><a href="#menuitemradio" class="role-reference"><code>menuitemradio</code></a></dt> <dd>A checkable <a href="https://w3c.github.io/aria/#menuitem" class="role-reference"><code>menuitem</code></a> in a set of elements with the same role, only one of which can be checked at a time.</dd> <dt><a href="#meter" class="role-reference"><code>meter</code></a></dt> <dd>An <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> that represents a scalar measurement within a known range, or a fractional value. See related <a href="https://w3c.github.io/aria/#progressbar" class="role-reference"><code>progressbar</code></a>.</dd> <dt><a href="#navigation" class="role-reference"><code>navigation</code></a></dt> <dd>A <a href="https://w3c.github.io/aria/#landmark" class="role-reference"><code>landmark</code></a> containing a collection of navigational <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a> (usually links) for navigating the document or related documents.</dd> <dt><a href="#none" class="role-reference"><code>none</code></a></dt> <dd>An <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> whose implicit native role semantics will not be mapped to the <a href="#dfn-accessibility-api" class="internalDFN" data-link-type="dfn">accessibility <abbr title="Application Programing Interfaces">API</abbr></a>. See synonym <a href="https://w3c.github.io/aria/#presentation" class="role-reference"><code>presentation</code></a>.</dd> <dt><a href="#note" class="role-reference"><code>note</code></a></dt> <dd>A <a href="https://w3c.github.io/aria/#section" class="role-reference"><code>section</code></a> whose content represents additional information or parenthetical context to the primary content it supplements.</dd> <dt><a href="#option" class="role-reference"><code>option</code></a></dt> <dd>An item in a <a href="https://w3c.github.io/aria/#listbox" class="role-reference"><code>listbox</code></a>.</dd> <dt><a href="#paragraph" class="role-reference"><code>paragraph</code></a></dt> <dd>A paragraph of content.</dd> <dt><a href="#presentation" class="role-reference"><code>presentation</code></a></dt> <dd>An <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> whose implicit native role semantics will not be mapped to the <a href="#dfn-accessibility-api" class="internalDFN" data-link-type="dfn">accessibility <abbr title="Application Programing Interfaces">API</abbr></a>. See synonym <a href="https://w3c.github.io/aria/#none" class="role-reference"><code>none</code></a>.</dd> <dt><a href="#progressbar" class="role-reference"><code>progressbar</code></a></dt> <dd>An <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> that displays the progress status for tasks that take a long time.</dd> <dt><a href="#radio" class="role-reference"><code>radio</code></a></dt> <dd>A checkable input in a group of elements with the same role, only one of which can be checked at a time.</dd> <dt><a href="#radiogroup" class="role-reference"><code>radiogroup</code></a></dt> <dd>A group of <a href="https://w3c.github.io/aria/#radio" class="role-reference"><code>radio</code></a> buttons.</dd> <dt><a href="#range" class="role-reference"><code>range</code></a></dt> <dd>An element representing a range of values.</dd> <dt><a href="#region" class="role-reference"><code>region</code></a></dt> <dd>A <a href="https://w3c.github.io/aria/#landmark" class="role-reference"><code>landmark</code></a> containing content that is relevant to a specific, author-specified purpose and sufficiently important that users will likely want to be able to navigate to the section easily and to have it listed in a summary of the page. Such a page summary could be generated dynamically by a user agent or assistive technology.</dd> <dt><a href="#roletype" class="role-reference"><code>roletype</code></a></dt> <dd>The base <a href="#dfn-role" class="internalDFN" data-link-type="dfn">role</a> from which all other roles inherit.</dd> <dt><a href="#row" class="role-reference"><code>row</code></a></dt> <dd>A row of cells in a tabular container.</dd> <dt><a href="#rowgroup" class="role-reference"><code>rowgroup</code></a></dt> <dd>A structure containing one or more row elements in a tabular container.</dd> <dt><a href="#rowheader" class="role-reference"><code>rowheader</code></a></dt> <dd>A cell containing header information for a row.</dd> <dt><a href="#scrollbar" class="role-reference"><code>scrollbar</code></a></dt> <dd>A graphical object that controls the scrolling of content within a viewing area, regardless of whether the content is fully displayed within the viewing area.</dd> <dt><a href="#search" class="role-reference"><code>search</code></a></dt> <dd>A <a href="https://w3c.github.io/aria/#landmark" class="role-reference"><code>landmark</code></a> region that contains a collection of items and objects that, as a whole, combine to create a search facility. See related <a href="https://w3c.github.io/aria/#form" class="role-reference"><code>form</code></a> and <a href="https://w3c.github.io/aria/#searchbox" class="role-reference"><code>searchbox</code></a>.</dd> <dt><a href="#searchbox" class="role-reference"><code>searchbox</code></a></dt> <dd>A type of textbox intended for specifying search criteria. See related <a href="https://w3c.github.io/aria/#textbox" class="role-reference"><code>textbox</code></a> and <a href="https://w3c.github.io/aria/#search" class="role-reference"><code>search</code></a>.</dd> <dt><a href="#section" class="role-reference"><code>section</code></a></dt> <dd>A renderable structural containment unit on a page.</dd> <dt><a href="#sectionfooter" class="role-reference"><code>sectionfooter</code></a></dt> <dd>A set of user interface objects and information representing information about its closest ancestral content group. For instance, a <code>sectionfooter</code> can include information about who wrote the specific section of content, such as an <a href="https://w3c.github.io/aria/#article" class="role-reference"><code>article</code></a>. It can contain links to related documents, copyright information or other indices and colophon specific to the current section of the page.</dd> <dt><a href="#sectionhead" class="role-reference"><code>sectionhead</code></a></dt> <dd>A structure that labels or summarizes the topic of its related section.</dd> <dt><a href="#sectionheader" class="role-reference"><code>sectionheader</code></a></dt> <dd>A set of user interface objects and information that represents a collection of introductory items for the element's closest ancestral content group. For instance, a <code>sectionheader</code> can include the heading, introductory statement and related meta data for a section of content, for instance a <a href="https://w3c.github.io/aria/#region" class="role-reference"><code>region</code></a> or <a href="https://w3c.github.io/aria/#article" class="role-reference"><code>article</code></a>, within a web page.</dd> <dt><a href="#select" class="role-reference"><code>select</code></a></dt> <dd>A form widget that allows the user to make selections from a set of choices.</dd> <dt><a href="#separator" class="role-reference"><code>separator</code></a></dt> <dd>A divider that separates and distinguishes sections of content or groups of menuitems.</dd> <dt><a href="#slider" class="role-reference"><code>slider</code></a></dt> <dd>An input where the user selects a value from within a given range.</dd> <dt><a href="#spinbutton" class="role-reference"><code>spinbutton</code></a></dt> <dd>A form of <a href="https://w3c.github.io/aria/#range" class="role-reference"><code>range</code></a> that expects the user to select from among discrete choices.</dd> <dt><a href="#status" class="role-reference"><code>status</code></a></dt> <dd>A type of <a href="#dfn-live-region" class="internalDFN" data-link-type="dfn">live region</a> whose content is advisory information for the user but is not important enough to justify an <a href="https://w3c.github.io/aria/#alert" class="role-reference"><code>alert</code></a>, often but not necessarily presented as a status bar.</dd> <dt><a href="#strong" class="role-reference"><code>strong</code></a></dt> <dd>Content that is important, serious, or urgent. See related <a href="https://w3c.github.io/aria/#emphasis" class="role-reference"><code>emphasis</code></a>.</dd> <dt><a href="#structure" class="role-reference"><code>structure</code></a></dt> <dd>A document structural <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a>.</dd> <dt><a href="#subscript" class="role-reference"><code>subscript</code></a></dt> <dd>One or more subscripted characters. See related <a href="https://w3c.github.io/aria/#superscript" class="role-reference"><code>superscript</code></a>.</dd> <dt><a href="#suggestion" class="role-reference"><code>suggestion</code></a></dt> <dd>A single proposed change to content.</dd> <dt><a href="#superscript" class="role-reference"><code>superscript</code></a></dt> <dd>One or more superscripted characters. See related <a href="https://w3c.github.io/aria/#subscript" class="role-reference"><code>subscript</code></a>.</dd> <dt><a href="#switch" class="role-reference"><code>switch</code></a></dt> <dd>A type of checkbox that represents on/off values, as opposed to checked/unchecked values. See related <a href="https://w3c.github.io/aria/#checkbox" class="role-reference"><code>checkbox</code></a>.</dd> <dt><a href="#tab" class="role-reference"><code>tab</code></a></dt> <dd>A grouping label providing a mechanism for selecting the tab content that is to be rendered to the user.</dd> <dt><a href="#table" class="role-reference"><code>table</code></a></dt> <dd>A <a href="https://w3c.github.io/aria/#section" class="role-reference"><code>section</code></a> containing data arranged in rows and columns. See related <a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a>.</dd> <dt><a href="#tablist" class="role-reference"><code>tablist</code></a></dt> <dd>A list of <a href="https://w3c.github.io/aria/#tab" class="role-reference"><code>tab</code></a> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a>, which are references to <a href="https://w3c.github.io/aria/#tabpanel" class="role-reference"><code>tabpanel</code></a> elements.</dd> <dt><a href="#tabpanel" class="role-reference"><code>tabpanel</code></a></dt> <dd>A container for the resources associated with a <a href="https://w3c.github.io/aria/#tab" class="role-reference"><code>tab</code></a>, where each <a href="https://w3c.github.io/aria/#tab" class="role-reference"><code>tab</code></a> is contained in a <a href="https://w3c.github.io/aria/#tablist" class="role-reference"><code>tablist</code></a>.</dd> <dt><a href="#term" class="role-reference"><code>term</code></a></dt> <dd>A word or phrase with an optional corresponding definition. See related <a href="https://w3c.github.io/aria/#definition" class="role-reference"><code>definition</code></a>.</dd> <dt><a href="#textbox" class="role-reference"><code>textbox</code></a></dt> <dd>A type of input that allows free-form text as its value.</dd> <dt><a href="#time" class="role-reference"><code>time</code></a></dt> <dd>An element that represents a specific point in time.</dd> <dt><a href="#timer" class="role-reference"><code>timer</code></a></dt> <dd>A type of <a href="#dfn-live-region" class="internalDFN" data-link-type="dfn">live region</a> containing a numerical counter which indicates an amount of elapsed time from a start point, or the time remaining until an end point.</dd> <dt><a href="#toolbar" class="role-reference"><code>toolbar</code></a></dt> <dd>A collection of commonly used function buttons or controls represented in compact visual form.</dd> <dt><a href="#tooltip" class="role-reference"><code>tooltip</code></a></dt> <dd>A contextual popup that displays a description for an element.</dd> <dt><a href="#tree" class="role-reference"><code>tree</code></a></dt> <dd>A <a href="https://w3c.github.io/aria/#widget" class="role-reference"><code>widget</code></a> that allows the user to select one or more items from a hierarchically organized collection.</dd> <dt><a href="#treegrid" class="role-reference"><code>treegrid</code></a></dt> <dd>A <a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a> whose rows can be expanded and collapsed in the same manner as for a <a href="https://w3c.github.io/aria/#tree" class="role-reference"><code>tree</code></a>.</dd> <dt><a href="#treeitem" class="role-reference"><code>treeitem</code></a></dt> <dd>An item in a <a href="https://w3c.github.io/aria/#tree" class="role-reference"><code>tree</code></a>.</dd> <dt><a href="#widget" class="role-reference"><code>widget</code></a></dt> <dd>An interactive component of a graphical user interface (<abbr title="Graphical User Interface">GUI</abbr>).</dd> <dt><a href="#window" class="role-reference"><code>window</code></a></dt> <dd>A browser or application window.</dd> </dl> <section class="role notoc" id="alert"> <h4 class="role-name" title="alert" aria-describedby="desc-alert"><code>alert</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-alert" role="definition"> <p>A type of <a href="#dfn-live-region" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-live-region-2">live region</a> with important, and usually time-sensitive, information. See related <a href="https://w3c.github.io/aria/#alertdialog" class="role-reference"><code>alertdialog</code></a> and <a href="https://w3c.github.io/aria/#status" class="role-reference"><code>status</code></a>.</p> <p>Alerts are used to convey messages that might be immediately important to users. In the case of audio warnings, alerts provide an accessible alternative for hearing-impaired users. The <code>alert</code> <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-31">role</a> is applied to the element containing the alert message. An <code>alert</code> is a specialized form of the <a href="https://w3c.github.io/aria/#status" class="role-reference"><code>status</code></a> role, which is processed as an atomic <a href="#dfn-live-region" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-live-region-3">live region</a>.</p> <p>Alerts are assertive live regions, which means they cause immediate notification for assistive technology users. If the operating system allows, the <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agent</a> <em class="rfc2119">SHOULD</em> fire a system alert <a href="#dfn-event" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-event-6">event</a> through the accessibility <abbr title="application programming interface">API</abbr> when the <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> alert is created.</p> <p>Neither authors nor user agents are required to set or manage focus to an alert in order for it to be processed. Since alerts are not required to receive focus, authors <em class="rfc2119">SHOULD NOT</em> require users to close an alert. If an author desires focus to move to a message when it is conveyed, the author <em class="rfc2119">SHOULD</em> use <a href="https://w3c.github.io/aria/#alertdialog" class="role-reference"><code>alertdialog</code></a> instead of <code>alert</code>.</p> <p>Elements with the role <code>alert</code> have an implicit <a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a> value of <code>assertive</code>, and an implicit <a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a> value of <code>true</code>.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#section" class="role-reference"><code>section</code></a></td> </tr> <tr> <th class="role-children-head" scope="row">Subclass Roles:</th> <td class="role-children"><ul> <li><a href="https://w3c.github.io/aria/#alertdialog" class="role-reference"><code>alertdialog</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> <tr> <th class="implicit-values-head">Implicit Value for Role:</th> <td class="implicit-values"> Default for <a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a> is <code class="default">assertive</code>.<br> Default for <a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a> is <code class="default">true</code>. </td> </tr> </tbody> </table> </section> <section class="role notoc" id="alertdialog"> <h4 class="role-name" title="alertdialog" aria-describedby="desc-alertdialog"><code>alertdialog</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-alertdialog" role="definition"> <p>A type of dialog that contains an alert message, where initial focus goes to an <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> within the dialog. See related <a href="https://w3c.github.io/aria/#alert" class="role-reference"><code>alert</code></a> and <a href="https://w3c.github.io/aria/#dialog" class="role-reference"><code>dialog</code></a>.</p> <p>Alert dialogs are used to convey messages to alert the user. The <code>alertdialog</code> <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-32">role</a> goes on the <a data-link-type="dfn" data-lt="nodes" href="https://dom.spec.whatwg.org/#concept-node">node</a> containing both the alert message and the rest of the dialog. Authors <em class="rfc2119">SHOULD</em> make alert dialogs modal by ensuring that, while the <code>alertdialog</code> is shown, keyboard and mouse interactions only operate within the dialog. See <a href="https://w3c.github.io/aria/#aria-modal" class="property-reference"><code>aria-modal</code></a>.</p> <p>Unlike <a href="https://w3c.github.io/aria/#alert" class="role-reference"><code>alert</code></a>, <code>alertdialog</code> can receive a response from the user. For example, to confirm that the user understands the alert being generated. When the alert dialog is displayed, authors <em class="rfc2119">SHOULD</em> set focus to an active element within the alert dialog, such as a form control or confirmation button. The <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agent</a> <em class="rfc2119">SHOULD</em> fire a system alert <a href="#dfn-event" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-event-7">event</a> through the accessibility <abbr title="application programming interface">API</abbr> when the alert is created, provided one is specified by the intended <a href="#dfn-accessibility-api" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-api-15">accessibility <abbr title="Application Programing Interfaces">API</abbr></a>.</p> <p>Authors <em class="rfc2119">SHOULD</em> use <a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a> on an <code>alertdialog</code> to reference the alert message element in the dialog. If they do not, an <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-16">assistive technology</a> can resort to its internal recovery mechanism to determine the contents of the alert message.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"> <ul> <li><a href="https://w3c.github.io/aria/#alert" class="role-reference"><code>alert</code></a></li> <li><a href="https://w3c.github.io/aria/#dialog" class="role-reference"><code>dialog</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-modal" class="property-reference"><code>aria-modal</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> <tr> <th class="role-namerequired-head" scope="row">Accessible Name Required:</th> <td class="role-namerequired">True</td> </tr> </tbody> </table> </section> <section class="role notoc" id="application"> <h4 class="role-name" title="application" aria-describedby="desc-application"><code>application</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-application" role="definition"> <p>A <a href="https://w3c.github.io/aria/#structure" class="role-reference"><code>structure</code></a> containing one or more focusable elements requiring user input, such as keyboard or gesture events, that do not follow a standard interaction pattern supported by a <a href="https://w3c.github.io/aria/#widget" class="role-reference"><code>widget</code></a> role.</p> <p>Some <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agents</a> and <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-17">assistive technologies</a> have a browse mode where standard input events, such as up and down arrow key events, are intercepted and used to control a reading cursor. This browse mode behavior prevents elements that do not have a <a href="https://w3c.github.io/aria/#widget" class="role-reference"><code>widget</code></a> role from receiving and using such keyboard and gesture events to provide interactive functionality.</p> <p>When there is a need to create an element with an interaction model that is not supported by any of the <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> <a href="https://w3c.github.io/aria/#widget" class="role-reference"><code>widget</code></a> roles, authors <em class="rfc2119">MAY</em> give that element role <code>application</code>. And, when a user navigates into an element with role <code>application</code>, <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-18">assistive technologies</a> that intercept standard input events <em class="rfc2119">SHOULD</em> switch to a mode that passes most or all standard input events through to the web application.</p> <p>For example, a presentation slide editor uses arrow keys to change the positions of textbox and image elements on the slide. There are not any <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> <a href="https://w3c.github.io/aria/#widget" class="role-reference"><code>widget</code></a> roles that correspond to such an interaction model so an author could give the slide container role <code>application</code>, an <a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a> of "Slide Editor", and use <a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a> to provide instructions.</p> <p> Because only the focusable elements contained in an <code>application</code> element are accessible to users of some assistive technologies, authors <em class="rfc2119">MUST</em> use one of the following techniques to ensure all non-decorative static text or image content inside an application is accessible:</p> <ol> <li>Associate the content with a focusable element using <a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a> or <a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a>.</li> <li>Place the content in a focusable element that has role <a href="https://w3c.github.io/aria/#document" class="role-reference"><code>document</code></a> or <a href="https://w3c.github.io/aria/#article" class="role-reference"><code>article</code></a>.</li> <li>Manage focus of <a href="#dfn-accessibility-descendant" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-descendant-5">accessibility descendants</a> as described in <a href="#managingfocus">Managing Focus</a>, updating the value of <a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a> to reference the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> containing the focused content.</li> </ol> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#structure" class="role-reference"><code>structure</code></a></td> </tr> <tr> <th class="role-properties-head" scope="row">Supported States and Properties:</th> <td class="role-properties"> <ul> <li><a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-expanded" class="state-reference"><code>aria-expanded</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> <tr> <th class="role-namerequired-head" scope="row">Accessible Name Required:</th> <td class="role-namerequired">True</td> </tr> </tbody> </table> </section> <section class="role notoc" id="article"> <h4 class="role-name" title="article" aria-describedby="desc-article"><code>article</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-article" role="definition"> <p>A section of a page that consists of a composition that forms an independent part of a document, page, or site.</p> <p>An article is not a navigational <a href="#dfn-landmark" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-landmark-3">landmark</a>, but can be nested to form a discussion where assistive technologies could pay attention to article nesting to assist the user in following the discussion. An article could be a forum post, a magazine or newspaper article, a web log entry, a user-submitted comment, or any other independent item of content. It is <em>independent</em> in that its contents could stand alone, for example in syndication. However, the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> is still associated with its ancestors; for instance, contact information that applies to a parent body element still covers the article as well. When nesting articles, the child articles represent content that is related to the content of the parent article. For instance, a web log entry on a site that accepts user-submitted comments could represent the comments as articles nested within the article for the web log entry. Author, heading, date, or other information associated with an article does not apply to nested articles.</p> <p>When the user navigates to an element assigned the role of <code>article</code>, <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-19">assistive technologies</a> that typically intercept standard keyboard events <em class="rfc2119">SHOULD</em> switch to document browsing mode, as opposed to passing keyboard events through to the web application. Some assistive technologies provide a feature allowing the user to navigate the hierarchy of any nested <code>article</code> elements.</p> <p>When an <code>article</code> is in the context of a <a href="https://w3c.github.io/aria/#feed" class="role-reference"><code>feed</code></a>, the author <em class="rfc2119">MAY</em> specify values for <a href="https://w3c.github.io/aria/#aria-posinset" class="property-reference"><code>aria-posinset</code></a> and <a href="https://w3c.github.io/aria/#aria-setsize" class="property-reference"><code>aria-setsize</code></a>.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#document" class="role-reference"><code>document</code></a></td> </tr> <tr> <th class="role-children-head" scope="row">Subclass Roles:</th> <td class="role-children"><ul> <li><a href="https://w3c.github.io/aria/#comment" class="role-reference"><code>comment</code></a></li> </ul> </td> </tr> <tr> <th class="role-related-head" scope="row">Related Concepts:</th> <td class="role-related"><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/sections.html#the-article-element">article</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="role-properties-head" scope="row">Supported States and Properties:</th> <td class="role-properties"> <ul> <li><a href="https://w3c.github.io/aria/#aria-posinset" class="property-reference"><code>aria-posinset</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-setsize" class="property-reference"><code>aria-setsize</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> </tbody> </table> </section> <section class="role notoc" id="banner"> <h4 class="role-name" title="banner" aria-describedby="desc-banner"><code>banner</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-banner" role="definition"> <p>A <a href="https://w3c.github.io/aria/#landmark" class="role-reference"><code>landmark</code></a> that contains mostly site-oriented content, rather than page-specific content.</p> <p>Site-oriented content typically includes things such as the logo or identity of the site sponsor, and a site-specific search tool. A banner usually appears at the top of the page and typically spans the full width.</p> <p><a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-20">Assistive technologies</a> <em class="rfc2119">SHOULD</em> enable users to quickly navigate to elements with role <code>banner</code>. <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agents</a> <em class="rfc2119">SHOULD</em> treat elements with role <code>banner</code> as navigational <a href="#dfn-landmark" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-landmark-4">landmarks</a>. <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agents</a> <em class="rfc2119">MAY</em> enable users to quickly navigate to elements with role <code>banner</code>.</p> <p>The author <em class="rfc2119">SHOULD</em> mark no more than one <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> on a page with the <code>banner</code> <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-33">role</a>.</p> <div class="note" role="note" id="issue-container-generatedID-9"><div role="heading" class="note-title marker" id="h-note-9" aria-level="4"><span>Note</span></div><p class="">Because <code>document</code> and <code>application</code> elements can be nested in the <abbr title="Document Object Model">DOM</abbr>, they can have multiple <code>banner</code> elements as <abbr title="Document Object Model">DOM</abbr> descendants, assuming each of those is associated with different document nodes, either by a <abbr title="Document Object Model">DOM</abbr> nesting (e.g., <a href="https://w3c.github.io/aria/#document" class="role-reference"><code>document</code></a> within <a href="https://w3c.github.io/aria/#document" class="role-reference"><code>document</code></a>) or by use of the <a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attribute</a>.</p></div> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#landmark" class="role-reference"><code>landmark</code></a></td> </tr> <tr> <th class="role-related-head" scope="row">Related Concepts:</th> <td class="role-related"><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/sections.html#the-header-element">header</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> </tbody> </table> </section> <section class="role notoc" id="blockquote"> <h4 class="role-name" title="blockquote" aria-describedby="desc-blockquote"><code>blockquote</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-blockquote" role="definition"> <p>A section of content that is quoted from another source.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#section" class="role-reference"><code>section</code></a></td> </tr> <tr> <th class="role-related-head" scope="row">Related Concepts:</th> <td class="role-related"><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element">blockquote</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> </tbody> </table> </section> <section class="role notoc" id="button"> <h4 class="role-name" title="button" aria-describedby="desc-button"><code>button</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-button" role="definition"> <p>An input that allows for user-triggered actions when clicked or pressed. See related <a href="https://w3c.github.io/aria/#link" class="role-reference"><code>link</code></a>.</p> <p>Buttons are mostly used for discrete actions. Standardizing the appearance of buttons enhances the user's recognition of the <a href="#dfn-widget" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-widget-12">widgets</a> as buttons and allows for a more compact display in toolbars.</p> <p>Buttons support the optional <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attribute</a> <a href="https://w3c.github.io/aria/#aria-pressed" class="state-reference"><code>aria-pressed</code></a>. Buttons with a non-empty <a href="https://w3c.github.io/aria/#aria-pressed" class="state-reference"><code>aria-pressed</code></a> attribute are toggle buttons. When <a href="https://w3c.github.io/aria/#aria-pressed" class="state-reference"><code>aria-pressed</code></a> is <code>true</code> the button is in a "pressed" <a href="#dfn-state" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-state-15">state</a>, when <a href="https://w3c.github.io/aria/#aria-pressed" class="state-reference"><code>aria-pressed</code></a> is <code>false</code> it is not pressed. If the attribute is not present, the button is a simple command button.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#command" class="role-reference"><code>command</code></a></td> </tr> <tr> <th class="role-base-head" scope="row">Base Concept:</th> <td class="role-base"><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/form-elements.html#the-button-element">button</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="role-related-head" scope="row">Related Concepts:</th> <td class="role-related"> <a href="https://w3c.github.io/aria/#link" class="role-reference"><code>link</code></a> </td> </tr> <tr> <th class="role-properties-head" scope="row">Supported States and Properties:</th> <td class="role-properties"> <ul> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-expanded" class="state-reference"><code>aria-expanded</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-pressed" class="state-reference"><code>aria-pressed</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom"> <ul> <li>contents</li> <li>author</li> </ul> </td> </tr> <tr> <th class="role-namerequired-head" scope="row">Accessible Name Required:</th> <td class="role-namerequired">True</td> </tr> <tr> <th class="role-childpresentational-head" scope="row">Children Presentational:</th> <td class="role-childpresentational">True</td> </tr> </tbody> </table> </section> <section class="role notoc" id="caption"> <h4 class="role-name" title="caption" aria-describedby="desc-caption"><code>caption</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-caption" role="definition"> <p>Visible content that names, or describes a <a href="https://w3c.github.io/aria/#figure" class="role-reference"><code>figure</code></a>, <a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a>, <a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a>, <a href="https://w3c.github.io/aria/#radiogroup" class="role-reference"><code>radiogroup</code></a>, <a href="https://w3c.github.io/aria/#table" class="role-reference"><code>table</code></a> or <a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a>.</p> <p>When using <code>caption</code> authors <em class="rfc2119">SHOULD</em> ensure:</p> <ul> <li>The <code>caption</code> is a descendant of a <a href="https://w3c.github.io/aria/#figure" class="role-reference"><code>figure</code></a>, <a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a>, <a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a>, <a href="https://w3c.github.io/aria/#radiogroup" class="role-reference"><code>radiogroup</code></a>, <a href="https://w3c.github.io/aria/#table" class="role-reference"><code>table</code></a>, or <a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a>.</li> <li>The <code>caption</code> is the first non-<code>generic</code> descendant of a <a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a>, <a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a>, <a href="https://w3c.github.io/aria/#radiogroup" class="role-reference"><code>radiogroup</code></a>, <a href="https://w3c.github.io/aria/#table" class="role-reference"><code>table</code></a> or <a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a>.</li> <li>The <code>caption</code> is the first or last non-<code>generic</code> descendant of a <a href="https://w3c.github.io/aria/#figure" class="role-reference"><code>figure</code></a>.</li> </ul> <p>If the <code>caption</code> represents an accessible name for its containing element, authors <em class="rfc2119">SHOULD</em> specify <a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a> on the containing element to reference the element with role <code>caption</code>.</p> <div class="example" id="example-5"> <div class="marker"> <a class="self-link" href="#example-5">Example<bdi> 5</bdi></a> </div> <pre class="highlight" aria-busy="false"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"radiogroup"</span> <span class="hljs-attr">aria-labelledby</span>=<span class="hljs-string">"cap"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"caption"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"cap"</span>></span> Choose your favorite fruit <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-comment"></span></code></pre> </div> <p>If a <code>caption</code> contains content that serves as both a name and description for its containing element, authors <em class="rfc2119">MAY</em> instead specify <a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a> to reference an element within the <code>caption</code> that represents the "name" of the containing element, and specify <a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a> to reference an element within the <code>caption</code> that represents the descriptive content.</p> <div class="example" id="example-6"> <div class="marker"> <a class="self-link" href="#example-6">Example<bdi> 6</bdi></a> </div> <pre class="highlight" aria-busy="false"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"table"</span> <span class="hljs-attr">aria-labelledby</span>=<span class="hljs-string">"name"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"desc"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"caption"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"name"</span>></span>Contest Entrants<span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"desc"</span>></span> This table shows the total number of entrants (500) the contest accepted over the past four weeks. <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-comment"></span></code></pre> </div> <p>If the <code>caption</code> represents a long-form description, or if the description contains semantic elements which are important in understanding the description, authors <em class="rfc2119">MAY</em> instead specify <a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a> to reference an element within the <code>caption</code> that represents the "name" of the containing element, and specify <a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a> to reference an element within the <code>caption</code> that represents the descriptive content.</p> <div class="example" id="example-7"> <div class="marker"> <a class="self-link" href="#example-7">Example<bdi> 7</bdi></a> </div> <pre class="highlight" aria-busy="false"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"figure"</span> <span class="hljs-attr">aria-labelledby</span>=<span class="hljs-string">"name"</span> <span class="hljs-attr">aria-details</span>=<span class="hljs-string">"details"</span>></span> <span class="hljs-comment"></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"caption"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"name"</span>></span>Sales information for 20XX<span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"details"</span>></span> This barchart represents the total amount of sales over the course of five years. <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"..."</span>></span>Sales information for last year<span class="hljs-tag"></<span class="hljs-name">a</span>></span> can be reviewed, or you can overlay <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-pressed</span>=<span class="hljs-string">"false"</span>></span>previous year<span class="hljs-tag"></<span class="hljs-name">button</span>></span> information in this graphic. <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-comment"></span></code></pre> </div> <p>If a <code>caption</code> contains only a description, without a suitable text string to serve as the accessible name for its containing element, then <a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a> or <a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a> <em class="rfc2119">MAY</em> be used to provide an accessible name, and the <code>caption</code> <em class="rfc2119">MAY</em> be treated solely as descriptive content, referenced via <a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a>. </p><div class="example" id="example-8"> <div class="marker"> <a class="self-link" href="#example-8">Example<bdi> 8</bdi></a> </div> <pre class="highlight" aria-busy="false"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"figure"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Sales information"</span> <span class="hljs-attr">aria-details</span>=<span class="hljs-string">"details"</span>></span> <span class="hljs-comment"></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"caption"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"details"</span>></span> This barchart represents the total amount of sales over the course of five years. <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"..."</span>></span>Sales information for last year<span class="hljs-tag"></<span class="hljs-name">a</span>></span> can be reviewed, or you can overlay <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-pressed</span>=<span class="hljs-string">"false"</span>></span>previous year<span class="hljs-tag"></<span class="hljs-name">button</span>></span> information in this graphic. <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-comment"></span></code></pre> </div> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#section" class="role-reference"><code>section</code></a></td> </tr> <tr> <th class="role-related-head" scope="row">Related Concepts:</th> <td class="role-related"> <ul> <li><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/tables.html#the-caption-element">caption</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></li> <li><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-figcaption-element">figcaption</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></li> <li><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/form-elements.html#the-legend-element">legend</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></li> </ul> </td> </tr> <tr> <th class="role-scope-head" scope="row">Required Accessibility Parent Roles:</th> <td class="role-scope"> <ul> <li><a href="https://w3c.github.io/aria/#figure" class="role-reference"><code>figure</code></a></li> <li><a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a></li> <li><a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a></li> <li><a href="https://w3c.github.io/aria/#radiogroup" class="role-reference"><code>radiogroup</code></a></li> <li><a href="https://w3c.github.io/aria/#table" class="role-reference"><code>table</code></a></li> <li><a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-disallowed-head" scope="row">Prohibited States and Properties:</th> <td class="role-disallowed"> <ul> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">prohibited</td> </tr> </tbody> </table> </section> <section class="role notoc" id="cell"> <h4 class="role-name" title="cell" aria-describedby="desc-cell"><code>cell</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-cell" role="definition"> <p>A cell in a tabular container. See related <a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a>.</p> <p>Authors <em class="rfc2119">MUST</em> ensure <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a> with <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-34">role</a> cell are the <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-child-4">accessibility children</a> of an element with the <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-35">role</a> <a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a>.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#section" class="role-reference"><code>section</code></a></td> </tr> <tr> <th class="role-children-head" scope="row">Subclass Roles:</th> <td class="role-children"><ul> <li><a href="https://w3c.github.io/aria/#columnheader" class="role-reference"><code>columnheader</code></a></li> <li><a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a></li> <li><a href="https://w3c.github.io/aria/#rowheader" class="role-reference"><code>rowheader</code></a></li> </ul> </td> </tr> <tr> <th class="role-base-head" scope="row">Base Concept:</th> <td class="role-base"><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/tables.html#the-td-element">td</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="role-scope-head" scope="row">Required Accessibility Parent Roles:</th> <td class="role-scope"><a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a></td> </tr> <tr> <th class="role-properties-head" scope="row">Supported States and Properties:</th> <td class="role-properties"> <ul> <li><a href="https://w3c.github.io/aria/#aria-colindex" class="property-reference"><code>aria-colindex</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-colindextext" class="property-reference"><code>aria-colindextext</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-colspan" class="property-reference"><code>aria-colspan</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-rowindex" class="property-reference"><code>aria-rowindex</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-rowindextext" class="property-reference"><code>aria-rowindextext</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-rowspan" class="property-reference"><code>aria-rowspan</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom"> <ul> <li>contents</li> <li>author</li> </ul> </td> </tr> </tbody> </table> </section> <section class="role notoc" id="checkbox"> <h4 class="role-name" title="checkbox" aria-describedby="desc-checkbox"><code>checkbox</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-checkbox" role="definition"> <p>A checkable input that has three possible <span>values</span>: <code>true</code>, <code>false</code>, or <code>mixed</code>.</p> <p>The <a href="https://w3c.github.io/aria/#aria-checked" class="state-reference"><code>aria-checked</code></a> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attribute</a> of a <code>checkbox</code> indicates whether the input is checked (<code>true</code>), unchecked (<code>false</code>), or represents a group of <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a> that have a mixture of checked and unchecked values (<code>mixed</code>). Many checkboxes do not use the <code>mixed</code> value, and thus are effectively boolean checkboxes.</p> <div class="note" role="note" id="issue-container-generatedID-10"><div role="heading" class="note-title marker" id="h-note-10" aria-level="4"><span>Note</span></div><p class=""> Due to the strong native semantics of <abbr title="Hypertext Markup Language">HTML</abbr>'s native checkbox, authors are advised against using <code>aria-checked</code> on an <code>input type=checkbox</code>. Rather, use the native <code>checked</code> attribute or the <code>indeterminate</code> IDL attribute to specify the checkbox's "checked" or "mixed" state, respectively. </p></div> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#input" class="role-reference"><code>input</code></a></td> </tr> <tr> <th class="role-children-head" scope="row">Subclass Roles:</th> <td class="role-children"><ul> <li><a href="https://w3c.github.io/aria/#switch" class="role-reference"><code>switch</code></a></li> </ul> </td> </tr> <tr> <th class="role-related-head" scope="row">Related Concepts:</th> <td class="role-related"> <ul> <li><code><input type="<code><a data-link-type="attr-value" href="https://html.spec.whatwg.org/multipage/input.html#attr-input-type-checkbox-keyword">checkbox</a></code>"></code> in <abbr title="Hypertext Markup Language">HTML</abbr></li> <li><a href="https://w3c.github.io/aria/#option" class="role-reference"><code>option</code></a></li> </ul> </td> </tr> <tr> <th class="role-required-properties-head">Required States and Properties:</th> <td class="role-required-properties"> <ul> <li><a href="https://w3c.github.io/aria/#aria-checked" class="state-reference"><code>aria-checked</code></a></li> </ul> </td> </tr> <tr> <th class="role-properties-head" scope="row">Supported States and Properties:</th> <td class="role-properties"> <ul> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-expanded" class="state-reference"><code>aria-expanded</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-readonly" class="property-reference"><code>aria-readonly</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-required" class="property-reference"><code>aria-required</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom"> <ul> <li>contents</li> <li>author</li> </ul> </td> </tr> <tr> <th class="role-namerequired-head" scope="row">Accessible Name Required:</th> <td class="role-namerequired">True</td> </tr> <tr> <th class="role-childpresentational-head" scope="row">Children Presentational:</th> <td class="role-childpresentational">True</td> </tr> </tbody> </table> </section> <section class="role notoc" id="code"> <h4 class="role-name" title="code" aria-describedby="desc-code"><code>code</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-code" role="definition"> <p>A section whose content represents a fragment of computer code.</p> <p>The primary purpose of the code role is to inform assistive technologies that the content is computer code and thus might require special presentation, in particular with respect to synthesized speech. More specifically, screen readers and other tools which provide text-to-speech presentation of content <em class="rfc2119">SHOULD</em> prefer full punctuation verbosity to ensure common symbols (e.g. "-") are spoken.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"> <a href="https://w3c.github.io/aria/#section" class="role-reference"><code>section</code></a> </td> </tr> <tr> <th class="role-related-head" scope="row">Related Concepts:</th> <td class="role-related"><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-code-element">code</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-disallowed-head" scope="row">Prohibited States and Properties:</th> <td class="role-disallowed"> <ul> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">prohibited</td> </tr> </tbody> </table> </section> <section class="role notoc" id="columnheader"> <h4 class="role-name" title="columnheader" aria-describedby="desc-columnheader"><code>columnheader</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-columnheader" role="definition"> <p>A cell containing header information for a column.</p> <p><code>columnheader</code> can be used as a column header in a table or grid. It could also be used in a pie chart to show a similar <a href="#dfn-relationship" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-relationship-3">relationship</a> in the data.</p> <p>The <code>columnheader</code> establishes a relationship between it and all cells in the corresponding column. It is the structural equivalent to an <abbr title="Hypertext Markup Language">HTML</abbr> <code>th</code> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> with a column scope.</p> <p>Authors <em class="rfc2119">MUST</em> ensure <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a> with <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-36">role</a> <code>columnheader</code> are the <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-child-5">accessibility children</a> of an element with the role <a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a>.</p> <p>Applying the <a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a> state on a columnheader <em class="rfc2119">MUST</em> not cause the user agent to automatically propagate the <a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a> state to all the cells in the corresponding column. An author <em class="rfc2119">MAY</em> choose to propagate selection in this manner depending on the specific application.</p> <p>While the <code>columnheader</code> role can be used in both interactive grids and non-interactive tables, the use of <a href="https://w3c.github.io/aria/#aria-readonly" class="property-reference"><code>aria-readonly</code></a> and <a href="https://w3c.github.io/aria/#aria-required" class="property-reference"><code>aria-required</code></a> is only applicable to interactive elements. Therefore, authors <em class="rfc2119">SHOULD NOT</em> use <a href="https://w3c.github.io/aria/#aria-required" class="property-reference"><code>aria-required</code></a> or <a href="https://w3c.github.io/aria/#aria-readonly" class="property-reference"><code>aria-readonly</code></a> in a <code>columnheader</code> that descends from a <a href="https://w3c.github.io/aria/#table" class="role-reference"><code>table</code></a>, and user agents <em class="rfc2119">SHOULD NOT</em> expose either property to <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-21">assistive technologies</a> unless the <code>columnheader</code> descends from a <a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a>.</p> <div class="note" role="note" id="issue-container-generatedID-11"><div role="heading" class="note-title marker" id="h-note-11" aria-level="4"><span>Note</span></div><p class="">Because cells are organized into rows, there is not a single container element for the column. The column is the set of <a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a> elements in a particular position within their respective <a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a> containers.</p></div> <div class="note" role="note" id="issue-container-generatedID-12"><div role="heading" class="note-title marker" id="h-note-12" aria-level="4"><span>Note</span><span class="issue-label">: Usage of aria-disabled</span></div><p class="">While <a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> is currently supported on <a href="https://w3c.github.io/aria/#columnheader" class="role-reference"><code>columnheader</code></a>, in a future version the working group plans to prohibit its use on elements with role <a href="https://w3c.github.io/aria/#columnheader" class="role-reference"><code>columnheader</code></a> except when the element is in the context of a <a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a> or <a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a>.</p></div> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"> <ul> <li><a href="https://w3c.github.io/aria/#cell" class="role-reference"><code>cell</code></a></li> <li><a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a></li> <li><a href="https://w3c.github.io/aria/#sectionhead" class="role-reference"><code>sectionhead</code></a></li> </ul> </td> </tr> <tr> <th class="role-base-head" scope="row">Base Concept:</th> <td><code><th scope="<code><a data-link-type="attr-value" href="https://html.spec.whatwg.org/multipage/tables.html#attr-th-scope-col">col</a></code>"></code> in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="role-scope-head" scope="row">Required Accessibility Parent Roles:</th> <td class="role-scope"><a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a></td> </tr> <tr> <th class="role-properties-head" scope="row">Supported States and Properties:</th> <td class="role-properties"><a href="https://w3c.github.io/aria/#aria-sort" class="property-reference"><code>aria-sort</code></a></td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-colindex" class="property-reference"><code>aria-colindex</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-colindextext" class="property-reference"><code>aria-colindextext</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-colspan" class="property-reference"><code>aria-colspan</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-expanded" class="state-reference"><code>aria-expanded</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-readonly" class="property-reference"><code>aria-readonly</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-required" class="property-reference"><code>aria-required</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-rowindex" class="property-reference"><code>aria-rowindex</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-rowindextext" class="property-reference"><code>aria-rowindextext</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-rowspan" class="property-reference"><code>aria-rowspan</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a> (state)</li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom"> <ul> <li>contents</li> <li>author</li> </ul> </td> </tr> <tr> <th class="role-namerequired-head" scope="row">Accessible Name Required:</th> <td class="role-namerequired">True</td> </tr> </tbody> </table> </section> <section class="role notoc" id="combobox"> <h4 class="role-name" title="combobox" aria-describedby="desc-combobox"><code>combobox</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-combobox" role="definition"> <p>An <a href="https://w3c.github.io/aria/#input" class="role-reference"><code>input</code></a> that controls another element, such as a <a href="https://w3c.github.io/aria/#listbox" class="role-reference"><code>listbox</code></a> or <a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a>, that can dynamically pop up to help the user set the value of the <a href="https://w3c.github.io/aria/#input" class="role-reference"><code>input</code></a>.</p> <div class="note" id="issue-container-generatedID-13"><div role="heading" class="ednote-title marker" id="h-ednote" aria-level="4"><span>Editor's note</span><span class="issue-label">: Major Changes to combobox role in ARIA 1.2</span></div><p class=""> The Guidance for <a href="https://w3c.github.io/aria/#combobox" class="role-reference"><code>combobox</code></a> has changed significantly in <abbr title="Accessible Rich Internet Applications">ARIA</abbr> 1.2 due to problems with implementation of the previous patterns. Authors and developers of User Agents, Assistive Technologies, and Conformance Checkers are advised to review this section carefully to understand the changes. Explanation of the changes is available in the <a href="https://github.com/w3c/aria/wiki/Resolving-ARIA-1.1-Combobox-Issues"><abbr title="Accessible Rich Internet Applications">ARIA</abbr> repository wiki</a>. </p></div> <p> A <code>combobox</code> functionally combines a named input field with the ability to assist value selection via a supplementary popup element. A <code>combobox</code> input <em class="rfc2119">MAY</em> be either a single-line text field that supports editing and typing or an element that only displays the current value of the <code>combobox</code>. If the <code>combobox</code> supports text input and provides autocompletion behavior as described in <a href="https://w3c.github.io/aria/#aria-autocomplete" class="property-reference"><code>aria-autocomplete</code></a>, authors <em class="rfc2119">MUST</em> set <a href="https://w3c.github.io/aria/#aria-autocomplete" class="property-reference"><code>aria-autocomplete</code></a> on the <code>combobox</code> element to the value that corresponds to the provided behavior. </p> <p> Typically, the initial state of a <code>combobox</code> is collapsed. In the collapsed state, only the <code>combobox</code> element and a separate, optional popup control <a href="https://w3c.github.io/aria/#button" class="role-reference"><code>button</code></a> are visible. A <code>combobox</code> is said to be expanded when both the <code>combobox</code> element showing its current value and its associated popup element are visible. Authors <em class="rfc2119">MUST</em> set <a href="https://w3c.github.io/aria/#aria-expanded" class="state-reference"><code>aria-expanded</code></a> to <code>true</code> on an element with role <code>combobox</code> when it is expanded and <code>false</code> when it is collapsed. </p> <p> Elements with the role <code>combobox</code> have an implicit <a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> value of <code>listbox</code>. If the <code>combobox</code> popup element has a role other than <a href="https://w3c.github.io/aria/#listbox" class="role-reference"><code>listbox</code></a>, authors <em class="rfc2119">MUST</em> specify an <a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> value of <a href="https://w3c.github.io/aria/#tree" class="role-reference"><code>tree</code></a>, <a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a>, or <a href="https://w3c.github.io/aria/#dialog" class="role-reference"><code>dialog</code></a> that corresponds to the role of its popup. </p> <p> If the user interface includes an additional icon that allows the visibility of the popup to be controlled via pointer and touch events, authors <em class="rfc2119">SHOULD</em> ensure that element has role <a href="https://w3c.github.io/aria/#button" class="role-reference"><code>button</code></a>, that it is focusable but not included in the page <kbd>Tab</kbd> sequence, and that it is not a descendant of the element with role <code>combobox</code>. In addition, to be keyboard accessible, authors <em class="rfc2119">SHOULD</em> provide keyboard mechanisms for moving focus between the <code>combobox</code> element and elements contained in the popup. For example, one common convention is that <kbd>Down Arrow</kbd> moves focus from the input to the first focusable descendant of the popup element. If the popup element supports <a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a>, in lieu of moving focus, such keyboard mechanisms can control the value of <a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a> on the <code>combobox</code> element. When a descendant of the popup element is active, authors <em class="rfc2119">MAY</em> set <a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a> on the <code>combobox</code> to a value that refers to the active element within the popup while focus remains on the <code>combobox</code> element. </p> <p> User agents <em class="rfc2119">MUST</em> expose the value of elements with role <code>combobox</code> to <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-22">assistive technologies</a>. The value of a <code>combobox</code> is represented by one of the following: </p> <ul> <li>If the <code>combobox</code> element is a host language element that provides a value, such as an <abbr title="Hypertext Markup Language">HTML</abbr> <code>input</code> element, the value of the combobox is the value of that element.</li> <li>Otherwise, the value of the <code>combobox</code> is represented by its descendant elements and can be determined using the same method used to compute the name of a <a href="https://w3c.github.io/aria/#button" class="role-reference"><code>button</code></a> from its descendant content.</li> </ul> <div class="example" id="example-9"> <div class="marker"> <a class="self-link" href="#example-9">Example<bdi> 9</bdi></a> </div> <pre class="highlight" aria-busy="false"><code class="hljs abnf"> <label id<span class="hljs-operator">=</span><span class="hljs-string">"tag_label"</span> for<span class="hljs-operator">=</span><span class="hljs-string">"tag_combo"</span>>Tag</label> <input type<span class="hljs-operator">=</span><span class="hljs-string">"text"</span> id<span class="hljs-operator">=</span><span class="hljs-string">"tag_combo"</span> role<span class="hljs-operator">=</span><span class="hljs-string">"combobox"</span> aria-autocomplete<span class="hljs-operator">=</span><span class="hljs-string">"list"</span> aria-haspopup<span class="hljs-operator">=</span><span class="hljs-string">"listbox"</span> aria-expanded<span class="hljs-operator">=</span><span class="hljs-string">"true"</span> aria-controls<span class="hljs-operator">=</span><span class="hljs-string">"popup_listbox"</span> aria-activedescendant<span class="hljs-operator">=</span><span class="hljs-string">"selected_option"</span>> <ul role<span class="hljs-operator">=</span><span class="hljs-string">"listbox"</span> id<span class="hljs-operator">=</span><span class="hljs-string">"popup_listbox"</span> aria-labelledby<span class="hljs-operator">=</span><span class="hljs-string">"tag_label"</span>> <li role<span class="hljs-operator">=</span><span class="hljs-string">"option"</span>>Zebra</li> <li role<span class="hljs-operator">=</span><span class="hljs-string">"option"</span> id<span class="hljs-operator">=</span><span class="hljs-string">"selected_option"</span>>Zoom</li> </ul></code></pre> </div> <div class="note" id="issue-container-generatedID-14"><div role="heading" class="ednote-title marker" id="h-ednote-0" aria-level="4"><span>Editor's note</span><span class="issue-label">: Validity changes combobox for ARIA 1.2</span></div><p class=""> Please review the following carefully. As a result of these changes a combobox following the <abbr title="Accessible Rich Internet Applications">ARIA</abbr> 1.1 combobox specification will no longer conform with the <abbr title="Accessible Rich Internet Applications">ARIA</abbr> specification. </p></div> <div class="note" role="note" id="issue-container-generatedID-15"><div role="heading" class="note-title marker" id="h-note-13" aria-level="4"><span>Note</span></div><div class=""> <p>The structural requirements for <code>combobox</code> defined by this version of the specification are different from the requirements defined by <abbr title="Accessible Rich Internet Applications">ARIA</abbr> 1.0 and <abbr title="Accessible Rich Internet Applications">ARIA</abbr> 1.1:</p> <ul> <li>The <abbr title="Accessible Rich Internet Applications">ARIA</abbr> 1.0 specification required the input element with the <code>combobox</code> role to be a single-line text field and reference the popup element with <a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a> instead of <a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a>.</li> <li>The <abbr title="Accessible Rich Internet Applications">ARIA</abbr> 1.1 specification, which was not broadly supported by assistive technologies, required the <code>combobox</code> to be a non-focusable element with two required <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-child-6">accessibility children</a> -- a focusable <a href="https://w3c.github.io/aria/#textbox" class="role-reference"><code>textbox</code></a> and a popup element controlled by the <a href="https://w3c.github.io/aria/#textbox" class="role-reference"><code>textbox</code></a>.</li> <li>The changes introduced in <abbr title="Accessible Rich Internet Applications">ARIA</abbr> 1.2 improve interoperability with assistive technologies and enable authors to create presentations of combobox that more closely imitate a native <abbr title="Hypertext Markup Language">HTML</abbr> <code>select</code> element.</li> </ul> </div></div> <p>The features and behaviors of combobox implementations vary widely. Consequently, there are many important authoring considerations. See the <cite><a href="https://www.w3.org/WAI/ARIA/apg/" class="practices"><abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices Guide</a></cite> for additional details on implementing combobox design patterns.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#input" class="role-reference"><code>input</code></a></td> </tr> <tr> <th class="role-related-head" scope="row">Related Concepts:</th> <td class="role-related"><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/form-elements.html#the-select-element">select</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="role-required-properties-head">Required States and Properties:</th> <td class="role-required-properties"> <a href="https://w3c.github.io/aria/#aria-expanded" class="state-reference"><code>aria-expanded</code></a> </td> </tr> <tr> <th class="role-properties-head" scope="row">Supported States and Properties:</th> <td class="role-properties"> <ul> <li><a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-autocomplete" class="property-reference"><code>aria-autocomplete</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-readonly" class="property-reference"><code>aria-readonly</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-required" class="property-reference"><code>aria-required</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> <tr> <th class="role-namerequired-head" scope="row">Accessible Name Required:</th> <td class="role-namerequired">True</td> </tr> <tr> <th class="implicit-values-head" scope="row">Implicit Value for Role:</th> <td class="implicit-values"> Default for <a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> is <code class="default">listbox</code>.<br> </td> </tr> </tbody> </table> </section> <section class="role notoc" id="command"> <h4 class="role-name" title="command" aria-describedby="desc-command"><code>command</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-command" role="definition"> <p>A form of widget that performs an action but does not receive input data.</p> <p><code>command</code> is an <a href="#isAbstract">abstract role</a> used for the ontology. Authors <em class="rfc2119">MUST NOT</em> use <code>commmand</code> role in content.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-abstract-head" scope="row">Is Abstract:</th> <td class="role-abstract">True</td> </tr> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#widget" class="role-reference"><code>widget</code></a></td> </tr> <tr> <th class="role-children-head" scope="row">Subclass Roles:</th> <td class="role-children"><ul> <li><a href="https://w3c.github.io/aria/#button" class="role-reference"><code>button</code></a></li> <li><a href="https://w3c.github.io/aria/#link" class="role-reference"><code>link</code></a></li> <li><a href="https://w3c.github.io/aria/#menuitem" class="role-reference"><code>menuitem</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> </tbody> </table> </section> <section class="role notoc" id="comment"> <h4 class="role-name" title="comment" aria-describedby="desc-comment"><code>comment</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-comment" role="definition"> <p>A comment contains content expressing reaction to other content.</p> <p>Comments can annotate any visible content, from small spans of text, to other comments, to entire articles. Authors <em class="rfc2119">SHOULD</em> identify the relationships between comments and the commented content, as follows:</p> <ol> <li>If the comment is a reply to another <code>comment</code>: <ul> <li>If all ancestor comments are available in the <abbr title="Document Object Model">DOM</abbr>, make each reply <code>comment</code> a semantic descendant of the <code>comment</code> to which it is replying, either by making it a <abbr title="Document Object Model">DOM</abbr> descendant element or by using <a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a>.</li> <li>Alternatively, if all ancestor comments are not in the <abbr title="Document Object Model">DOM</abbr>, such as when comments are paginated, the hierarchical level <em class="rfc2119">MAY</em> be indicated via <a href="https://w3c.github.io/aria/#aria-level" class="property-reference"><code>aria-level</code></a>. Additional group positional information <em class="rfc2119">MAY</em> be indicated via <a href="https://w3c.github.io/aria/#aria-posinset" class="property-reference"><code>aria-posinset</code></a> and <a href="https://w3c.github.io/aria/#aria-setsize" class="property-reference"><code>aria-setsize</code></a>.</li> </ul> </li> <li>Otherwise, if the comment relates to other content in the page: <ul> <li>Provide <a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a> on the element containing the commented content with a value refering to the element with role <code>comment</code>.</li> <li>If there are multiple comments related to the same commented content, either provide a value for <a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a> on the commented content that refers to each individual comment, or use <a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a> to refer to a parent container of the comments. If <a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a> refers to an element containing comments rather than <code>comment</code> elements, authors <em class="rfc2119">SHOULD</em> assign a role of <a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a> or <a href="https://w3c.github.io/aria/#region" class="role-reference"><code>region</code></a> to the referenced container.</li> </ul> </li> </ol> <p>If the author has not explicitly declared <a href="https://w3c.github.io/aria/#aria-level" class="property-reference"><code>aria-level</code></a>, <a href="https://w3c.github.io/aria/#aria-posinset" class="property-reference"><code>aria-posinset</code></a>, or <a href="https://w3c.github.io/aria/#aria-setsize" class="property-reference"><code>aria-setsize</code></a> for a <code>comment</code> element, user agents <em class="rfc2119">MUST</em> automatically compute the missing values and expose them to assistive technologies.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#article" class="role-reference"><code>article</code></a></td> </tr> <tr> <th class="role-properties-head" scope="row">Supported States and Properties:</th> <td class="role-properties"> <ul> <li><a href="https://w3c.github.io/aria/#aria-level" class="property-reference"><code>aria-level</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-posinset" class="property-reference"><code>aria-posinset</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-setsize" class="property-reference"><code>aria-setsize</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom"> <ul> <li>contents</li> <li>author</li> </ul> </td> </tr> </tbody> </table> </section> <section class="role notoc" id="complementary"> <h4 class="role-name" title="complementary" aria-describedby="desc-complementary"><code>complementary</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-complementary" role="definition"> <p>A <a href="https://w3c.github.io/aria/#landmark" class="role-reference"><code>landmark</code></a> that is designed to be complementary to the main content that it is a sibling to, or a direct descendant of. The contents of a complementary landmark would be expected to remain meaningful if it were to be separated from the main content it is relevant to.</p> <p>There are various types of content that would appropriately have this <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-37">role</a>. For example, in the case of a portal, this can include but not be limited to show times, current weather, related articles, or stocks to watch. If the complementary content is completely separable from the main content, it might be appropriate to use a more general role.</p> <p><a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-23">Assistive technologies</a> <em class="rfc2119">SHOULD</em> enable users to quickly navigate to elements with role <code>complementary</code>. <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agents</a> <em class="rfc2119">SHOULD</em> treat elements with role <code>complementary</code> as navigational <a href="#dfn-landmark" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-landmark-5">landmarks</a>. <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agents</a> <em class="rfc2119">MAY</em> enable users to quickly navigate to elements with role <code>complementary</code>.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#landmark" class="role-reference"><code>landmark</code></a></td> </tr> <tr> <th class="role-related-head" scope="row">Related Concepts:</th> <td class="role-related"><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/sections.html#the-aside-element">aside</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> </tbody> </table> </section> <section class="role notoc" id="composite"> <h4 class="role-name" title="composite" aria-describedby="desc-composite"><code>composite</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-composite" role="definition"> <p>A <a href="#dfn-widget" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-widget-13">widget</a> that can contain navigable <a href="#dfn-accessibility-descendant" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-descendant-6">accessibility descendants</a>.</p> <p>Authors <em class="rfc2119">SHOULD</em> ensure that a composite widget exists as a single navigation stop within the larger navigation system of the web page. Once the composite widget has focus, authors <em class="rfc2119">SHOULD</em> provide a separate navigation mechanism for users to navigate to <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a> that are <a href="#dfn-accessibility-descendant" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-descendant-7">accessibility descendants</a> of the composite element.</p> <p><code>composite</code> is an <a href="#isAbstract">abstract role</a> used for the ontology. Authors <em class="rfc2119">MUST NOT</em> use <code>composite</code> role in content.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-abstract-head" scope="row">Is Abstract:</th> <td class="role-abstract">True</td> </tr> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#widget" class="role-reference"><code>widget</code></a></td> </tr> <tr> <th class="role-children-head" scope="row">Subclass Roles:</th> <td class="role-children"><ul> <li><a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a></li> <li><a href="https://w3c.github.io/aria/#select" class="role-reference"><code>select</code></a></li> <li><a href="https://w3c.github.io/aria/#spinbutton" class="role-reference"><code>spinbutton</code></a></li> <li><a href="https://w3c.github.io/aria/#tablist" class="role-reference"><code>tablist</code></a></li> </ul> </td> </tr> <tr> <th class="role-properties-head" scope="row">Supported States and Properties:</th> <td class="role-properties"> <ul> <li><a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> </tbody> </table> </section> <section class="role notoc" id="contentinfo"> <h4 class="role-name" title="contentinfo" aria-describedby="desc-contentinfo"><code>contentinfo</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-contentinfo" role="definition"> <p>A <a href="https://w3c.github.io/aria/#landmark" class="role-reference"><code>landmark</code></a> that contains information about the parent document.</p> <p>Examples of information included in this region of the page are copyrights and links to privacy statements.</p> <p><a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-24">Assistive technologies</a> <em class="rfc2119">SHOULD</em> enable users to quickly navigate to elements with role <code>contentinfo</code>. <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agents</a> <em class="rfc2119">SHOULD</em> treat elements with role <code>contentinfo</code> as navigational <a href="#dfn-landmark" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-landmark-6">landmarks</a>. <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agents</a> <em class="rfc2119">MAY</em> enable users to quickly navigate to elements with role <code>contentinfo</code>.</p> <p>The author <em class="rfc2119">SHOULD</em> mark no more than one <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> on a page with the <code>contentinfo</code> role.</p> <div class="note" role="note" id="issue-container-generatedID-16"><div role="heading" class="note-title marker" id="h-note-14" aria-level="4"><span>Note</span></div><p class="">Because <code>document</code> and <code>application</code> elements can be nested in the <abbr title="Document Object Model">DOM</abbr>, they can have multiple <code>contentinfo</code> elements as <abbr title="Document Object Model">DOM</abbr> descendants, assuming each of those is associated with different document nodes, either by a <abbr title="Document Object Model">DOM</abbr> nesting (e.g., <a href="https://w3c.github.io/aria/#document" class="role-reference"><code>document</code></a> within <a href="https://w3c.github.io/aria/#document" class="role-reference"><code>document</code></a>) or by use of the <a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a> attribute.</p></div> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#landmark" class="role-reference"><code>landmark</code></a></td> </tr> <tr> <th class="role-related-head" scope="row">Related Concepts:</th> <td class="role-related"><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/sections.html#the-footer-element">footer</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> </tbody> </table> </section> <section class="role notoc" id="definition"> <h4 class="role-name" title="definition" aria-describedby="desc-definition"><code>definition</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-definition" role="definition"> <p>A definition of a term or concept. See related <a href="https://w3c.github.io/aria/#term" class="role-reference"><code>term</code></a>.</p> <p>Authors <em class="rfc2119">MUST</em> identify the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> being defined and assign that element a role of <a href="https://w3c.github.io/aria/#term" class="role-reference"><code>term</code></a>.</p> <p>Authors <em class="rfc2119">SHOULD NOT</em> use the <code>definition</code> role on interactive elements such as form controls because doing so could prevent users of assistive technologies from interacting with those elements.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#section" class="role-reference"><code>section</code></a></td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-disallowed-head" scope="row">Prohibited States and Properties:</th> <td class="role-disallowed"> <ul> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">prohibited</td> </tr> </tbody> </table> </section> <section class="role notoc" id="deletion"> <h4 class="role-name" title="deletion" aria-describedby="desc-deletion"><code>deletion</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-deletion" role="definition"> <p>A deletion represents content that is marked as removed, content that is being suggested for removal, or content that is no longer relevant in the context of its accompanying content. See related <a href="https://w3c.github.io/aria/#insertion" class="role-reference"><code>insertion</code></a>.</p> <p>Deletions are typically used to either mark differences between two versions of content or to designate content suggested for removal in scenarios where multiple people are revising content.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#section" class="role-reference"><code>section</code></a></td> </tr> <tr> <th class="role-related-head" scope="row">Related Concepts:</th> <td class="role-related"> <ul> <li><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/edits.html#the-del-element">del</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></li> <li><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-s-element">s</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-disallowed-head" scope="row">Prohibited States and Properties:</th> <td class="role-disallowed"> <ul> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">prohibited</td> </tr> </tbody> </table> </section> <section class="role notoc" id="dialog"> <h4 class="role-name" title="dialog" aria-describedby="desc-dialog"><code>dialog</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-dialog" role="definition"> <p>A dialog is a descendant window of the primary window of a web application. For <abbr title="Hypertext Markup Language">HTML</abbr> pages, the primary application window is the entire web document.</p> <p>Dialogs are often used to prompt the user to enter or respond to information, or can represent content related to understanding or modifying the content of the primary application window. A dialog that is designed to interrupt workflow and prevent users from interacting with the primary web application is usually modal. See related <a href="https://w3c.github.io/aria/#alertdialog" class="role-reference"><code>alertdialog</code></a>. A dialog that allows for the user to switch between interacting with the content of the primary web application and the content the dialog is usually modeless (i.e., non-modal). In lieu of using robust host language features for marking content of the primary web application as <code>inert</code>, authors <em class="rfc2119">SHOULD</em> use the <a href="https://w3c.github.io/aria/#aria-modal" class="property-reference"><code>aria-modal</code></a> attribute, and constrain focus to dialogs. See the <a href="https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/"><abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> Authoring Practices: Dialog (modal) pattern</a> for additional details on implementing modal dialog design patterns.</p> <p>Authors <em class="rfc2119">MUST</em> provide an accessible name for a dialog, which can be done with the <a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a> or <a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a> attribute.</p> <p>Authors <em class="rfc2119">SHOULD</em> ensure that all dialogs (both modal and non-modal) have at least one focusable descendant element. Authors <em class="rfc2119">SHOULD</em> focus an element in the modal dialog when it is displayed, and authors <em class="rfc2119">SHOULD</em> constrain keyboard focus to focusable elements within a modal dialog, until dismissed.</p> <p>Authors <em class="rfc2119">SHOULD</em> provide a dialog an accessible description, with the <a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a> attribute, for instances where authors have set initial keyboard focus on an element that follows content that outlines the purpose of the dialog. Assistive technology <em class="rfc2119">SHOULD</em> give precedence to exposing author defined dialog accessible descriptions when a dialog is invoked and user focus is moved to a descendant of the dialog element.</p> <div class="note" role="note" id="issue-container-generatedID-17"><div role="heading" class="note-title marker" id="h-note-15" aria-level="4"><span>Note</span></div><div class=""> <p>Authors are strongly encouraged to use <a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a>, rather than <a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a>, to provide descriptions to dialogs. While <code>aria-description</code> could be used to provide an accessible description for a dialog, it will provide a better and more consistent user experience to reference visible content that can also be independently read by all users. Doing so will help ensure important descriptive information is less likely to be missed.</p> </div></div> <aside class="example" id="example-10"><div class="marker"> <a class="self-link" href="#example-10">Example<bdi> 10</bdi></a> </div> <p>In the following example, the first text field will receive initial focus when the dialog is rendered. As this means focus will be set "after" the preceding content that provides instructions for the form fields, an <code>aria-describedby</code> attribute is used to expose this content as a description for the <code>dialog</code>. </p><pre aria-busy="false"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"dialog"</span> <span class="hljs-attr">aria-labelledby</span>=<span class="hljs-string">"h"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"d"</span> <span class="hljs-attr">aria-modal</span>=<span class="hljs-string">"true"</span> <span class="hljs-attr">...</span>></span> <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"h"</span>></span>Add Shipping Address<span class="hljs-tag"></<span class="hljs-name">h2</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"d"</span>></span>By placing an order on this website, you acknowledge we will be sending you tons of junk mail for you to immediately recycle. Thanks!<span class="hljs-tag"></<span class="hljs-name">p</span>></span> <span class="hljs-tag"><<span class="hljs-name">label</span>></span> Street: <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">autofocus</span> <span class="hljs-attr">...</span>></span> <span class="hljs-tag"></<span class="hljs-name">label</span>></span> ... <span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></aside> <div class="note" role="note" id="issue-container-generatedID-18"><div role="heading" class="note-title marker" id="h-note-16" aria-level="4"><span>Note</span></div><p class="">In the description of this role, the term "web application" does not refer to the <a href="https://w3c.github.io/aria/#application" class="role-reference"><code>application</code></a> role, which specifies specific assistive technology behaviors.</p></div> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#window" class="role-reference"><code>window</code></a></td> </tr> <tr> <th class="role-children-head" scope="row">Subclass Roles:</th> <td class="role-children"><ul> <li><a href="https://w3c.github.io/aria/#alertdialog" class="role-reference"><code>alertdialog</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-modal" class="property-reference"><code>aria-modal</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> <tr> <th class="role-namerequired-head" scope="row">Accessible Name Required:</th> <td class="role-namerequired">True</td> </tr> </tbody> </table> </section> <section class="role notoc" id="directory"> <h4 class="role-name" title="directory" aria-describedby="desc-directory"><code>directory</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-directory" role="definition"> <p>[Deprecated in <abbr title="Accessible Rich Internet Applications">ARIA</abbr> 1.2] A list of references to members of a group, such as a static table of contents.</p> <div class="note" role="note" id="issue-container-generatedID-19"><div role="heading" class="note-title marker" id="h-note-17" aria-level="4"><span>Note</span></div><p class="">As exposed by accessibility <abbr title="Application Programing Interfaces">APIs</abbr>, the <code>directory</code> <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-38">role</a> is essentially equivalent to the <code>list</code> <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-39">role</a>. So, using <code>directory</code> does not provide any additional benefits to assistive technology users. Authors are advised to treat <code>directory</code> as deprecated and to use <code>list</code>, or a host language's equivalent semantics instead.</p></div> <p>A <code>directory</code> is a static table of contents, whether linked or unlinked. This includes tables of contents built with lists, including nested lists. Dynamic tables of contents, however, might use a <a href="https://w3c.github.io/aria/#tree" class="role-reference"><code>tree</code></a> role instead.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#list" class="role-reference"><code>list</code></a></td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> </tbody> </table> </section> <section class="role notoc" id="document"> <h4 class="role-name" title="document" aria-describedby="desc-document"><code>document</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-document" role="definition"> <p>An <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> containing content that <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-25">assistive technology</a> users might want to browse in a reading mode.</p> <p>When <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agent</a> focus moves to an element assigned the role of <code>document</code>, <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-26">assistive technologies</a> having a reading mode for browsing static content <em class="rfc2119">MAY</em> switch to that reading mode and intercept standard input events, such as Up or Down arrow keyboard events, to control the reading cursor.</p> <p>Because <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-27">assistive technologies</a> that have a reading mode default to that mode for all elements except for those with either a <a href="https://w3c.github.io/aria/#widget" class="role-reference"><code>widget</code></a> or <a href="https://w3c.github.io/aria/#application" class="role-reference"><code>application</code></a> role, the only circumstance where the <code>document</code> role is useful for changing assistive technology behavior is when the element with role <code>document</code> is a focusable child element of a <a href="https://w3c.github.io/aria/#widget" class="role-reference"><code>widget</code></a> or <a href="https://w3c.github.io/aria/#application" class="role-reference"><code>application</code></a>. For example, given an <a href="https://w3c.github.io/aria/#application" class="role-reference"><code>application</code></a> element which contains some static rich text, the author can apply role <code>document</code> to the element containing the text and give it a <code>tabindex</code> of <code>0</code>. When a screen reader user presses the Tab key and places focus on the <code>document</code> element, the user will be able to read the text with the screen reader's reading cursor.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#structure" class="role-reference"><code>structure</code></a></td> </tr> <tr> <th class="role-children-head" scope="row">Subclass Roles:</th> <td class="role-children"><ul> <li><a href="https://w3c.github.io/aria/#article" class="role-reference"><code>article</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> </tbody> </table> </section> <section class="role notoc" id="emphasis"> <h4 class="role-name" title="emphasis" aria-describedby="desc-emphasis"><code>emphasis</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-emphasis" role="definition"> <p>One or more emphasized characters. See related <a href="https://w3c.github.io/aria/#strong" class="role-reference"><code>strong</code></a>.</p> <p>The purpose of the <code>emphasis</code> role is to stress or emphasize content. It is not for communicating changes in typographical presentation that do not impact the meaning of the content. Authors <em class="rfc2119">SHOULD</em> use the <code>emphasis</code> role only if its absence would change the meaning of the content.</p> <p>The <code>emphasis</code> role is not intended to convey importance; for that purpose, the <a href="https://w3c.github.io/aria/#strong" class="role-reference"><code>strong</code></a> role is more appropriate.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#section" class="role-reference"><code>section</code></a></td> </tr> <tr> <th class="role-related-head" scope="row">Related Concepts:</th> <td class="role-related"><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-em-element">em</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-disallowed-head" scope="row">Prohibited States and Properties:</th> <td class="role-disallowed"> <ul> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">prohibited</td> </tr> </tbody> </table> </section> <section class="role notoc" id="feed"> <h4 class="role-name" title="feed" aria-describedby="desc-feed"><code>feed</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-feed" role="definition"> <p>A scrollable <a href="https://w3c.github.io/aria/#list" class="role-reference"><code>list</code></a> of <a href="https://w3c.github.io/aria/#article" class="role-reference"><code>articles</code></a> where scrolling might cause <a href="https://w3c.github.io/aria/#article" class="role-reference"><code>articles</code></a> to be added to or removed from either end of the list.</p> <p>A <code>feed</code> enables users of <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-28">assistive technologies</a> that have a document browse mode, such as screen readers, to use the browse mode reading cursor to both read and scroll through a stream of rich content that might continue scrolling infinitely by loading more content as the user reads. In a <code>feed</code>, <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-29">assistive technologies</a> provide a web application with signals of the user's reading cursor movement by moving <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agent</a> focus, enabling the application to both add new content and visually position content as the user browses the page. The <code>feed</code> also lets authors inform assistive technologies when additions and removals are occurring so assistive technologies can more reliably update their reading view without disrupting reading or degrading performance.</p> <p>For example, a <code>feed</code> could be used to present a stream of news stories where each <a href="https://w3c.github.io/aria/#article" class="role-reference"><code>article</code></a> contains a story with text, links, images, and comments as well as widgets for sharing and commenting. As a screen reader user reads and interacts with each story and moves the screen reader reading cursor from story to story, each story scrolls into view and, as needed, new stories are loaded.</p> <p>A <code>feed</code> is a container element whose children have role <a href="https://w3c.github.io/aria/#article" class="role-reference"><code>article</code></a>. When <a href="https://w3c.github.io/aria/#article" class="role-reference"><code>articles</code></a> are added or removed from either or both ends of a <code>feed</code>, authors <em class="rfc2119">SHOULD</em> set <a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> to <code>true</code> on the <code>feed</code> element before the changes are made and set it to <code>false</code> after the changes are complete. Authors <em class="rfc2119">SHOULD</em> avoid inserting or removing <a href="https://w3c.github.io/aria/#article" class="role-reference"><code>articles</code></a> in the middle of a <code>feed</code>. These requirements help <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-30">assistive technologies</a> gracefully respond to changes in the <code>feed</code> content that occur simultaneously with user commands to move the reading cursor within the <code>feed</code>.</p> <p>Authors <em class="rfc2119">SHOULD</em> make each <a href="https://w3c.github.io/aria/#article" class="role-reference"><code>article</code></a> in a <code>feed</code> focusable and ensure that the application scrolls an <a href="https://w3c.github.io/aria/#article" class="role-reference"><code>article</code></a> into view when <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agent</a> focus is set on the <a href="https://w3c.github.io/aria/#article" class="role-reference"><code>article</code></a> or one of its descendant elements. For example, in <abbr title="Hypertext Markup Language">HTML</abbr>, each <a href="https://w3c.github.io/aria/#article" class="role-reference"><code>article</code></a> element should have a <code>tabindex</code> value of either <code>-1</code> or <code>0</code>.</p> <p> When an <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-31">assistive technology</a> reading cursor moves from one <a href="https://w3c.github.io/aria/#article" class="role-reference"><code>article</code></a> to another, <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-32">assistive technologies</a> <em class="rfc2119">SHOULD</em> set user agent focus on the <a href="https://w3c.github.io/aria/#article" class="role-reference"><code>article</code></a> that contains the reading cursor. If the reading cursor lands on a focusable element inside the <a href="https://w3c.github.io/aria/#article" class="role-reference"><code>article</code></a>, the assistive technology <em class="rfc2119">MAY</em> set focus on that element in lieu of setting focus on the containing <a href="https://w3c.github.io/aria/#article" class="role-reference"><code>article</code></a>.</p> <p>Because the ability to scroll to another <a href="https://w3c.github.io/aria/#article" class="role-reference"><code>article</code></a> with an <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-33">assistive technology</a> reading cursor depends on the presence of another <a href="https://w3c.github.io/aria/#article" class="role-reference"><code>article</code></a> in the page, authors <em class="rfc2119">SHOULD</em> attempt to load additional <a href="https://w3c.github.io/aria/#article" class="role-reference"><code>articles</code></a> before <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agent</a> focus reaches an <a href="https://w3c.github.io/aria/#article" class="role-reference"><code>article</code></a> at either end of the set of <a href="https://w3c.github.io/aria/#article" class="role-reference"><code>articles</code></a> that has been loaded. Alternatively, authors <em class="rfc2119">MAY</em> include an <a href="https://w3c.github.io/aria/#article" class="role-reference"><code>article</code></a> at either or both ends of the loaded set of <a href="https://w3c.github.io/aria/#article" class="role-reference"><code>articles</code></a> that includes an element, such as a <a href="https://w3c.github.io/aria/#button" class="role-reference"><code>button</code></a>, that lets the user request more <a href="https://w3c.github.io/aria/#article" class="role-reference"><code>articles</code></a> to be loaded.</p> <p>In addition to providing a brief label, authors <em class="rfc2119">MAY</em> apply <a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a> to <a href="https://w3c.github.io/aria/#article" class="role-reference"><code>article</code></a> elements in a <code>feed</code> to suggest to screen readers which elements to speak after the label when users navigate by <a href="https://w3c.github.io/aria/#article" class="role-reference"><code>article</code></a>. Screen readers <em class="rfc2119">MAY</em> provide users with a way to quickly scan <code>feed</code> content by speaking both the label and <a class="informative" data-link-type="dfn" href="https://www.w3.org/TR/accname-1.2/#dfn-accessible-description">accessible description</a> when navigating by <a href="https://w3c.github.io/aria/#article" class="role-reference"><code>article</code></a>, enabling the user to ignore repetitive or less important elements, such as embedded interaction widgets, that the author has left out of the description.</p> <p>Authors <em class="rfc2119">SHOULD</em> provide keyboard commands for moving focus among <a href="https://w3c.github.io/aria/#article" class="role-reference"><code>articles</code></a> in a <code>feed</code> so users who do not utilize an assistive technology that provides <a href="https://w3c.github.io/aria/#article" class="role-reference"><code>article</code></a> navigation features can use the keyboard to navigate the <code>feed</code>.</p> <p>If the number of articles available in a <code>feed</code> supply is static, authors <em class="rfc2119">MAY</em> specify <a href="https://w3c.github.io/aria/#aria-setsize" class="property-reference"><code>aria-setsize</code></a> on <a href="https://w3c.github.io/aria/#article" class="role-reference"><code>article</code></a> elements in that <code>feed</code>. However, if the total number is extremely large, indefinite, or changes often, authors <em class="rfc2119">MAY</em> set <a href="https://w3c.github.io/aria/#aria-setsize" class="property-reference"><code>aria-setsize</code></a> to <code>-1</code> to communicate the unknown size of the set.</p> <p>See the <cite><a href="https://www.w3.org/WAI/ARIA/apg/" class="practices"><abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices Guide</a></cite> for additional details on implementing a feed design pattern.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#list" class="role-reference"><code>list</code></a></td> </tr> <tr> <th class="role-mustcontain-head" scope="row">Allowed Accessibility Child Roles:</th> <td class="role-mustcontain"><a href="https://w3c.github.io/aria/#article" class="role-reference"><code>article</code></a></td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> </tbody> </table> </section> <section class="role notoc" id="figure"> <h4 class="role-name" title="figure" aria-describedby="desc-figure"><code>figure</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-figure" role="definition"> <p>A perceivable <a href="https://w3c.github.io/aria/#section" class="role-reference"><code>section</code></a> of content that typically contains a <a href="#dfn-graphical-document" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-graphical-document-1">graphical document</a>, images, media player, code snippets, or example text. The parts of a <code>figure</code> <em class="rfc2119">MAY</em> be user-navigable.</p> <p>Authors <em class="rfc2119">SHOULD</em> provide a reference to the <code>figure</code> from the main text, but the <code>figure</code> need not be displayed at the same location as the referencing element. Authors <em class="rfc2119">MAY</em> provide a <code>figure</code> a <a href="https://w3c.github.io/aria/#caption" class="role-reference"><code>caption</code></a> which can include its name, descriptive text, or both. If a <code>caption</code> is provided, and it serves as a description to the contents of the <code>figure</code>, authors <em class="rfc2119">SHOULD</em> associate it to the <code>figure</code> element using <a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a>.</p> <p>Authors <em class="rfc2119">MAY</em> provide a <code>figure</code> an accessible name using <a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a> or use <a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a> to reference other text in the page to serve as the element's label and accessible name.</p> <p>Please refer to the <a href="https://w3c.github.io/aria/#caption" class="role-reference"><code>caption</code></a> role for more information on how to associate a <code>figure</code> with its <code>caption</code>.</p> <p><a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-34">Assistive technologies</a> <em class="rfc2119">SHOULD</em> enable users to quickly navigate to figures. <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">User agents</a> <em class="rfc2119">MAY</em> enable users to quickly navigate to figures.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#section" class="role-reference"><code>section</code></a></td> </tr> <tr> <th class="role-related-head" scope="row">Related Concepts:</th> <td class="role-related"><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-figure-element">figure</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> </tbody> </table> </section> <section class="role notoc" id="form"> <h4 class="role-name" title="form" aria-describedby="desc-form"><code>form</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-form" role="definition"> <p>A <a href="https://w3c.github.io/aria/#landmark" class="role-reference"><code>landmark</code></a> region that contains a collection of items and objects that, as a whole, combine to create a form. See related <a href="https://w3c.github.io/aria/#search" class="role-reference"><code>search</code></a>.</p> <p>A form can contain a mix of host language form controls, scripted controls, and hyperlinks. Authors are reminded to use native host language semantics to create form controls whenever possible. If the purpose of a form is to submit search criteria, authors <em class="rfc2119">SHOULD</em> use the <a href="https://w3c.github.io/aria/#search" class="role-reference"><code>search</code></a> role instead of the generic <code>form</code> role.</p> <p>Authors <em class="rfc2119">MUST</em> give each element with role <code>form</code> a brief label that describes the purpose of the form. Authors <em class="rfc2119">SHOULD</em> reference a visible label with <a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a> if a visible label is present. Authors <em class="rfc2119">SHOULD</em> include the label inside of a heading whenever possible. The heading <em class="rfc2119">MAY</em> be an instance of the standard host language heading element or an instance of an element with role <a href="https://w3c.github.io/aria/#heading" class="role-reference"><code>heading</code></a>.</p> <p>If an author uses a script to submit a form based on a user action that would otherwise not trigger an <code>onsubmit</code> event (for example, a form submission triggered by the user changing a form element's value), the author <em class="rfc2119">SHOULD</em> provide the user with advance notification of the behavior.</p> <p><a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-35">Assistive technologies</a> <em class="rfc2119">SHOULD</em> enable users to quickly navigate to elements with role <code>form</code>. <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">User agents</a> <em class="rfc2119">SHOULD</em> treat elements with role <code>form</code> and an accessible name as navigational <a href="#dfn-landmark" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-landmark-7">landmarks</a>. <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">User agents</a> <em class="rfc2119">MAY</em> enable users to quickly navigate to elements with role <code>form</code>.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#landmark" class="role-reference"><code>landmark</code></a></td> </tr> <tr> <th class="role-base-head" scope="row">Base Concept:</th> <td class="role-base"><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/forms.html#the-form-element">form</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> <tr> <th class="role-namerequired-head" scope="row">Accessible Name Required:</th> <td class="role-namerequired">True</td> </tr> </tbody> </table> </section> <section class="role notoc" id="generic"> <h4 class="role-name" title="generic" aria-describedby="desc-generic"><code>generic</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-generic" role="definition"> <p>A nameless container <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> that has no semantic meaning on its own.</p> <p>The <code>generic</code> role is intended for use as the implicit role of generic elements in host languages (such as <abbr title="Hypertext Markup Language">HTML</abbr> <code>div</code> or <code>span</code>), so is primarily for implementors of user agents. Authors <em class="rfc2119">SHOULD NOT</em> use this role in content. Authors <em class="rfc2119">MAY</em> use <a href="https://w3c.github.io/aria/#presentation" class="role-reference"><code>presentation</code></a> or <a href="https://w3c.github.io/aria/#none" class="role-reference"><code>none</code></a> to remove implicit accessibility semantics, or a semantic container role such as <a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a> to semantically group descendants in a named container.</p> <p>Like an element with role <a href="https://w3c.github.io/aria/#presentation" class="role-reference"><code>presentation</code></a>, an element with role <code>generic</code> can provide a limited number of accessible states and properties for its descendants, such as <a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a> attributes.</p> <p>However, unlike elements with role <code>presentation</code>, user agents expose <code>generic</code> elements in <a href="#dfn-accessibility-api" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-api-16">accessibility <abbr title="Application Programing Interfaces">APIs</abbr></a> when permitted accessibility attributes have been specified. User agents <em class="rfc2119">MAY</em> otherwise ignore <code>generic</code> elements if such permitted attributes have not been specified.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#structure" class="role-reference"><code>structure</code></a></td> </tr> <tr> <th class="role-related-head" scope="row">Related Concepts:</th> <td class="role-related"> <abbr title="Hypertext Markup Language">HTML</abbr> <code><code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-div-element">div</a></code></code>, <abbr title="Hypertext Markup Language">HTML</abbr> <code><code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-span-element">span</a></code></code> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> </ul> </td> </tr> <tr> <th class="role-disallowed-head" scope="row">Prohibited States and Properties:</th> <td class="role-disallowed"> <ul> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">prohibited</td> </tr> </tbody> </table> </section> <section class="role notoc" id="grid"> <h4 class="role-name" title="grid" aria-describedby="desc-grid"><code>grid</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-grid" role="definition"> <p>A composite <a href="https://w3c.github.io/aria/#widget" class="role-reference"><code>widget</code></a> containing a collection of one or more rows with one or more cells where some or all cells in the grid are focusable by using methods of two-dimensional navigation, such as directional arrow keys.</p> <p>The <code>grid</code> role does not imply a specific visual, e.g., tabular, presentation. It describes <a href="#dfn-relationship" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-relationship-4">relationships</a> among <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a>. It can be used for purposes as simple as grouping a collection of checkboxes or navigation links or as complex as creating a full-featured spreadsheet application.</p> <p>The cell elements of a <code>grid</code> have role <a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a>. Authors <em class="rfc2119">MAY</em> designate a cell as a row or column header by using either the <a href="https://w3c.github.io/aria/#rowheader" class="role-reference"><code>rowheader</code></a> or <a href="https://w3c.github.io/aria/#columnheader" class="role-reference"><code>columnheader</code></a> <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-40">role</a> in lieu of the <a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a> role. Authors <em class="rfc2119">MUST</em> ensure elements with role <a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a>, <a href="https://w3c.github.io/aria/#columnheader" class="role-reference"><code>columnheader</code></a>, or <a href="https://w3c.github.io/aria/#rowheader" class="role-reference"><code>rowheader</code></a> are <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-child-7">accessibility children</a> of elements with role <a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a>, which are in turn are <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-child-8">accessibility children</a> of an element with role <a href="https://w3c.github.io/aria/#rowgroup" class="role-reference"><code>rowgroup</code></a>, or <code>grid</code>.</p> <p>To be <a href="#dfn-keyboard-accessible" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-keyboard-accessible-3">keyboard accessible</a>, authors <em class="rfc2119">SHOULD</em> manage focus of descendants of a <code>grid</code> as described in <a href="#managingfocus">Managing Focus</a>. When a user is navigating the <code>grid</code> content with a keyboard, authors <em class="rfc2119">SHOULD</em> set focus as follows:</p> <ul> <li>If a <a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a> contains a single interactive <a href="https://w3c.github.io/aria/#widget" class="role-reference"><code>widget</code></a> that will not consume arrow key presses when it receives focus, such as a <a href="https://w3c.github.io/aria/#checkbox" class="role-reference"><code>checkbox</code></a>, <a href="https://w3c.github.io/aria/#button" class="role-reference"><code>button</code></a>, or <a href="https://w3c.github.io/aria/#link" class="role-reference"><code>link</code></a>, authors <em class="rfc2119">MAY</em> set focus on the interactive element contained in that cell. This allows the contained widget to be directly operable.</li> <li>Otherwise, authors <em class="rfc2119">SHOULD</em> ensure the element that receives focus is a <a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a>, <a href="https://w3c.github.io/aria/#rowheader" class="role-reference"><code>rowheader</code></a>, or <a href="https://w3c.github.io/aria/#columnheader" class="role-reference"><code>columnheader</code></a> element.</li> </ul> <p>Authors <em class="rfc2119">SHOULD</em> provide a mechanism for changing to an interaction or edit mode that allows users to navigate and interact with content contained inside a focusable cell if that focusable cell contains any of the following:</p> <ul> <li>a widget that requires arrow keys to operate, e.g., a <a href="https://w3c.github.io/aria/#combobox" class="role-reference"><code>combobox</code></a> or <a href="https://w3c.github.io/aria/#radiogroup" class="role-reference"><code>radiogroup</code></a></li> <li>multiple interactive elements</li> <li>editable content</li> </ul> <p>For example, if a cell in a spreadsheet contains a <a href="https://w3c.github.io/aria/#combobox" class="role-reference"><code>combobox</code></a> or editable text, the <kbd>Enter</kbd> key might be used to activate a cell interaction or editing mode when that cell has focus so the directional arrow keys can be used to operate the contained <a href="https://w3c.github.io/aria/#combobox" class="role-reference"><code>combobox</code></a> or <a href="https://w3c.github.io/aria/#textbox" class="role-reference"><code>textbox</code></a>. Depending on the implementation, pressing <kbd>Enter</kbd> again, <kbd>Tab</kbd>, <kbd>Escape</kbd>, or another key might switch the application back to the grid navigation mode.</p> <p>Authors <em class="rfc2119">MAY</em> use a <a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a> to display the result of a formula, which could be editable by the user. In a spreadsheet application, for example, a <a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a> might show a value calculated from a formula until the user activates the <a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a> for editing when a <a href="https://w3c.github.io/aria/#textbox" class="role-reference"><code>textbox</code></a> appears in the <a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a> containing the formula in an editable state.</p> <p>If <a href="https://w3c.github.io/aria/#aria-readonly" class="property-reference"><code>aria-readonly</code></a> is set on an element with role <code>grid</code>, <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agents</a> <em class="rfc2119">MUST</em> propagate the value to all <a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a> elements that are <a href="#dfn-accessibility-descendant" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-descendant-8">accessibility descendants</a> of that <code>grid</code> and expose the value in the accessibility <abbr title="application programming interface">API</abbr>. An author <em class="rfc2119">MAY</em> override the propagated value of <a href="https://w3c.github.io/aria/#aria-readonly" class="property-reference"><code>aria-readonly</code></a> for an individual <a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a> element.</p> <p>In a <code>grid</code> that provides cell content editing functions, if the content of a focusable <a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a> element is not editable, authors <em class="rfc2119">MAY</em> set <a href="https://w3c.github.io/aria/#aria-readonly" class="property-reference"><code>aria-readonly</code></a> to <code>true</code> on the <code>gridcell</code> element. However, the value of <a href="https://w3c.github.io/aria/#aria-readonly" class="property-reference"><code>aria-readonly</code></a>, whether specified for a <code>grid</code> or individual cells, only indicates whether the content contained in cells is editable. It does not represent availability of functions for navigating or manipulating the <code>grid</code> itself.</p> <p>An unspecified value for <a href="https://w3c.github.io/aria/#aria-readonly" class="property-reference"><code>aria-readonly</code></a> does not imply that a <code>grid</code> or a <a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a> contains editable content. For example, if a <code>grid</code> presents a collection of elements that are not editable, such as a collection of <a href="https://w3c.github.io/aria/#link" class="role-reference"><code>link</code></a> elements representing dates in a datepicker, it is not necessary for the author to specify a value for <a href="https://w3c.github.io/aria/#aria-readonly" class="property-reference"><code>aria-readonly</code></a>.</p> <p>Authors <em class="rfc2119">MAY</em> indicate that a focusable <a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a> is selectable as the object of an action with the <a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a> attribute. If the <code>grid</code> allows multiple <a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a>s to be selected, the author <em class="rfc2119">SHOULD</em> set <a href="https://w3c.github.io/aria/#aria-multiselectable" class="property-reference"><code>aria-multiselectable</code></a> to <code>true</code> on the element with role <code>grid</code>.</p> <p>Since <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> can augment an element of the host language, a <code>grid</code> can reuse the elements and attributes of a native table, such as an <abbr title="Hypertext Markup Language">HTML</abbr> <code>table</code> element. For example, if an author applies the <code>grid</code> role to an <abbr title="Hypertext Markup Language">HTML</abbr> <code>table</code> element, the author does not need to apply the <a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a> and <a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a> roles to the descendant <abbr title="Hypertext Markup Language">HTML</abbr> <code>tr</code> and <code>td</code> elements because the <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agent</a> will automatically make the appropriate translations. When the author is reusing a native host language table element and needs a <a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a> element to span multiple rows or columns, the author <em class="rfc2119">SHOULD</em> apply the appropriate host language attributes instead of <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> <a href="https://w3c.github.io/aria/#aria-rowspan" class="property-reference"><code>aria-rowspan</code></a> or <a href="https://w3c.github.io/aria/#aria-colspan" class="property-reference"><code>aria-colspan</code></a> properties.</p> <p>See the <cite><a href="https://www.w3.org/WAI/ARIA/apg/" class="practices"><abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices Guide</a></cite> for additional details on implementing grid design patterns.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"> <ul> <li><a href="https://w3c.github.io/aria/#composite" class="role-reference"><code>composite</code></a></li> <li><a href="https://w3c.github.io/aria/#table" class="role-reference"><code>table</code></a></li> </ul> </td> </tr> <tr> <th class="role-children-head" scope="row">Subclass Roles:</th> <td class="role-children"><ul> <li><a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a></li> </ul> </td> </tr> <tr> <th class="role-base-head" scope="row">Base Concept:</th> <td class="role-base"><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/tables.html#the-table-element">table</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="role-mustcontain-head" scope="row">Allowed Accessibility Child Roles:</th> <td class="role-mustcontain"> <ul> <li><a href="https://w3c.github.io/aria/#caption" class="role-reference"><code>caption</code></a></li> <li><a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a></li> <li><a href="https://w3c.github.io/aria/#rowgroup" class="role-reference"><code>rowgroup</code></a> with <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-child-9">accessibility child</a> <a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a></li> </ul> </td> </tr> <tr> <th class="role-properties-head" scope="row">Supported States and Properties:</th> <td class="role-properties"> <ul> <li><a href="https://w3c.github.io/aria/#aria-multiselectable" class="property-reference"><code>aria-multiselectable</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-readonly" class="property-reference"><code>aria-readonly</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-colcount" class="property-reference"><code>aria-colcount</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-rowcount" class="property-reference"><code>aria-rowcount</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> <tr> <th class="role-namerequired-head" scope="row">Accessible Name Required:</th> <td class="role-namerequired">True</td> </tr> </tbody> </table> </section> <section class="role notoc" id="gridcell"> <h4 class="role-name" title="gridcell" aria-describedby="desc-gridcell"><code>gridcell</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-gridcell" role="definition"> <p>A <a href="https://w3c.github.io/aria/#cell" class="role-reference"><code>cell</code></a> in a <a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a> or <a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a>.</p> <p>A <code>gridcell</code> can be focusable, editable, and selectable. A <code>gridcell</code> can have <a href="#dfn-relationship" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-relationship-5">relationships</a> such as <a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a> to address the application of functional relationships.</p> <p>If an author intends a <code>gridcell</code> to have a row header, column header, or both, and if the relevant headers cannot be determined from the <abbr title="Document Object Model">DOM</abbr> structure, authors <em class="rfc2119">SHOULD</em> explicitly indicate which header cells are relevant to the <code>gridcell</code> by applying <a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a> on the <code>gridcell</code> and referencing <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a> with <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-41">role</a> <a href="https://w3c.github.io/aria/#rowheader" class="role-reference"><code>rowheader</code></a> or <a href="https://w3c.github.io/aria/#columnheader" class="role-reference"><code>columnheader</code></a>.</p> <p>In a <a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a>, authors <em class="rfc2119">MAY</em> define a <code>gridcell</code> as expandable by using the <a href="https://w3c.github.io/aria/#aria-expanded" class="state-reference"><code>aria-expanded</code></a> attribute. If the <a href="https://w3c.github.io/aria/#aria-expanded" class="state-reference"><code>aria-expanded</code></a> attribute is provided, it applies only to the individual cell. It is not a proxy for the container <a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a>, which also can be expanded. The main use case for providing this attribute on a <code>gridcell</code> is pivot table behavior.</p> <p>Authors <em class="rfc2119">MUST</em> ensure <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a> with <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-42">role</a> gridcell are <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-child-10">accessibility children</a> of an element with the <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-43">role</a> <a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a>.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"> <ul> <li><a href="https://w3c.github.io/aria/#cell" class="role-reference"><code>cell</code></a></li> <li><a href="https://w3c.github.io/aria/#widget" class="role-reference"><code>widget</code></a></li> </ul> </td> </tr> <tr> <th class="role-children-head" scope="row">Subclass Roles:</th> <td class="role-children"><ul> <li><a href="https://w3c.github.io/aria/#columnheader" class="role-reference"><code>columnheader</code></a></li> <li><a href="https://w3c.github.io/aria/#rowheader" class="role-reference"><code>rowheader</code></a></li> </ul> </td> </tr> <tr> <th class="role-base-head" scope="row">Base Concept:</th> <td class="role-base"><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/tables.html#the-td-element">td</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="role-scope-head" scope="row">Required Accessibility Parent Roles:</th> <td class="role-scope"><a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a></td> </tr> <tr> <th class="role-properties-head" scope="row">Supported States and Properties:</th> <td class="role-properties"> <ul> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-expanded" class="state-reference"><code>aria-expanded</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-readonly" class="property-reference"><code>aria-readonly</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-required" class="property-reference"><code>aria-required</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-colindex" class="property-reference"><code>aria-colindex</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-colindextext" class="property-reference"><code>aria-colindextext</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-colspan" class="property-reference"><code>aria-colspan</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-rowindex" class="property-reference"><code>aria-rowindex</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-rowindextext" class="property-reference"><code>aria-rowindextext</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-rowspan" class="property-reference"><code>aria-rowspan</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom"> <ul> <li>contents</li> <li>author</li> </ul> </td> </tr> </tbody> </table> </section> <section class="role notoc" id="group"> <h4 class="role-name" title="group" aria-describedby="desc-group"><code>group</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-group" role="definition"> <p>A set of user interface <a href="#dfn-object" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-object-12">objects</a> that is not intended to be included in a page summary or table of contents by <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-36">assistive technologies</a>.</p> <p>Contrast with <a href="https://w3c.github.io/aria/#region" class="role-reference"><code>region</code></a>, which is a grouping of user interface objects that will be included in a page summary or table of contents.</p> <p>Authors <em class="rfc2119">SHOULD</em> use a <code>group</code> to form a logical collection of items in a <a href="#dfn-widget" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-widget-14">widget</a>, such as children in a tree widget forming a collection of siblings in a hierarchy. However, when a <code>group</code> is used in the context of a <a href="https://w3c.github.io/aria/#listbox" class="role-reference"><code>listbox</code></a>, for example, authors <em class="rfc2119">MUST</em> limit its children to <a href="https://w3c.github.io/aria/#option" class="role-reference"><code>option</code></a> elements. Therefore, proper handling of <code>group</code> by authors and assistive technologies is determined by the context in which it is provided.</p> <p>Authors <em class="rfc2119">MAY</em> nest <code>group</code> elements. If a section is significant enough to warrant inclusion in the web page's table of contents, the author <em class="rfc2119">SHOULD</em> assign it a <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-44">role</a> of <a href="https://w3c.github.io/aria/#region" class="role-reference"><code>region</code></a> or a <a href="#landmark_roles">standard landmark role</a>.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#section" class="role-reference"><code>section</code></a></td> </tr> <tr> <th class="role-children-head" scope="row">Subclass Roles:</th> <td class="role-children"><ul> <li><a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a></li> <li><a href="https://w3c.github.io/aria/#select" class="role-reference"><code>select</code></a></li> <li><a href="https://w3c.github.io/aria/#toolbar" class="role-reference"><code>toolbar</code></a></li> </ul> </td> </tr> <tr> <th class="role-related-head" scope="row">Related Concepts:</th> <td class="role-related"><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/form-elements.html#the-fieldset-element">fieldset</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="role-properties-head" scope="row">Supported States and Properties:</th> <td class="role-properties"> <ul> <li><a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> </tbody> </table> </section> <section class="role notoc" id="heading"> <h4 class="role-name" title="heading" aria-describedby="desc-heading"><code>heading</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-heading" role="definition"> <p>A heading for a section of the page.</p> <p>To ensure elements with a role of <code>heading</code> are organized into a logical outline, authors <em class="rfc2119">MUST</em> use the <a href="https://w3c.github.io/aria/#aria-level" class="property-reference"><code>aria-level</code></a> attribute to indicate the proper nesting level.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#sectionhead" class="role-reference"><code>sectionhead</code></a></td> </tr> <tr> <th class="role-related-head" scope="row">Related Concepts:</th> <td class="role-related"> <code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/sections.html#the-h1-element">h1</a></code>></code>, <code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/sections.html#the-h2-element">h2</a></code>></code>, <code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/sections.html#the-h3-element">h3</a></code>></code>, <code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/sections.html#the-h4-element">h4</a></code>></code>, <code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/sections.html#the-h5-element">h5</a></code>></code>, and <code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/sections.html#the-h6-element">h6</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr> </td> </tr> <tr> <th class="role-required-properties-head">Required States and Properties:</th> <td class="role-required-properties"><a href="https://w3c.github.io/aria/#aria-level" class="property-reference"><code>aria-level</code></a></td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom"> <ul> <li>contents</li> <li>author</li> </ul> </td> </tr> <tr> <th class="role-namerequired-head" scope="row">Accessible Name Required:</th> <td class="role-namerequired">True</td> </tr> </tbody> </table> </section> <section class="role notoc" id="image"> <h4 class="role-name" title="image" aria-describedby="desc-image"><code>image</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-image" role="definition"> <p>A container for a collection of <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a> that form an image. See synonym <a href="https://w3c.github.io/aria/#img" class="role-reference"><code>img</code></a>.</p> <p>An <code>img</code> can contain captions and descriptive text, as well as multiple image files that when viewed together give the impression of a single image. An <code>img</code> represents a single graphic within a document, whether or not it is formed by a collection of drawing <a href="#dfn-object" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-object-13">objects</a>. In order for an element with a <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-45">role</a> of <code>img</code> to be <a href="#dfn-perceivable" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-perceivable-4">perceivable</a>, authors <em class="rfc2119">MUST</em> provide the element with an <a class="informative" data-link-type="dfn" href="https://www.w3.org/TR/accname-1.2/#dfn-accessible-name">accessible name</a>. This can be done using the <a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a> or <a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a> attribute.</p> <div class="note" role="note" id="role-image-note-image"><div role="heading" class="note-title marker" id="h-note-18" aria-level="4"><span>Note</span></div><div class=""> Note regarding the <abbr title="Accessible Rich Internet Applications">ARIA</abbr> 1.3 <code>image</code> role. <p>The <code>image</code> role was added to <abbr title="Accessible Rich Internet Applications">ARIA</abbr> in version 1.3 as a synonym of the <abbr title="Accessible Rich Internet Applications">ARIA</abbr> 1.0 <a href="https://w3c.github.io/aria/#img" class="role-reference"><code>img</code></a> role. The <code>image</code> role improves syntactic consistency with the names of other roles, which are complete words or concatenations of complete words.</p> </div></div> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#section" class="role-reference"><code>section</code></a></td> </tr> <tr> <th class="role-related-head" scope="row">Related Concepts:</th> <td class="role-related"><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element">img</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> <tr> <th class="role-namerequired-head" scope="row">Accessible Name Required:</th> <td class="role-namerequired">True</td> </tr> <tr> <th class="role-childpresentational-head" scope="row">Children Presentational:</th> <td class="role-childpresentational">True</td> </tr> </tbody> </table> </section> <section class="role notoc" id="img"> <h4 class="role-name" title="img" aria-describedby="desc-img"><code>img</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-img" role="definition"> <p>A container for a collection of <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a> that form an image. See synonym <a href="https://w3c.github.io/aria/#image" class="role-reference"><code>image</code></a>.</p> </div> </section> <section class="role notoc" id="input"> <h4 class="role-name" title="input" aria-describedby="desc-input"><code>input</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-input" role="definition"> <p>A generic type of <a href="#dfn-widget" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-widget-15">widget</a> that allows user input.</p> <p><code>input</code> is an <a href="#isAbstract">abstract role</a> used for the ontology. Authors <em class="rfc2119">MUST NOT</em> use <code>input</code> role in content.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-abstract-head" scope="row">Is Abstract:</th> <td class="role-abstract">True</td> </tr> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#widget" class="role-reference"><code>widget</code></a></td> </tr> <tr> <th class="role-children-head" scope="row">Subclass Roles:</th> <td class="role-children"><ul> <li><a href="https://w3c.github.io/aria/#checkbox" class="role-reference"><code>checkbox</code></a></li> <li><a href="https://w3c.github.io/aria/#combobox" class="role-reference"><code>combobox</code></a></li> <li><a href="https://w3c.github.io/aria/#option" class="role-reference"><code>option</code></a></li> <li><a href="https://w3c.github.io/aria/#radio" class="role-reference"><code>radio</code></a></li> <li><a href="https://w3c.github.io/aria/#slider" class="role-reference"><code>slider</code></a></li> <li><a href="https://w3c.github.io/aria/#spinbutton" class="role-reference"><code>spinbutton</code></a></li> <li><a href="https://w3c.github.io/aria/#textbox" class="role-reference"><code>textbox</code></a></li> </ul> </td> </tr> <tr> <th class="role-properties-head" scope="row">Supported States and Properties:</th> <td class="role-properties"><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a></td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> </tbody> </table> </section> <section class="role notoc" id="insertion"> <h4 class="role-name" title="insertion" aria-describedby="desc-insertion"><code>insertion</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-insertion" role="definition"> <p>An insertion contains content that is marked as added or content that is being suggested for addition. See related <a href="https://w3c.github.io/aria/#deletion" class="role-reference"><code>deletion</code></a>.</p> <p>Insertions are typically used to either mark differences between two versions of content or to designate content suggested for addition in scenarios where multiple people are revising content.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#section" class="role-reference"><code>section</code></a></td> </tr> <tr> <th class="role-related-head" scope="row">Related Concepts:</th> <td class="role-related"><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/edits.html#the-ins-element">ins</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-disallowed-head" scope="row">Prohibited States and Properties:</th> <td class="role-disallowed"> <ul> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">prohibited</td> </tr> </tbody> </table> </section> <section class="role notoc" id="landmark"> <h4 class="role-name" title="landmark" aria-describedby="desc-landmark"><code>landmark</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-landmark" role="definition"> <p>A perceivable <a href="https://w3c.github.io/aria/#section" class="role-reference"><code>section</code></a> containing content that is relevant to a specific, author-specified purpose and sufficiently important that users will likely want to be able to navigate to the section easily and to have it listed in a summary of the page. Such a page summary could be generated dynamically by a user agent or assistive technology.</p> <p><code>landmark</code> is an abstract role used for the ontology. Authors <em class="rfc2119">MUST NOT</em> use <code>landmark</code> role in content.</p> <p>Authors designate the purpose of the content by assigning a role that is a subclass of the landmark role and, when needed, by providing a brief, descriptive label.</p> <p>Elements with a role that is a subclass of the landmark role are known as <a href="#dfn-landmark" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-landmark-8">landmark</a> regions or navigational landmark regions.</p> <p><a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-37">Assistive technologies</a> <em class="rfc2119">SHOULD</em> enable users to quickly navigate to landmark regions. <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agents</a> <em class="rfc2119">MAY</em> enable users to quickly navigate to landmark regions.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-abstract-head" scope="row">Is Abstract:</th> <td class="role-abstract">True</td> </tr> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#section" class="role-reference"><code>section</code></a></td> </tr> <tr> <th class="role-children-head" scope="row">Subclass Roles:</th> <td class="role-children"><ul> <li><a href="https://w3c.github.io/aria/#banner" class="role-reference"><code>banner</code></a></li> <li><a href="https://w3c.github.io/aria/#complementary" class="role-reference"><code>complementary</code></a></li> <li><a href="https://w3c.github.io/aria/#contentinfo" class="role-reference"><code>contentinfo</code></a></li> <li><a href="https://w3c.github.io/aria/#form" class="role-reference"><code>form</code></a></li> <li><a href="https://w3c.github.io/aria/#main" class="role-reference"><code>main</code></a></li> <li><a href="https://w3c.github.io/aria/#navigation" class="role-reference"><code>navigation</code></a></li> <li><a href="https://w3c.github.io/aria/#region" class="role-reference"><code>region</code></a></li> <li><a href="https://w3c.github.io/aria/#search" class="role-reference"><code>search</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> </tbody> </table> </section> <section class="role notoc" id="link"> <h4 class="role-name" title="link" aria-describedby="desc-link"><code>link</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-link" role="definition"> <p>An interactive reference to an internal or external resource that, when activated, causes the user agent to navigate to that resource. See related <a href="https://w3c.github.io/aria/#button" class="role-reference"><code>button</code></a>.</p> <p>If this is a native link in the host language (such as an <abbr title="Hypertext Markup Language">HTML</abbr> anchor with an <code>href</code> value), activating the link causes the <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agent</a> to navigate to that resource. If this is a simulated link, the author is responsible for managing navigation.</p> <div class="note" role="note" id="issue-container-generatedID-20"><div role="heading" class="note-title marker" id="h-note-19" aria-level="4"><span>Note</span></div><p class="">If pressing the link triggers an action but does not change browser focus or page location, authors are advised to consider using the <a href="https://w3c.github.io/aria/#button" class="role-reference"><code>button</code></a> role instead of the <code>link</code> role.</p></div> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#command" class="role-reference"><code>command</code></a></td> </tr> <tr> <th class="role-related-head" scope="row">Related Concepts:</th> <td class="role-related"> <ul> <li><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element">a</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></li> <li><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/semantics.html#the-link-element">link</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></li> </ul> </td> </tr> <tr> <th class="role-properties-head" scope="row">Supported States and Properties:</th> <td class="role-properties"> <ul> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-expanded" class="state-reference"><code>aria-expanded</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom"> <ul> <li>contents</li> <li>author</li> </ul> </td> </tr> <tr> <th class="role-namerequired-head" scope="row">Accessible Name Required:</th> <td class="role-namerequired">True</td> </tr> </tbody> </table> </section> <section class="role notoc" id="list"> <h4 class="role-name" title="list" aria-describedby="desc-list"><code>list</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-list" role="definition"> <p>A <a href="https://w3c.github.io/aria/#section" class="role-reference"><code>section</code></a> containing <a href="https://w3c.github.io/aria/#listitem" class="role-reference"><code>listitem</code></a> elements. See related <a href="https://w3c.github.io/aria/#listbox" class="role-reference"><code>listbox</code></a>.</p> <p>Lists contain children whose <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-46">role</a> is <a href="https://w3c.github.io/aria/#listitem" class="role-reference"><code>listitem</code></a>.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#section" class="role-reference"><code>section</code></a></td> </tr> <tr> <th class="role-children-head" scope="row">Subclass Roles:</th> <td class="role-children"><ul> <li><a href="https://w3c.github.io/aria/#directory" class="role-reference"><code>directory</code></a></li> <li><a href="https://w3c.github.io/aria/#feed" class="role-reference"><code>feed</code></a></li> </ul> </td> </tr> <tr> <th class="role-base-head" scope="row">Base Concept:</th> <td class="role-base"> <ul> <li><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-ol-element">ol</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></li> <li><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul-element">ul</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></li> </ul> </td> </tr> <tr> <th class="role-mustcontain-head" scope="row">Allowed Accessibility Child Roles:</th> <td class="role-mustcontain"><a href="https://w3c.github.io/aria/#listitem" class="role-reference"><code>listitem</code></a></td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> </tbody> </table> </section> <section class="role notoc" id="listbox"> <h4 class="role-name" title="listbox" aria-describedby="desc-listbox"><code>listbox</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-listbox" role="definition"> <p>A <a href="#dfn-widget" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-widget-16">widget</a> that allows the user to select one or more items from a list of choices. See related <a href="https://w3c.github.io/aria/#combobox" class="role-reference"><code>combobox</code></a> and <a href="https://w3c.github.io/aria/#list" class="role-reference"><code>list</code></a>.</p> <p>Items within the list are static and, unlike standard <abbr title="Hypertext Markup Language">HTML</abbr> <code>select</code> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a>, can contain images. List boxes contain children whose <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-47">role</a> is <a href="https://w3c.github.io/aria/#option" class="role-reference"><code>option</code></a> or elements whose <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-48">role</a> is <a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a> which in turn contain children whose <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-49">role</a> is <a href="https://w3c.github.io/aria/#option" class="role-reference"><code>option</code></a>.</p> <p>To be <a href="#dfn-keyboard-accessible" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-keyboard-accessible-4">keyboard accessible</a>, authors <em class="rfc2119">SHOULD</em> manage focus of <a href="https://w3c.github.io/aria/#option" class="role-reference"><code>option</code></a> descendants for all instances of this <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-50">role</a>, as described in <a href="#managingfocus">Managing Focus</a>.</p> <p>Elements with the role <code>listbox</code> have an implicit <a href="https://w3c.github.io/aria/#aria-orientation" class="property-reference"><code>aria-orientation</code></a> value of <code>vertical</code>.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"> <ul> <li><a href="https://w3c.github.io/aria/#select" class="role-reference"><code>select</code></a></li> </ul> </td> </tr> <tr> <th class="role-related-head" scope="row">Related Concepts:</th> <td class="role-related"> <ul> <li><a href="https://w3c.github.io/aria/#list" class="role-reference"><code>list</code></a></li> <li><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/form-elements.html#the-select-element">select</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></li> </ul> </td> </tr> <tr> <th class="role-mustcontain-head" scope="row">Allowed Accessibility Child Roles:</th> <td class="role-mustcontain"> <ul> <li><a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a> with <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-child-11">accessibility child</a> <a href="https://w3c.github.io/aria/#option" class="role-reference"><code>option</code></a></li> <li><a href="https://w3c.github.io/aria/#option" class="role-reference"><code>option</code></a></li> </ul> </td> </tr> <tr> <th class="role-properties-head" scope="row">Supported States and Properties:</th> <td class="role-properties"> <ul> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-expanded" class="state-reference"><code>aria-expanded</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-multiselectable" class="property-reference"><code>aria-multiselectable</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-readonly" class="property-reference"><code>aria-readonly</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-required" class="property-reference"><code>aria-required</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-orientation" class="property-reference"><code>aria-orientation</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> <tr> <th class="role-namerequired-head" scope="row">Accessible Name Required:</th> <td class="role-namerequired">True</td> </tr> <tr> <th class="implicit-values-head" scope="row">Implicit Value for Role:</th> <td class="implicit-values">Default for <a href="https://w3c.github.io/aria/#aria-orientation" class="property-reference"><code>aria-orientation</code></a> is <code class="default">vertical</code>.</td> </tr> </tbody> </table> </section> <section class="role notoc" id="listitem"> <h4 class="role-name" title="listitem" aria-describedby="desc-listitem"><code>listitem</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-listitem" role="definition"> <p>A single item in a list or directory.</p> <p>Authors <em class="rfc2119">MUST</em> ensure <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a> whose <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-51">role</a> is <code>listitem</code> are <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-child-12">accessibility children</a> of an <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> whose <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-52">role</a> is <a href="https://w3c.github.io/aria/#list" class="role-reference"><code>list</code></a>.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#section" class="role-reference"><code>section</code></a></td> </tr> <tr> <th class="role-children-head" scope="row">Subclass Roles:</th> <td class="role-children"><ul> <li><a href="https://w3c.github.io/aria/#treeitem" class="role-reference"><code>treeitem</code></a></li> </ul> </td> </tr> <tr> <th class="role-base-head" scope="row">Base Concept:</th> <td class="role-base"><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-li-element">li</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="role-scope-head" scope="row">Required Accessibility Parent Roles:</th> <td class="role-scope"> <ul> <li><a href="https://w3c.github.io/aria/#directory" class="role-reference"><code>directory</code></a></li> <li><a href="https://w3c.github.io/aria/#list" class="role-reference"><code>list</code></a></li> </ul> </td> </tr> <tr> <th class="role-properties-head" scope="row">Supported States and Properties:</th> <td class="role-properties"> <ul> <li><a href="https://w3c.github.io/aria/#aria-posinset" class="property-reference"><code>aria-posinset</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-setsize" class="property-reference"><code>aria-setsize</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> </tbody> </table> </section> <section class="role notoc" id="log"> <h4 class="role-name" title="log" aria-describedby="desc-log"><code>log</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-log" role="definition"> <p>A type of <a href="#dfn-live-region" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-live-region-4">live region</a> where new information is added in meaningful order and old information can disappear. See related <a href="https://w3c.github.io/aria/#marquee" class="role-reference"><code>marquee</code></a>.</p> <p>Examples include chat logs, messaging history, game log, or an error log. In contrast to other live regions, in this <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-53">role</a> there is a <a href="#dfn-relationship" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-relationship-6">relationship</a> between the arrival of new items in the log and the reading order. The log contains a meaningful sequence and new information is added only to the end of the log, not at arbitrary points.</p> <p>Elements with the role <code>log</code> have an implicit <a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a> value of <code>polite</code>.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#section" class="role-reference"><code>section</code></a></td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> <tr> <th class="implicit-values-head" scope="row">Implicit Value for Role:</th> <td class="implicit-values">Default for <a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a> is <code class="default">polite</code>.</td> </tr> </tbody> </table> </section> <section class="role notoc" id="main"> <h4 class="role-name" title="main" aria-describedby="desc-main"><code>main</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-main" role="definition"> <p>A <a href="https://w3c.github.io/aria/#landmark" class="role-reference"><code>landmark</code></a> containing the main content of a document.</p> <p>This marks the content that is directly related to or expands upon the central topic of the document. The <code>main</code> <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-54">role</a> is a non-obtrusive alternative for "skip to main content" links, where the navigation option to go to the main content (or other <a href="#dfn-landmark" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-landmark-9">landmarks</a>) is provided by <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-38">assistive technologies</a>, or by a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agent</a> or browser extension, through a keyboard shortcut or <abbr title="User Interface">UI</abbr> feature such as a side panel or dialog.</p> <p><a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-39">Assistive technologies</a> <em class="rfc2119">SHOULD</em> enable users to quickly navigate to elements with role <code>main</code>. <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agents</a> <em class="rfc2119">SHOULD</em> treat elements with role <code>main</code> as navigational <a href="#dfn-landmark" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-landmark-10">landmarks</a>. <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agents</a> <em class="rfc2119">MAY</em> enable users to quickly navigate to elements with role <code>main</code>.</p> <p>The author <em class="rfc2119">SHOULD</em> mark no more than one <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> on a page with the <code>main</code> role.</p> <div class="note" role="note" id="issue-container-generatedID-21"><div role="heading" class="note-title marker" id="h-note-20" aria-level="4"><span>Note</span></div><p class="">Because <code>document</code> and <code>application</code> elements can be nested in the <abbr title="Document Object Model">DOM</abbr>, they can have multiple <code>main</code> elements as <abbr title="Document Object Model">DOM</abbr> descendants, assuming each of those is associated with different document nodes, either by a <abbr title="Document Object Model">DOM</abbr> nesting (e.g., <a href="https://w3c.github.io/aria/#document" class="role-reference"><code>document</code></a> within <a href="https://w3c.github.io/aria/#document" class="role-reference"><code>document</code></a>) or by use of the <a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a> attribute.</p></div> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#landmark" class="role-reference"><code>landmark</code></a></td> </tr> <tr> <th class="role-related-head" scope="row">Related Concepts:</th> <td class="role-related"><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-main-element">main</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> </tbody> </table> </section> <section class="role notoc" id="mark"> <h4 class="role-name" title="mark" aria-describedby="desc-mark"><code>mark</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-mark" role="definition"> <p>Content which is marked or highlighted for reference or notation purposes, due to the content's relevance in the enclosing context.</p> <p>Example uses for <code>mark</code> include:</p> <ul> <li>Highlighting text in a quotation which is of special interest but is not marked in the original source material, comparable to using a highlighter pen to mark passages of a print article.</li> <li>Indicating portions of the content that are relevant to the user's current activity, such as highlighting text matches found by a search feature.</li> </ul> <p>Authors <em class="rfc2119">SHOULD NOT</em> use <code>mark</code> for purely decorative styling such as syntax highlighting.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#section" class="role-reference"><code>section</code></a></td> </tr> <tr> <th class="role-related-head" scope="row">Related Concepts:</th> <td class="role-related"><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-mark-element">mark</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-disallowed-head" scope="row">Prohibited States and Properties:</th> <td class="role-disallowed"> <ul> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">prohibited</td> </tr> </tbody> </table> </section> <section class="role notoc" id="marquee"> <h4 class="role-name" title="marquee" aria-describedby="desc-marquee"><code>marquee</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-marquee" role="definition"> <p>A type of <a href="#dfn-live-region" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-live-region-5">live region</a> where non-essential information changes frequently. See related <a href="https://w3c.github.io/aria/#log" class="role-reference"><code>log</code></a>.</p> <p>Common usages of <code>marquee</code> include stock tickers and ad banners. The primary difference between a <code>marquee</code> and a <a href="https://w3c.github.io/aria/#log" class="role-reference"><code>log</code></a> is that logs usually have a meaningful order or sequence of important content changes.</p> <p>Elements with the role <code>marquee</code> have an implicit <a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a> value of <code>off</code>.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#section" class="role-reference"><code>section</code></a></td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> </tbody> </table> </section> <section class="role notoc" id="math"> <h4 class="role-name" title="math" aria-describedby="desc-math"><code>math</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-math" role="definition"> <p>Content that represents a mathematical expression.</p> <p>Content with the role <code>math</code> is intended to be marked up in an accessible format such as <cite><a href="https://www.w3.org/TR/MathML3/"><abbr title="Mathematical Markup Language">MathML</abbr></a></cite> [<cite><a class="bibref" data-link-type="biblio" href="#bib-mathml3" title="Mathematical Markup Language (MathML) Version 3.0 2nd Edition">MathML3</a></cite>], or with another type of textual representation such as TeX or LaTeX, which can be converted to an accessible format by native browser implementations or a polyfill library.</p> <p>While it is not ideal to use an image of a mathematical expression, there exists a significant amount of legacy content where images are used to represent mathematical expressions. Authors <em class="rfc2119">SHOULD</em> ensure that images of math are labeled by text that describes the mathematical expression as it might be spoken.</p> <div class="note" role="note" id="issue-container-generatedID-22"><div role="heading" class="note-title marker" id="h-note-21" aria-level="4"><span>Note</span></div><div class=""> <p>Browsers that support native implementations of <abbr title="Mathematical Markup Language">MathML</abbr> are able to provide a more robust, accessible math experience than can be accomplished with plain text approximations of math. Some rendering engines have close integration with screen readers that allow spacial touch exploration of the formula and refreshable braille display output in the <a href="#dfn-nemeth-braille" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-nemeth-braille-1">Nemeth Braille</a> format. This level of integration is not supported with images of mathematical formulas, even if the author provides a plain text approximation.</p> <p>At the time of this writing, some mainstream browsers do not support <abbr title="Mathematical Markup Language">MathML</abbr> natively, and must be retrofit using a JavaScript polyfill library. When authoring math content, use native <abbr title="Mathematical Markup Language">MathML</abbr> wherever possible, and test thoroughly. Use a polyfill library or provide a fallback image with a text alternative approximation if necessary.</p> </div></div> <div class="header-wrapper"><h4 id="mathml-example-with-embedded-tex-annotation"><abbr title="Mathematical Markup Language">MathML</abbr> Example with Embedded TeX Annotation</h4><a class="self-link" href="#mathml-example-with-embedded-tex-annotation" aria-label="Permalink for this Section"></a></div> <div class="example" id="example-11"> <div class="marker"> <a class="self-link" href="#example-11">Example<bdi> 11</bdi></a> </div> <pre class="highlight" aria-busy="false"><code class="hljs xml"><span class="hljs-comment"></span> <span class="hljs-comment"></span> <span class="hljs-tag"><<span class="hljs-name">math</span> <span class="hljs-attr">xmlns</span>=<span class="hljs-string">"http://www.w3.org/1998/Math/MathML"</span>></span> <span class="hljs-tag"><<span class="hljs-name">mrow</span>></span> <span class="hljs-tag"><<span class="hljs-name">mi</span>></span>x<span class="hljs-tag"></<span class="hljs-name">mi</span>></span> <span class="hljs-tag"><<span class="hljs-name">mo</span>></span>=<span class="hljs-tag"></<span class="hljs-name">mo</span>></span> <span class="hljs-tag"><<span class="hljs-name">mfrac</span>></span> <span class="hljs-tag"><<span class="hljs-name">mrow</span>></span> <span class="hljs-tag"><<span class="hljs-name">mo</span> <span class="hljs-attr">form</span>=<span class="hljs-string">"prefix"</span>></span>−<span class="hljs-tag"></<span class="hljs-name">mo</span>></span> <span class="hljs-tag"><<span class="hljs-name">mi</span>></span>b<span class="hljs-tag"></<span class="hljs-name">mi</span>></span> <span class="hljs-tag"><<span class="hljs-name">mo</span>></span>±<span class="hljs-tag"></<span class="hljs-name">mo</span>></span> <span class="hljs-tag"><<span class="hljs-name">msqrt</span>></span> <span class="hljs-tag"><<span class="hljs-name">msup</span>></span> <span class="hljs-tag"><<span class="hljs-name">mi</span>></span>b<span class="hljs-tag"></<span class="hljs-name">mi</span>></span> <span class="hljs-tag"><<span class="hljs-name">mn</span>></span>2<span class="hljs-tag"></<span class="hljs-name">mn</span>></span> <span class="hljs-tag"></<span class="hljs-name">msup</span>></span> <span class="hljs-tag"><<span class="hljs-name">mo</span>></span>−<span class="hljs-tag"></<span class="hljs-name">mo</span>></span> <span class="hljs-tag"><<span class="hljs-name">mn</span>></span>4<span class="hljs-tag"></<span class="hljs-name">mn</span>></span> <span class="hljs-tag"><<span class="hljs-name">mo</span>></span><span class="hljs-symbol">&#x2062;</span><span class="hljs-comment"></span><span class="hljs-tag"></<span class="hljs-name">mo</span>></span> <span class="hljs-tag"><<span class="hljs-name">mi</span>></span>a<span class="hljs-tag"></<span class="hljs-name">mi</span>></span> <span class="hljs-tag"><<span class="hljs-name">mo</span>></span><span class="hljs-symbol">&#x2062;</span><span class="hljs-comment"></span><span class="hljs-tag"></<span class="hljs-name">mo</span>></span> <span class="hljs-tag"><<span class="hljs-name">mi</span>></span>c<span class="hljs-tag"></<span class="hljs-name">mi</span>></span> <span class="hljs-tag"></<span class="hljs-name">msqrt</span>></span> <span class="hljs-tag"></<span class="hljs-name">mrow</span>></span> <span class="hljs-tag"><<span class="hljs-name">mrow</span>></span> <span class="hljs-tag"><<span class="hljs-name">mn</span>></span>2<span class="hljs-tag"></<span class="hljs-name">mn</span>></span> <span class="hljs-tag"><<span class="hljs-name">mo</span>></span><span class="hljs-symbol">&#x2062;</span><span class="hljs-comment"></span><span class="hljs-tag"></<span class="hljs-name">mo</span>></span> <span class="hljs-tag"><<span class="hljs-name">mi</span>></span>a<span class="hljs-tag"></<span class="hljs-name">mi</span>></span> <span class="hljs-tag"></<span class="hljs-name">mrow</span>></span> <span class="hljs-tag"></<span class="hljs-name">mfrac</span>></span> <span class="hljs-tag"></<span class="hljs-name">mrow</span>></span> <span class="hljs-tag"><<span class="hljs-name">annotation</span> <span class="hljs-attr">encoding</span>=<span class="hljs-string">"TeX"</span>></span> x=\frac{-b\pm\sqrt{b^2-4ac}}{2a} <span class="hljs-tag"></<span class="hljs-name">annotation</span>></span> <span class="hljs-tag"></<span class="hljs-name">math</span>></span></code></pre> </div> <div class="header-wrapper"><h4 id="plain-html-or-polyfill-dom-result-of-the-mathml-quadratic-formula">Plain <abbr title="Hypertext Markup Language">HTML</abbr> or Polyfill <abbr title="Document Object Model">DOM</abbr> Result of the <abbr title="Mathematical Markup Language">MathML</abbr> Quadratic Formula</h4><a class="self-link" href="#plain-html-or-polyfill-dom-result-of-the-mathml-quadratic-formula" aria-label="Permalink for this Section"></a></div> <p>If a rendering engine does not support a native math format such as <abbr title="Mathematical Markup Language">MathML</abbr>, authors <em class="rfc2119">MAY</em> use JavaScript to downgrade the content to a format the browser can display, such as this <abbr title="Hypertext Markup Language">HTML</abbr> image using a data URI and plain text alternative.</p> <div class="example" id="example-12"> <div class="marker"> <a class="self-link" href="#example-12">Example<bdi> 12</bdi></a> </div> <pre class="highlight" aria-busy="false"><code class="hljs abnf"><img role<span class="hljs-operator">=</span><span class="hljs-string">"math"</span> src<span class="hljs-operator">=</span><span class="hljs-string">"..."</span> alt<span class="hljs-operator">=</span><span class="hljs-string">"x=⟮−b±√⟮b²−4ac⟯⟯÷2a"</span>></code></pre> </div> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#section" class="role-reference"><code>section</code></a></td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> </tbody> </table> </section> <section class="role notoc" id="menu"> <h4 class="role-name" title="menu" aria-describedby="desc-menu"><code>menu</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-menu" role="definition"> <p>A type of <a href="#dfn-widget" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-widget-17">widget</a> that offers a list of choices to the user.</p> <p>A menu is a container, generally rendered as a popup or overlay, for a set of menu items that can be invoked to perform an action or function. The function is almost always closely related or directly related to the element that the user activated to invoke the menu. Activating a menu item both performs the associated function of the menu item, and results in the automatic dismissal of the menu.</p> <p>The <code>menu</code> <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-55">role</a> is appropriate when a set of menu items is presented in a manner similar to a popup menu. For instance, a menu could be used to represent a context menu for its invoking element, or it would be used to render sub-menus for items of a <a href="https://w3c.github.io/aria/#menubar" class="role-reference"><code>menubar</code></a> or another <code>menu</code> popup.</p> <p>To be <a href="#dfn-keyboard-accessible" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-keyboard-accessible-5">keyboard accessible</a>, authors <em class="rfc2119">SHOULD</em> manage focus of descendants for all instances of this <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-56">role</a>, as described in <a href="#managingfocus">Managing Focus</a>.</p> <p>Elements with the role <code>menu</code> have an implicit <a href="https://w3c.github.io/aria/#aria-orientation" class="property-reference"><code>aria-orientation</code></a> value of <code>vertical</code>.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"> <ul> <li><a href="https://w3c.github.io/aria/#select" class="role-reference"><code>select</code></a></li> </ul> </td> </tr> <tr> <th class="role-children-head" scope="row">Subclass Roles:</th> <td class="role-children"><ul> <li><a href="https://w3c.github.io/aria/#menubar" class="role-reference"><code>menubar</code></a></li> </ul> </td> </tr> <tr> <th class="role-related-head" scope="row">Related Concepts:</th> <td class="role-related"><a href="https://w3c.github.io/aria/#list" class="role-reference"><code>list</code></a></td> </tr> <tr> <th class="role-mustcontain-head" scope="row">Allowed Accessibility Child Roles:</th> <td class="role-mustcontain"> <ul> <li><a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a> with <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-child-13">accessibility child</a> <a href="https://w3c.github.io/aria/#menuitem" class="role-reference"><code>menuitem</code></a></li> <li><a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a> with <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-child-14">accessibility child</a> <a href="https://w3c.github.io/aria/#menuitemradio" class="role-reference"><code>menuitemradio</code></a></li> <li><a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a> with <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-child-15">accessibility child</a> <a href="https://w3c.github.io/aria/#menuitemcheckbox" class="role-reference"><code>menuitemcheckbox</code></a></li> <li><a href="https://w3c.github.io/aria/#menuitem" class="role-reference"><code>menuitem</code></a></li> <li><a href="https://w3c.github.io/aria/#menuitemcheckbox" class="role-reference"><code>menuitemcheckbox</code></a></li> <li><a href="https://w3c.github.io/aria/#menuitemradio" class="role-reference"><code>menuitemradio</code></a></li> <li><a href="https://w3c.github.io/aria/#separator" class="role-reference"><code>separator</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-orientation" class="property-reference"><code>aria-orientation</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> <tr> <th class="implicit-values-head" scope="row">Implicit Value for Role:</th> <td class="implicit-values">Default for <a href="https://w3c.github.io/aria/#aria-orientation" class="property-reference"><code>aria-orientation</code></a> is <code class="default">vertical</code>.</td> </tr> </tbody> </table> </section> <section class="role notoc" id="menubar"> <h4 class="role-name" title="menubar" aria-describedby="desc-menubar"><code>menubar</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-menubar" role="definition"> <p>A presentation of <a href="https://w3c.github.io/aria/#menu" class="role-reference"><code>menu</code></a> that usually remains visible and is usually presented horizontally.</p> <p>The <code>menubar</code> <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-57">role</a> is used to create a menu bar similar to those found in Windows, Mac, and Gnome desktop applications. A menu bar is used to create a consistent set of frequently used commands. Authors <em class="rfc2119">SHOULD</em> ensure that <code>menubar</code> interaction is similar to the typical menu bar interaction in a desktop graphical user interface.</p> <p>To be <a href="#dfn-keyboard-accessible" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-keyboard-accessible-6">keyboard accessible</a>, authors <em class="rfc2119">SHOULD</em> manage focus of descendants for all instances of this <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-58">role</a>, as described in <a href="#managingfocus">Managing Focus</a>.</p> <p>Elements with the role <code>menubar</code> have an implicit <a href="https://w3c.github.io/aria/#aria-orientation" class="property-reference"><code>aria-orientation</code></a> value of <code>horizontal</code>.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#menu" class="role-reference"><code>menu</code></a></td> </tr> <tr> <th class="role-related-head" scope="row">Related Concepts:</th> <td class="role-related"><a href="https://w3c.github.io/aria/#toolbar" class="role-reference"><code>toolbar</code></a></td> </tr> <tr> <th class="role-mustcontain-head" scope="row">Allowed Accessibility Child Roles:</th> <td class="role-mustcontain"> <ul> <li><a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a> with <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-child-16">accessibility child</a> <a href="https://w3c.github.io/aria/#menuitem" class="role-reference"><code>menuitem</code></a></li> <li><a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a> with <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-child-17">accessibility child</a> <a href="https://w3c.github.io/aria/#menuitemradio" class="role-reference"><code>menuitemradio</code></a></li> <li><a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a> with <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-child-18">accessibility child</a> <a href="https://w3c.github.io/aria/#menuitemcheckbox" class="role-reference"><code>menuitemcheckbox</code></a></li> <li><a href="https://w3c.github.io/aria/#menuitem" class="role-reference"><code>menuitem</code></a></li> <li><a href="https://w3c.github.io/aria/#menuitemcheckbox" class="role-reference"><code>menuitemcheckbox</code></a></li> <li><a href="https://w3c.github.io/aria/#menuitemradio" class="role-reference"><code>menuitemradio</code></a></li> <li><a href="https://w3c.github.io/aria/#separator" class="role-reference"><code>separator</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-orientation" class="property-reference"><code>aria-orientation</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> <tr> <th class="implicit-values-head" scope="row">Implicit Value for Role:</th> <td class="implicit-values">Default for <a href="https://w3c.github.io/aria/#aria-orientation" class="property-reference"><code>aria-orientation</code></a> is <code class="default">horizontal</code>.</td> </tr> </tbody> </table> </section> <section class="role notoc" id="menuitem"> <h4 class="role-name" title="menuitem" aria-describedby="desc-menuitem"><code>menuitem</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-menuitem" role="definition"> <p>An option in a set of choices contained by a <a href="https://w3c.github.io/aria/#menu" class="role-reference"><code>menu</code></a> or <a href="https://w3c.github.io/aria/#menubar" class="role-reference"><code>menubar</code></a>.</p> <p>Authors <em class="rfc2119">MUST</em> ensure <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a> with <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-59">role</a> <code>menuitem</code> are <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-child-19">accessibility children</a> of an element with role <a href="https://w3c.github.io/aria/#menu" class="role-reference"><code>menu</code></a>, <a href="https://w3c.github.io/aria/#menubar" class="role-reference"><code>menubar</code></a>, or an element with role <a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a> that is an <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-child-20">accessibility child</a> of an element with role <a href="https://w3c.github.io/aria/#menu" class="role-reference"><code>menu</code></a> or <a href="https://w3c.github.io/aria/#menubar" class="role-reference"><code>menubar</code></a>.</p> <p>Authors <em class="rfc2119">MAY</em> disable a menu item with the <a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> attribute. If the menu item has its <a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> attribute set to <code>true</code>, it indicates that the menu item can be used to launch a sub-level menu, and authors <em class="rfc2119">SHOULD</em> display a new sub-level menu when the menu item is activated.</p> <p>In order to identify that they are related <a href="#dfn-widget" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-widget-18">widgets</a>, authors <em class="rfc2119">MUST</em> ensure that menu items are <a href="#dfn-accessibility-descendant" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-descendant-9">accessibility descendants</a> of an element with role <a href="https://w3c.github.io/aria/#menu" class="role-reference"><code>menu</code></a> or <a href="https://w3c.github.io/aria/#menubar" class="role-reference"><code>menubar</code></a>. Authors <em class="rfc2119">MAY</em> separate menu items into sets by use of a <a href="https://w3c.github.io/aria/#separator" class="role-reference"><code>separator</code></a> or an element with an equivalent role from the native markup language.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"> <ul> <li><a href="https://w3c.github.io/aria/#command" class="role-reference"><code>command</code></a></li> </ul> </td> </tr> <tr> <th class="role-children-head" scope="row">Subclass Roles:</th> <td class="role-children"><ul> <li><a href="https://w3c.github.io/aria/#menuitemcheckbox" class="role-reference"><code>menuitemcheckbox</code></a></li> <li><a href="https://w3c.github.io/aria/#menuitemradio" class="role-reference"><code>menuitemradio</code></a></li> </ul> </td> </tr> <tr> <th class="role-related-head" scope="row">Related Concepts:</th> <td class="role-related"> <ul> <li><a href="https://w3c.github.io/aria/#listitem" class="role-reference"><code>listitem</code></a></li> <li><a href="https://w3c.github.io/aria/#option" class="role-reference"><code>option</code></a></li> </ul> </td> </tr> <tr> <th class="role-scope-head" scope="row">Required Accessibility Parent Roles:</th> <td class="role-scope"> <ul> <li><a href="https://w3c.github.io/aria/#menu" class="role-reference"><code>menu</code></a></li> <li><a href="https://w3c.github.io/aria/#menubar" class="role-reference"><code>menubar</code></a></li> <li><a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a> with <a href="#dfn-accessibility-parent" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-parent-2">accessibility parent</a> <a href="https://w3c.github.io/aria/#menu" class="role-reference"><code>menu</code></a></li> <li><a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a> with <a href="#dfn-accessibility-parent" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-parent-3">accessibility parent</a> <a href="https://w3c.github.io/aria/#menubar" class="role-reference"><code>menubar</code></a></li> </ul> </td> </tr> <tr> <th class="role-properties-head" scope="row">Supported States and Properties:</th> <td class="role-properties"> <ul> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-expanded" class="state-reference"><code>aria-expanded</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-posinset" class="property-reference"><code>aria-posinset</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-setsize" class="property-reference"><code>aria-setsize</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom"> <ul> <li>contents</li> <li>author</li> </ul> </td> </tr> <tr> <th class="role-namerequired-head" scope="row">Accessible Name Required:</th> <td class="role-namerequired">True</td> </tr> </tbody> </table> </section> <section class="role notoc" id="menuitemcheckbox"> <h4 class="role-name" title="menuitemcheckbox" aria-describedby="desc-menuitemcheckbox"><code>menuitemcheckbox</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-menuitemcheckbox" role="definition"> <p>A <a href="https://w3c.github.io/aria/#menuitem" class="role-reference"><code>menuitem</code></a> with a checkable state whose possible <span>values</span> are <code>true</code>, <code>false</code>, or <code>mixed</code>.</p> <p>Authors <em class="rfc2119">MUST</em> ensure <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a> with <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-60">role</a> <code>menuitemcheckbox</code> are <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-child-21">accessibility children</a> of an element with role <a href="https://w3c.github.io/aria/#menu" class="role-reference"><code>menu</code></a>, <a href="https://w3c.github.io/aria/#menubar" class="role-reference"><code>menubar</code></a>, or an element with role <a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a> that is an <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-child-22">accessibility child</a> of an element with role <a href="https://w3c.github.io/aria/#menu" class="role-reference"><code>menu</code></a> or <a href="https://w3c.github.io/aria/#menubar" class="role-reference"><code>menubar</code></a>.</p> <p>The <a href="https://w3c.github.io/aria/#aria-checked" class="state-reference"><code>aria-checked</code></a> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attribute</a> of a <code>menuitemcheckbox</code> indicates whether the menu item is checked (<code>true</code>), unchecked (<code>false</code>), or represents a sub-level menu of other menu items that have a mixture of checked and unchecked values (<code>mixed</code>).</p> <p>In order to identify that they are related <a href="#dfn-widget" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-widget-19">widgets</a>, authors <em class="rfc2119">MUST</em> ensure that menu item checkboxes are the <a href="#dfn-accessibility-descendant" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-descendant-10">accessibility descendants</a> of an element with role <a href="https://w3c.github.io/aria/#menu" class="role-reference"><code>menu</code></a> or <a href="https://w3c.github.io/aria/#menubar" class="role-reference"><code>menubar</code></a>. Authors <em class="rfc2119">MAY</em> separate menu items into sets by use of a <a href="https://w3c.github.io/aria/#separator" class="role-reference"><code>separator</code></a> or an element with an equivalent role from the native markup language.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"> <ul> <li><a href="https://w3c.github.io/aria/#menuitem" class="role-reference"><code>menuitem</code></a></li> </ul> </td> </tr> <tr> <th class="role-related-head" scope="row">Related Concepts:</th> <td class="role-related"><a href="https://w3c.github.io/aria/#menuitemradio" class="role-reference"><code>menuitemradio</code></a></td> </tr> <tr> <th class="role-scope-head" scope="row">Required Accessibility Parent Roles:</th> <td class="role-scope"> <ul> <li><a href="https://w3c.github.io/aria/#menu" class="role-reference"><code>menu</code></a></li> <li><a href="https://w3c.github.io/aria/#menubar" class="role-reference"><code>menubar</code></a></li> <li><a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a> with <a href="#dfn-accessibility-parent" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-parent-4">accessibility parent</a> <a href="https://w3c.github.io/aria/#menu" class="role-reference"><code>menu</code></a></li> <li><a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a> with <a href="#dfn-accessibility-parent" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-parent-5">accessibility parent</a> <a href="https://w3c.github.io/aria/#menubar" class="role-reference"><code>menubar</code></a></li> </ul> </td> </tr> <tr> <th class="role-required-properties-head">Required States and Properties:</th> <td class="role-required-properties"> <ul> <li><a href="https://w3c.github.io/aria/#aria-checked" class="state-reference"><code>aria-checked</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-expanded" class="state-reference"><code>aria-expanded</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-posinset" class="property-reference"><code>aria-posinset</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-setsize" class="property-reference"><code>aria-setsize</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom"> <ul> <li>contents</li> <li>author</li> </ul> </td> </tr> <tr> <th class="role-namerequired-head" scope="row">Accessible Name Required:</th> <td class="role-namerequired">True</td> </tr> <tr> <th class="role-childpresentational-head" scope="row">Children Presentational:</th> <td class="role-childpresentational">True</td> </tr> </tbody> </table> </section> <section class="role notoc" id="menuitemradio"> <h4 class="role-name" title="menuitemradio" aria-describedby="desc-menuitemradio"><code>menuitemradio</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-menuitemradio" role="definition"> <p>A checkable <a href="https://w3c.github.io/aria/#menuitem" class="role-reference"><code>menuitem</code></a> in a set of elements with the same role, only one of which can be checked at a time.</p> <p>Authors <em class="rfc2119">MUST</em> ensure <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a> with <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-61">role</a> <code>menuitemradio</code> are <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-child-23">accessibility children</a> of an element with role <a href="https://w3c.github.io/aria/#menu" class="role-reference"><code>menu</code></a>, <a href="https://w3c.github.io/aria/#menubar" class="role-reference"><code>menubar</code></a>, or an element with role <a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a> that is an <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-child-24">accessibility child</a> of an element with role <a href="https://w3c.github.io/aria/#menu" class="role-reference"><code>menu</code></a> or <a href="https://w3c.github.io/aria/#menubar" class="role-reference"><code>menubar</code></a>.</p> <p>Authors <em class="rfc2119">SHOULD</em> enforce that only one <code>menuitemradio</code> in a group can be checked at the same time. When one item in the group is checked, the previously checked item becomes unchecked (its <a href="https://w3c.github.io/aria/#aria-checked" class="state-reference"><code>aria-checked</code></a> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attribute</a> becomes <code>false</code>).</p> <p>In order to identify that they are related <a href="#dfn-widget" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-widget-20">widgets</a>, authors <em class="rfc2119">MUST</em> ensure that menu item radios are <a href="#dfn-accessibility-descendant" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-descendant-11">accessibility descendants</a> of an element with role <a href="https://w3c.github.io/aria/#menu" class="role-reference"><code>menu</code></a> or <a href="https://w3c.github.io/aria/#menubar" class="role-reference"><code>menubar</code></a>.</p> <p>If a <a href="https://w3c.github.io/aria/#menu" class="role-reference"><code>menu</code></a> or <a href="https://w3c.github.io/aria/#menubar" class="role-reference"><code>menubar</code></a> contains more than one group of <code>menuitemradio</code> elements, or if the menu contains one group and other, unrelated menu items, authors <em class="rfc2119">SHOULD</em> contain each set of related <code>menuitemradio</code> elements in an element using the <a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a> role. Authors <em class="rfc2119">MAY</em> also delimit the group from other menu items with an element using the <a href="https://w3c.github.io/aria/#separator" class="role-reference"><code>separator</code></a> role, or an element with an equivalent role from the native markup language. </p></div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"> <ul> <li><a href="https://w3c.github.io/aria/#menuitem" class="role-reference"><code>menuitem</code></a></li> </ul> </td> </tr> <tr> <th class="role-related-head" scope="row">Related Concepts:</th> <td class="role-related"><a href="https://w3c.github.io/aria/#menuitemcheckbox" class="role-reference"><code>menuitemcheckbox</code></a></td> </tr> <tr> <th class="role-scope-head" scope="row">Required Accessibility Parent Roles:</th> <td class="role-scope"> <ul> <li><a href="https://w3c.github.io/aria/#menu" class="role-reference"><code>menu</code></a></li> <li><a href="https://w3c.github.io/aria/#menubar" class="role-reference"><code>menubar</code></a></li> <li><a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a> with <a href="#dfn-accessibility-parent" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-parent-6">accessibility parent</a> <a href="https://w3c.github.io/aria/#menu" class="role-reference"><code>menu</code></a></li> <li><a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a> with <a href="#dfn-accessibility-parent" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-parent-7">accessibility parent</a> <a href="https://w3c.github.io/aria/#menubar" class="role-reference"><code>menubar</code></a></li> </ul> </td> </tr> <tr> <th class="role-required-properties-head">Required States and Properties:</th> <td class="role-required-properties"> <ul> <li><a href="https://w3c.github.io/aria/#aria-checked" class="state-reference"><code>aria-checked</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-expanded" class="state-reference"><code>aria-expanded</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-posinset" class="property-reference"><code>aria-posinset</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-setsize" class="property-reference"><code>aria-setsize</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom"> <ul> <li>contents</li> <li>author</li> </ul> </td> </tr> <tr> <th class="role-namerequired-head" scope="row">Accessible Name Required:</th> <td class="role-namerequired">True</td> </tr> <tr> <th class="role-childpresentational-head" scope="row">Children Presentational:</th> <td class="role-childpresentational">True</td> </tr> </tbody> </table> </section> <section class="role notoc" id="meter"> <h4 class="role-name" title="meter" aria-describedby="desc-meter"><code>meter</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-meter" role="definition"> <p>An <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> that represents a scalar measurement within a known range, or a fractional value. See related <a href="https://w3c.github.io/aria/#progressbar" class="role-reference"><code>progressbar</code></a>.</p> <p>Authors <em class="rfc2119">MAY</em> set <a href="https://w3c.github.io/aria/#aria-valuemin" class="property-reference"><code>aria-valuemin</code></a> and <a href="https://w3c.github.io/aria/#aria-valuemax" class="property-reference"><code>aria-valuemax</code></a> to indicate the minimum and maximum values for the <code>meter</code>. Otherwise, their implicit values follow the same rules as <code><input type="<code><a data-link-type="attr-value" href="https://html.spec.whatwg.org/multipage/input.html#attr-input-type-range-keyword">range</a></code>"></code> in <abbr title="Hypertext Markup Language">HTML</abbr>:</p> <ul> <li>If <code>aria-valuemin</code> is missing or not a <a href="#valuetype_number">number</a>, it defaults to 0 (zero).</li> <li>If <code>aria-valuemax</code> is missing or not a <a href="#valuetype_number">number</a>, it defaults to 100.</li> </ul> <p>The value of <a href="https://w3c.github.io/aria/#aria-valuenow" class="property-reference"><code>aria-valuenow</code></a> <em class="rfc2119">MUST NOT</em> fall below or exceed the computed values of <code>aria-valuemin</code> and <code>aria-valuemax</code>, respectively.</p> <p>Authors <em class="rfc2119">SHOULD NOT</em> use the <code>meter</code> role to indicate progress; the <a href="https://w3c.github.io/aria/#progressbar" class="role-reference"><code>progressbar</code></a> role exists to address that need.</p> <div class="note" role="note" id="issue-container-generatedID-23"><div role="heading" class="note-title marker" id="h-note-22" aria-level="4"><span>Note</span></div><p class="">Presently, there are no <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> properties corresponding to the <code><code><a data-link-type="element-attr" href="https://html.spec.whatwg.org/multipage/form-elements.html#attr-meter-low">low</a></code></code>, <code><code><a data-link-type="element-attr" href="https://html.spec.whatwg.org/multipage/form-elements.html#attr-meter-optimum">optimum</a></code></code>, and <code><code><a data-link-type="element-attr" href="https://html.spec.whatwg.org/multipage/form-elements.html#attr-meter-high">high</a></code></code> attributes supported on the <code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/form-elements.html#the-meter-element">meter</a></code>></code> element in <abbr title="Hypertext Markup Language">HTML</abbr>. The addition of these properties will be considered for <abbr title="Accessible Rich Internet Applications">ARIA</abbr> version 1.3.</p></div> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#range" class="role-reference"><code>range</code></a></td> </tr> <tr> <th class="role-related-head" scope="row">Related Concepts:</th> <td class="role-related"><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/form-elements.html#the-meter-element">meter</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="role-required-properties-head">Required States and Properties:</th> <td class="role-required-properties"><a href="https://w3c.github.io/aria/#aria-valuenow" class="property-reference"><code>aria-valuenow</code></a></td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-valuemax" class="property-reference"><code>aria-valuemax</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-valuemin" class="property-reference"><code>aria-valuemin</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-valuetext" class="property-reference"><code>aria-valuetext</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> <tr> <th class="role-namerequired-head" scope="row">Accessible Name Required:</th> <td class="role-namerequired">True</td> </tr> <tr> <th class="role-childpresentational-head" scope="row">Children Presentational:</th> <td class="role-childpresentational">True</td> </tr> <tr> <th class="implicit-values-head" scope="row">Implicit Value for Role:</th> <td class="implicit-values"> Default for <a href="https://w3c.github.io/aria/#aria-valuemin" class="property-reference"><code>aria-valuemin</code></a> is <code class="default">0</code>. <br> Default for <a href="https://w3c.github.io/aria/#aria-valuemax" class="property-reference"><code>aria-valuemax</code></a> is <code class="default">100</code>. </td> </tr> </tbody> </table> </section> <section class="role notoc" id="navigation"> <h4 class="role-name" title="navigation" aria-describedby="desc-navigation"><code>navigation</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-navigation" role="definition"> <p>A <a href="https://w3c.github.io/aria/#landmark" class="role-reference"><code>landmark</code></a> containing a collection of navigational <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a> (usually links) for navigating the document or related documents.</p> <p><a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-40">Assistive technologies</a> <em class="rfc2119">SHOULD</em> enable users to quickly navigate to elements with role <code>navigation</code>. <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agents</a> <em class="rfc2119">SHOULD</em> treat elements with role <code>navigation</code> as navigational <a href="#dfn-landmark" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-landmark-11">landmarks</a>. <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agents</a> <em class="rfc2119">MAY</em> enable users to quickly navigate to elements with role <code>navigation</code>.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#landmark" class="role-reference"><code>landmark</code></a></td> </tr> <tr> <th class="role-related-head" scope="row">Related Concepts:</th> <td class="role-related"><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/sections.html#the-nav-element">nav</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> </tbody> </table> </section> <section class="role notoc" id="none"> <h4 class="role-name" title="none" aria-describedby="desc-none"><code>none</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-none" role="definition"> <p>An <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> whose implicit native role semantics will not be mapped to the <a href="#dfn-accessibility-api" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-api-17">accessibility <abbr title="Application Programing Interfaces">API</abbr></a>. See synonym <a href="https://w3c.github.io/aria/#presentation" class="role-reference"><code>presentation</code></a>.</p> <div class="note" role="note" id="role-none-note-none"><div role="heading" class="note-title marker" id="h-note-23" aria-level="4"><span>Note</span></div><div class=""> Note regarding the <abbr title="Accessible Rich Internet Applications">ARIA</abbr> 1.1 <a href="https://w3c.github.io/aria/#none" class="role-reference"><code>none</code></a> role. <p>In <abbr title="Accessible Rich Internet Applications">ARIA</abbr> 1.1, the working group introduced <a href="https://w3c.github.io/aria/#none" class="role-reference"><code>none</code></a> as a synonym to the <code>presentation</code> role, due to author confusion surrounding the intended meaning of the word "presentation" or "presentational." Many individuals erroneously consider <code>role="presentation"</code> to be synonymous with <code>aria-hidden="true"</code>, and we believe <code>role="none"</code> conveys the actual meaning more unambiguously.</p> </div></div> <p>The intended use is when an element is used to change the look of the page but does not have all the functional, interactive, or structural relevance implied by the element type, or can be used to provide for an accessible fallback in older browsers that do not support <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr>.</p> <p>Example use cases:</p> <ul> <li>An element whose content is completely presentational (like a spacer image, decorative graphic, or clearing element);</li> <li>An image that is in a container with the <a href="https://w3c.github.io/aria/#img" class="role-reference"><code>img</code></a> <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-62">role</a> and where the full text alternative is available and is marked up with <a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a> and (if needed) <a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a>;</li> <li>An element used as an additional markup "hook" for <abbr title="Cascading Style Sheets">CSS</abbr>; or</li> <li>A layout table and/or any of its associated rows, cells, etc.</li> </ul> <p>For any element with a role of <a href="https://w3c.github.io/aria/#none" class="role-reference"><code>none</code></a>/<a href="https://w3c.github.io/aria/#presentation" class="role-reference"><code>presentation</code></a> and which is not focusable, the user agent <em class="rfc2119">MUST NOT</em> expose the implicit native semantics of the element (the role and its states and properties) to accessibility <abbr title="Application Programing Interfaces">APIs</abbr>. However, the user agent <em class="rfc2119">MUST</em> expose content and descendant elements that do not have an explicit or inherited role of <a href="https://w3c.github.io/aria/#none" class="role-reference"><code>none</code></a>/<a href="https://w3c.github.io/aria/#presentation" class="role-reference"><code>presentation</code></a>. Thus, the <a href="https://w3c.github.io/aria/#none" class="role-reference"><code>none</code></a>/<a href="https://w3c.github.io/aria/#presentation" class="role-reference"><code>presentation</code></a> role causes a given element to be treated as having no role or to be removed from the <a href="#dfn-accessibility-tree" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-tree-3">accessibility tree</a>, but does not cause the content contained within the element to be removed from the accessibility tree.</p> <p>For example, the following two markup snippets will be exposed similarly to an accessibility <abbr title="Application Programing Interface">API</abbr>.</p> <div class="example" id="example-13"> <div class="marker"> <a class="self-link" href="#example-13">Example<bdi> 13</bdi></a> </div> <pre class="highlight" aria-busy="false"><code class="hljs xml"><span class="hljs-comment"></span> <span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"none"</span>></span> Sample Content <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"..."</span>></span>let's go!<span class="hljs-tag"></<span class="hljs-name">a</span>></span> <span class="hljs-tag"></<span class="hljs-name">h1</span>></span> <span class="hljs-comment"></span> <span class="hljs-tag"><<span class="hljs-name">span</span>></span> Sample Content <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"..."</span>></span>let's go!<span class="hljs-tag"></<span class="hljs-name">a</span>></span> <span class="hljs-tag"></<span class="hljs-name">span</span>></span></code></pre> </div> <p>In <abbr title="Hypertext Markup Language">HTML</abbr>, the <code><img></code> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> is treated as a single entity regardless of the type of image file. Consequently, using <code>role="none"</code> or <code>role="presentation"</code> on an <abbr title="Hypertext Markup Language">HTML</abbr> <code>img</code> is equivalent to using <code>aria-hidden="true"</code>. In order to make the image contents accessible, authors can embed the object using an <code><object></code> or <code><iframe></code> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a>, or use inline <abbr title="Scalable Vector Graphics">SVG</abbr> code, and follow the accessibility guidelines for the image content.</p> <p>Authors <em class="rfc2119">SHOULD NOT</em> provide a meaningful text alternative (for example, use <code>alt=""</code> in <abbr title="Hypertext Markup Language">HTML</abbr>) when the <code>none</code>/<code>presentation</code> role is applied to an image.</p> <p>In the following code sample, the containing <a href="https://w3c.github.io/aria/#img" class="role-reference"><code>img</code></a> and is appropriately labeled by the caption paragraph. In this example the <code>img</code> element can be marked as <a href="https://w3c.github.io/aria/#none" class="role-reference"><code>none</code></a>/<a href="https://w3c.github.io/aria/#presentation" class="role-reference"><code>presentation</code></a> because the role and the text alternatives are provided by the containing element.</p> <div class="example" id="example-14"> <div class="marker"> <a class="self-link" href="#example-14">Example<bdi> 14</bdi></a> </div> <pre class="highlight" aria-busy="false"><code class="hljs abnf"><div role<span class="hljs-operator">=</span><span class="hljs-string">"img"</span> aria-labelledby<span class="hljs-operator">=</span><span class="hljs-string">"caption"</span>> <img src<span class="hljs-operator">=</span><span class="hljs-string">"example.png"</span> role<span class="hljs-operator">=</span><span class="hljs-string">"none"</span> alt<span class="hljs-operator">=</span><span class="hljs-string">""</span>> <p id<span class="hljs-operator">=</span><span class="hljs-string">"caption"</span>>A visible text caption labeling the image.</p> </div></code></pre> </div> <p>In the following code sample, because the anchor (<abbr title="Hypertext Markup Language">HTML</abbr> <code>a</code> element) is acting as the treeitem, the list item (<abbr title="Hypertext Markup Language">HTML</abbr> <code>li</code> element) is assigned an explicit <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> role of <a href="https://w3c.github.io/aria/#none" class="role-reference"><code>none</code></a>/<a href="https://w3c.github.io/aria/#presentation" class="role-reference"><code>presentation</code></a> to override the user agent's implicit native semantics for list items.</p> <div class="example" id="example-15"> <div class="marker"> <a class="self-link" href="#example-15">Example<bdi> 15</bdi></a> </div> <pre class="highlight" aria-busy="false"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"tree"</span>></span> <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"none"</span>></span> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"treeitem"</span> <span class="hljs-attr">aria-expanded</span>=<span class="hljs-string">"true"</span>></span>An expanded tree node<span class="hljs-tag"></<span class="hljs-name">a</span>></span> <span class="hljs-tag"></<span class="hljs-name">li</span>></span> … <span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre> </div> <div class="header-wrapper"><h5 id="presentational-role-inheritance">Presentational Role Inheritance</h5><a class="self-link" href="#presentational-role-inheritance" aria-label="Permalink for this Section"></a></div> <p>The <a href="https://w3c.github.io/aria/#none" class="role-reference"><code>none</code></a>/<a href="https://w3c.github.io/aria/#presentation" class="role-reference"><code>presentation</code></a> role is used on an element that has implicit native semantics, meaning that there is a default accessibility <abbr title="Application Programing Interface">API</abbr> role for the element. Some elements are only complete when additional descendant elements are provided. For example, in <abbr title="Hypertext Markup Language">HTML</abbr>, table elements (matching the <a href="https://w3c.github.io/aria/#table" class="role-reference"><code>table</code></a> role) require <code>tr</code> descendants (which have an implicit <a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a> <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-63">role</a>), which in turn require <code>th</code> or <code>td</code> children (the <a href="https://w3c.github.io/aria/#columnheader" class="role-reference"><code>columnheader</code></a> or <a href="https://w3c.github.io/aria/#rowheader" class="role-reference"><code>rowheader</code></a> and <a href="https://w3c.github.io/aria/#cell" class="role-reference"><code>cell</code></a> roles, respectively). Similarly, lists require list item children. The descendant elements that complete the semantics of an element are described in <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> as <a href="#mustContain">Allowed Accessibility Child Roles</a>.</p> <p>When an explicit or inherited role of <a href="https://w3c.github.io/aria/#none" class="role-reference"><code>none</code></a>/<a href="https://w3c.github.io/aria/#presentation" class="role-reference"><code>presentation</code></a> is applied to an element with the implicit semantic of a <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> role that has <a href="#mustContain">Allowed Accessibility Child Roles</a>, in addition to the element with the explicit role of <a href="https://w3c.github.io/aria/#none" class="role-reference"><code>none</code></a>/<a href="https://w3c.github.io/aria/#presentation" class="role-reference"><code>presentation</code></a>, the user agent <em class="rfc2119">MUST</em> apply an inherited role of <a href="https://w3c.github.io/aria/#none" class="role-reference"><code>none</code></a> to any <a href="#dfn-accessibility-descendant" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-descendant-12">accessibility descendants</a> that do not have an explicit role defined. Also, when an explicit or inherited role of <a href="https://w3c.github.io/aria/#none" class="role-reference"><code>none</code></a>/<a href="https://w3c.github.io/aria/#presentation" class="role-reference"><code>presentation</code></a> is applied to a host language element which has specifically allowed children as defined by the host language specification, in addition to the element with the explicit role of <a href="https://w3c.github.io/aria/#none" class="role-reference"><code>none</code></a>/<a href="https://w3c.github.io/aria/#presentation" class="role-reference"><code>presentation</code></a>, the user agent <em class="rfc2119">MUST</em> apply an inherited role of <a href="https://w3c.github.io/aria/#none" class="role-reference"><code>none</code></a> to any specifically allowed children that do not have an explicit role defined.</p> <p>For any element with an explicit or inherited role of <a href="https://w3c.github.io/aria/#none" class="role-reference"><code>none</code></a>/<a href="https://w3c.github.io/aria/#presentation" class="role-reference"><code>presentation</code></a> and which is not focusable, user agents <em class="rfc2119">MUST</em> ignore role-specific <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> states and properties for that element. For example, in <abbr title="Hypertext Markup Language">HTML</abbr>, a <code>ul</code> or <code>ol</code> element with a role of <a href="https://w3c.github.io/aria/#none" class="role-reference"><code>none</code></a>/<a href="https://w3c.github.io/aria/#presentation" class="role-reference"><code>presentation</code></a> will have the implicit native semantics of its <code>li</code> elements removed because the <a href="https://w3c.github.io/aria/#list" class="role-reference"><code>list</code></a> role to which the <code>ul</code> or <code>ol</code> corresponds has an <a href="#mustContain">Allowed Accessibility Child Role</a> of <a href="https://w3c.github.io/aria/#listitem" class="role-reference"><code>listitem</code></a>. Likewise, the implicit native semantics of an <abbr title="Hypertext Markup Language">HTML</abbr> <code>table</code> element's <code>thead</code>/<code>tbody</code>/<code>tfoot</code>/<code>tr</code>/<code>th</code>/<code>td</code> descendants will also be removed, because the <abbr title="Hypertext Markup Language">HTML</abbr> specification indicates that these are required structural descendants of the <code>table</code> element.</p> <div class="note" role="note" id="issue-container-generatedID-24"><div role="heading" class="note-title marker" id="h-note-24" aria-level="4"><span>Note</span></div><p class="">Only the implicit native semantics of elements that correspond to <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> <a href="#mustContain">Allowed Accessibility Child Roles</a> are removed. All other content remains intact, including nested tables or lists, unless those elements also have an explicit role of <a href="https://w3c.github.io/aria/#none" class="role-reference"><code>none</code></a>/<a href="https://w3c.github.io/aria/#presentation" class="role-reference"><code>presentation</code></a> specified.</p></div> <p>For example, according to an accessibility <abbr title="Application Programing Interface">API</abbr>, the following markup elements might have identical or very similar role semantics (generic or none role) and identical content.</p> <div class="example" id="example-16"> <div class="marker"> <a class="self-link" href="#example-16">Example<bdi> 16</bdi></a> </div> <pre class="highlight" aria-busy="false"><code class="hljs xml"><span class="hljs-comment"></span> <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"none"</span>></span> <span class="hljs-tag"><<span class="hljs-name">li</span>></span> Sample Content <span class="hljs-tag"></<span class="hljs-name">li</span>></span> <span class="hljs-tag"><<span class="hljs-name">li</span>></span> More Sample Content <span class="hljs-tag"></<span class="hljs-name">li</span>></span> <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> <span class="hljs-comment"></span> <span class="hljs-tag"><<span class="hljs-name">foo</span>></span> <span class="hljs-tag"><<span class="hljs-name">foo</span>></span> Sample Content <span class="hljs-tag"></<span class="hljs-name">foo</span>></span> <span class="hljs-tag"><<span class="hljs-name">foo</span>></span> More Sample Content <span class="hljs-tag"></<span class="hljs-name">foo</span>></span> <span class="hljs-tag"></<span class="hljs-name">foo</span>></span></code></pre> </div> <div class="note" role="note" id="issue-container-generatedID-25"><div role="heading" class="note-title marker" id="h-note-25" aria-level="4"><span>Note</span></div><p class="">There are other <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> roles with specific allowed children for which this situation is applicable (e.g., feeds and listboxes), but tables and lists are the most common real-world cases in which the none/presentation inheritance is likely to apply.</p></div> <p>For any element with an explicit or inherited role of <a href="https://w3c.github.io/aria/#none" class="role-reference"><code>none</code></a>/<a href="https://w3c.github.io/aria/#presentation" class="role-reference"><code>presentation</code></a>, user agents <em class="rfc2119">MUST</em> apply an inherited role of <a href="https://w3c.github.io/aria/#none" class="role-reference"><code>none</code></a> to all host-language-specific labeling elements for the presentational element. For example, a <code>table</code> element with a role of <a href="https://w3c.github.io/aria/#none" class="role-reference"><code>none</code></a>/<a href="https://w3c.github.io/aria/#presentation" class="role-reference"><code>presentation</code></a> will have the implicit native semantics of its <code>caption</code> element removed, because the caption is merely a label for the presentational table.</p> <div class="note" id="issue-container-generatedID-26"><div role="heading" class="ednote-title marker" id="h-ednote-1" aria-level="4"><span>Editor's note</span></div><p class="">Information about <a href="#conflict_resolution_presentation_none">resolving conflicts in the none/presentation role</a> has been moved to <a href="#document-handling_author-errors">Handling Author Errors</a></p></div> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#structure" class="role-reference"><code>structure</code></a></td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-disallowed-head" scope="row">Prohibited States and Properties:</th> <td class="role-disallowed"> <ul> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">prohibited</td> </tr> </tbody> </table> </section> <section class="role notoc" id="note"> <h4 class="role-name" title="note" aria-describedby="desc-note"><code>note</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-note" role="definition"> <p>A <a href="https://w3c.github.io/aria/#section" class="role-reference"><code>section</code></a> whose content represents additional information or parenthetical context to the primary content it supplements.</p> <p>A <code>note</code> is content provided by the author of the page or document, it is not to be used for providing reactions or suggestions. For these purposes, please review <a href="https://w3c.github.io/aria/#comment" class="role-reference"><code>comment</code></a> and <a href="https://w3c.github.io/aria/#suggestion" class="role-reference"><code>suggestion</code></a>.</p> <p>When used within the normal flow of a page's content, a <code>note</code> has an implicit association with the content that it supplements. The following example demonstrates using a <code>note</code> to call out additional information in the natural reading order of a page:</p> <div class="example" id="example-17"> <div class="marker"> <a class="self-link" href="#example-17">Example<bdi> 17</bdi></a> </div> <pre class="highlight" aria-busy="false"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">p</span>></span>... the following results outline support for the tested features.<span class="hljs-tag"></<span class="hljs-name">p</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"note"</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Please keep in mind that at the time of publishing this page all results were accurate.<span class="hljs-tag"></<span class="hljs-name">p</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>If you find any variations in results, please let us know!<span class="hljs-tag"></<span class="hljs-name">p</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>...<span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre> </div> <p>In cases where an element with role <a href="https://w3c.github.io/aria/#note" class="role-reference"><code>note</code></a> has been determined to need a programmatic association with the content it supplements, authors can use one of the following mechanisms to associate the elements:</p> <ul> <li>If the <code>note</code> contains structured or interactive content (for example, a link, button, list, table, etc.) use <a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a>.</li> <li>If the <code>note</code> is brief and consists of static text, use <a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a>.</li> </ul> <div class="example" id="example-18"> <div class="marker"> <a class="self-link" href="#example-18">Example<bdi> 18</bdi></a> </div> <pre class="highlight" aria-busy="false"><code class="hljs xml"> <span class="hljs-comment"></span> ... <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-details</span>=<span class="hljs-string">"info-note"</span>></span>Get Started<span class="hljs-tag"></<span class="hljs-name">button</span>></span> ... <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"note"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"info-note"</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Need more information before you get started?<span class="hljs-tag"></<span class="hljs-name">p</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Visit our <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"..."</span>></span>product description page<span class="hljs-tag"></<span class="hljs-name">a</span>></span> to get all the information you need.<span class="hljs-tag"></<span class="hljs-name">p</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> </div> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#section" class="role-reference"><code>section</code></a></td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> </tbody> </table> </section> <section class="role notoc" id="option"> <h4 class="role-name" title="option" aria-describedby="desc-option"><code>option</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-option" role="definition"> <p>An item in a <a href="https://w3c.github.io/aria/#listbox" class="role-reference"><code>listbox</code></a>.</p> <p>Authors <em class="rfc2119">MUST</em> ensure <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a> with <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-64">role</a> <code>option</code> are <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-child-25">accessibility children</a> of an element with <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-65">role</a> <a href="https://w3c.github.io/aria/#listbox" class="role-reference"><code>listbox</code></a> or of an element with <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-66">role</a> <a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a> that is the <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-child-26">accessibility child</a> of an element with <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-67">role</a> <code>listbox</code>. Options not associated with a <a href="https://w3c.github.io/aria/#listbox" class="role-reference"><code>listbox</code></a> might not be correctly mapped to an <a href="#dfn-accessibility-api" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-api-18">accessibility <abbr title="Application Programing Interfaces">API</abbr></a>.</p> <p>In certain conditions, a user agent <em class="rfc2119">MAY</em> provide an implicit value for <a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a> for each <a href="https://w3c.github.io/aria/#option" class="role-reference"><code>option</code></a> in a <a href="https://w3c.github.io/aria/#listbox" class="role-reference"><code>listbox</code></a>, and if it does, the user agent <em class="rfc2119">MUST</em> ensure the following conditions are met before providing an implicit value:</p> <ul> <li>The value of <a href="https://w3c.github.io/aria/#aria-multiselectable" class="property-reference"><code>aria-multiselectable</code></a> on the <a href="https://w3c.github.io/aria/#listbox" class="role-reference"><code>listbox</code></a> is <code>false</code> or <code>undefined</code>.</li> <li>None of the <a href="https://w3c.github.io/aria/#option" class="role-reference"><code>option</code></a> elements in the <a href="https://w3c.github.io/aria/#listbox" class="role-reference"><code>listbox</code></a> have an explicitly declared value for <a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a> or <a href="https://w3c.github.io/aria/#aria-checked" class="state-reference"><code>aria-checked</code></a>.</li> </ul> <p> If a user agent provides an implicit <a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a> value for an <a href="https://w3c.github.io/aria/#option" class="role-reference"><code>option</code></a>, the value <em class="rfc2119">SHOULD</em> be <code>true</code> if the <a href="https://w3c.github.io/aria/#option" class="role-reference"><code>option</code></a> has <abbr title="Document Object Model">DOM</abbr> focus or the <a href="https://w3c.github.io/aria/#listbox" class="role-reference"><code>listbox</code></a> has <abbr title="Document Object Model">DOM</abbr> focus and the <a href="https://w3c.github.io/aria/#option" class="role-reference"><code>option</code></a> is referenced by <a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a>. Otherwise, if a user agent provides an implicit <a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a> value for an <a href="https://w3c.github.io/aria/#option" class="role-reference"><code>option</code></a>, the value <em class="rfc2119">SHOULD</em> be <code>false</code>. </p> <p> Authors <em class="rfc2119">SHOULD</em> indicate selection for <a href="https://w3c.github.io/aria/#option" class="role-reference"><code>option</code></a> elements using one of the following: </p> <ul> <li>An <a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a> value of <code>true</code> on the selected option within a single-select <a href="https://w3c.github.io/aria/#listbox" class="role-reference"><code>listbox</code></a>, and optionally <a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a> values of <code>false</code> on unselected options.</li> <li>Either <a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a> or <a href="https://w3c.github.io/aria/#aria-checked" class="state-reference"><code>aria-checked</code></a> on all options within a multi-select <a href="https://w3c.github.io/aria/#listbox" class="role-reference"><code>listbox</code></a>, with a value of <code>true</code> on selected options, and a value of <code>false</code> on unselected options.</li> </ul> <p> Authors <em class="rfc2119">SHOULD NOT</em> specify both <a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a> and <a href="https://w3c.github.io/aria/#aria-checked" class="state-reference"><code>aria-checked</code></a> on <a href="https://w3c.github.io/aria/#option" class="role-reference"><code>option</code></a> elements contained by the same <a href="https://w3c.github.io/aria/#listbox" class="role-reference"><code>listbox</code></a> except in the extremely rare circumstances where all the following conditions are met: </p> <ul> <li>The meaning and purpose of <a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a> is different from the meaning and purpose of <a href="https://w3c.github.io/aria/#aria-checked" class="state-reference"><code>aria-checked</code></a> in the user interface.</li> <li>The user interface makes the meaning and purpose of each state apparent.</li> <li>The user interface provides a separate method for controlling each state.</li> </ul> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#input" class="role-reference"><code>input</code></a></td> </tr> <tr> <th class="role-children-head" scope="row">Subclass Roles:</th> <td class="role-children"><ul> <li><a href="https://w3c.github.io/aria/#treeitem" class="role-reference"><code>treeitem</code></a></li> </ul> </td> </tr> <tr> <th class="role-base-head" scope="row">Base Concept:</th> <td class="role-base"><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/form-elements.html#the-option-element">option</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="role-related-head" scope="row">Related Concepts:</th> <td class="role-related"> <a href="https://w3c.github.io/aria/#listitem" class="role-reference"><code>listitem</code></a> </td> </tr> <tr> <th class="role-scope-head" scope="row">Required Accessibility Parent Roles:</th> <td class="role-scope"> <ul> <li><a href="https://w3c.github.io/aria/#listbox" class="role-reference"><code>listbox</code></a></li> <li><a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a> with parent <a href="https://w3c.github.io/aria/#listbox" class="role-reference"><code>listbox</code></a></li> </ul> </td> </tr> <tr> <th class="role-properties-head" scope="row">Supported States and Properties:</th> <td class="role-properties"> <ul> <li><a href="https://w3c.github.io/aria/#aria-checked" class="state-reference"><code>aria-checked</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-posinset" class="property-reference"><code>aria-posinset</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-setsize" class="property-reference"><code>aria-setsize</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom"> <ul> <li>contents</li> <li>author</li> </ul> </td> </tr> <tr> <th class="role-namerequired-head" scope="row">Accessible Name Required:</th> <td class="role-namerequired">True</td> </tr> <tr> <th class="role-childpresentational-head" scope="row">Children Presentational:</th> <td class="role-childpresentational">True</td> </tr> </tbody> </table> </section> <section class="role notoc" id="paragraph"> <h4 class="role-name" title="paragraph" aria-describedby="desc-paragraph"><code>paragraph</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-paragraph" role="definition"> <p>A paragraph of content.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#section" class="role-reference"><code>section</code></a></td> </tr> <tr> <th class="role-related-head" scope="row">Related Concepts:</th> <td class="role-related"><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-p-element">p</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-disallowed-head" scope="row">Prohibited States and Properties:</th> <td class="role-disallowed"> <ul> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">prohibited</td> </tr> </tbody> </table> </section> <section class="role notoc" id="presentation"> <h4 class="role-name" title="presentation" aria-describedby="desc-presentation"><code>presentation</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-presentation" role="definition"> <p>An <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> whose implicit native role semantics will not be mapped to the <a href="#dfn-accessibility-api" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-api-19">accessibility <abbr title="Application Programing Interfaces">API</abbr></a>. See synonym <a href="https://w3c.github.io/aria/#none" class="role-reference"><code>none</code></a>.</p> <div class="note" role="note" id="role-presentation-note-none"><div role="heading" class="note-title marker" id="h-note-26" aria-level="4"><span>Note</span></div><div class=""> Note regarding the <abbr title="Accessible Rich Internet Applications">ARIA</abbr> 1.1 <a href="https://w3c.github.io/aria/#none" class="role-reference"><code>none</code></a> role. <p>In <abbr title="Accessible Rich Internet Applications">ARIA</abbr> 1.1, the working group introduced <a href="https://w3c.github.io/aria/#none" class="role-reference"><code>none</code></a> as the preferred synonym to the <a href="https://w3c.github.io/aria/#presentation" class="role-reference"><code>presentation</code></a> role, due to author confusion surrounding the intended meaning of the word "presentation" or "presentational." Many individuals erroneously consider <code>role="presentation"</code> to be synonymous with <code>aria-hidden="true"</code>, and the <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Working Group believes <code>role="none"</code> conveys the actual meaning more unambiguously.</p> </div></div> </div> </section> <section class="role notoc" id="progressbar"> <h4 class="role-name" title="progressbar" aria-describedby="desc-progressbar"><code>progressbar</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-progressbar" role="definition"> <p>An <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> that displays the progress status for tasks that take a long time.</p> <p>A progressbar indicates that the user's request has been received and the application is making progress toward completing the requested action.</p> <p>Authors <em class="rfc2119">MAY</em> set <a href="https://w3c.github.io/aria/#aria-valuemin" class="property-reference"><code>aria-valuemin</code></a> and <a href="https://w3c.github.io/aria/#aria-valuemax" class="property-reference"><code>aria-valuemax</code></a> to indicate the minimum and maximum progress indicator values. Otherwise, their implicit values follow the same rules as <code><input type="<code><a data-link-type="attr-value" href="https://html.spec.whatwg.org/multipage/input.html#attr-input-type-range-keyword">range</a></code>"></code> in <abbr title="Hypertext Markup Language">HTML</abbr>:</p> <ul> <li>If <code>aria-valuemin</code> is missing or not a <a href="#valuetype_number">number</a>, it defaults to 0 (zero).</li> <li>If <code>aria-valuemax</code> is missing or not a <a href="#valuetype_number">number</a>, it defaults to 100.</li> </ul> <p>The author <em class="rfc2119">SHOULD</em> supply a <span>value</span> for <a href="https://w3c.github.io/aria/#aria-valuenow" class="property-reference"><code>aria-valuenow</code></a> unless the value is indeterminate, in which case the author <em class="rfc2119">SHOULD</em> omit the <a href="https://w3c.github.io/aria/#aria-valuenow" class="property-reference"><code>aria-valuenow</code></a> attribute. Authors <em class="rfc2119">SHOULD</em> update this value when the visual progress indicator is updated. If the <code>progressbar</code> is describing the loading progress of a particular region of a page, authors <em class="rfc2119">SHOULD</em> both use <a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a> to reference the progressbar status, and set the <a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> attribute to <code>true</code> on the region until it is finished loading. It is not possible for the user to alter the value of a <code>progressbar</code> because it is always read-only.</p> <div class="note" role="note" id="issue-container-generatedID-27"><div role="heading" class="note-title marker" id="h-note-27" aria-level="4"><span>Note</span></div><p class="">Assistive technologies generally will render the value of <a href="https://w3c.github.io/aria/#aria-valuenow" class="property-reference"><code>aria-valuenow</code></a> as a percent of a range between the value of <a href="https://w3c.github.io/aria/#aria-valuemin" class="property-reference"><code>aria-valuemin</code></a> and <a href="https://w3c.github.io/aria/#aria-valuemax" class="property-reference"><code>aria-valuemax</code></a>, unless <a href="https://w3c.github.io/aria/#aria-valuetext" class="property-reference"><code>aria-valuetext</code></a> is specified.</p></div> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"> <ul> <li><a href="https://w3c.github.io/aria/#range" class="role-reference"><code>range</code></a></li> <li><a href="https://w3c.github.io/aria/#widget" class="role-reference"><code>widget</code></a></li> </ul> </td> </tr> <tr> <th class="role-related-head" scope="row">Related Concepts:</th> <td class="role-related"><a href="https://w3c.github.io/aria/#status" class="role-reference"><code>status</code></a></td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-valuemax" class="property-reference"><code>aria-valuemax</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-valuemin" class="property-reference"><code>aria-valuemin</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-valuenow" class="property-reference"><code>aria-valuenow</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-valuetext" class="property-reference"><code>aria-valuetext</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> <tr> <th class="role-namerequired-head" scope="row">Accessible Name Required:</th> <td class="role-namerequired">True</td> </tr> <tr> <th class="role-childpresentational-head" scope="row">Children Presentational:</th> <td class="role-childpresentational">True</td> </tr> <tr> <th class="implicit-values-head" scope="row">Implicit Value for Role:</th> <td class="implicit-values"> Default for <a href="https://w3c.github.io/aria/#aria-valuemin" class="property-reference"><code>aria-valuemin</code></a> is <code class="default">0</code>. <br> Default for <a href="https://w3c.github.io/aria/#aria-valuemax" class="property-reference"><code>aria-valuemax</code></a> is <code class="default">100</code>. <br> </td> </tr> </tbody> </table> </section> <section class="role notoc" id="radio"> <h4 class="role-name" title="radio" aria-describedby="desc-radio"><code>radio</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-radio" role="definition"> <p>A checkable input in a group of elements with the same role, only one of which can be checked at a time.</p> <p>Authors <em class="rfc2119">SHOULD</em> ensure that <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a> with role <code>radio</code> are explicitly grouped in order to indicate which ones affect the same value. This is achieved by enclosing the radio elements in an element with role <a href="https://w3c.github.io/aria/#radiogroup" class="role-reference"><code>radiogroup</code></a>. If it is not possible to make the radio buttons <abbr title="Document Object Model">DOM</abbr> children of the <a href="https://w3c.github.io/aria/#radiogroup" class="role-reference"><code>radiogroup</code></a>, authors <em class="rfc2119">SHOULD</em> use the <a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attribute</a> on the <a href="https://w3c.github.io/aria/#radiogroup" class="role-reference"><code>radiogroup</code></a> element to indicate the <a href="#dfn-relationship" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-relationship-7">relationship</a> to its children.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"> <ul> <li><a href="https://w3c.github.io/aria/#input" class="role-reference"><code>input</code></a></li> </ul> </td> </tr> <tr> <th class="role-related-head" scope="row">Related Concepts:</th> <td class="role-related"><code><input type="<code><a data-link-type="attr-value" href="https://html.spec.whatwg.org/multipage/input.html#attr-input-type-radio-keyword">radio</a></code>"></code> in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="role-required-properties-head">Required States and Properties:</th> <td class="role-required-properties"> <ul> <li><a href="https://w3c.github.io/aria/#aria-checked" class="state-reference"><code>aria-checked</code></a></li> </ul> </td> </tr> <tr> <th class="role-properties-head" scope="row">Supported States and Properties:</th> <td class="role-properties"> <ul> <li><a href="https://w3c.github.io/aria/#aria-posinset" class="property-reference"><code>aria-posinset</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-setsize" class="property-reference"><code>aria-setsize</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom"> <ul> <li>contents</li> <li>author</li> </ul> </td> </tr> <tr> <th class="role-namerequired-head" scope="row">Accessible Name Required:</th> <td class="role-namerequired">True</td> </tr> <tr> <th class="role-childpresentational-head" scope="row">Children Presentational:</th> <td class="role-childpresentational">True</td> </tr> </tbody> </table> </section> <section class="role notoc" id="radiogroup"> <h4 class="role-name" title="radiogroup" aria-describedby="desc-radiogroup"><code>radiogroup</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-radiogroup" role="definition"> <p>A group of <a href="https://w3c.github.io/aria/#radio" class="role-reference"><code>radio</code></a> buttons.</p> <p>A <code>radiogroup</code> is a type of <a href="https://w3c.github.io/aria/#select" class="role-reference"><code>select</code></a> list that can only have a single entry checked at any one time. Authors <em class="rfc2119">SHOULD</em> enforce that only one radio button in a group can be checked at the same time. When one item in the group is checked, the previously checked item becomes unchecked (its <a href="https://w3c.github.io/aria/#aria-checked" class="state-reference"><code>aria-checked</code></a> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attribute</a> becomes <code>false</code>).</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#select" class="role-reference"><code>select</code></a></td> </tr> <tr> <th class="role-related-head" scope="row">Related Concepts:</th> <td><a href="https://w3c.github.io/aria/#list" class="role-reference"><code>list</code></a></td> </tr> <tr> <th class="role-properties-head" scope="row">Supported States and Properties:</th> <td class="role-properties"> <ul> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-readonly" class="property-reference"><code>aria-readonly</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-required" class="property-reference"><code>aria-required</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-orientation" class="property-reference"><code>aria-orientation</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> <tr> <th class="role-namerequired-head" scope="row">Accessible Name Required:</th> <td class="role-namerequired">True</td> </tr> </tbody> </table> </section> <section class="role notoc" id="range"> <h4 class="role-name" title="range" aria-describedby="desc-range"><code>range</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-range" role="definition"> <p>An element representing a range of values.</p> <p><code>range</code> is an <a href="#isAbstract">abstract role</a> used for the ontology. Authors <em class="rfc2119">MUST NOT</em> use <code>range</code> role in content.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-abstract-head" scope="row">Is Abstract:</th> <td class="role-abstract">True</td> </tr> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#structure" class="role-reference"><code>structure</code></a></td> </tr> <tr> <th class="role-children-head" scope="row">Subclass Roles:</th> <td class="role-children"><ul> <li><a href="https://w3c.github.io/aria/#meter" class="role-reference"><code>meter</code></a></li> <li><a href="https://w3c.github.io/aria/#progressbar" class="role-reference"><code>progressbar</code></a></li> <li><a href="https://w3c.github.io/aria/#scrollbar" class="role-reference"><code>scrollbar</code></a></li> <li><a href="https://w3c.github.io/aria/#slider" class="role-reference"><code>slider</code></a></li> <li><a href="https://w3c.github.io/aria/#spinbutton" class="role-reference"><code>spinbutton</code></a></li> </ul> </td> </tr> <tr> <th class="role-properties-head" scope="row">Supported States and Properties:</th> <td class="role-properties"> <ul> <li><a href="https://w3c.github.io/aria/#aria-valuemax" class="property-reference"><code>aria-valuemax</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-valuemin" class="property-reference"><code>aria-valuemin</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-valuenow" class="property-reference"><code>aria-valuenow</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-valuetext" class="property-reference"><code>aria-valuetext</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> </tbody> </table> </section> <section class="role notoc" id="region"> <h4 class="role-name" title="region" aria-describedby="desc-region"><code>region</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-region" role="definition"> <p>A <a href="https://w3c.github.io/aria/#landmark" class="role-reference"><code>landmark</code></a> containing content that is relevant to a specific, author-specified purpose and sufficiently important that users will likely want to be able to navigate to the section easily and to have it listed in a summary of the page. Such a page summary could be generated dynamically by a user agent or assistive technology.</p> <p>Authors <em class="rfc2119">SHOULD</em> limit use of the region role to sections containing content with a purpose that is not accurately described by one of the other <a href="#landmark_roles">landmark roles</a>, such as <a href="https://w3c.github.io/aria/#main" class="role-reference"><code>main</code></a>, <a href="https://w3c.github.io/aria/#complementary" class="role-reference"><code>complementary</code></a>, or <a href="https://w3c.github.io/aria/#navigation" class="role-reference"><code>navigation</code></a>.</p> <p>Authors <em class="rfc2119">MUST</em> give each element with role region a brief label that describes the purpose of the content in the region. Authors <em class="rfc2119">SHOULD</em> reference a visible label with <a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a> if a visible label is present. Authors <em class="rfc2119">SHOULD</em> include the label inside of a heading whenever possible. The heading <em class="rfc2119">MAY</em> be an instance of the standard host language heading element or an instance of an element with role <a href="https://w3c.github.io/aria/#heading" class="role-reference"><code>heading</code></a>.</p> <p><a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-41">Assistive technologies</a> <em class="rfc2119">SHOULD</em> enable users to quickly navigate to elements with role <code>region</code>. <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">User agents</a> <em class="rfc2119">SHOULD</em> treat elements with role <code>region</code> and an accessible name as navigational <a href="#dfn-landmark" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-landmark-12">landmarks</a>. <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">User agents</a> <em class="rfc2119">MAY</em> enable users to quickly navigate to elements with role <code>region</code>.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#landmark" class="role-reference"><code>landmark</code></a></td> </tr> <tr> <th class="role-related-head" scope="row">Related Concepts:</th> <td class="role-related"><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/sections.html#the-section-element">section</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> <tr> <th class="role-namerequired-head" scope="row">Accessible Name Required:</th> <td class="role-namerequired">True</td> </tr> </tbody> </table> </section> <section class="role notoc" id="roletype"> <h4 class="role-name" title="roletype" aria-describedby="desc-roletype"><code>roletype</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-roletype" role="definition"> <p>The base <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-68">role</a> from which all other roles inherit.</p> <p>Properties of this role describe the structural and functional purpose of <a href="#dfn-object" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-object-14">objects</a> that are assigned this role. A role is a concept that can be used to understand and operate instances.</p> <p><code>roletype</code> is an <a href="#isAbstract">abstract role</a> used for the ontology. Authors <em class="rfc2119">MUST NOT</em> use <code>roletype</code> role in content.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-abstract-head" scope="row">Is Abstract:</th> <td class="role-abstract">True</td> </tr> <tr> <th class="role-children-head" scope="row">Subclass Roles:</th> <td class="role-children"><ul> <li><a href="https://w3c.github.io/aria/#structure" class="role-reference"><code>structure</code></a></li> <li><a href="https://w3c.github.io/aria/#widget" class="role-reference"><code>widget</code></a></li> <li><a href="https://w3c.github.io/aria/#window" class="role-reference"><code>window</code></a></li> </ul> </td> </tr> <tr> <th class="role-properties-head" scope="row">Supported States and Properties:</th> <td class="role-properties"><ul><li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a> (Except where prohibited)</li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a> (Except where prohibited)</li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy (state)</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current (state)</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled (state)</code></a> (Global use deprecated in ARIA 1.2)</li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> (Global use deprecated in ARIA 1.2)</li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed (state)</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> (Global use deprecated in ARIA 1.2)</li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden (state)</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid (state)</code></a> (Global use deprecated in ARIA 1.2)</li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a> (Except where prohibited)</li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a> (Except where prohibited)</li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a> (Except where prohibited)</li> </ul></td> </tr> </tbody> </table> </section> <section class="role notoc" id="row"> <h4 class="role-name" title="row" aria-describedby="desc-row"><code>row</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-row" role="definition"> <p>A row of cells in a tabular container.</p> <p>Rows contain <a href="https://w3c.github.io/aria/#cell" class="role-reference"><code>cell</code></a> or <a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a>, and thus serve to organize a <a href="https://w3c.github.io/aria/#table" class="role-reference"><code>table</code></a>, <a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a>, or <a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a>.</p> <p>While the row role can be used in a <a href="https://w3c.github.io/aria/#table" class="role-reference"><code>table</code></a>, <a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a>, or <a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a>, the semantics of <a href="https://w3c.github.io/aria/#aria-expanded" class="state-reference"><code>aria-expanded</code></a>, <a href="https://w3c.github.io/aria/#aria-posinset" class="property-reference"><code>aria-posinset</code></a>, <a href="https://w3c.github.io/aria/#aria-setsize" class="property-reference"><code>aria-setsize</code></a>, and <a href="https://w3c.github.io/aria/#aria-level" class="property-reference"><code>aria-level</code></a> are only applicable to the hierarchical structure of an interactive tree grid. Therefore, authors <em class="rfc2119">MUST NOT</em> apply <a href="https://w3c.github.io/aria/#aria-expanded" class="state-reference"><code>aria-expanded</code></a>, <a href="https://w3c.github.io/aria/#aria-posinset" class="property-reference"><code>aria-posinset</code></a>, <a href="https://w3c.github.io/aria/#aria-setsize" class="property-reference"><code>aria-setsize</code></a>, and <a href="https://w3c.github.io/aria/#aria-level" class="property-reference"><code>aria-level</code></a> to a <a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a> that descends from a <a href="https://w3c.github.io/aria/#table" class="role-reference"><code>table</code></a> or <a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a>, and user agents <em class="rfc2119">SHOULD NOT</em> expose any of these four properties to assistive technologies unless the <a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a> descends from a <a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a>. </p> <p>Authors <em class="rfc2119">MUST</em> ensure <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a> with <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-69">role</a> <code>row</code> are <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-child-27">accessibility children</a> of an element with the role <a href="https://w3c.github.io/aria/#table" class="role-reference"><code>table</code></a>, <a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a>, <a href="https://w3c.github.io/aria/#rowgroup" class="role-reference"><code>rowgroup</code></a>, or <a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></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="4"><span>Note</span><span class="issue-label">: Usage of aria-disabled</span></div><p class="">While <a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> is currently supported on <a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a>, in a future version the working group plans to prohibit its on elements with role <a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a> except when the element is in the context of a <a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a> or <a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a>.</p></div> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"> <ul> <li><a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a></li> <li><a href="https://w3c.github.io/aria/#widget" class="role-reference"><code>widget</code></a></li> </ul> </td> </tr> <tr> <th class="role-base-head" scope="row">Base Concept:</th> <td class="role-base"><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/tables.html#the-tr-element">tr</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="role-scope-head" scope="row">Required Accessibility Parent Roles:</th> <td class="role-scope"> <ul> <li><a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a></li> <li><a href="https://w3c.github.io/aria/#table" class="role-reference"><code>table</code></a></li> <li><a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a></li> <li><a href="https://w3c.github.io/aria/#rowgroup" class="role-reference"><code>rowgroup</code></a></li> </ul> </td> </tr> <tr> <th class="role-mustcontain-head" scope="row">Allowed Accessibility Child Roles:</th> <td class="role-mustcontain"> <ul> <li><a href="https://w3c.github.io/aria/#cell" class="role-reference"><code>cell</code></a></li> <li><a href="https://w3c.github.io/aria/#columnheader" class="role-reference"><code>columnheader</code></a></li> <li><a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a></li> <li><a href="https://w3c.github.io/aria/#rowheader" class="role-reference"><code>rowheader</code></a></li> </ul> </td> </tr> <tr> <th class="role-properties-head" scope="row">Supported States and Properties:</th> <td class="role-properties"> <ul> <li><a href="https://w3c.github.io/aria/#aria-colindex" class="property-reference"><code>aria-colindex</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-expanded" class="state-reference"><code>aria-expanded</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-level" class="property-reference"><code>aria-level</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-posinset" class="property-reference"><code>aria-posinset</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-rowindex" class="property-reference"><code>aria-rowindex</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-rowindextext" class="property-reference"><code>aria-rowindextext</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-setsize" class="property-reference"><code>aria-setsize</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom"> <ul> <li>contents</li> <li>author</li> </ul> </td> </tr> </tbody> </table> </section> <section class="role notoc" id="rowgroup"> <h4 class="role-name" title="rowgroup" aria-describedby="desc-rowgroup"><code>rowgroup</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-rowgroup" role="definition"> <p>A structure containing one or more row elements in a tabular container.</p> <p>The <code>rowgroup</code> role establishes a <a href="#dfn-relationship" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-relationship-8">relationship</a> with its <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-child-28">accessibility children</a> of role <a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a>. It is a structural equivalent to the <code>thead</code>, <code>tfoot</code>, and <code>tbody</code> elements in an <abbr title="Hypertext Markup Language">HTML</abbr> <code>table</code> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a>.</p> <p>Authors <em class="rfc2119">MUST</em> ensure <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a> with <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-70">role</a> <code>rowgroup</code> are <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-child-29">accessibility children</a> of an element with the role <a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a>, <a href="https://w3c.github.io/aria/#table" class="role-reference"><code>table</code></a>, or <a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a>.</p> <div class="note" role="note" id="issue-container-generatedID-29"><div role="heading" class="note-title marker" id="h-note-29" aria-level="4"><span>Note</span></div><p class="">The <code>rowgroup</code> role exists, in part, to support role symmetry in <abbr title="Hypertext Markup Language">HTML</abbr>, and allows for the propagation of presentation inheritance on <abbr title="Hypertext Markup Language">HTML</abbr> <code>table</code> elements with an explicit <code>presentation</code> role applied.</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="4"><span>Note</span></div><p class="">This role does not differentiate between types of row groups (e.g., <code>thead</code> vs. <code>tbody</code>), but an issue has been raised for <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> 2.0.</p></div> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#structure" class="role-reference"><code>structure</code></a></td> </tr> <tr> <th class="role-base-head" scope="row">Base Concept:</th> <td class="role-base"><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/tables.html#the-tbody-element">tbody</a></code>></code>, <code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/tables.html#the-tfoot-element">tfoot</a></code>></code> and <code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/tables.html#the-thead-element">thead</a></code>></code>in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="role-scope-head" scope="row">Required Accessibility Parent Roles:</th> <td class="role-scope"> <ul> <li><a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a></li> <li><a href="https://w3c.github.io/aria/#table" class="role-reference"><code>table</code></a></li> <li><a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a></li> </ul> </td> </tr> <tr> <th class="role-mustcontain-head" scope="row">Allowed Accessibility Child Roles:</th> <td class="role-mustcontain"><a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a></td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> </tbody> </table> </section> <section class="role notoc" id="rowheader"> <h4 class="role-name" title="rowheader" aria-describedby="desc-rowheader"><code>rowheader</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-rowheader" role="definition"> <p>A cell containing header information for a row.</p> <p>The <a href="https://w3c.github.io/aria/#rowheader" class="role-reference"><code>rowheader</code></a> role can be used to identify a cell as a header for a row in a <a href="https://w3c.github.io/aria/#table" class="role-reference"><code>table</code></a>, <a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a>, or <a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a>. The rowheader establishes a <a href="#dfn-relationship" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-relationship-9">relationship</a> between it and all cells in the corresponding row. It is a structural equivalent to setting <code>scope="row"</code> on an <abbr title="Hypertext Markup Language">HTML</abbr> <code>th</code> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a>.</p> <p>Authors <em class="rfc2119">MUST</em> ensure <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a> with <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-71">role</a> <code>rowheader</code> are <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-child-30">accessibility children</a> of an element with the role <a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a>.</p> <p>Applying the <a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a> state on a rowheader <em class="rfc2119">MUST NOT</em> cause the user agent to automatically propagate the <a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a> state to all the cells in the corresponding row. An author <em class="rfc2119">MAY</em> choose to propagate selection in this manner depending on the specific application.</p> <p>While the <code>rowheader</code> role can be used in both interactive grids and non-interactive tables, the use of <a href="https://w3c.github.io/aria/#aria-expanded" class="state-reference"><code>aria-expanded</code></a>, <a href="https://w3c.github.io/aria/#aria-readonly" class="property-reference"><code>aria-readonly</code></a>, and <a href="https://w3c.github.io/aria/#aria-required" class="property-reference"><code>aria-required</code></a> is only applicable to interactive elements. Therefore, authors <em class="rfc2119">SHOULD NOT</em> use <a href="https://w3c.github.io/aria/#aria-expanded" class="state-reference"><code>aria-expanded</code></a>, <a href="https://w3c.github.io/aria/#aria-readonly" class="property-reference"><code>aria-readonly</code></a>, or <a href="https://w3c.github.io/aria/#aria-required" class="property-reference"><code>aria-required</code></a> in a <code>rowheader</code> that descends from a <a href="https://w3c.github.io/aria/#table" class="role-reference"><code>table</code></a>, and user agents <em class="rfc2119">SHOULD NOT</em> expose these properties to <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-42">assistive technologies</a> unless the <code>rowheader</code> descends from a <a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a> or <a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a>.</p> <div class="note" role="note" id="issue-container-generatedID-31"><div role="heading" class="note-title marker" id="h-note-31" aria-level="4"><span>Note</span><span class="issue-label">: Usage of aria-disabled</span></div><p class="">While <a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> is currently supported on <a href="https://w3c.github.io/aria/#rowheader" class="role-reference"><code>rowheader</code></a>, in a future version the working group plans to prohibit its use on elements with role <a href="https://w3c.github.io/aria/#rowheader" class="role-reference"><code>rowheader</code></a> except when the element is in the context of a <a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a> or <a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a>.</p></div> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"> <ul> <li><a href="https://w3c.github.io/aria/#cell" class="role-reference"><code>cell</code></a></li> <li><a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a></li> <li><a href="https://w3c.github.io/aria/#sectionhead" class="role-reference"><code>sectionhead</code></a></li> </ul> </td> </tr> <tr> <th class="role-base-head" scope="row">Base Concept:</th> <td class="role-base"><code><th scope="<code><a data-link-type="attr-value" href="https://html.spec.whatwg.org/multipage/tables.html#attr-th-scope-row">row</a></code>"></code> in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="role-scope-head" scope="row">Required Accessibility Parent Roles:</th> <td class="role-scope"><a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a></td> </tr> <tr> <th class="role-properties-head" scope="row">Supported States and Properties:</th> <td class="role-properties"> <ul> <li><a href="https://w3c.github.io/aria/#aria-expanded" class="state-reference"><code>aria-expanded</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-sort" class="property-reference"><code>aria-sort</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-colindex" class="property-reference"><code>aria-colindex</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-colindextext" class="property-reference"><code>aria-colindextext</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-colspan" class="property-reference"><code>aria-colspan</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-readonly" class="property-reference"><code>aria-readonly</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-required" class="property-reference"><code>aria-required</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-rowindex" class="property-reference"><code>aria-rowindex</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-rowindextext" class="property-reference"><code>aria-rowindextext</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-rowspan" class="property-reference"><code>aria-rowspan</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a> (state)</li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom"> <ul> <li>contents</li> <li>author</li> </ul> </td> </tr> <tr> <th class="role-namerequired-head" scope="row">Accessible Name Required:</th> <td class="role-namerequired">True</td> </tr> </tbody> </table> </section> <section class="role notoc" id="scrollbar"> <h4 class="role-name" title="scrollbar" aria-describedby="desc-scrollbar"><code>scrollbar</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-scrollbar" role="definition"> <p>A graphical object that controls the scrolling of content within a viewing area, regardless of whether the content is fully displayed within the viewing area.</p> <p>A scrollbar represents the current value and range of possible values via the size of the scrollbar and position of the thumb with respect to the visible range of the orientation (horizontal or vertical) it controls. Its orientation represents the orientation of the scrollbar and the scrolling effect on the viewing area controlled by the scrollbar. It is typically possible to add to or subtract from the current value by using directional keys such as arrow keys.</p> <p>Authors <em class="rfc2119">MUST</em> set the <a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a> attribute on the scrollbar element to reference the scrollable area it controls.</p> <p>Authors <em class="rfc2119">MAY</em> set <a href="https://w3c.github.io/aria/#aria-valuemin" class="property-reference"><code>aria-valuemin</code></a> and <a href="https://w3c.github.io/aria/#aria-valuemax" class="property-reference"><code>aria-valuemax</code></a> to indicate the minimum and maximum thumb position. Otherwise, their implicit values follow the same rules as <code><input type="<code><a data-link-type="attr-value" href="https://html.spec.whatwg.org/multipage/input.html#attr-input-type-range-keyword">range</a></code>"></code> in <abbr title="Hypertext Markup Language">HTML</abbr>:</p> <ul> <li>If <code>aria-valuemin</code> is missing or not a <a href="#valuetype_number">number</a>, it defaults to 0 (zero).</li> <li>If <code>aria-valuemax</code> is missing or not a <a href="#valuetype_number">number</a>, it defaults to 100.</li> </ul> <p>Authors <em class="rfc2119">MUST</em> set the <a href="https://w3c.github.io/aria/#aria-valuenow" class="property-reference"><code>aria-valuenow</code></a> attribute to indicate the current thumb position. If aria-valuenow is missing or has an unexpected value, browsers <em class="rfc2119">MAY</em> implement the repair techniques specified in the <a href="#authorErrorDefaultValuesTable">section describing handling author errors in states and properties</a>, which are equivalent to the repair techniques for <code><input type="<code><a data-link-type="attr-value" href="https://html.spec.whatwg.org/multipage/input.html#attr-input-type-range-keyword">range</a></code>"></code> in <abbr title="Hypertext Markup Language">HTML</abbr>.</p> <p>Elements with the role <code>scrollbar</code> have an implicit <a href="https://w3c.github.io/aria/#aria-orientation" class="property-reference"><code>aria-orientation</code></a> value of <code>vertical</code>.</p> <div class="note" role="note" id="issue-container-generatedID-32"><div role="heading" class="note-title marker" id="h-note-32" aria-level="4"><span>Note</span></div><p class="">Assistive technologies generally will render the value of <a href="https://w3c.github.io/aria/#aria-valuenow" class="property-reference"><code>aria-valuenow</code></a> as a percent of a range between the value of <a href="https://w3c.github.io/aria/#aria-valuemin" class="property-reference"><code>aria-valuemin</code></a> and <a href="https://w3c.github.io/aria/#aria-valuemax" class="property-reference"><code>aria-valuemax</code></a>, unless <a href="https://w3c.github.io/aria/#aria-valuetext" class="property-reference"><code>aria-valuetext</code></a> is specified. It is best to set the values for <a href="https://w3c.github.io/aria/#aria-valuemin" class="property-reference"><code>aria-valuemin</code></a>, <a href="https://w3c.github.io/aria/#aria-valuemax" class="property-reference"><code>aria-valuemax</code></a>, and <a href="https://w3c.github.io/aria/#aria-valuenow" class="property-reference"><code>aria-valuenow</code></a> in a manner that is appropriate for this calculation.</p></div> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"> <ul> <li><a href="https://w3c.github.io/aria/#range" class="role-reference"><code>range</code></a></li> <li><a href="https://w3c.github.io/aria/#widget" class="role-reference"><code>widget</code></a></li> </ul> </td> </tr> <tr> <th class="role-required-properties-head">Required States and Properties:</th> <td class="role-required-properties"> <ul> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-valuenow" class="property-reference"><code>aria-valuenow</code></a></li> </ul> </td> </tr> <tr> <th class="role-properties-head" scope="row">Supported States and Properties:</th> <td class="role-properties"> <ul> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-orientation" class="property-reference"><code>aria-orientation</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-valuemax" class="property-reference"><code>aria-valuemax</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-valuemin" class="property-reference"><code>aria-valuemin</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-valuetext" class="property-reference"><code>aria-valuetext</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> <tr> <th class="role-childpresentational-head" scope="row">Children Presentational:</th> <td class="role-childpresentational">True</td> </tr> <tr> <th class="implicit-values-head" scope="row">Implicit Value for Role:</th> <td class="implicit-values"> Default for <a href="https://w3c.github.io/aria/#aria-orientation" class="property-reference"><code>aria-orientation</code></a> is <code class="default">vertical</code>. <br> Default for <a href="https://w3c.github.io/aria/#aria-valuemin" class="property-reference"><code>aria-valuemin</code></a> is <code class="default">0</code>. <br> Default for <a href="https://w3c.github.io/aria/#aria-valuemax" class="property-reference"><code>aria-valuemax</code></a> is <code class="default">100</code>. <br> </td> </tr> </tbody> </table> </section> <section class="role notoc" id="search"> <h4 class="role-name" title="search" aria-describedby="desc-search"><code>search</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-search" role="definition"> <p>A <a href="https://w3c.github.io/aria/#landmark" class="role-reference"><code>landmark</code></a> region that contains a collection of items and objects that, as a whole, combine to create a search facility. See related <a href="https://w3c.github.io/aria/#form" class="role-reference"><code>form</code></a> and <a href="https://w3c.github.io/aria/#searchbox" class="role-reference"><code>searchbox</code></a>.</p> <p>A search region can be a mix of host language form controls, scripted controls, and hyperlinks.</p> <p><a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-43">Assistive technologies</a> <em class="rfc2119">SHOULD</em> enable users to quickly navigate to elements with role <code>search</code>. <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agents</a> <em class="rfc2119">SHOULD</em> treat elements with role <code>search</code> as navigational <a href="#dfn-landmark" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-landmark-13">landmarks</a>. <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agents</a> <em class="rfc2119">MAY</em> enable users to quickly navigate to elements with role <code>search</code>.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#landmark" class="role-reference"><code>landmark</code></a></td> </tr> <tr> <th class="role-base-head" scope="row">Base Concept:</th> <td class="role-base"><abbr title="Hypertext Markup Language">HTML</abbr> <code><code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-search-element">search</a></code></code></td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> </tbody> </table> </section> <section class="role notoc" id="searchbox"> <h4 class="role-name" title="searchbox" aria-describedby="desc-searchbox"><code>searchbox</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-searchbox" role="definition"> <p>A type of textbox intended for specifying search criteria. See related <a href="https://w3c.github.io/aria/#textbox" class="role-reference"><code>textbox</code></a> and <a href="https://w3c.github.io/aria/#search" class="role-reference"><code>search</code></a>.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#textbox" class="role-reference"><code>textbox</code></a></td> </tr> <tr> <th class="role-base-head" scope="row">Base Concept:</th> <td class="role-base"><code><input type="<code><a data-link-type="attr-value" href="https://html.spec.whatwg.org/multipage/input.html#attr-input-type-search-keyword">search</a></code>"></code> in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-autocomplete" class="property-reference"><code>aria-autocomplete</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-multiline" class="property-reference"><code>aria-multiline</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-placeholder" class="property-reference"><code>aria-placeholder</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-readonly" class="property-reference"><code>aria-readonly</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-required" class="property-reference"><code>aria-required</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> <tr> <th class="role-namerequired-head" scope="row">Accessible Name Required:</th> <td class="role-namerequired">True</td> </tr> </tbody> </table> </section> <section class="role notoc" id="section"> <h4 class="role-name" title="section" aria-describedby="desc-section"><code>section</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-section" role="definition"> <p>A renderable structural containment unit on a page.</p> <p><code>section</code> is an <a href="#isAbstract">abstract role</a> used for the ontology. Authors <em class="rfc2119">MUST NOT</em> use <code>section</code> role in content.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-abstract-head" scope="row">Is Abstract:</th> <td class="role-abstract">True</td> </tr> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#structure" class="role-reference"><code>structure</code></a></td> </tr> <tr> <th class="role-children-head" scope="row">Subclass Roles:</th> <td class="role-children"><ul> <li><a href="https://w3c.github.io/aria/#alert" class="role-reference"><code>alert</code></a></li> <li><a href="https://w3c.github.io/aria/#blockquote" class="role-reference"><code>blockquote</code></a></li> <li><a href="https://w3c.github.io/aria/#caption" class="role-reference"><code>caption</code></a></li> <li><a href="https://w3c.github.io/aria/#cell" class="role-reference"><code>cell</code></a></li> <li><a href="https://w3c.github.io/aria/#code" class="role-reference"><code>code</code></a></li> <li><a href="https://w3c.github.io/aria/#definition" class="role-reference"><code>definition</code></a></li> <li><a href="https://w3c.github.io/aria/#deletion" class="role-reference"><code>deletion</code></a></li> <li><a href="https://w3c.github.io/aria/#emphasis" class="role-reference"><code>emphasis</code></a></li> <li><a href="https://w3c.github.io/aria/#figure" class="role-reference"><code>figure</code></a></li> <li><a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a></li> <li><a href="https://w3c.github.io/aria/#image" class="role-reference"><code>image</code></a></li> <li><a href="https://w3c.github.io/aria/#insertion" class="role-reference"><code>insertion</code></a></li> <li><a href="https://w3c.github.io/aria/#landmark" class="role-reference"><code>landmark</code></a></li> <li><a href="https://w3c.github.io/aria/#list" class="role-reference"><code>list</code></a></li> <li><a href="https://w3c.github.io/aria/#listitem" class="role-reference"><code>listitem</code></a></li> <li><a href="https://w3c.github.io/aria/#log" class="role-reference"><code>log</code></a></li> <li><a href="https://w3c.github.io/aria/#mark" class="role-reference"><code>mark</code></a></li> <li><a href="https://w3c.github.io/aria/#marquee" class="role-reference"><code>marquee</code></a></li> <li><a href="https://w3c.github.io/aria/#math" class="role-reference"><code>math</code></a></li> <li><a href="https://w3c.github.io/aria/#note" class="role-reference"><code>note</code></a></li> <li><a href="https://w3c.github.io/aria/#paragraph" class="role-reference"><code>paragraph</code></a></li> <li><a href="https://w3c.github.io/aria/#sectionfooter" class="role-reference"><code>sectionfooter</code></a></li> <li><a href="https://w3c.github.io/aria/#sectionheader" class="role-reference"><code>sectionheader</code></a></li> <li><a href="https://w3c.github.io/aria/#status" class="role-reference"><code>status</code></a></li> <li><a href="https://w3c.github.io/aria/#strong" class="role-reference"><code>strong</code></a></li> <li><a href="https://w3c.github.io/aria/#subscript" class="role-reference"><code>subscript</code></a></li> <li><a href="https://w3c.github.io/aria/#suggestion" class="role-reference"><code>suggestion</code></a></li> <li><a href="https://w3c.github.io/aria/#superscript" class="role-reference"><code>superscript</code></a></li> <li><a href="https://w3c.github.io/aria/#table" class="role-reference"><code>table</code></a></li> <li><a href="https://w3c.github.io/aria/#tabpanel" class="role-reference"><code>tabpanel</code></a></li> <li><a href="https://w3c.github.io/aria/#term" class="role-reference"><code>term</code></a></li> <li><a href="https://w3c.github.io/aria/#time" class="role-reference"><code>time</code></a></li> <li><a href="https://w3c.github.io/aria/#tooltip" class="role-reference"><code>tooltip</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> </tbody> </table> </section> <section class="role notoc" id="sectionfooter"> <h4 class="role-name" title="sectionfooter" aria-describedby="desc-sectionfooter"><code>sectionfooter</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-sectionfooter" role="definition"> <p>A set of user interface objects and information representing information about its closest ancestral content group. For instance, a <code>sectionfooter</code> can include information about who wrote the specific section of content, such as an <a href="https://w3c.github.io/aria/#article" class="role-reference"><code>article</code></a>. It can contain links to related documents, copyright information or other indices and colophon specific to the current section of the page.</p> <p>A <code>sectionfooter</code> does not represent information about the parent document, or globally repeating content found across multiple pages related to the website. For such content, the <a href="https://w3c.github.io/aria/#contentinfo" class="role-reference"><code>contentinfo</code></a> role would be more appropriate.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#section" class="role-reference"><code>section</code></a></td> </tr> <tr> <th class="role-base-head" scope="row">Base Concept:</th> <td class="role-base"><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/sections.html#the-footer-element">footer</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> </tbody> </table> </section> <section class="role notoc" id="sectionhead"> <h4 class="role-name" title="sectionhead" aria-describedby="desc-sectionhead"><code>sectionhead</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-sectionhead" role="definition"> <p>A structure that labels or summarizes the topic of its related section.</p> <p><code>sectionhead</code> is an <a href="#isAbstract">abstract role</a> used for the ontology. Authors <em class="rfc2119">MUST NOT</em> use <code>sectionhead</code> role in content.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-abstract-head" scope="row">Is Abstract:</th> <td class="role-abstract">True</td> </tr> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#structure" class="role-reference"><code>structure</code></a></td> </tr> <tr> <th class="role-children-head" scope="row">Subclass Roles:</th> <td class="role-children"><ul> <li><a href="https://w3c.github.io/aria/#columnheader" class="role-reference"><code>columnheader</code></a></li> <li><a href="https://w3c.github.io/aria/#heading" class="role-reference"><code>heading</code></a></li> <li><a href="https://w3c.github.io/aria/#rowheader" class="role-reference"><code>rowheader</code></a></li> <li><a href="https://w3c.github.io/aria/#tab" class="role-reference"><code>tab</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> </tbody> </table> </section> <section class="role notoc" id="sectionheader"> <h4 class="role-name" title="sectionheader" aria-describedby="desc-sectionheader"><code>sectionheader</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-sectionheader" role="definition"> <p>A set of user interface objects and information that represents a collection of introductory items for the element's closest ancestral content group. For instance, a <code>sectionheader</code> can include the heading, introductory statement and related meta data for a section of content, for instance a <a href="https://w3c.github.io/aria/#region" class="role-reference"><code>region</code></a> or <a href="https://w3c.github.io/aria/#article" class="role-reference"><code>article</code></a>, within a web page.</p> <p>A <code>sectionheader</code> does not represent site-oriented or globally repeating content found across multiple pages of a website. For such content, the <a href="https://w3c.github.io/aria/#banner" class="role-reference"><code>banner</code></a> role would be more appropriate.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#section" class="role-reference"><code>section</code></a></td> </tr> <tr> <th class="role-base-head" scope="row">Base Concept:</th> <td class="role-base"><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/sections.html#the-header-element">header</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> </tbody> </table> </section> <section class="role notoc" id="select"> <h4 class="role-name" title="select" aria-describedby="desc-select"><code>select</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-select" role="definition"> <p>A form widget that allows the user to make selections from a set of choices.</p> <p><code>select</code> is an <a href="#isAbstract">abstract role</a> used for the ontology. Authors <em class="rfc2119">MUST NOT</em> use <code>select</code> role in content.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-abstract-head" scope="row">Is Abstract:</th> <td class="role-abstract">True</td> </tr> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"> <ul> <li><a href="https://w3c.github.io/aria/#composite" class="role-reference"><code>composite</code></a></li> <li><a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a></li> </ul> </td> </tr> <tr> <th class="role-children-head" scope="row">Subclass Roles:</th> <td class="role-children"><ul> <li><a href="https://w3c.github.io/aria/#listbox" class="role-reference"><code>listbox</code></a></li> <li><a href="https://w3c.github.io/aria/#menu" class="role-reference"><code>menu</code></a></li> <li><a href="https://w3c.github.io/aria/#radiogroup" class="role-reference"><code>radiogroup</code></a></li> <li><a href="https://w3c.github.io/aria/#tree" class="role-reference"><code>tree</code></a></li> </ul> </td> </tr> <tr> <th class="role-properties-head" scope="row">Supported States and Properties:</th> <td class="role-properties"><a href="https://w3c.github.io/aria/#aria-orientation" class="property-reference"><code>aria-orientation</code></a></td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> </tbody> </table> </section> <section class="role notoc" id="separator"> <h4 class="role-name" title="separator" aria-describedby="desc-separator"><code>separator</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-separator" role="definition"> <p>A divider that separates and distinguishes sections of content or groups of menuitems.</p> <p>There are two types of separators: a static <a href="https://w3c.github.io/aria/#structure" class="role-reference"><code>structure</code></a> that provides only a visible boundary and a focusable, interactive <a href="https://w3c.github.io/aria/#widget" class="role-reference"><code>widget</code></a> that is also moveable. If a <code>separator</code> is not focusable, it is revealed to <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-44">assistive technologies</a> as a static structural element. For example, a static <code>separator</code> can be used to help visually divide two groups of menu items in a menu or to provide a horizontal rule between two sections of a page.</p> <p>Authors <em class="rfc2119">MAY</em> make a <code>separator</code> focusable to create a <a href="https://w3c.github.io/aria/#widget" class="role-reference"><code>widget</code></a> that both provides a visible boundary between two sections of content and enables the user to change the relative size of the sections by changing the position of the <code>separator</code>. A variable <code>separator</code> widget can be moved continuously within a range, whereas a fixed <code>separator</code> widget supports only two discrete positions. Typically, a fixed <code>separator</code> widget is used to toggle one of the sections between expanded and collapsed states.</p> <p>If the <code>separator</code> is focusable, authors <em class="rfc2119">MUST</em> set the value of <a href="https://w3c.github.io/aria/#aria-valuenow" class="property-reference"><code>aria-valuenow</code></a> to a <a href="#valuetype_number">number</a> reflecting the current position of the <code>separator</code> and update that value when it changes. Authors <em class="rfc2119">SHOULD</em> also provide the value of <a href="https://w3c.github.io/aria/#aria-valuemin" class="property-reference"><code>aria-valuemin</code></a> if it is not <code>0</code> and the value of <a href="https://w3c.github.io/aria/#aria-valuemax" class="property-reference"><code>aria-valuemax</code></a> if it is not <code>100</code>. If missing or not a number, the implicit values of these attributes are as follows:</p> <ul> <li>The implicit value of <code>aria-valuemin</code> is <code>0</code>.</li> <li>The implicit value of <code>aria-valuemax</code> is <code>100</code>.</li> </ul> <p>In applications where there is more than one focusable <code>separator</code>, authors <em class="rfc2119">SHOULD</em> provide an accessible name for each one.</p> <p>Elements with the role <code>separator</code> have an implicit <a href="https://w3c.github.io/aria/#aria-orientation" class="property-reference"><code>aria-orientation</code></a> value of <code>horizontal</code>.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"> <ul> <li><a href="https://w3c.github.io/aria/#structure" class="role-reference"><code>structure</code></a> (if not focusable)</li> <li><a href="https://w3c.github.io/aria/#widget" class="role-reference"><code>widget</code></a> (if focusable)</li> </ul> </td> </tr> <tr> <th class="role-related-head" scope="row">Related Concepts:</th> <td class="role-related"><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-hr-element">hr</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="role-required-properties-head">Required States and Properties:</th> <td class="role-required-properties"><a href="https://w3c.github.io/aria/#aria-valuenow" class="property-reference"><code>aria-valuenow</code></a> (if focusable)</td> </tr> <tr> <th class="role-properties-head" scope="row">Supported States and Properties:</th> <td class="role-properties"> <ul> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (if focusable)</li> <li><a href="https://w3c.github.io/aria/#aria-orientation" class="property-reference"><code>aria-orientation</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-valuemax" class="property-reference"><code>aria-valuemax</code></a> (if focusable)</li> <li><a href="https://w3c.github.io/aria/#aria-valuemin" class="property-reference"><code>aria-valuemin</code></a> (if focusable)</li> <li><a href="https://w3c.github.io/aria/#aria-valuetext" class="property-reference"><code>aria-valuetext</code></a> (if focusable)</li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> <tr> <th class="role-childpresentational-head" scope="row">Children Presentational:</th> <td class="role-childpresentational">True</td> </tr> <tr> <th class="implicit-values-head" scope="row">Implicit Value for Role:</th> <td class="implicit-values"> Default for <a href="https://w3c.github.io/aria/#aria-orientation" class="property-reference"><code>aria-orientation</code></a> is <code class="default">horizontal</code>.<br> Default for <a href="https://w3c.github.io/aria/#aria-valuemin" class="property-reference"><code>aria-valuemin</code></a> is <code>0</code>.<br> Default for <a href="https://w3c.github.io/aria/#aria-valuemax" class="property-reference"><code>aria-valuemax</code></a> is <code>100</code>. </td> </tr> </tbody> </table> </section> <section class="role notoc" id="slider"> <h4 class="role-name" title="slider" aria-describedby="desc-slider"><code>slider</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-slider" role="definition"> <p>An input where the user selects a value from within a given range.</p> <p>A slider represents the current value and range of possible values via the size of the slider and position of the thumb. It is typically possible to add to or subtract from the current value by using directional keys such as arrow keys.</p> <p>Authors <em class="rfc2119">MAY</em> set the <a href="https://w3c.github.io/aria/#aria-valuemin" class="property-reference"><code>aria-valuemin</code></a> and <a href="https://w3c.github.io/aria/#aria-valuemax" class="property-reference"><code>aria-valuemax</code></a> attributes. Otherwise, their implicit values follow the same rules as <code><input type="<code><a data-link-type="attr-value" href="https://html.spec.whatwg.org/multipage/input.html#attr-input-type-range-keyword">range</a></code>"></code> in <abbr title="Hypertext Markup Language">HTML</abbr>:</p> <ul> <li>If <code>aria-valuemin</code> is missing or not a <a href="#valuetype_number">number</a>, it defaults to 0 (zero). </li> <li>If <code>aria-valuemax</code> is missing or not a <a href="#valuetype_number">number</a>, it defaults to 100. </li> </ul> <p>Authors <em class="rfc2119">MUST</em> set the <a href="https://w3c.github.io/aria/#aria-valuenow" class="property-reference"><code>aria-valuenow</code></a> attribute. If aria-valuenow is missing or has an unexpected value, browsers <em class="rfc2119">MAY</em> implement the repair techniques specified in the <a href="#authorErrorDefaultValuesTable">section describing handling author errors in states and properties</a>, which are equivalent to the repair techniques for <code><input type="<code><a data-link-type="attr-value" href="https://html.spec.whatwg.org/multipage/input.html#attr-input-type-range-keyword">range</a></code>"></code> in <abbr title="Hypertext Markup Language">HTML</abbr>.</p> <p>Elements with the role <code>slider</code> have an implicit <a href="https://w3c.github.io/aria/#aria-orientation" class="property-reference"><code>aria-orientation</code></a> value of <code>horizontal</code>.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><ul> <li><a href="https://w3c.github.io/aria/#input" class="role-reference"><code>input</code></a></li> <li><a href="https://w3c.github.io/aria/#range" class="role-reference"><code>range</code></a></li> </ul></td> </tr> <tr> <th class="role-required-properties-head">Required States and Properties:</th> <td class="role-required-properties"> <ul> <li><a href="https://w3c.github.io/aria/#aria-valuenow" class="property-reference"><code>aria-valuenow</code></a></li> </ul> </td> </tr> <tr> <th class="role-properties-head" scope="row">Supported States and Properties:</th> <td class="role-properties"> <ul> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-orientation" class="property-reference"><code>aria-orientation</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-readonly" class="property-reference"><code>aria-readonly</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-valuemax" class="property-reference"><code>aria-valuemax</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-valuemin" class="property-reference"><code>aria-valuemin</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-valuetext" class="property-reference"><code>aria-valuetext</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> <tr> <th class="role-namerequired-head" scope="row">Accessible Name Required:</th> <td class="role-namerequired">True</td> </tr> <tr> <th class="role-childpresentational-head" scope="row">Children Presentational:</th> <td class="role-childpresentational">True</td> </tr> <tr> <th class="implicit-values-head" scope="row">Implicit Value for Role:</th> <td class="implicit-values"> Default for <a href="https://w3c.github.io/aria/#aria-orientation" class="property-reference"><code>aria-orientation</code></a> is <code class="default">horizontal</code>. <br> Default for <a href="https://w3c.github.io/aria/#aria-valuemin" class="property-reference"><code>aria-valuemin</code></a> is <code class="default">0</code>. <br> Default for <a href="https://w3c.github.io/aria/#aria-valuemax" class="property-reference"><code>aria-valuemax</code></a> is <code class="default">100</code>. </td> </tr> </tbody> </table> </section> <section class="role notoc" id="spinbutton"> <h4 class="role-name" title="spinbutton" aria-describedby="desc-spinbutton"><code>spinbutton</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-spinbutton" role="definition"> <p>A form of <a href="https://w3c.github.io/aria/#range" class="role-reference"><code>range</code></a> that expects the user to select from among discrete choices.</p> <p>A <code>spinbutton</code> typically allows users to change its displayed value by activating increment and decrement buttons that step through a set of allowed values. Some implementations display the value in an text field that allows editing and typing but typically limits input in ways that help prevent invalid values.</p> <p>Although a <code>spinbutton</code> is similar in appearance to many presentations of <code>select</code>, it is advisable to use <code>spinbutton</code> when working with known ranges (especially in the case of large ranges) as opposed to distinct options. For example, a <code>spinbutton</code> representing a range from 1 to 1,000,000 would provide much better performance than a <code>select</code> <a href="#dfn-widget" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-widget-21">widget</a> representing the same values.</p> <p>Authors <em class="rfc2119">MAY</em> create a <code>spinbutton</code> with <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-child-31">accessibility children</a>, but <em class="rfc2119">MUST</em> limit those elements to a <a href="https://w3c.github.io/aria/#textbox" class="role-reference"><code>textbox</code></a> and/or two <a href="https://w3c.github.io/aria/#button" class="role-reference"><code>buttons</code></a>. Alternatively, authors <em class="rfc2119">MAY</em> apply the <a href="https://w3c.github.io/aria/#spinbutton" class="role-reference"><code>spinbutton</code></a> role to a text input and create sibling buttons to support the increment and decrement functions.</p> <p>To be <a href="#dfn-keyboard-accessible" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-keyboard-accessible-7">keyboard accessible</a>, authors <em class="rfc2119">SHOULD</em> manage focus of descendants for all instances of this <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-72">role</a>, as described in <a href="#managingfocus">Managing Focus</a>. When a <code>spinbutton</code> receives focus, authors <em class="rfc2119">SHOULD</em> ensure focus is placed on the <a href="https://w3c.github.io/aria/#textbox" class="role-reference"><code>textbox</code></a> element if one is present, and on the <code>spinbutton</code> itself otherwise. Authors <em class="rfc2119">SHOULD</em> also ensure the <kbd>up</kbd> and <kbd>down</kbd> arrows on a keyboard perform the increment and decrement functions and that the increment and decrement <a href="https://w3c.github.io/aria/#button" class="role-reference"><code>button</code></a> elements are <em>NOT</em> included in the primary navigation ring, e.g., the Tab ring in <abbr title="Hypertext Markup Language">HTML</abbr>.</p> <p>Authors <em class="rfc2119">SHOULD</em> set the <a href="https://w3c.github.io/aria/#aria-valuenow" class="property-reference"><code>aria-valuenow</code></a> attribute when the <a href="https://w3c.github.io/aria/#spinbutton" class="role-reference"><code>spinbutton</code></a> has a value. Authors <em class="rfc2119">SHOULD</em> set the <a href="https://w3c.github.io/aria/#aria-valuemin" class="property-reference"><code>aria-valuemin</code></a> attribute when there is a minimum value, and the <a href="https://w3c.github.io/aria/#aria-valuemax" class="property-reference"><code>aria-valuemax</code></a> attribute when there is a maximum value.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"> <ul> <li><a href="https://w3c.github.io/aria/#composite" class="role-reference"><code>composite</code></a></li> <li><a href="https://w3c.github.io/aria/#input" class="role-reference"><code>input</code></a></li> <li><a href="https://w3c.github.io/aria/#range" class="role-reference"><code>range</code></a></li> </ul> </td> </tr> <tr> <th class="role-properties-head" scope="row">Supported States and Properties:</th> <td class="role-properties"> <ul> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-readonly" class="property-reference"><code>aria-readonly</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-required" class="property-reference"><code>aria-required</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-valuemax" class="property-reference"><code>aria-valuemax</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-valuemin" class="property-reference"><code>aria-valuemin</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-valuenow" class="property-reference"><code>aria-valuenow</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-valuetext" class="property-reference"><code>aria-valuetext</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> <tr> <th class="role-namerequired-head" scope="row">Accessible Name Required:</th> <td class="role-namerequired">True</td> </tr> <tr> <th class="implicit-values-head" scope="row">Implicit Value for Role:</th> <td class="implicit-values"> Default for <a href="https://w3c.github.io/aria/#aria-valuemin" class="property-reference"><code>aria-valuemin</code></a> is that there is no minimum value.<br> Default for <a href="https://w3c.github.io/aria/#aria-valuemax" class="property-reference"><code>aria-valuemax</code></a> is that there is no maximum value.<br> Default for <a href="https://w3c.github.io/aria/#aria-valuenow" class="property-reference"><code>aria-valuenow</code></a> is that there is no current value.<br> </td> </tr> </tbody> </table> </section> <section class="role notoc" id="status"> <h4 class="role-name" title="status" aria-describedby="desc-status"><code>status</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-status" role="definition"> <p>A type of <a href="#dfn-live-region" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-live-region-6">live region</a> whose content is advisory information for the user but is not important enough to justify an <a href="https://w3c.github.io/aria/#alert" class="role-reference"><code>alert</code></a>, often but not necessarily presented as a status bar.</p> <p>Authors <em class="rfc2119">SHOULD</em> ensure an element with role <code>status</code> does not receive focus as a result of change in status.</p> <p>Status is a form of <a href="#dfn-live-region" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-live-region-7">live region</a>. If another part of the page controls what appears in the status, authors <em class="rfc2119">SHOULD</em> make the <a href="#dfn-relationship" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-relationship-10">relationship</a> explicit with the <a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attribute</a>.</p> <p><a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-45">Assistive technologies</a> <em class="rfc2119">MAY</em> reserve some cells of a Braille display to render the status.</p> <p>Elements with the role <code>status</code> have an implicit <a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a> value of <code>polite</code> and an implicit <a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a> value of <code>true</code>.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#section" class="role-reference"><code>section</code></a></td> </tr> <tr> <th class="role-children-head" scope="row">Subclass Roles:</th> <td class="role-children"><ul> <li><a href="https://w3c.github.io/aria/#timer" class="role-reference"><code>timer</code></a></li> </ul> </td> </tr> <tr> <th class="role-related-head" scope="row">Related Concepts:</th> <td class="role-related"><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/form-elements.html#the-output-element">output</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> <tr> <th class="implicit-values-head" scope="row">Implicit Value for Role:</th> <td class="implicit-values"> Default for <a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a> is <code class="default">polite</code>.<br> Default for <a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a> is <code class="default">true</code>. </td> </tr> </tbody> </table> </section> <section class="role notoc" id="strong"> <h4 class="role-name" title="strong" aria-describedby="desc-strong"><code>strong</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-strong" role="definition"> <p>Content that is important, serious, or urgent. See related <a href="https://w3c.github.io/aria/#emphasis" class="role-reference"><code>emphasis</code></a>.</p> <p>The purpose of the <code>strong</code> role is to communicate strong importance, seriousness, or urgency. It is not for communicating changes in typographical presentation that are not important to the meaning of the content. Authors <em class="rfc2119">SHOULD</em> use the <code>strong</code> role only if its absence would change the meaning of the content.</p> <p>The <code>strong</code> role is not intended to convey stress or emphasis; for that purpose, the <a href="https://w3c.github.io/aria/#emphasis" class="role-reference"><code>emphasis</code></a> role is more appropriate.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#section" class="role-reference"><code>section</code></a></td> </tr> <tr> <th class="role-related-head" scope="row">Related Concepts:</th> <td class="role-related"><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-strong-element">strong</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-disallowed-head" scope="row">Prohibited States and Properties:</th> <td class="role-disallowed"> <ul> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">prohibited</td> </tr> </tbody> </table> </section> <section class="role notoc" id="structure"> <h4 class="role-name" title="structure" aria-describedby="desc-structure"><code>structure</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-structure" role="definition"> <p>A document structural <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a>.</p> <p><a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-73">Roles</a> for document structure support the accessibility of dynamic web content by helping <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-46">assistive technologies</a> determine active content versus static document content. Structural roles by themselves do not all map to <a href="#dfn-accessibility-api" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-api-20">accessibility <abbr title="Application Programing Interfaces">APIs</abbr></a>, but are used to create <a href="#dfn-widget" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-widget-22">widget</a> roles or assist content adaptation for assistive technologies.</p> <p><code>structure</code> is an <a href="#isAbstract">abstract role</a> used for the ontology. Authors <em class="rfc2119">MUST NOT</em> use <code>structure</code> role in content.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-abstract-head" scope="row">Is Abstract:</th> <td class="role-abstract">True</td> </tr> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#roletype" class="role-reference"><code>roletype</code></a></td> </tr> <tr> <th class="role-children-head" scope="row">Subclass Roles:</th> <td class="role-children"><ul> <li><a href="https://w3c.github.io/aria/#application" class="role-reference"><code>application</code></a></li> <li><a href="https://w3c.github.io/aria/#document" class="role-reference"><code>document</code></a></li> <li><a href="https://w3c.github.io/aria/#generic" class="role-reference"><code>generic</code></a></li> <li><a href="https://w3c.github.io/aria/#none" class="role-reference"><code>none</code></a></li> <li><a href="https://w3c.github.io/aria/#range" class="role-reference"><code>range</code></a></li> <li><a href="https://w3c.github.io/aria/#rowgroup" class="role-reference"><code>rowgroup</code></a></li> <li><a href="https://w3c.github.io/aria/#section" class="role-reference"><code>section</code></a></li> <li><a href="https://w3c.github.io/aria/#sectionhead" class="role-reference"><code>sectionhead</code></a></li> <li><a href="https://w3c.github.io/aria/#separator" class="role-reference"><code>separator</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> </tbody> </table> </section> <section class="role notoc" id="subscript"> <h4 class="role-name" title="subscript" aria-describedby="desc-subscript"><code>subscript</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-subscript" role="definition"> <p>One or more subscripted characters. See related <a href="https://w3c.github.io/aria/#superscript" class="role-reference"><code>superscript</code></a>.</p> <p>The <code>subscript</code> role is intended to be used only to mark up typographical conventions that have specific meanings; not for typographical presentation for presentation's sake. In general, authors <em class="rfc2119">SHOULD</em> use this role only if the absence of the subscript would change the meaning of the content.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#section" class="role-reference"><code>section</code></a></td> </tr> <tr> <th class="role-related-head" scope="row">Related Concepts:</th> <td class="role-related"><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-sub-element">sub</a></code>></code> and <code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-sup-element">sup</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-disallowed-head" scope="row">Prohibited States and Properties:</th> <td class="role-disallowed"> <ul> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">prohibited</td> </tr> </tbody> </table> </section> <section class="role notoc" id="suggestion"> <h4 class="role-name" title="suggestion" aria-describedby="desc-suggestion"><code>suggestion</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-suggestion" role="definition"> <p>A single proposed change to content.</p> <p>For example, in an editing system that supports multiple users, one user can suggest a change, and another user would be responsible for accepting or rejecting the suggestion.</p> <p>Authors <em class="rfc2119">MUST</em> ensure that a <code>suggestion</code> contains either one <a href="https://w3c.github.io/aria/#insertion" class="role-reference"><code>insertion</code></a> child or one <a href="https://w3c.github.io/aria/#deletion" class="role-reference"><code>deletion</code></a> child or ensure that it contains two children where one is an <a href="https://w3c.github.io/aria/#insertion" class="role-reference"><code>insertion</code></a> and the other is a <a href="https://w3c.github.io/aria/#deletion" class="role-reference"><code>deletion</code></a>. Authors <em class="rfc2119">MUST</em> ensure a <code>suggestion</code> does not contain any other children.</p> <p>Authors <em class="rfc2119">MAY</em> use <a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a> or <a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a> to associate the <code>suggestion</code> with related information such as comments, authoring info, and time stamps.</p> <div class="example" id="example-19"> <div class="marker"> <a class="self-link" href="#example-19">Example<bdi> 19</bdi></a> </div> <pre class="highlight" aria-busy="false"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">p</span>></span> The best pet is a <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"suggestion"</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"deletion"</span>></span>cat<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"insertion"</span>></span>dog<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre> </div> <p>When a suggestion is accepted, authors <em class="rfc2119">SHOULD</em> remove the <code>suggestion</code> role, indicating that the proposed revision has been made. After the <code>suggestion</code> role is removed, child <a href="https://w3c.github.io/aria/#insertion" class="role-reference"><code>insertion</code></a> and <a href="https://w3c.github.io/aria/#deletion" class="role-reference"><code>deletion</code></a> elements can either be retained to document the revision or replaced with the revised content. </p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#section" class="role-reference"><code>section</code></a></td> </tr> <tr> <th class="role-mustcontain-head" scope="row">Allowed Accessibility Child Roles:</th> <td class="role-mustcontain"> <ul> <li><a href="https://w3c.github.io/aria/#insertion" class="role-reference"><code>insertion</code></a></li> <li><a href="https://w3c.github.io/aria/#deletion" class="role-reference"><code>deletion</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-disallowed-head" scope="row">Prohibited States and Properties:</th> <td class="role-disallowed"> <ul> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">prohibited</td> </tr> </tbody> </table> </section> <section class="role notoc" id="superscript"> <h4 class="role-name" title="superscript" aria-describedby="desc-superscript"><code>superscript</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-superscript" role="definition"> <p>One or more superscripted characters. See related <a href="https://w3c.github.io/aria/#subscript" class="role-reference"><code>subscript</code></a>.</p> <p>The <code>superscript</code> role is intended to be used only to mark up typographical conventions that have specific meanings; not for typographical presentation for presentation's sake. In general, authors <em class="rfc2119">SHOULD</em> use this role only if the absence of the superscript would change the meaning of the content.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#section" class="role-reference"><code>section</code></a></td> </tr> <tr> <th class="role-related-head" scope="row">Related Concepts:</th> <td class="role-related"><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-sub-element">sub</a></code>></code> and <code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-sup-element">sup</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-disallowed-head" scope="row">Prohibited States and Properties:</th> <td class="role-disallowed"> <ul> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">prohibited</td> </tr> </tbody> </table> </section> <section class="role notoc" id="switch"> <h4 class="role-name" title="switch" aria-describedby="desc-switch"><code>switch</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-switch" role="definition"> <p>A type of checkbox that represents on/off values, as opposed to checked/unchecked values. See related <a href="https://w3c.github.io/aria/#checkbox" class="role-reference"><code>checkbox</code></a>.</p> <p>The <a href="https://w3c.github.io/aria/#aria-checked" class="state-reference"><code>aria-checked</code></a> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attribute</a> of a <code>switch</code> indicates whether the input is on (<code>true</code>) or off (<code>false</code>). The <code>mixed</code> value is invalid, and user agents <em class="rfc2119">MUST</em> treat a <code>mixed</code> value as equivalent to <code>false</code> for this role.</p> <div class="note" role="note" id="issue-container-generatedID-33"><div role="heading" class="note-title marker" id="h-note-33" aria-level="4"><span>Note</span></div><p class="">A <code>switch</code> provides approximately the same functionality as a <code>checkbox</code> and toggle <code>button</code>, but makes it possible for assistive technologies to present the widget in a fashion consistent with its on-screen appearance.</p></div> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#checkbox" class="role-reference"><code>checkbox</code></a></td> </tr> <tr> <th class="role-related-head" scope="row">Related Concepts:</th> <td class="role-related"><a href="https://w3c.github.io/aria/#button" class="role-reference"><code>button</code></a></td> </tr> <tr> <th class="role-required-properties-head">Required States and Properties:</th> <td class="role-required-properties"> <ul> <li><a href="https://w3c.github.io/aria/#aria-checked" class="state-reference"><code>aria-checked</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-expanded" class="state-reference"><code>aria-expanded</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-readonly" class="property-reference"><code>aria-readonly</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-required" class="property-reference"><code>aria-required</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom"> <ul> <li>contents</li> <li>author</li> </ul> </td> </tr> <tr> <th class="role-namerequired-head" scope="row">Accessible Name Required:</th> <td class="role-namerequired">True</td> </tr> <tr> <th class="role-childpresentational-head" scope="row">Children Presentational:</th> <td class="role-childpresentational">True</td> </tr> </tbody> </table> </section> <section class="role notoc" id="tab"> <h4 class="role-name" title="tab" aria-describedby="desc-tab"><code>tab</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-tab" role="definition"> <p>A grouping label providing a mechanism for selecting the tab content that is to be rendered to the user.</p> <p>If a <a href="https://w3c.github.io/aria/#tabpanel" class="role-reference"><code>tabpanel</code></a> or item in a <a href="https://w3c.github.io/aria/#tabpanel" class="role-reference"><code>tabpanel</code></a> has focus, the associated <code>tab</code> is the currently active tab in the <a href="https://w3c.github.io/aria/#tablist" class="role-reference"><code>tablist</code></a>, as defined in <a href="#managingfocus">Managing Focus</a>. <a href="https://w3c.github.io/aria/#tablist" class="role-reference"><code>tablist</code></a> elements, which contain a set of associated <a href="https://w3c.github.io/aria/#tab" class="role-reference"><code>tab</code></a> elements, are typically placed near a series of <a href="https://w3c.github.io/aria/#tabpanel" class="role-reference"><code>tabpanel</code></a> elements, usually preceding it. See the <cite><a href="https://www.w3.org/WAI/ARIA/apg/" class="practices"><abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices Guide</a></cite> for details on implementing a tab set design pattern.</p> <p>Authors <em class="rfc2119">MUST</em> ensure <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a> with <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-74">role</a> <a href="https://w3c.github.io/aria/#tab" class="role-reference"><code>tab</code></a> are <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-child-32">accessibility children</a> of an element with the role <a href="https://w3c.github.io/aria/#tablist" class="role-reference"><code>tablist</code></a>.</p> <p>Authors <em class="rfc2119">SHOULD</em> ensure the <a href="https://w3c.github.io/aria/#tabpanel" class="role-reference"><code>tabpanel</code></a> associated with the currently active tab is <a href="#dfn-perceivable" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-perceivable-5">perceivable</a> to the user.</p> <p>For a single-selectable <a href="https://w3c.github.io/aria/#tablist" class="role-reference"><code>tablist</code></a>, authors <em class="rfc2119">SHOULD</em> <a data-link-type="dfn|abstract-op" href="#dfn-hide-from-all-users" class="internalDFN" id="ref-for-dfn-hide-from-all-users-3">hide from all users</a> other <code>tabpanel</code> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a> until the user selects the tab associated with that tabpanel. For a multi-selectable <a href="https://w3c.github.io/aria/#tablist" class="role-reference"><code>tablist</code></a>, authors <em class="rfc2119">SHOULD</em> ensure that the <a href="https://w3c.github.io/aria/#tab" class="role-reference"><code>tab</code></a> for each visible <a href="https://w3c.github.io/aria/#tabpanel" class="role-reference"><code>tabpanel</code></a> has the <a href="https://w3c.github.io/aria/#aria-expanded" class="state-reference"><code>aria-expanded</code></a> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attribute</a> set to <code>true</code>, and that the <code>tabs</code> associated with the remaining <a data-link-type="dfn|abstract-op" href="#dfn-hide-from-all-users" class="internalDFN" id="ref-for-dfn-hide-from-all-users-4">hidden from all users</a> <code>tabpanel</code> elements have their <a href="https://w3c.github.io/aria/#aria-expanded" class="state-reference"><code>aria-expanded</code></a> attributes set to <code>false</code>.</p> <p>Authors <em class="rfc2119">SHOULD</em> ensure that a selected tab has its <a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a> attribute set to <code>true</code>, that inactive tab elements have their <a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a> attribute set to <code>false</code>, and that the currently selected tab provides a visual indication that it is selected.</p> <p>In certain conditions, a user agent <em class="rfc2119">MAY</em> provide an implicit value for <a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a> for each <a href="https://w3c.github.io/aria/#tab" class="role-reference"><code>tab</code></a> in a <a href="https://w3c.github.io/aria/#tablist" class="role-reference"><code>tablist</code></a>, and if it does, the user agent <em class="rfc2119">MUST</em> ensure the following conditions are met before providing an implicit value:</p> <ul> <li>The value of <a href="https://w3c.github.io/aria/#aria-multiselectable" class="property-reference"><code>aria-multiselectable</code></a> on the <a href="https://w3c.github.io/aria/#tablist" class="role-reference"><code>tablist</code></a> is <code>false</code> or <code>undefined</code>.</li> <li>None of the <a href="https://w3c.github.io/aria/#tab" class="role-reference"><code>tab</code></a> elements in the <a href="https://w3c.github.io/aria/#tablist" class="role-reference"><code>tablist</code></a> have an explicitly declared value for <a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a> or <a href="https://w3c.github.io/aria/#aria-expanded" class="state-reference"><code>aria-expanded</code></a>.</li> </ul> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"> <ul> <li><a href="https://w3c.github.io/aria/#sectionhead" class="role-reference"><code>sectionhead</code></a></li> <li><a href="https://w3c.github.io/aria/#widget" class="role-reference"><code>widget</code></a></li> </ul> </td> </tr> <tr> <th class="role-scope-head" scope="row">Required Accessibility Parent Roles:</th> <td class="role-scope"><a href="https://w3c.github.io/aria/#tablist" class="role-reference"><code>tablist</code></a></td> </tr> <tr> <th class="role-properties-head" scope="row">Supported States and Properties:</th> <td class="role-properties"> <ul> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-expanded" class="state-reference"><code>aria-expanded</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-posinset" class="property-reference"><code>aria-posinset</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-setsize" class="property-reference"><code>aria-setsize</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom"> <ul> <li>contents</li> <li>author</li> </ul> </td> </tr> <tr> <th class="role-namerequired-head" scope="row">Accessible Name Required:</th> <td class="role-namerequired">True</td> </tr> <tr> <th class="role-childpresentational-head" scope="row">Children Presentational:</th> <td class="role-childpresentational">True</td> </tr> <tr> <th class="implicit-values-head" scope="row">Implicit Value for Role:</th> <td class="implicit-values">Default for <a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a> is <code class="default">false</code>.</td> </tr> </tbody> </table> </section> <section class="role notoc" id="table"> <h4 class="role-name" title="table" aria-describedby="desc-table"><code>table</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-table" role="definition"> <p>A <a href="https://w3c.github.io/aria/#section" class="role-reference"><code>section</code></a> containing data arranged in rows and columns. See related <a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a>.</p> <p>The <code>table</code> role is intended for tabular containers which are not interactive. If the tabular container maintains a selection state, provides its own two-dimensional navigation, or allows the user to rearrange or otherwise manipulate its contents or the display thereof, authors <em class="rfc2119">SHOULD</em> use <a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a> or <a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a> instead.</p> <p>Authors <em class="rfc2119">SHOULD</em> prefer the use of the host language's semantics for table whenever possible, such as the <code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/tables.html#the-table-element">table</a></code>></code> element in <abbr title="Hypertext Markup Language">HTML</abbr>.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#section" class="role-reference"><code>section</code></a></td> </tr> <tr> <th class="role-children-head" scope="row">Subclass Roles:</th> <td class="role-children"><ul> <li><a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a></li> </ul> </td> </tr> <tr> <th class="role-base-head" scope="row">Base Concept:</th> <td class="role-base"><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/tables.html#the-table-element">table</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="role-mustcontain-head" scope="row">Allowed Accessibility Child Roles:</th> <td class="role-mustcontain"> <ul> <li><a href="https://w3c.github.io/aria/#caption" class="role-reference"><code>caption</code></a></li> <li><a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a></li> <li><a href="https://w3c.github.io/aria/#rowgroup" class="role-reference"><code>rowgroup</code></a> with <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-child-33">accessibility child</a> <a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a></li> </ul> </td> </tr> <tr> <th class="role-properties-head" scope="row">Supported States and Properties:</th> <td class="role-properties"> <ul> <li><a href="https://w3c.github.io/aria/#aria-colcount" class="property-reference"><code>aria-colcount</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-rowcount" class="property-reference"><code>aria-rowcount</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> <tr> <th class="role-namerequired-head" scope="row">Accessible Name Required:</th> <td class="role-namerequired">True</td> </tr> </tbody> </table> </section> <section class="role notoc" id="tablist"> <h4 class="role-name" title="tablist" aria-describedby="desc-tablist"><code>tablist</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-tablist" role="definition"> <p>A list of <a href="https://w3c.github.io/aria/#tab" class="role-reference"><code>tab</code></a> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a>, which are references to <a href="https://w3c.github.io/aria/#tabpanel" class="role-reference"><code>tabpanel</code></a> elements.</p> <p>To be <a href="#dfn-keyboard-accessible" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-keyboard-accessible-8">keyboard accessible</a>, authors <em class="rfc2119">SHOULD</em> manage focus of descendants for all instances of this <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-75">role</a>, as described in <a href="#managingfocus">Managing Focus</a>.</p> <p>For a single-selectable <a href="https://w3c.github.io/aria/#tablist" class="role-reference"><code>tablist</code></a>, authors <em class="rfc2119">SHOULD</em> <a data-link-type="dfn|abstract-op" href="#dfn-hide-from-all-users" class="internalDFN" id="ref-for-dfn-hide-from-all-users-5">hide from all users</a> other <code>tabpanel</code> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a> until the user selects the tab associated with that tabpanel. For a multi-selectable <a href="https://w3c.github.io/aria/#tablist" class="role-reference"><code>tablist</code></a>, authors <em class="rfc2119">SHOULD</em> ensure that the <a href="https://w3c.github.io/aria/#tab" class="role-reference"><code>tab</code></a> for each visible <a href="https://w3c.github.io/aria/#tabpanel" class="role-reference"><code>tabpanel</code></a> has the <a href="https://w3c.github.io/aria/#aria-expanded" class="state-reference"><code>aria-expanded</code></a> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attribute</a> set to <code>true</code>, and that the <code>tabs</code> associated with the remaining <a data-link-type="dfn|abstract-op" href="#dfn-hide-from-all-users" class="internalDFN" id="ref-for-dfn-hide-from-all-users-6">hidden from all users</a> <code>tabpanel</code> elements have their <a href="https://w3c.github.io/aria/#aria-expanded" class="state-reference"><code>aria-expanded</code></a> attributes set to <code>false</code>.</p> <p><a href="https://w3c.github.io/aria/#tablist" class="role-reference"><code>tablist</code></a> elements are typically placed near usually preceding, a series of <a href="https://w3c.github.io/aria/#tabpanel" class="role-reference"><code>tabpanel</code></a> elements. See the <cite><a href="https://www.w3.org/WAI/ARIA/apg/" class="practices"><abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices Guide</a></cite> for details on implementing a tab set design pattern.</p> <p>Elements with the role <a href="https://w3c.github.io/aria/#tablist" class="role-reference"><code>tablist</code></a> have an implicit <a href="https://w3c.github.io/aria/#aria-orientation" class="property-reference"><code>aria-orientation</code></a> value of <code>horizontal</code>.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"> <ul> <li><a href="https://w3c.github.io/aria/#composite" class="role-reference"><code>composite</code></a></li> </ul> </td> </tr> <tr> <th class="role-mustcontain-head" scope="row">Allowed Accessibility Child Roles:</th> <td class="role-mustcontain"><a href="https://w3c.github.io/aria/#tab" class="role-reference"><code>tab</code></a></td> </tr> <tr> <th class="role-properties-head" scope="row">Supported States and Properties:</th> <td class="role-properties"> <ul> <li><a href="https://w3c.github.io/aria/#aria-multiselectable" class="property-reference"><code>aria-multiselectable</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-orientation" class="property-reference"><code>aria-orientation</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> <tr> <th class="implicit-values-head" scope="row">Implicit Value for Role:</th> <td class="implicit-values">Default for <a href="https://w3c.github.io/aria/#aria-orientation" class="property-reference"><code>aria-orientation</code></a> is <code class="default">horizontal</code>.</td> </tr> </tbody> </table> </section> <section class="role notoc" id="tabpanel"> <h4 class="role-name" title="tabpanel" aria-describedby="desc-tabpanel"><code>tabpanel</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-tabpanel" role="definition"> <p>A container for the resources associated with a <a href="https://w3c.github.io/aria/#tab" class="role-reference"><code>tab</code></a>, where each <a href="https://w3c.github.io/aria/#tab" class="role-reference"><code>tab</code></a> is contained in a <a href="https://w3c.github.io/aria/#tablist" class="role-reference"><code>tablist</code></a>.</p> <p>Authors <em class="rfc2119">SHOULD</em> associate a <code>tabpanel</code> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> with its <a href="https://w3c.github.io/aria/#tab" class="role-reference"><code>tab</code></a>, by using the <a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a> attribute on the tab to reference the tab panel, and/or by using the <a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a> attribute on the tab panel to reference the tab.</p> <p><a href="https://w3c.github.io/aria/#tablist" class="role-reference"><code>tablist</code></a> elements are typically placed near, usually preceding, a series of <a href="https://w3c.github.io/aria/#tabpanel" class="role-reference"><code>tabpanel</code></a> elements. See the <cite><a href="https://www.w3.org/WAI/ARIA/apg/" class="practices"><abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices Guide</a></cite> for details on implementing a tab set design pattern.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#section" class="role-reference"><code>section</code></a></td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> <tr> <th class="role-namerequired-head" scope="row">Accessible Name Required:</th> <td class="role-namerequired">True</td> </tr> </tbody> </table> </section> <section class="role notoc" id="term"> <h4 class="role-name" title="term" aria-describedby="desc-term"><code>term</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-term" role="definition"> <p>A word or phrase with an optional corresponding definition. See related <a href="https://w3c.github.io/aria/#definition" class="role-reference"><code>definition</code></a>.</p> <p>The <code>term</code> role is used to explicitly identify a word or phrase for which a <a href="https://w3c.github.io/aria/#definition" class="role-reference"><code>definition</code></a> has been provided by the author or is expected to be provided by the user. If there is an existing <a href="https://w3c.github.io/aria/#definition" class="role-reference"><code>definition</code></a>, or a form or form control to enter a definition, authors <em class="rfc2119">SHOULD</em> set <a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a> to point to the related element.</p> <p>Authors <em class="rfc2119">SHOULD NOT</em> use the <code>term</code> role on interactive elements such as links because doing so could prevent users of <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-47">assistive technologies</a> from interacting with those elements.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#section" class="role-reference"><code>section</code></a></td> </tr> <tr> <th class="role-related-head" scope="row">Related Concepts:</th> <td class="role-related"><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-dfn-element">dfn</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-disallowed-head" scope="row">Prohibited States and Properties:</th> <td class="role-disallowed"> <ul> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">prohibited</td> </tr> </tbody> </table> </section> <section class="role notoc" id="textbox"> <h4 class="role-name" title="textbox" aria-describedby="desc-textbox"><code>textbox</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-textbox" role="definition"> <p>A type of input that allows free-form text as its value.</p> <p>If the <a href="https://w3c.github.io/aria/#aria-multiline" class="property-reference"><code>aria-multiline</code></a> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attribute</a> is <code>true</code>, the <a href="#dfn-widget" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-widget-23">widget</a> accepts line breaks within the input, as in an <abbr title="Hypertext Markup Language">HTML</abbr> <code>textarea</code>. Otherwise, this is a simple text box. The intended use is for languages that do not have a text input <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a>, or cases in which an element with different <a href="#dfn-semantics" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-semantics-5">semantics</a> is repurposed as a text field.</p> <p>Authors <em class="rfc2119">MUST</em> limit the children of a textbox to non-interactive, entirely presentational elements such as icons used to visually convey information that is already exposed in an accessible manner. Examples include:</p> <ul> <li>an error icon, where the containing textbox has been provided an <a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a>, <a href="https://w3c.github.io/aria/#aria-errormessage" class="state-reference"><code>aria-errormessage</code></a>, or both attributes;</li> <li>an icon of a user silhouette, where the textbox is also visibly labeled or provided an accessible name of "name" or "username"; and</li> <li>a graphical status indicator, such as a gauge to represent characters remaining, which represents dynamically updating text available outside of the textbox.</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="4"><span>Note</span></div><p class="">In most user agent implementations, the default behavior of the <kbd>ENTER</kbd> or <kbd>RETURN</kbd> key is different between the single-line and multi-line text fields in <abbr title="Hypertext Markup Language">HTML</abbr>. When user has focus in a single-line <code><input type="text"></code> element, the keystroke usually submits the form. When user has focus in a multi-line <code><textarea></code> element, the keystroke inserts a line break. The <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> <code>textbox</code> role differentiates these types of boxes with the <a href="https://w3c.github.io/aria/#aria-multiline" class="property-reference"><code>aria-multiline</code></a> attribute, so authors are advised to be aware of this distinction when designing the field.</p></div> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#input" class="role-reference"><code>input</code></a></td> </tr> <tr> <th class="role-children-head" scope="row">Subclass Roles:</th> <td class="role-children"><ul> <li><a href="https://w3c.github.io/aria/#searchbox" class="role-reference"><code>searchbox</code></a></li> </ul> </td> </tr> <tr> <th class="role-related-head" scope="row">Related Concepts:</th> <td class="role-related"> <ul> <li><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/form-elements.html#the-textarea-element">textarea</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></li> <li><code><input type="<code><a data-link-type="attr-value" href="https://html.spec.whatwg.org/multipage/input.html#attr-input-type-text-keyword">text</a></code>"></code> in <abbr title="Hypertext Markup Language">HTML</abbr></li> </ul> </td> </tr> <tr> <th class="role-properties-head" scope="row">Supported States and Properties:</th> <td class="role-properties"> <ul> <li><a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-autocomplete" class="property-reference"><code>aria-autocomplete</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-multiline" class="property-reference"><code>aria-multiline</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-placeholder" class="property-reference"><code>aria-placeholder</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-readonly" class="property-reference"><code>aria-readonly</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-required" class="property-reference"><code>aria-required</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> <tr> <th class="role-namerequired-head" scope="row">Accessible Name Required:</th> <td class="role-namerequired">True</td> </tr> </tbody> </table> </section> <section class="role notoc" id="time"> <h4 class="role-name" title="time" aria-describedby="desc-time"><code>time</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-time" role="definition"> <p>An element that represents a specific point in time.</p> <div class="note" role="note" id="issue-container-generatedID-35"><div role="heading" class="note-title marker" id="h-note-35" aria-level="4"><span>Note</span></div><p class="">At the present time, there are no <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> properties corresponding to the <code>datetime</code> attribute supported on <code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-time-element">time</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr>. The addition of this property will be considered for <abbr title="Accessible Rich Internet Applications">ARIA</abbr> version 1.3.</p></div> <p>Authors <em class="rfc2119">SHOULD</em> limit text contents to a valid date- or time-related string, or apply this future <code>datetime</code>-equivalent property to the element which has role <code>time</code>.</p> <aside class="example" id="example-20"><div class="marker"> <a class="self-link" href="#example-20">Example<bdi> 20</bdi></a> </div> <p>Examples of valid date- or time-related strings as text contents of an element with the <code>time</code> role:</p> <ul> <li>A valid month string: <code><span role="time">2019-11</span></code></li> <li>A valid date string: <code><span role="time">2019-11-18</span></code></li> <li>A valid yearless date string: <code><span role="time">11-18</span></code></li> <li>A valid time string: <code><span role="time">09:54:39</span></code></li> <li>A valid floating date and time string: <code><span role="time">2019-11-18T14:54</span></code></li> <li>A valid time-zone offset string: <code><span role="time">-08:00</span></code></li> <li>A valid global date and time string: <code><span role="time">2019-11-18T14:54Z</span></code></li> <li>A valid week string: <code><span role="time">2019-W47</span></code></li> <li>Four or more ASCII digits, at least one of which is not U+0030 DIGIT ZERO (0): <code><span role="time">0001</span></code></li> <li>A valid duration string: <code><span role="time">4h 18m 3s</span></code></li> </ul> </aside> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#section" class="role-reference"><code>section</code></a></td> </tr> <tr> <th class="role-related-head" scope="row">Related Concepts:</th> <td class="role-related"><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-time-element">time</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-disallowed-head" scope="row">Prohibited States and Properties:</th> <td class="role-disallowed"> <ul> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">prohibited</td> </tr> </tbody> </table> </section> <section class="role notoc" id="timer"> <h4 class="role-name" title="timer" aria-describedby="desc-timer"><code>timer</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-timer" role="definition"> <p>A type of <a href="#dfn-live-region" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-live-region-8">live region</a> containing a numerical counter which indicates an amount of elapsed time from a start point, or the time remaining until an end point.</p> <p>The text contents of the timer <a href="#dfn-object" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-object-15">object</a> indicate the current time measurement, and are updated as that amount changes. The timer value is not necessarily machine parsable, but authors <em class="rfc2119">SHOULD</em> update the text contents at fixed intervals, except when the timer is paused or reaches an end-point.</p> <p>Elements with the role <code>timer</code> have an implicit <a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a> value of <code>off</code>.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#status" class="role-reference"><code>status</code></a></td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> <tr> <th class="implicit-values-head" scope="row">Implicit Value for Role:</th> <td class="implicit-values"> Default for <a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a> is <code class="default">off</code>. </td> </tr> </tbody> </table> </section> <section class="role notoc" id="toolbar"> <h4 class="role-name" title="toolbar" aria-describedby="desc-toolbar"><code>toolbar</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-toolbar" role="definition"> <p>A collection of commonly used function buttons or controls represented in compact visual form.</p> <p>The toolbar is often a subset of functions found in a <a href="https://w3c.github.io/aria/#menubar" class="role-reference"><code>menubar</code></a>, designed to reduce user effort in using these functions. Authors <em class="rfc2119">MUST</em> supply a label on each toolbar when the application contains more than one toolbar.</p> <p>Authors <em class="rfc2119">MAY</em> manage focus of descendants for all instances of this <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-76">role</a>, as described in <a href="#managingfocus">Managing Focus</a>.</p> <p>Elements with the role <code>toolbar</code> have an implicit <a href="https://w3c.github.io/aria/#aria-orientation" class="property-reference"><code>aria-orientation</code></a> value of <code>horizontal</code>.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a></td> </tr> <tr> <th class="role-related-head" scope="row">Related Concepts:</th> <td class="role-related"><a href="https://w3c.github.io/aria/#menubar" class="role-reference"><code>menubar</code></a></td> </tr> <tr> <th class="role-properties-head" scope="row">Supported States and Properties:</th> <td class="role-properties"> <a href="https://w3c.github.io/aria/#aria-orientation" class="property-reference"><code>aria-orientation</code></a> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> <tr> <th class="implicit-values-head" scope="row">Implicit Value for Role:</th> <td class="implicit-values">Default for <a href="https://w3c.github.io/aria/#aria-orientation" class="property-reference"><code>aria-orientation</code></a> is <code class="default">horizontal</code>.</td> </tr> </tbody> </table> </section> <section class="role notoc" id="tooltip"> <h4 class="role-name" title="tooltip" aria-describedby="desc-tooltip"><code>tooltip</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-tooltip" role="definition"> <p>A contextual popup that displays a description for an element.</p> <p>The <code>tooltip</code> typically becomes visible, after a short delay, in response to a mouse hover, or after the <a href="#dfn-accessibility-parent" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-parent-8">accessibility parent</a> receives keyboard focus. The use of a <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> tooltip is a supplement to the normal tooltip behavior of the user agent.</p> <div class="note" role="note" id="issue-container-generatedID-36"><div role="heading" class="note-title marker" id="h-note-36" aria-level="4"><span>Note</span></div><p class="">Typical tooltip delays last from one to five seconds.</p></div> <p>Authors <em class="rfc2119">SHOULD</em> ensure that elements with the <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-77">role</a> <code>tooltip</code> are referenced through the use of <a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a> before or at the time the tooltip is displayed.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#section" class="role-reference"><code>section</code></a></td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom"> <ul> <li>contents</li> <li>author</li> </ul> </td> </tr> </tbody> </table> </section> <section class="role notoc" id="tree"> <h4 class="role-name" title="tree" aria-describedby="desc-tree"><code>tree</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-tree" role="definition"> <p>A <a href="https://w3c.github.io/aria/#widget" class="role-reference"><code>widget</code></a> that allows the user to select one or more items from a hierarchically organized collection.</p> <p>To be <a href="#dfn-keyboard-accessible" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-keyboard-accessible-9">keyboard accessible</a>, authors <em class="rfc2119">SHOULD</em> manage focus of descendants for all instances of this <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-78">role</a>, as described in <a href="#managingfocus">Managing Focus</a>.</p> <p>Elements with the role <code>tree</code> have an implicit <a href="https://w3c.github.io/aria/#aria-orientation" class="property-reference"><code>aria-orientation</code></a> value of <code>vertical</code>.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#select" class="role-reference"><code>select</code></a></td> </tr> <tr> <th class="role-children-head" scope="row">Subclass Roles:</th> <td class="role-children"><ul> <li><a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a></li> </ul> </td> </tr> <tr> <th class="role-mustcontain-head" scope="row">Allowed Accessibility Child Roles:</th> <td class="role-mustcontain"> <ul> <li><a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a> with <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-child-34">accessibility child</a> <a href="https://w3c.github.io/aria/#treeitem" class="role-reference"><code>treeitem</code></a></li> <li><a href="https://w3c.github.io/aria/#treeitem" class="role-reference"><code>treeitem</code></a></li> </ul> </td> </tr> <tr> <th class="role-properties-head" scope="row">Supported States and Properties:</th> <td class="role-properties"> <ul> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-multiselectable" class="property-reference"><code>aria-multiselectable</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-required" class="property-reference"><code>aria-required</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-orientation" class="property-reference"><code>aria-orientation</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> <tr> <th class="role-namerequired-head" scope="row">Accessible Name Required:</th> <td class="role-namerequired">True</td> </tr> <tr> <th class="implicit-values-head" scope="row">Implicit Value for Role:</th> <td class="implicit-values">Default for <a href="https://w3c.github.io/aria/#aria-orientation" class="property-reference"><code>aria-orientation</code></a> is <code class="default">vertical</code>.</td> </tr> </tbody> </table> </section> <section class="role notoc" id="treegrid"> <h4 class="role-name" title="treegrid" aria-describedby="desc-treegrid"><code>treegrid</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-treegrid" role="definition"> <p>A <a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a> whose rows can be expanded and collapsed in the same manner as for a <a href="https://w3c.github.io/aria/#tree" class="role-reference"><code>tree</code></a>.</p> <p>If <a href="https://w3c.github.io/aria/#aria-readonly" class="property-reference"><code>aria-readonly</code></a> is set on an <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> with <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-79">role</a> <code>treegrid</code>, <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agents</a> <em class="rfc2119">MUST</em> propagate the value to all <a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a> elements that are <a href="#dfn-accessibility-descendant" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-descendant-13">accessibility descendants</a> of the <code>treegrid</code> and expose the value in the accessibility <abbr title="application programming interface">API</abbr>. An author <em class="rfc2119">MAY</em> override the propagated value of <a href="https://w3c.github.io/aria/#aria-readonly" class="property-reference"><code>aria-readonly</code></a> for an individual <a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a> element.</p> <p>When the <a href="https://w3c.github.io/aria/#aria-readonly" class="property-reference"><code>aria-readonly</code></a> attribute is applied to a focusable <a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a>, it indicates whether the content contained in the <a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a> is editable. The <a href="https://w3c.github.io/aria/#aria-readonly" class="property-reference"><code>aria-readonly</code></a> attribute does not represent availability of functions for navigating or manipulating the <code>treegrid</code> itself.</p> <p>In a <code>treegrid</code> that provides content editing functions, if the content of a focusable <a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a> element is not editable, authors <em class="rfc2119">MAY</em> set <a href="https://w3c.github.io/aria/#aria-readonly" class="property-reference"><code>aria-readonly</code></a> to <code>true</code> on the <a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a> element. However, if a <code>treegrid</code> presents a collection of elements that do not support <a href="https://w3c.github.io/aria/#aria-readonly" class="property-reference"><code>aria-readonly</code></a>, such as a collection of <a href="https://w3c.github.io/aria/#link" class="role-reference"><code>link</code></a> elements, it is not necessary for the author to specify a value for <a href="https://w3c.github.io/aria/#aria-readonly" class="property-reference"><code>aria-readonly</code></a>.</p> <p>To be <a href="#dfn-keyboard-accessible" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-keyboard-accessible-10">keyboard accessible</a>, authors <em class="rfc2119">SHOULD</em> manage focus of descendants for all instances of this <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-80">role</a>, as described in <a href="#managingfocus">Managing Focus</a>.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"> <ul> <li><a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a></li> <li><a href="https://w3c.github.io/aria/#tree" class="role-reference"><code>tree</code></a></li> </ul> </td> </tr> <tr> <th class="role-mustcontain-head" scope="row">Allowed Accessibility Child Roles:</th> <td class="role-mustcontain"> <ul> <li><a href="https://w3c.github.io/aria/#caption" class="role-reference"><code>caption</code></a></li> <li><a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a></li> <li><a href="https://w3c.github.io/aria/#rowgroup" class="role-reference"><code>rowgroup</code></a> with <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-child-35">accessibility child</a> <a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-colcount" class="property-reference"><code>aria-colcount</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-multiselectable" class="property-reference"><code>aria-multiselectable</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-orientation" class="property-reference"><code>aria-orientation</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-readonly" class="property-reference"><code>aria-readonly</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-required" class="property-reference"><code>aria-required</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-rowcount" class="property-reference"><code>aria-rowcount</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom">author</td> </tr> <tr> <th class="role-namerequired-head" scope="row">Accessible Name Required:</th> <td class="role-namerequired">True</td> </tr> </tbody> </table> </section> <section class="role notoc" id="treeitem"> <h4 class="role-name" title="treeitem" aria-describedby="desc-treeitem"><code>treeitem</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-treeitem" role="definition"> <p>An item in a <a href="https://w3c.github.io/aria/#tree" class="role-reference"><code>tree</code></a>.</p> <p>A <a href="https://w3c.github.io/aria/#treeitem" class="role-reference"><code>treeitem</code></a> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> can contain a sub-level group of elements that can be expanded or collapsed. An expandable collection of <code>treeitem</code> elements are enclosed in an element with the <a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a> <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-81">role</a>.</p> <p>Authors <em class="rfc2119">MUST</em> ensure <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a> with <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-82">role</a> <code>treeitem</code> are <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-child-36">accessibility children</a> of an element with role <a href="https://w3c.github.io/aria/#tree" class="role-reference"><code>tree</code></a> or an element with role <a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a> that is the <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-child-37">accessibility child</a> of an element with role <a href="https://w3c.github.io/aria/#treeitem" class="role-reference"><code>treeitem</code></a>.</p> <p>In certain conditions, a user agent <em class="rfc2119">MAY</em> provide an implicit value for <a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a> for each <a href="https://w3c.github.io/aria/#treeitem" class="role-reference"><code>treeitem</code></a> in a <a href="https://w3c.github.io/aria/#tree" class="role-reference"><code>tree</code></a>, and if it does, the user agent <em class="rfc2119">MUST</em> ensure the following conditions are met before providing an implicit value:</p> <ul> <li>The value of <a href="https://w3c.github.io/aria/#aria-multiselectable" class="property-reference"><code>aria-multiselectable</code></a> on the <a href="https://w3c.github.io/aria/#tree" class="role-reference"><code>tree</code></a> is <code>false</code> or <code>undefined</code>.</li> <li>None of the <a href="https://w3c.github.io/aria/#treeitem" class="role-reference"><code>treeitem</code></a> elements in the <a href="https://w3c.github.io/aria/#tree" class="role-reference"><code>tree</code></a> have an explicitly declared value for <a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a> or <a href="https://w3c.github.io/aria/#aria-checked" class="state-reference"><code>aria-checked</code></a>.</li> </ul> <p> If a user agent provides an implicit <a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a> value for a <a href="https://w3c.github.io/aria/#treeitem" class="role-reference"><code>treeitem</code></a>, the value <em class="rfc2119">SHOULD</em> be <code>true</code> if the <a href="https://w3c.github.io/aria/#treeitem" class="role-reference"><code>treeitem</code></a> has <abbr title="Document Object Model">DOM</abbr> focus or the <a href="https://w3c.github.io/aria/#tree" class="role-reference"><code>tree</code></a> has <abbr title="Document Object Model">DOM</abbr> focus and the <a href="https://w3c.github.io/aria/#treeitem" class="role-reference"><code>treeitem</code></a> is referenced by <a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a>. Otherwise, if a user agent provides an implicit <a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a> value for a <a href="https://w3c.github.io/aria/#treeitem" class="role-reference"><code>treeitem</code></a>, the value <em class="rfc2119">SHOULD</em> be <code>false</code>. </p> <p> Authors <em class="rfc2119">MAY</em> indicate selection for <a href="https://w3c.github.io/aria/#treeitem" class="role-reference"><code>treeitem</code></a> elements using either <a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a> or <a href="https://w3c.github.io/aria/#aria-checked" class="state-reference"><code>aria-checked</code></a>. Some user interfaces indicate selection with <a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a> in single-select trees and with <a href="https://w3c.github.io/aria/#aria-checked" class="state-reference"><code>aria-checked</code></a> in multi-select trees. Authors <em class="rfc2119">SHOULD NOT</em> specify both <a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a> and <a href="https://w3c.github.io/aria/#aria-checked" class="state-reference"><code>aria-checked</code></a> on <a href="https://w3c.github.io/aria/#treeitem" class="role-reference"><code>treeitem</code></a> elements contained by the same <a href="https://w3c.github.io/aria/#tree" class="role-reference"><code>tree</code></a> except in the extremely rare circumstances where all the following conditions are met: </p> <ul> <li>The meaning and purpose of <a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a> is different from the meaning and purpose of <a href="https://w3c.github.io/aria/#aria-checked" class="state-reference"><code>aria-checked</code></a> in the user interface.</li> <li>The user interface makes the meaning and purpose of each state apparent.</li> <li>The user interface provides a separate method for controlling each state.</li> </ul> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"> <ul> <li><a href="https://w3c.github.io/aria/#listitem" class="role-reference"><code>listitem</code></a></li> <li><a href="https://w3c.github.io/aria/#option" class="role-reference"><code>option</code></a></li> </ul> </td> </tr> <tr> <th class="role-scope-head" scope="row">Required Accessibility Parent Roles:</th> <td class="role-scope"> <ul> <li><a href="https://w3c.github.io/aria/#tree" class="role-reference"><code>tree</code></a></li> <li><a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a> with <a href="#dfn-accessibility-parent" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-parent-9">accessibility parent</a> <a href="https://w3c.github.io/aria/#treeitem" class="role-reference"><code>treeitem</code></a></li> </ul> </td> </tr> <tr> <th class="role-properties-head" scope="row">Supported States and Properties:</th> <td class="role-properties"> <ul> <li><a href="https://w3c.github.io/aria/#aria-expanded" class="state-reference"><code>aria-expanded</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-level" class="property-reference"><code>aria-level</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-checked" class="state-reference"><code>aria-checked</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-posinset" class="property-reference"><code>aria-posinset</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-setsize" class="property-reference"><code>aria-setsize</code></a></li> </ul> </td> </tr> <tr> <th class="role-namefrom-head" scope="row">Name From:</th> <td class="role-namefrom"> <ul> <li>contents</li> <li>author</li> </ul> </td> </tr> <tr> <th class="role-namerequired-head" scope="row">Accessible Name Required:</th> <td class="role-namerequired">True</td> </tr> </tbody> </table> </section> <section class="role notoc" id="widget"> <h4 class="role-name" title="widget" aria-describedby="desc-widget"><code>widget</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-widget" role="definition"> <p>An interactive component of a graphical user interface (<abbr title="Graphical User Interface">GUI</abbr>).</p> <p>Widgets are discrete user interface objects with which the user can interact. Widget <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-83">roles</a> map to standard features in <a href="#dfn-accessibility-api" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-api-21">accessibility <abbr title="Application Programing Interfaces">APIs</abbr></a>. When the user navigates an element assigned any of the non-abstract subclass roles of <code>widget</code>, <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-48">assistive technologies</a> that typically intercept standard keyboard events <em class="rfc2119">SHOULD</em> switch to an application browsing mode, and pass keyboard events through to the web application. The intent is to hint to certain <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-49">assistive technologies</a> to switch from normal browsing mode into a mode more appropriate for interacting with a web application; some <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agents</a> have a browse navigation mode where keys, such as up and down arrows, are used to browse the document, and this native behavior prevents the use of these keys by a web application.</p> <p><code>widget</code> is an <a href="#isAbstract">abstract role</a> used for the ontology. Authors <em class="rfc2119">MUST NOT</em> use <code>widget</code> role in content.</p> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-abstract-head" scope="row">Is Abstract:</th> <td class="role-abstract">True</td> </tr> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#roletype" class="role-reference"><code>roletype</code></a></td> </tr> <tr> <th class="role-children-head" scope="row">Subclass Roles:</th> <td class="role-children"><ul> <li><a href="https://w3c.github.io/aria/#command" class="role-reference"><code>command</code></a></li> <li><a href="https://w3c.github.io/aria/#composite" class="role-reference"><code>composite</code></a></li> <li><a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a></li> <li><a href="https://w3c.github.io/aria/#input" class="role-reference"><code>input</code></a></li> <li><a href="https://w3c.github.io/aria/#progressbar" class="role-reference"><code>progressbar</code></a></li> <li><a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a></li> <li><a href="https://w3c.github.io/aria/#scrollbar" class="role-reference"><code>scrollbar</code></a></li> <li><a href="https://w3c.github.io/aria/#separator" class="role-reference"><code>separator</code></a></li> <li><a href="https://w3c.github.io/aria/#tab" class="role-reference"><code>tab</code></a></li> </ul> </td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> </tbody> </table> </section> <section class="role notoc" id="window"> <h4 class="role-name" title="window" aria-describedby="desc-window"><code>window</code> <span class="type-indicator">role</span></h4> <div class="role-description" id="desc-window" role="definition"> <p>A browser or application window.</p> <p><a data-link-type="dfn" data-lt="element" href="https://dom.spec.whatwg.org/#concept-element">Elements</a> with this <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-84">role</a> have a window-like behavior in a graphical user interface (<abbr title="Graphical User Interface">GUI</abbr>) context, regardless of whether they are implemented as a native window in the operating system, or merely as a section of the document styled to look like a window.</p> <p><code>window</code> is an <a href="#isAbstract">abstract role</a> used for the ontology. Authors <em class="rfc2119">MUST NOT</em> use <code>window</code> role in content.</p> <div class="note" role="note" id="issue-container-generatedID-37"><div role="heading" class="note-title marker" id="h-note-37" aria-level="4"><span>Note</span></div><p class="">In the description of this role, the term "application" does not refer to the <a href="https://w3c.github.io/aria/#application" class="role-reference"><code>application</code></a> role, which specifies specific assistive technology behaviors.</p></div> </div> <table class="role-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="role-abstract-head" scope="row">Is Abstract:</th> <td class="role-abstract">True</td> </tr> <tr> <th class="role-parent-head" scope="row">Superclass Role:</th> <td class="role-parent"><a href="https://w3c.github.io/aria/#roletype" class="role-reference"><code>roletype</code></a></td> </tr> <tr> <th class="role-children-head" scope="row">Subclass Roles:</th> <td class="role-children"><ul> <li><a href="https://w3c.github.io/aria/#dialog" class="role-reference"><code>dialog</code></a></li> </ul> </td> </tr> <tr> <th class="role-properties-head" scope="row">Supported States and Properties:</th> <td class="role-properties"><a href="https://w3c.github.io/aria/#aria-modal" class="property-reference"><code>aria-modal</code></a></td> </tr> <tr> <th class="role-inherited-head" scope="row">Inherited States and Properties:</th> <td class="role-inherited"><ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> (state)</li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> (state) <strong>(deprecated on this role in ARIA 1.2)</strong></li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> </ul> </td> </tr> </tbody> </table> </section> </section> </section> <section class="normative" id="states_and_properties"><div class="header-wrapper"><h2 id="x6-supported-states-and-properties"><bdi class="secno">6. </bdi>Supported States and Properties</h2><a class="self-link" href="#states_and_properties" aria-label="Permalink for Section 6."></a></div> <section id="statevsprop"><div class="header-wrapper"><h3 id="x6-1-clarification-of-states-versus-properties"><bdi class="secno">6.1 </bdi>Clarification of States versus Properties</h3><a class="self-link" href="#statevsprop" aria-label="Permalink for Section 6.1"></a></div> <p>The terms "states" and "properties" refer to similar features. Both provide specific information about an <a href="#dfn-object" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-object-16">object</a>, and both form part of the definition of the nature of <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-85">roles</a>. In this document, states and properties are both treated as aria-prefixed markup <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attributes</a>. However, they are maintained conceptually distinct to clarify subtle differences in their meaning. One major difference is that the <span>values</span> of properties (such as <a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a>) are often less likely to change throughout the application life-cycle than the values of states (such as <a href="https://w3c.github.io/aria/#aria-checked" class="state-reference"><code>aria-checked</code></a>) which might change frequently due to user interaction. Note that the frequency of change difference is not a rule; a few properties, such as <a href="https://w3c.github.io/aria/#aria-valuetext" class="property-reference"><code>aria-valuetext</code></a> are expected to change often. Because the distinction between states and properties is of little consequence to most authors, this specification refers to both "states" and "properties" simply as "attributes" whenever possible. See the definitions of <a class="termref informative" href="#dfn-state" id="ref-for-dfn-state-16">state</a> and <a class="termref informative" href="#dfn-property" id="ref-for-dfn-property-13">property</a> for more information.</p> </section> <section id="state_prop_att"><div class="header-wrapper"><h3 id="x6-2-characteristics-of-states-and-properties"><bdi class="secno">6.2 </bdi>Characteristics of States and Properties</h3><a class="self-link" href="#state_prop_att" aria-label="Permalink for Section 6.2"></a></div> <p>States and properties have the characteristics described in the following sections.</p> <section id="propcharacteristic_relatedconcept"><div class="header-wrapper"><h4 id="x6-2-1-related-concepts"><bdi class="secno">6.2.1 </bdi>Related Concepts</h4><a class="self-link" href="#propcharacteristic_relatedconcept" aria-label="Permalink for Section 6.2.1"></a></div> <p>Advisory information about features from this or other languages that correspond to this <a href="#dfn-state" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-state-17">state</a> or <a data-link-type="dfn|abstract-op" href="#dfn-property" class="internalDFN" id="ref-for-dfn-property-14">property</a>. While the correspondence might not be exact, it is useful to help understand the intent of the state or property.</p> </section> <section id="propcharacteristic_usedinrole"><div class="header-wrapper"><h4 id="x6-2-2-used-in-roles"><bdi class="secno">6.2.2 </bdi>Used in Roles</h4><a class="self-link" href="#propcharacteristic_usedinrole" aria-label="Permalink for Section 6.2.2"></a></div> <p>Advisory information about <a href="#role_definitions">roles</a> that use this <a href="#dfn-state" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-state-18">state</a> or <a data-link-type="dfn|abstract-op" href="#dfn-property" class="internalDFN" id="ref-for-dfn-property-15">property</a>. This information is provided to help understand the appropriate usage of the state or property. Use of a given state or property is not defined when used on roles other than those listed.</p> </section> <section id="propcharacteristic_inheritsintoroles"><div class="header-wrapper"><h4 id="x6-2-3-inherits-into-roles"><bdi class="secno">6.2.3 </bdi>Inherits into Roles</h4><a class="self-link" href="#propcharacteristic_inheritsintoroles" aria-label="Permalink for Section 6.2.3"></a></div> <p>Advisory information about <a href="#role_definitions">roles</a> that inherit the <a href="#dfn-state" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-state-19">state</a> or <a data-link-type="dfn|abstract-op" href="#dfn-property" class="internalDFN" id="ref-for-dfn-property-16">property</a> from an ancestor role.</p> </section> <section id="propcharacteristic_value"><div class="header-wrapper"><h4 id="x6-2-4-value"><bdi class="secno">6.2.4 </bdi>Value</h4><a class="self-link" href="#propcharacteristic_value" aria-label="Permalink for Section 6.2.4"></a></div> <p>Value type of the <a href="#dfn-state" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-state-20">state</a> or <a data-link-type="dfn|abstract-op" href="#dfn-property" class="internalDFN" id="ref-for-dfn-property-17">property</a>. The value is one of the following types:</p> <dl> <dt id="valuetype_true-false">true/false</dt> <dd>Value representing either <code>true</code> or <code>false</code>. The default value for this value type is <code>false</code> unless otherwise specified.</dd> <dt id="valuetype_tristate">tristate</dt> <dd>Value representing <code>true</code>, <code>false</code>, <code>mixed</code>, or <code>undefined</code> values. The default value for this value type is <code>undefined</code> unless otherwise specified.</dd> <dt id="valuetype_true-false-undefined">true/false/undefined</dt> <dd>Value representing <code>true</code>, <code>false</code>, or <code>undefined</code> (not applicable). The default value for this value type is <code>undefined</code> unless otherwise specified. For example, an element with <a href="https://w3c.github.io/aria/#aria-expanded" class="state-reference"><code>aria-expanded</code></a> set to <code>false</code> is not currently expanded; an element with <a href="https://w3c.github.io/aria/#aria-expanded" class="state-reference"><code>aria-expanded</code></a> set to <code>undefined</code> is not expandable.</dd> <dt id="valuetype_idref">ID reference</dt> <dd>Reference to the ID of another <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> in the same document</dd> <dt id="valuetype_idref_list">ID reference list</dt> <dd>A list of one or more ID references.</dd> <dt id="valuetype_integer">integer</dt> <dd>A numerical value without a fractional component.</dd> <dt id="valuetype_number">number</dt> <dd>Any real numerical value.</dd> <dt id="valuetype_string">string</dt> <dd>Unconstrained value type.</dd> <dt id="valuetype_token">token</dt> <dd>One of a limited set of allowed values. The default value is defined in each attribute's Values table, as specified in the <a href="#enumerated-attribute-values">Attribute Values</a> section.</dd> <dt id="valuetype_token_list"><dfn id="dfn-token-list" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">token list</dfn></dt> <dd>A list of one or more tokens.</dd> </dl> <p>These are generic types for states and properties, but do not define specific representation. See <a href="#state_property_processing">State and Property Attribute Processing</a> for details on how these values are expressed and handled in host languages.</p> </section> </section> <section data-cite="webidl" id="aria-attributes"><div class="header-wrapper"><h3 id="x6-3-aria-attributes"><bdi class="secno">6.3 </bdi><abbr title="Accessible Rich Internet Applications">ARIA</abbr> Attributes</h3><a class="self-link" href="#aria-attributes" aria-label="Permalink for Section 6.3"></a></div> <section id="enumerated-attribute-values"><div class="header-wrapper"><h4 id="x6-3-1-multi-value-attribute-values"><bdi class="secno">6.3.1 </bdi>Multi-value Attribute Values</h4><a class="self-link" href="#enumerated-attribute-values" aria-label="Permalink for Section 6.3.1"></a></div> <p>When the <abbr title="Accessible Rich Internet Applications">ARIA</abbr> attribute definition includes a table listing the attribute's allowed <span>values</span>, that attribute is a multi-value nullable attribute. Each value in the table is a keyword for the attribute, mapping to a state of the same name. </p> </section> <section id="idl-reflection-attribute-values"><div class="header-wrapper"><h4 id="x6-3-2-idl-reflection-of-aria-attributes"><bdi class="secno">6.3.2 </bdi>IDL reflection of <abbr title="Accessible Rich Internet Applications">ARIA</abbr> attributes</h4><a class="self-link" href="#idl-reflection-attribute-values" aria-label="Permalink for Section 6.3.2"></a></div> <p>All <abbr title="Accessible Rich Internet Applications">ARIA</abbr> attributes reflect in IDL as <a data-link-type="dfn" data-lt="nullable type" href="https://webidl.spec.whatwg.org/#dfn-nullable-type">nullable</a> <a data-link-type="interface" data-lt="DOMString" href="https://webidl.spec.whatwg.org/#idl-DOMString"><code>DOMString</code></a> attributes. This includes the boolean-like <a href="#valuetype_true-false">true/false</a> type, and all other <abbr title="Accessible Rich Internet Applications">ARIA</abbr> attributes.</p> <p>Default values from the <abbr title="Accessible Rich Internet Applications">ARIA</abbr> values tables <em class="rfc2119">MUST NOT</em> reflect to IDL as the <a href="https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#missing-value-default">missing value default</a> or the <a href="https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#invalid-value-default">invalid value default</a> for the attribute. On getting, a missing <abbr title="Accessible Rich Internet Applications">ARIA</abbr> attribute will return <code>null</code>. <abbr title="Accessible Rich Internet Applications">ARIA</abbr> attributes are not validated on get. If an <abbr title="Accessible Rich Internet Applications">ARIA</abbr> value is invalid, on getting, it will return its set value as a literal string, and will not return an invalid value default.</p> </section> <section id="os-aapi-attribute-mapping"><div class="header-wrapper"><h4 id="x6-3-3-operating-system-accessibility-api-mapping-of-multi-value-aria-attributes"><bdi class="secno">6.3.3 </bdi>Operating System Accessibility <abbr title="application programming interface">API</abbr> mapping of multi-value <abbr title="Accessible Rich Internet Applications">ARIA</abbr> attributes</h4><a class="self-link" href="#os-aapi-attribute-mapping" aria-label="Permalink for Section 6.3.3"></a></div> <p>Unlike IDL reflection, operating system accessibility <abbr title="application programming interface">API</abbr> mappings of <abbr title="Accessible Rich Internet Applications">ARIA</abbr> attributes can have defaults. Any default values from the <abbr title="Accessible Rich Internet Applications">ARIA</abbr> values tables are exposed to the operating system accessibility <abbr title="application programming interface">API</abbr> as described in <a href="#supportedState" data-matched-text="[[[#supportedState]]]" class="sec-ref"><bdi class="secno">5.2.3 </bdi>Supported States and Properties</a>, and in <cite><a data-matched-text="[[[CORE-AAM]]]" href="https://www.w3.org/TR/core-aam-1.1/">Core Accessibility API Mappings 1.1</a></cite>.</p> </section> <section id="enumerated-attribute-values-html"><div class="header-wrapper"><h4 id="x6-3-4-aria-nullable-domstring-attributes"><bdi class="secno">6.3.4 </bdi><abbr title="Accessible Rich Internet Applications">ARIA</abbr> nullable DOMString Attributes</h4><a class="self-link" href="#enumerated-attribute-values-html" aria-label="Permalink for Section 6.3.4"></a></div> <p>As noted in <a href="#typemapping" data-matched-text="[[[#typemapping]]]" class="sec-ref"><bdi class="secno">A. </bdi>Mapping <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> Value types to languages</a>, attributes are included in host languages, and the syntax for representation of <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> types is governed by the host language.</p> <p>The following algorithm should be used for <abbr title="Accessible Rich Internet Applications">ARIA</abbr> nullable <a data-link-type="interface" data-lt="DOMString" href="https://webidl.spec.whatwg.org/#idl-DOMString"><code>DOMString</code></a> attributes in <abbr title="Hypertext Markup Language">HTML</abbr>:</p> <p>On getting, if the corresponding content attribute is not present, then the IDL attribute must return null, otherwise, the IDL attribute must get the value in a transparent, case-preserving manner. On setting, if the new value is null, the content attribute must be removed, and otherwise, the content attribute must be set to the specified new value in a transparent, case-preserving manner.</p> <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=""> Note: As of <abbr title="Accessible Rich Internet Applications">ARIA</abbr> 1.2, all <abbr title="Accessible Rich Internet Applications">ARIA</abbr> attributes exposed via IDL are defined as nullable <a data-link-type="interface" data-lt="DOMString" href="https://webidl.spec.whatwg.org/#idl-DOMString"><code>DOMString</code></a>s. This matches the current implementation of all major rendering engines. This specification change should result in no implementation changes; it will merely represent the current reality of web engines. However, in a future draft, the <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Working Group intends to change several <abbr title="Accessible Rich Internet Applications">ARIA</abbr> attributes to non-nullable DOMStrings, and seek implementations. The proposed change will bring <abbr title="Accessible Rich Internet Applications">ARIA</abbr> into alignment with the <abbr title="Hypertext Markup Language">HTML</abbr>’s usage of <a href="https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#enumerated-attribute">enumerated attributes</a>.</p></div> <section class="informative" id="enumeration-example"><div class="header-wrapper"><h5 id="x6-3-4-1-example-attribute-usage"><bdi class="secno">6.3.4.1 </bdi>Example Attribute Usage</h5><a class="self-link" href="#enumeration-example" aria-label="Permalink for Section 6.3.4.1"></a></div><p><em>This section is non-normative.</em></p> <aside class="example" id="example-21"><div class="marker"> <a class="self-link" href="#example-21">Example<bdi> 21</bdi></a> </div> <pre aria-busy="false"><code class="hljs javascript"><span class="hljs-comment">// HTML hidden="" example (not aria-hidden="true")</span> <span class="hljs-comment">// Actual boolean type; defaults to false.</span> <span class="hljs-comment">// Note: Actual boolean assignment and return value.</span> el.<span class="hljs-property">hidden</span> = <span class="hljs-literal">true</span>; el.<span class="hljs-property">hidden</span>; <span class="hljs-comment">// true</span> <span class="hljs-comment">// Removal of content attribute results in missing value default: boolean false.</span> el.<span class="hljs-title function_">removeAttribute</span>(<span class="hljs-string">"hidden"</span>); el.<span class="hljs-property">hidden</span>; <span class="hljs-comment">// false</span></code></pre> </aside> <aside class="example" id="example-22"><div class="marker"> <a class="self-link" href="#example-22">Example<bdi> 22</bdi></a> </div> <pre aria-busy="false"><code class="hljs javascript"><span class="hljs-comment">// aria-busy example</span> <span class="hljs-comment">// true/false ~ boolean-like nullable string; returns null unless set</span> el.<span class="hljs-property">ariaBusy</span>; <span class="hljs-comment">// null</span> <span class="hljs-comment">// Note: String assignment and return value.</span> el.<span class="hljs-property">ariaBusy</span> = <span class="hljs-string">"true"</span>; el.<span class="hljs-property">ariaBusy</span>; <span class="hljs-comment">// "true"</span> <span class="hljs-comment">// Removal of content attribute results in missing value default: string "false".</span> el.<span class="hljs-title function_">removeAttribute</span>(<span class="hljs-string">"aria-busy"</span>); el.<span class="hljs-property">ariaBusy</span>; <span class="hljs-comment">// null</span> <span class="hljs-comment">// Assignment of invalid "busy" value. Not validated on set or get and the literal string value "busy" is returned.</span> el.<span class="hljs-title function_">setAttribute</span>(<span class="hljs-string">"aria-busy"</span>, <span class="hljs-string">"busy"</span>); el.<span class="hljs-property">ariaBusy</span>; <span class="hljs-comment">// "busy"</span></code></pre> </aside> <aside class="example" id="example-23"><div class="marker"> <a class="self-link" href="#example-23">Example<bdi> 23</bdi></a> </div> <pre aria-busy="false"><code class="hljs javascript"><span class="hljs-comment">// aria-pressed example</span> <span class="hljs-comment">// Tristate ~ true/false/mixed/undefined string; null if unspecified</span> <span class="hljs-comment">// no value has been defined</span> button.<span class="hljs-property">ariaPressed</span>; <span class="hljs-comment">// null</span> <span class="hljs-comment">// A value of "true", "false", or "mixed" for aria-pressed on a button denotes a toggle button.</span> button.<span class="hljs-title function_">setAttribute</span>(<span class="hljs-string">"aria-pressed"</span>, <span class="hljs-string">"true"</span>); <span class="hljs-comment">// Content attribute assignment.</span> button.<span class="hljs-property">ariaPressed</span>; <span class="hljs-comment">// "true"</span> button.<span class="hljs-property">ariaPressed</span> = <span class="hljs-string">"false"</span>; <span class="hljs-comment">// DOM property assignment.</span> button.<span class="hljs-property">ariaPressed</span>; <span class="hljs-comment">// "false"</span> <span class="hljs-comment">// Assignment of invalid "foo" value. Not validated on set or get and the literal string value "foo" is returned.</span> button.<span class="hljs-property">ariaPressed</span> = <span class="hljs-string">"foo"</span>; button.<span class="hljs-property">ariaPressed</span>; <span class="hljs-comment">// "foo" (Note: button is no longer a toggle button.)</span> <span class="hljs-comment">// Removal of content attribute results in a null value</span> button.<span class="hljs-title function_">removeAttribute</span>(<span class="hljs-string">"aria-pressed"</span>); button.<span class="hljs-property">ariaPressed</span>; <span class="hljs-comment">// null</span></code></pre> </aside> </section> </section> </section> <section id="translatable-attributes"><div class="header-wrapper"><h3 id="x6-4-translatable-attributes"><bdi class="secno">6.4 </bdi>Translatable Attributes</h3><a class="self-link" href="#translatable-attributes" aria-label="Permalink for Section 6.4"></a></div> <p>The <abbr title="Hypertext Markup Language">HTML</abbr> specification states that other specifications can define <a href="https://html.spec.whatwg.org/multipage/dom.html#translatable-attributes">translatable attributes</a>. The language and directionality of each attribute value is the same as the <a href="https://html.spec.whatwg.org/multipage/dom.html#language">language</a> and <a href="https://html.spec.whatwg.org/multipage/dom.html#the-directionality">directionality</a> of the element.</p> <p>To be understandable by assistive technology users, the values of the following <a href="#dfn-state" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-state-21">states</a> and <a data-link-type="dfn|abstract-op" href="#dfn-property" class="internalDFN" id="ref-for-dfn-property-18">properties</a> are <a href="https://html.spec.whatwg.org/multipage/dom.html#translatable-attributes">translatable attributes</a> and should be translated when a page is localized:</p> <ul> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-colindextext" class="property-reference"><code>aria-colindextext</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-placeholder" class="property-reference"><code>aria-placeholder</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-rowindextext" class="property-reference"><code>aria-rowindextext</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-valuetext" class="property-reference"><code>aria-valuetext</code></a></li> </ul> </section> <section id="global_states"><div class="header-wrapper"><h3 id="x6-5-global-states-and-properties"><bdi class="secno">6.5 </bdi><dfn id="dfn-global" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">Global</dfn> States and Properties</h3><a class="self-link" href="#global_states" aria-label="Permalink for Section 6.5"></a></div> <p>Some <a href="#dfn-state" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-state-22">states</a> and <a data-link-type="dfn|abstract-op" href="#dfn-property" class="internalDFN" id="ref-for-dfn-property-19">properties</a> are applicable to all host language <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a> regardless of whether a <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-86">role</a> is applied. The following global states and properties are supported by all roles and by all base markup elements unless otherwise prohibited. If a role prohibits use of any global states or properties, those states or properties are listed as prohibited in the characteristics table included in the section that defines the role.</p> <ul><li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a> (Except where prohibited)</li> <li><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a> (Except where prohibited)</li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy (state)</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current (state)</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled (state)</code></a> (Global use deprecated in ARIA 1.2)</li> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a> (Global use deprecated in ARIA 1.2)</li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed (state)</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> (Global use deprecated in ARIA 1.2)</li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden (state)</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid (state)</code></a> (Global use deprecated in ARIA 1.2)</li> <li><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a> (Except where prohibited)</li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a> (Except where prohibited)</li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a> (Except where prohibited)</li> </ul> </section> <section id="state_prop_taxonomy"><div class="header-wrapper"><h3 id="x6-6-taxonomy-of-wai-aria-states-and-properties"><bdi class="secno">6.6 </bdi>Taxonomy of <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> States and Properties</h3><a class="self-link" href="#state_prop_taxonomy" aria-label="Permalink for Section 6.6"></a></div> <p>States and properties are categorized as follows:</p> <ol> <li><a href="#attrs_widgets">Widget Attributes</a></li> <li><a href="#attrs_liveregions">Live Region Attributes</a></li> <li><a href="#attrs_dragdrop">Drag-and-Drop Attributes</a></li> <li><a href="#attrs_relationships">Relationship Attributes</a></li> </ol> <section id="attrs_widgets"><div class="header-wrapper"><h4 id="x6-6-1-widget-attributes"><bdi class="secno">6.6.1 </bdi>Widget Attributes</h4><a class="self-link" href="#attrs_widgets" aria-label="Permalink for Section 6.6.1"></a></div> <p>This section contains <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attributes</a> specific to common user interface <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a> found on <abbr title="Graphical User Interface">GUI</abbr> systems or in rich internet applications which receive user input and process user actions. These attributes are used to support the <a href="#widget_roles">widget roles</a>.</p> <ul> <li><a href="https://w3c.github.io/aria/#aria-autocomplete" class="property-reference"><code>aria-autocomplete</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-checked" class="state-reference"><code>aria-checked</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-expanded" class="state-reference"><code>aria-expanded</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-level" class="property-reference"><code>aria-level</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-modal" class="property-reference"><code>aria-modal</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-multiline" class="property-reference"><code>aria-multiline</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-multiselectable" class="property-reference"><code>aria-multiselectable</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-orientation" class="property-reference"><code>aria-orientation</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-placeholder" class="property-reference"><code>aria-placeholder</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-pressed" class="state-reference"><code>aria-pressed</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-readonly" class="property-reference"><code>aria-readonly</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-required" class="property-reference"><code>aria-required</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-sort" class="property-reference"><code>aria-sort</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-valuemax" class="property-reference"><code>aria-valuemax</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-valuemin" class="property-reference"><code>aria-valuemin</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-valuenow" class="property-reference"><code>aria-valuenow</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-valuetext" class="property-reference"><code>aria-valuetext</code></a></li> </ul> <p>Widget attributes might be mapped by a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agent</a> to platform <a href="#dfn-accessibility-api" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-api-22">accessibility <abbr title="Application Programing Interfaces">API</abbr></a> <a href="#dfn-state" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-state-23">state</a>, for access by <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-50">assistive technologies</a>, or they might be accessed directly from the <abbr title="Document Object Model">DOM</abbr>.</p> </section> <section id="attrs_liveregions"><div class="header-wrapper"><h4 id="x6-6-2-live-region-attributes"><bdi class="secno">6.6.2 </bdi>Live Region Attributes</h4><a class="self-link" href="#attrs_liveregions" aria-label="Permalink for Section 6.6.2"></a></div> <p>This section contains <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attributes</a> specific to <a href="#dfn-live-region" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-live-region-9">live regions</a> in rich internet applications. These attributes <em class="rfc2119">MAY</em> be applied to any <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a>. The purpose of these attributes is to indicate that content changes might occur without the element having focus, and to provide <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-51">assistive technologies</a> with information on how to process those content updates. Some <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-87">roles</a> specify a default value for the <a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a> attribute specific to that role. An example of a live region is a ticker section that lists updating stock quotes. User agents <em class="rfc2119">MAY</em> ignore changes triggered by direct user action on an <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> inside a live region (e.g., editing the value of a text field).</p> <ul> <li><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></li> </ul> </section> <section id="attrs_dragdrop"><div class="header-wrapper"><h4 id="x6-6-3-drag-and-drop-attributes"><bdi class="secno">6.6.3 </bdi>Drag-and-Drop Attributes</h4><a class="self-link" href="#attrs_dragdrop" aria-label="Permalink for Section 6.6.3"></a></div> <p>This section lists <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attributes</a> which indicate information about drag-and-drop interface <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a>, such as draggable elements and their drop targets. Drop target information will be rendered visually by the author and provided to <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-52">assistive technologies</a> through an alternate modality.</p> <ul> <li><a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a></li> </ul> </section> <section id="attrs_relationships"><div class="header-wrapper"><h4 id="x6-6-4-relationship-attributes"><bdi class="secno">6.6.4 </bdi>Relationship Attributes</h4><a class="self-link" href="#attrs_relationships" aria-label="Permalink for Section 6.6.4"></a></div> <p>This section lists <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attributes</a> that indicate <a href="#dfn-relationship" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-relationship-11">relationships</a> or associations between <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a> which cannot be readily determined from the document structure.</p> <ul> <li><a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-colcount" class="property-reference"><code>aria-colcount</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-colindex" class="property-reference"><code>aria-colindex</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-colindextext" class="property-reference"><code>aria-colindextext</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-colspan" class="property-reference"><code>aria-colspan</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-posinset" class="property-reference"><code>aria-posinset</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-rowcount" class="property-reference"><code>aria-rowcount</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-rowindex" class="property-reference"><code>aria-rowindex</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-rowindextext" class="property-reference"><code>aria-rowindextext</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-rowspan" class="property-reference"><code>aria-rowspan</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-setsize" class="property-reference"><code>aria-setsize</code></a></li> </ul> </section> </section> <section id="state_changes"><div class="header-wrapper"><h3 id="x6-7-state-change-notification"><bdi class="secno">6.7 </bdi>State change notification</h3><a class="self-link" href="#state_changes" aria-label="Permalink for Section 6.7"></a></div> <p> User agents <em class="rfc2119">MUST</em> provide a way for assistive technologies to be notified when states change, either through <abbr title="Document Object Model">DOM</abbr> attribute change <a href="#dfn-event" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-event-8">events</a> or platform accessibility <abbr title="Application Programing Interfaces">API</abbr> events.</p> </section> <section id="state_prop_def"><div class="header-wrapper"><h3 id="x6-8-definitions-of-states-and-properties-all-aria-attributes"><bdi class="secno">6.8 </bdi>Definitions of States and Properties (all aria-* attributes)</h3><a class="self-link" href="#state_prop_def" aria-label="Permalink for Section 6.8"></a></div> <p>Below is an alphabetical list of <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> <a href="#dfn-state" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-state-24">states</a> and <a data-link-type="dfn|abstract-op" href="#dfn-property" class="internalDFN" id="ref-for-dfn-property-20">properties</a> to be used by authors. A detailed definition of each <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> state and <a data-link-type="dfn|abstract-op" href="#dfn-property" class="internalDFN" id="ref-for-dfn-property-21">property</a> follows this compact list.</p> <dl id="index_state_prop" class="compact"><dt><a href="#aria-activedescendant" class="property-reference">aria-activedescendant</a></dt> <dd><a href="#dfn-identifies" class="internalDFN" data-link-type="dfn">Identifies</a> the currently active element when <abbr title="Document Object Model">DOM</abbr> focus is on a <a href="https://w3c.github.io/aria/#composite" class="role-reference"><code>composite</code></a> widget, <a href="https://w3c.github.io/aria/#combobox" class="role-reference"><code>combobox</code></a>, <a href="https://w3c.github.io/aria/#textbox" class="role-reference"><code>textbox</code></a>, <a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a>, or <a href="https://w3c.github.io/aria/#application" class="role-reference"><code>application</code></a>.</dd> <dt><a href="#aria-atomic" class="property-reference">aria-atomic</a></dt> <dd><a href="#dfn-indicates" class="internalDFN" data-link-type="dfn">Indicates</a> whether <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn">assistive technologies</a> will present all, or only parts of, the changed region based on the change notifications defined by the <a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a> attribute.</dd> <dt><a href="#aria-autocomplete" class="property-reference">aria-autocomplete</a></dt> <dd><a href="#dfn-indicates" class="internalDFN" data-link-type="dfn">Indicates</a> whether inputting text could trigger display of one or more predictions of the user's intended value for a <a href="https://w3c.github.io/aria/#combobox" class="role-reference"><code>combobox</code></a>, <a href="https://w3c.github.io/aria/#searchbox" class="role-reference"><code>searchbox</code></a>, or <a href="https://w3c.github.io/aria/#textbox" class="role-reference"><code>textbox</code></a> and specifies how predictions would be presented if they were made.</dd> <dt><a href="#aria-braillelabel" class="property-reference">aria-braillelabel</a></dt> <dd><a href="#dfn-defines" class="internalDFN" data-link-type="dfn">Defines</a> a string value that labels the current element, which is intended to be converted into Braille. See related <a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a>.</dd> <dt><a href="#aria-brailleroledescription" class="property-reference">aria-brailleroledescription</a></dt> <dd><a href="#dfn-defines" class="internalDFN" data-link-type="dfn">Defines</a> a human-readable, author-localized abbreviated description for the <a href="#dfn-role" class="internalDFN" data-link-type="dfn">role</a> of an <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a>, which is intended to be converted into Braille. See related <a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a>.</dd> <dt><a href="#aria-busy" class="state-reference">aria-busy</a></dt> <dd><a href="#dfn-indicates" class="internalDFN" data-link-type="dfn">Indicates</a> an element is being modified and that assistive technologies could wait until the modifications are complete before exposing them to the user.</dd> <dt><a href="#aria-checked" class="state-reference">aria-checked</a></dt> <dd><a href="#dfn-indicates" class="internalDFN" data-link-type="dfn">Indicates</a> the current "checked" <a href="#dfn-state" class="internalDFN" data-link-type="dfn">state</a> of checkboxes, radio buttons, and other <a href="#dfn-widget" class="internalDFN" data-link-type="dfn">widgets</a>. See related <a href="https://w3c.github.io/aria/#aria-pressed" class="state-reference"><code>aria-pressed</code></a> and <a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a>.</dd> <dt><a href="#aria-colcount" class="property-reference">aria-colcount</a></dt> <dd><a href="#dfn-defines" class="internalDFN" data-link-type="dfn">Defines</a> the total number of columns in a <a href="https://w3c.github.io/aria/#table" class="role-reference"><code>table</code></a>, <a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a>, or <a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a>. See related <a href="https://w3c.github.io/aria/#aria-colindex" class="property-reference"><code>aria-colindex</code></a>.</dd> <dt><a href="#aria-colindex" class="property-reference">aria-colindex</a></dt> <dd><a href="#dfn-defines" class="internalDFN" data-link-type="dfn">Defines</a> an <a data-link-type="dfn" data-lt="element" href="https://dom.spec.whatwg.org/#concept-element">element's</a> column index or position with respect to the total number of columns within a <a href="https://w3c.github.io/aria/#table" class="role-reference"><code>table</code></a>, <a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a>, or <a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a>. See related <a href="https://w3c.github.io/aria/#aria-colindextext" class="property-reference"><code>aria-colindextext</code></a>, <a href="https://w3c.github.io/aria/#aria-colcount" class="property-reference"><code>aria-colcount</code></a>, and <a href="https://w3c.github.io/aria/#aria-colspan" class="property-reference"><code>aria-colspan</code></a>.</dd> <dt><a href="#aria-colindextext" class="property-reference">aria-colindextext</a></dt> <dd><a href="#dfn-defines" class="internalDFN" data-link-type="dfn">Defines</a> a human readable text alternative of <a href="https://w3c.github.io/aria/#aria-colindex" class="property-reference"><code>aria-colindex</code></a>. See related <a href="https://w3c.github.io/aria/#aria-rowindextext" class="property-reference"><code>aria-rowindextext</code></a>.</dd> <dt><a href="#aria-colspan" class="property-reference">aria-colspan</a></dt> <dd><a href="#dfn-defines" class="internalDFN" data-link-type="dfn">Defines</a> the number of columns spanned by a cell or gridcell within a <a href="https://w3c.github.io/aria/#table" class="role-reference"><code>table</code></a>, <a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a>, or <a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a>. See related <a href="https://w3c.github.io/aria/#aria-colindex" class="property-reference"><code>aria-colindex</code></a> and <a href="https://w3c.github.io/aria/#aria-rowspan" class="property-reference"><code>aria-rowspan</code></a>.</dd> <dt><a href="#aria-controls" class="property-reference">aria-controls</a></dt> <dd><a href="#dfn-identifies" class="internalDFN" data-link-type="dfn">Identifies</a> the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> (or elements) whose contents or presence are controlled by the current element. See related <a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a>.</dd> <dt><a href="#aria-current" class="state-reference">aria-current</a></dt> <dd><a href="#dfn-indicates" class="internalDFN" data-link-type="dfn">Indicates</a> the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> that represents the current item within a container or set of related elements.</dd> <dt><a href="#aria-describedby" class="property-reference">aria-describedby</a></dt> <dd><a href="#dfn-identifies" class="internalDFN" data-link-type="dfn">Identifies</a> the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> (or elements) that describes the <a href="#dfn-object" class="internalDFN" data-link-type="dfn">object</a>. See related <a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a> and <a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a>.</dd> <dt><a href="#aria-description" class="property-reference">aria-description</a></dt> <dd><a href="#dfn-defines" class="internalDFN" data-link-type="dfn">Defines</a> a string value that describes or annotates the current element. See related <a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a>.</dd> <dt><a href="#aria-details" class="property-reference">aria-details</a></dt> <dd><a href="#dfn-identifies" class="internalDFN" data-link-type="dfn">Identifies</a> the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> (or elements) that provide additional information related to the <a href="#dfn-object" class="internalDFN" data-link-type="dfn">object</a>. See related <a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a>.</dd> <dt><a href="#aria-disabled" class="state-reference">aria-disabled</a></dt> <dd><a href="#dfn-indicates" class="internalDFN" data-link-type="dfn">Indicates</a> that the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> is <a href="#dfn-perceivable" class="internalDFN" data-link-type="dfn">perceivable</a> but disabled, so it is not editable or otherwise <a href="#dfn-operable" class="internalDFN" data-link-type="dfn">operable</a>. See related <a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> and <a href="https://w3c.github.io/aria/#aria-readonly" class="property-reference"><code>aria-readonly</code></a>.</dd> <dt><a href="#aria-dropeffect" class="property-reference">aria-dropeffect</a></dt> <dd>[Deprecated in <abbr title="Accessible Rich Internet Applications">ARIA</abbr> 1.1] Indicates what functions can be performed when a dragged object is released on the drop target.</dd> <dt><a href="#aria-errormessage" class="property-reference">aria-errormessage</a></dt> <dd><a href="#dfn-identifies" class="internalDFN" data-link-type="dfn">Identifies</a> the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> (or elements) that provides an error message for an <a href="#dfn-object" class="internalDFN" data-link-type="dfn">object</a>. See related <a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> and <a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a>.</dd> <dt><a href="#aria-expanded" class="state-reference">aria-expanded</a></dt> <dd><a href="#dfn-indicates" class="internalDFN" data-link-type="dfn">Indicates</a> whether a grouping element that is the <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn">accessibility child</a> of or is controlled by this element is expanded or collapsed.</dd> <dt><a href="#aria-flowto" class="property-reference">aria-flowto</a></dt> <dd><a href="#dfn-identifies" class="internalDFN" data-link-type="dfn">Identifies</a> the next <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.</dd> <dt><a href="#aria-grabbed" class="state-reference">aria-grabbed</a></dt> <dd>[Deprecated in <abbr title="Accessible Rich Internet Applications">ARIA</abbr> 1.1] Indicates an element's "grabbed" <a href="#dfn-state" class="internalDFN" data-link-type="dfn">state</a> in a drag-and-drop operation.</dd> <dt><a href="#aria-haspopup" class="property-reference">aria-haspopup</a></dt> <dd><a href="#dfn-indicates" class="internalDFN" data-link-type="dfn">Indicates</a> the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a>.</dd> <dt><a href="#aria-hidden" class="state-reference">aria-hidden</a></dt> <dd><a href="#dfn-indicates" class="internalDFN" data-link-type="dfn">Indicates</a>, when set to <code>true</code>, that an <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> and its entire subtree are hidden from assistive technology, regardless of whether it is visibly rendered.</dd> <dt><a href="#aria-invalid" class="state-reference">aria-invalid</a></dt> <dd><a href="#dfn-indicates" class="internalDFN" data-link-type="dfn">Indicates</a> the entered value does not conform to the format expected by the application. See related <a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a>.</dd> <dt><a href="#aria-keyshortcuts" class="property-reference">aria-keyshortcuts</a></dt> <dd><a href="#dfn-defines" class="internalDFN" data-link-type="dfn">Defines</a> keyboard shortcuts that an author has implemented to activate or give focus to an element.</dd> <dt><a href="#aria-label" class="property-reference">aria-label</a></dt> <dd><a href="#dfn-defines" class="internalDFN" data-link-type="dfn">Defines</a> a string value that labels the current element. See related <a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a>.</dd> <dt><a href="#aria-labelledby" class="property-reference">aria-labelledby</a></dt> <dd><a href="#dfn-identifies" class="internalDFN" data-link-type="dfn">Identifies</a> the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> (or elements) that labels the current element. See related <a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a> and <a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a>.</dd> <dt><a href="#aria-level" class="property-reference">aria-level</a></dt> <dd><a href="#dfn-defines" class="internalDFN" data-link-type="dfn">Defines</a> the hierarchical level of an <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> within a structure.</dd> <dt><a href="#aria-live" class="property-reference">aria-live</a></dt> <dd><a href="#dfn-indicates" class="internalDFN" data-link-type="dfn">Indicates</a> that an <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> will be updated, and describes the types of updates the <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agents</a>, <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn">assistive technologies</a>, and user can expect from the <a href="#dfn-live-region" class="internalDFN" data-link-type="dfn">live region</a>.</dd> <dt><a href="#aria-modal" class="property-reference">aria-modal</a></dt> <dd><a href="#dfn-indicates" class="internalDFN" data-link-type="dfn">Indicates</a> whether an <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> is modal when displayed.</dd> <dt><a href="#aria-multiline" class="property-reference">aria-multiline</a></dt> <dd><a href="#dfn-indicates" class="internalDFN" data-link-type="dfn">Indicates</a> whether a text box accepts multiple lines of input or only a single line.</dd> <dt><a href="#aria-multiselectable" class="property-reference">aria-multiselectable</a></dt> <dd><a href="#dfn-indicates" class="internalDFN" data-link-type="dfn">Indicates</a> that the user can select more than one item from the current selectable descendants.</dd> <dt><a href="#aria-orientation" class="property-reference">aria-orientation</a></dt> <dd><a href="#dfn-indicates" class="internalDFN" data-link-type="dfn">Indicates</a> whether the element's orientation is horizontal, vertical, or unknown/ambiguous.</dd> <dt><a href="#aria-owns" class="property-reference">aria-owns</a></dt> <dd><a href="#dfn-identifies" class="internalDFN" data-link-type="dfn">Identifies</a> an <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> (or elements) in order to define a visual, functional, or contextual parent/child <a href="#dfn-relationship" class="internalDFN" data-link-type="dfn">relationship</a> between <abbr title="Document Object Model">DOM</abbr> elements where the <abbr title="Document Object Model">DOM</abbr> hierarchy cannot be used to represent the relationship. See related <a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a>.</dd> <dt><a href="#aria-placeholder" class="property-reference">aria-placeholder</a></dt> <dd><a href="#dfn-defines" class="internalDFN" data-link-type="dfn">Defines</a> a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.</dd> <dt><a href="#aria-posinset" class="property-reference">aria-posinset</a></dt> <dd><a href="#dfn-defines" class="internalDFN" data-link-type="dfn">Defines</a> an <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a>'s number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the <abbr title="Document Object Model">DOM</abbr>. See related <a href="https://w3c.github.io/aria/#aria-setsize" class="property-reference"><code>aria-setsize</code></a>.</dd> <dt><a href="#aria-pressed" class="state-reference">aria-pressed</a></dt> <dd><a href="#dfn-indicates" class="internalDFN" data-link-type="dfn">Indicates</a> the current "pressed" <a href="#dfn-state" class="internalDFN" data-link-type="dfn">state</a> of toggle buttons. See related <a href="https://w3c.github.io/aria/#aria-checked" class="state-reference"><code>aria-checked</code></a> and <a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a>.</dd> <dt><a href="#aria-readonly" class="property-reference">aria-readonly</a></dt> <dd> Indicates that the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> is not editable, but is otherwise <a href="#dfn-operable" class="internalDFN" data-link-type="dfn">operable</a>. See related <a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a>.</dd> <dt><a href="#aria-relevant" class="property-reference">aria-relevant</a></dt> <dd><a href="#dfn-indicates" class="internalDFN" data-link-type="dfn">Indicates</a> what notifications the user agent will trigger when the <a href="#dfn-accessibility-tree" class="internalDFN" data-link-type="dfn">accessibility tree</a> within a live region is modified. See related <a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a>.</dd> <dt><a href="#aria-required" class="property-reference">aria-required</a></dt> <dd><a href="#dfn-indicates" class="internalDFN" data-link-type="dfn">Indicates</a> that user input is required on the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> before a form can be submitted.</dd> <dt><a href="#aria-roledescription" class="property-reference">aria-roledescription</a></dt> <dd><a href="#dfn-defines" class="internalDFN" data-link-type="dfn">Defines</a> a human-readable, author-localized description for the <a href="#dfn-role" class="internalDFN" data-link-type="dfn">role</a> of an <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a>.</dd> <dt><a href="#aria-rowcount" class="property-reference">aria-rowcount</a></dt> <dd><a href="#dfn-defines" class="internalDFN" data-link-type="dfn">Defines</a> the total number of rows in a <a href="https://w3c.github.io/aria/#table" class="role-reference"><code>table</code></a>, <a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a>, or <a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a>. See related <a href="https://w3c.github.io/aria/#aria-rowindex" class="property-reference"><code>aria-rowindex</code></a>.</dd> <dt><a href="#aria-rowindex" class="property-reference">aria-rowindex</a></dt> <dd><a href="#dfn-defines" class="internalDFN" data-link-type="dfn">Defines</a> an <a data-link-type="dfn" data-lt="element" href="https://dom.spec.whatwg.org/#concept-element">element's</a> row index or position with respect to the total number of rows within a <a href="https://w3c.github.io/aria/#table" class="role-reference"><code>table</code></a>, <a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a>, or <a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a>. See related <a href="https://w3c.github.io/aria/#aria-rowindextext" class="property-reference"><code>aria-rowindextext</code></a>, <a href="https://w3c.github.io/aria/#aria-rowcount" class="property-reference"><code>aria-rowcount</code></a>, and <a href="https://w3c.github.io/aria/#aria-rowspan" class="property-reference"><code>aria-rowspan</code></a>.</dd> <dt><a href="#aria-rowindextext" class="property-reference">aria-rowindextext</a></dt> <dd><a href="#dfn-defines" class="internalDFN" data-link-type="dfn">Defines</a> a human readable text alternative of <a href="https://w3c.github.io/aria/#aria-rowindex" class="property-reference"><code>aria-rowindex</code></a>. See related <a href="https://w3c.github.io/aria/#aria-colindextext" class="property-reference"><code>aria-colindextext</code></a>.</dd> <dt><a href="#aria-rowspan" class="property-reference">aria-rowspan</a></dt> <dd><a href="#dfn-defines" class="internalDFN" data-link-type="dfn">Defines</a> the number of rows spanned by a cell or gridcell within a <a href="https://w3c.github.io/aria/#table" class="role-reference"><code>table</code></a>, <a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a>, or <a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a>. See related <a href="https://w3c.github.io/aria/#aria-rowindex" class="property-reference"><code>aria-rowindex</code></a> and <a href="https://w3c.github.io/aria/#aria-colspan" class="property-reference"><code>aria-colspan</code></a>.</dd> <dt><a href="#aria-selected" class="state-reference">aria-selected</a></dt> <dd><a href="#dfn-indicates" class="internalDFN" data-link-type="dfn">Indicates</a> the current "selected" <a href="#dfn-state" class="internalDFN" data-link-type="dfn">state</a> of various <a href="#dfn-widget" class="internalDFN" data-link-type="dfn">widgets</a>. See related <a href="https://w3c.github.io/aria/#aria-checked" class="state-reference"><code>aria-checked</code></a> and <a href="https://w3c.github.io/aria/#aria-pressed" class="state-reference"><code>aria-pressed</code></a>.</dd> <dt><a href="#aria-setsize" class="property-reference">aria-setsize</a></dt> <dd><a href="#dfn-defines" class="internalDFN" data-link-type="dfn">Defines</a> the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the <abbr title="Document Object Model">DOM</abbr>. See related <a href="https://w3c.github.io/aria/#aria-posinset" class="property-reference"><code>aria-posinset</code></a>.</dd> <dt><a href="#aria-sort" class="property-reference">aria-sort</a></dt> <dd><a href="#dfn-indicates" class="internalDFN" data-link-type="dfn">Indicates</a> if items in a table or grid are sorted in ascending or descending order.</dd> <dt><a href="#aria-valuemax" class="property-reference">aria-valuemax</a></dt> <dd><a href="#dfn-defines" class="internalDFN" data-link-type="dfn">Defines</a> the maximum allowed value for a range <a href="#dfn-widget" class="internalDFN" data-link-type="dfn">widget</a>.</dd> <dt><a href="#aria-valuemin" class="property-reference">aria-valuemin</a></dt> <dd><a href="#dfn-defines" class="internalDFN" data-link-type="dfn">Defines</a> the minimum allowed value for a range <a href="#dfn-widget" class="internalDFN" data-link-type="dfn">widget</a>.</dd> <dt><a href="#aria-valuenow" class="property-reference">aria-valuenow</a></dt> <dd><a href="#dfn-defines" class="internalDFN" data-link-type="dfn">Defines</a> the current value for a range <a href="#dfn-widget" class="internalDFN" data-link-type="dfn">widget</a>. See related <a href="https://w3c.github.io/aria/#aria-valuetext" class="property-reference"><code>aria-valuetext</code></a>.</dd> <dt><a href="#aria-valuetext" class="property-reference">aria-valuetext</a></dt> <dd><a href="#dfn-defines" class="internalDFN" data-link-type="dfn">Defines</a> the human readable text alternative of <a href="https://w3c.github.io/aria/#aria-valuenow" class="property-reference"><code>aria-valuenow</code></a> for a range <a href="#dfn-widget" class="internalDFN" data-link-type="dfn">widget</a>.</dd> </dl> <section class="property notoc" id="aria-activedescendant"> <h4><span class="property-name" title="aria-activedescendant" aria-describedby="desc-aria-activedescendant"><code>aria-activedescendant</code> <span class="type-indicator">property</span></span></h4> <div class="property-description" id="desc-aria-activedescendant" role="definition"> <p><a href="#dfn-identifies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-identifies-3">Identifies</a> the currently active element when <abbr title="Document Object Model">DOM</abbr> focus is on a <a href="https://w3c.github.io/aria/#composite" class="role-reference"><code>composite</code></a> widget, <a href="https://w3c.github.io/aria/#combobox" class="role-reference"><code>combobox</code></a>, <a href="https://w3c.github.io/aria/#textbox" class="role-reference"><code>textbox</code></a>, <a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a>, or <a href="https://w3c.github.io/aria/#application" class="role-reference"><code>application</code></a>.</p> <p>The <code>aria-activedescendant</code> property provides an alternative method of managing focus for interactive elements that might contain multiple focusable descendants, such as menus, grids, and toolbars. Instead of moving <abbr title="Document Object Model">DOM</abbr> focus among <a href="#dfn-accessibility-descendant" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-descendant-14">accessibility descendants</a>, authors <em class="rfc2119">MAY</em> set <abbr title="Document Object Model">DOM</abbr> focus on a container <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> that supports <code>aria-activedescendant</code> and then use <code>aria-activedescendant</code> to refer to the element that is active.</p> <p>Authors <em class="rfc2119">MUST</em> ensure that one of the following two sets of conditions is met when setting the value of <code>aria-activedescendant</code> on an element with <abbr title="Document Object Model">DOM</abbr> focus:</p> <ol> <li>The value of <code>aria-activedescendant</code> refers to an <a href="#dfn-accessibility-descendant" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-descendant-15">accessibility descendant</a>.</li> <li> The element with <abbr title="Document Object Model">DOM</abbr> focus is a <a href="https://w3c.github.io/aria/#combobox" class="role-reference"><code>combobox</code></a>, <a href="https://w3c.github.io/aria/#textbox" class="role-reference"><code>textbox</code></a> or <a href="https://w3c.github.io/aria/#searchbox" class="role-reference"><code>searchbox</code></a> with <a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a> referring to an element that supports <code>aria-activedescendant</code>, and the value of <code>aria-activedescendant</code> refers to an <a href="#dfn-accessibility-descendant" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-descendant-16">accessibility descendant</a> of the controlled element. For example, in a <a href="https://w3c.github.io/aria/#combobox" class="role-reference"><code>combobox</code></a>, focus can remain on the <a href="https://w3c.github.io/aria/#combobox" class="role-reference"><code>combobox</code></a> while the value of <code>aria-activedescendant</code> on the <a href="https://w3c.github.io/aria/#combobox" class="role-reference"><code>combobox</code></a> element refers to a descendant of a popup <a href="https://w3c.github.io/aria/#listbox" class="role-reference"><code>listbox</code></a> that is controlled by the <a href="https://w3c.github.io/aria/#combobox" class="role-reference"><code>combobox</code></a>. </li> </ol> <p>Authors <em class="rfc2119">SHOULD</em> also ensure that the currently active descendant is visible and in view (or scrolls into view) when focused.</p> </div> <table class="property-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="property-related-head" scope="row">Related Concepts:</th> <td class="property-related"><cite><a href="https://www.w3.org/TR/SVG2/"><abbr title="Scalable Vector Graphics">SVG</abbr></a></cite> [<cite><a class="bibref" data-link-type="biblio" href="#bib-svg2" title="Scalable Vector Graphics (SVG) 2">SVG2</a></cite>] and <cite><a href="https://www.w3.org/TR/dom/"><abbr title="Document Object Model">DOM</abbr></a></cite> [<cite><a class="bibref" data-link-type="biblio" href="#bib-dom" title="DOM Standard">DOM</a></cite>] active</td> </tr> <tr> <th class="property-applicability-head" scope="row">Used in Roles:</th> <td class="property-applicability"><ul> <li><a href="https://w3c.github.io/aria/#application" class="role-reference"><code>application</code></a></li> <li><a href="https://w3c.github.io/aria/#combobox" class="role-reference"><code>combobox</code></a></li> <li><a href="https://w3c.github.io/aria/#composite" class="role-reference"><code>composite</code></a></li> <li><a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a></li> <li><a href="https://w3c.github.io/aria/#textbox" class="role-reference"><code>textbox</code></a></li> </ul> </td> </tr> <tr> <th class="property-descendants-head" scope="row">Inherits into Roles:</th> <td class="property-descendants"><ul> <li><a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a></li> <li><a href="https://w3c.github.io/aria/#listbox" class="role-reference"><code>listbox</code></a></li> <li><a href="https://w3c.github.io/aria/#menu" class="role-reference"><code>menu</code></a></li> <li><a href="https://w3c.github.io/aria/#menubar" class="role-reference"><code>menubar</code></a></li> <li><a href="https://w3c.github.io/aria/#radiogroup" class="role-reference"><code>radiogroup</code></a></li> <li><a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a></li> <li><a href="https://w3c.github.io/aria/#searchbox" class="role-reference"><code>searchbox</code></a></li> <li><a href="https://w3c.github.io/aria/#select" class="role-reference"><code>select</code></a></li> <li><a href="https://w3c.github.io/aria/#spinbutton" class="role-reference"><code>spinbutton</code></a></li> <li><a href="https://w3c.github.io/aria/#tablist" class="role-reference"><code>tablist</code></a></li> <li><a href="https://w3c.github.io/aria/#toolbar" class="role-reference"><code>toolbar</code></a></li> <li><a href="https://w3c.github.io/aria/#tree" class="role-reference"><code>tree</code></a></li> <li><a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a></li> </ul> </td> </tr> <tr> <th class="property-value-head" scope="row">Value:</th> <td class="property-value"><a href="#valuetype_idref">ID reference</a></td> </tr> </tbody> </table> </section> <section class="property notoc" id="aria-atomic"> <h4><span class="property-name" title="aria-atomic" aria-describedby="desc-aria-atomic"><code>aria-atomic</code> <span class="type-indicator">property</span></span></h4> <div class="property-description" id="desc-aria-atomic" role="definition"> <p><a href="#dfn-indicates" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-indicates-3">Indicates</a> whether <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-53">assistive technologies</a> will present all, or only parts of, the changed region based on the change notifications defined by the <a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a> attribute.</p> <p>Both <a href="#dfn-accessibility-api" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-api-23">accessibility <abbr title="Application Programing Interfaces">APIs</abbr></a> and the <cite><a href="https://www.w3.org/TR/dom/">Document Object Model</a></cite> [<cite><a class="bibref" data-link-type="biblio" href="#bib-dom" title="DOM Standard">DOM</a></cite>] provide events to allow the assistive technologies to determine changed areas of the document.</p> <p>When the content of a <a href="#dfn-live-region" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-live-region-10">live region</a> changes, user agents <em class="rfc2119">SHOULD</em> examine the changed <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> and traverse the ancestors to find the first element with <a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a> set, and apply the appropriate behavior for the cases below.</p> <ol> <li>If none of the ancestors have explicitly set <a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a>, the default is that <a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a> is <code>false</code>, and assistive technologies will only present the changed node to the user.</li> <li>If <a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a> is explicitly set to <code>false</code>, assistive technologies will stop searching up the ancestor chain and present only the changed node to the user.</li> <li>If <a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a> is explicitly set to <code>true</code>, assistive technologies will present the entire contents of the element, including the author-defined live region label if one exists.</li> </ol> <p>When <a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a> is <code>true</code>, assistive technologies can choose to combine several changes and present the entire changed region at once.</p> </div> <table class="property-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="property-applicability-head" scope="row">Used in Roles:</th> <td class="property-applicability">All elements of the base markup</td> </tr> <tr> <th class="property-value-head" scope="row">Value:</th> <td class="property-value"><a href="#valuetype_true-false">true/false</a></td> </tr> </tbody> </table> <table class="value-descriptions"> <caption>Values:</caption> <thead> <tr> <th scope="col">Value</th> <th scope="col">Description</th> </tr> </thead> <tbody> <tr> <th class="value-name" scope="row">false</th> <td class="value-description">Assistive technologies will present only the changed node or nodes.</td> </tr> <tr> <th class="value-name" scope="row">true</th> <td class="value-description">Assistive technologies will present the entire changed region as a whole, including the author-defined label if one exists.</td> </tr> </tbody> </table> </section> <section class="property notoc" id="aria-autocomplete"> <h4><span class="property-name" title="aria-autocomplete" aria-describedby="desc-aria-autocomplete"><code>aria-autocomplete</code> <span class="type-indicator">property</span></span></h4> <div class="property-description" id="desc-aria-autocomplete" role="definition"> <p><a href="#dfn-indicates" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-indicates-4">Indicates</a> whether inputting text could trigger display of one or more predictions of the user's intended value for a <a href="https://w3c.github.io/aria/#combobox" class="role-reference"><code>combobox</code></a>, <a href="https://w3c.github.io/aria/#searchbox" class="role-reference"><code>searchbox</code></a>, or <a href="https://w3c.github.io/aria/#textbox" class="role-reference"><code>textbox</code></a> and specifies how predictions would be presented if they were made.</p> <p>The <code>aria-autocomplete</code> property describes the type of interaction model a <a href="https://w3c.github.io/aria/#textbox" class="role-reference"><code>textbox</code></a>, <a href="https://w3c.github.io/aria/#searchbox" class="role-reference"><code>searchbox</code></a>, or <a href="https://w3c.github.io/aria/#combobox" class="role-reference"><code>combobox</code></a> employs when dynamically helping users complete text input. It distinguishes between two models: the inline model (<code>aria-autocomplete="inline"</code>) that presents a value completion prediction inside the text input and the list model (<code>aria-autocomplete="list"</code>) that presents a collection of possible values in a separate element that pops up adjacent to the text input. It is possible for an input to offer both models at the same time (<code>aria-autocomplete="both"</code>).</p> <p>The <code>aria-autocomplete</code> property is limited to describing predictive behaviors of an input element. Authors <em class="rfc2119">SHOULD</em> either omit specifying a value for <code>aria-autocomplete</code> or set <code>aria-autocomplete</code> to <code>none</code> if an input element provides one or more input proposals where none of the proposals are dependent on the specific input provided by the user. For instance, a combobox where the value of <code>aria-autocomplete</code> would be <code>none</code> is a search field that displays suggested values by listing the 5 most recently used search terms without any filtering of the list based on the user's input. Elements with a role that supports <code>aria-autocomplete</code> have a default value for <code>aria-autocomplete</code> of <code>none</code>.</p> <p>When an inline suggestion is made as a user types in an input, suggested text for completing the value of the field dynamically appears in the field after the input cursor, and the suggested value is accepted as the value of the input if the user performs an action that causes focus to leave the field. When an element has <code>aria-autocomplete</code> set to <code>inline</code> or <code>both</code>, authors <em class="rfc2119">SHOULD</em> ensure that the automatically suggested portion of the text is presented as selected text. This enables assistive technologies to distinguish between a user's input and the automatic suggestion and, in the event that the suggestion is not the desired value, enables the user to easily delete the suggestion or replace it by continuing to type.</p> <p> If an element has <code>aria-autocomplete</code> set to <code>list</code> or <code>both</code>, authors <em class="rfc2119">MUST</em> ensure both of the following conditions are met:</p> <ol> <li>The element has a value specified for <a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a> that refers to the element that contains the collection of suggested values.</li> <li>The element has a value for <a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> that matches the role of the element that contains the collection of suggested values.</li> </ol> <p>Some implementations of the list model require the user to perform an action, such as moving focus to the suggestion with the <kbd>Down Arrow</kbd> or clicking on the suggestion, in order to choose the suggestion. In such implementations, authors <em class="rfc2119">MAY</em> manage focus by either using <a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a> if the collection container supports it or by moving <abbr title="Document Object Model">DOM</abbr> focus to the suggestion. However, other implementations of the list model automatically highlight one suggestion as the selected value that will be accepted when the field loses focus, e.g., when the user presses the <kbd>Tab</kbd> key or clicks on a different field. If an element has <code>aria-autocomplete</code> set to <code>list</code> or <code>both</code>, and if a suggestion is automatically selected as the user provides input, authors <em class="rfc2119">MUST</em> ensure all the following conditions are met:</p> <ol> <li>The collection of suggestions is presented in an element with a role that supports <a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a>.</li> <li>The value of <code>aria-activedescendant</code> set on the input field is dynamically adjusted to refer to the element containing the selected suggestion as described in the definition of <a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a>.</li> <li><abbr title="Document Object Model">DOM</abbr> focus remains on the text input while the suggestions are displayed.</li> </ol> <p>The <code>aria-autocomplete</code> property is not intended to indicate the presence of a completion suggestion, and authors <em class="rfc2119">SHOULD NOT</em> dynamically change its value in order to communicate the presence of a suggestion. When an element has <code>aria-autocomplete</code> set to <code>list</code> or <code>both</code>, authors <em class="rfc2119">SHOULD</em> use the <a href="https://w3c.github.io/aria/#aria-expanded" class="state-reference"><code>aria-expanded</code></a> state to communicate whether the element that presents the suggestion collection is displayed.</p> </div> <table class="property-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="property-applicability-head" scope="row">Used in Roles:</th> <td class="property-applicability"><ul> <li><a href="https://w3c.github.io/aria/#combobox" class="role-reference"><code>combobox</code></a></li> <li><a href="https://w3c.github.io/aria/#textbox" class="role-reference"><code>textbox</code></a></li> </ul> </td> </tr> <tr> <th class="property-descendants-head" scope="row">Inherits into Roles:</th> <td class="property-descendants"><ul> <li><a href="https://w3c.github.io/aria/#searchbox" class="role-reference"><code>searchbox</code></a></li> </ul> </td> </tr> <tr> <th class="property-value-head" scope="row">Value:</th> <td class="property-value"><a href="#valuetype_token">token</a></td> </tr> </tbody> </table> <table class="value-descriptions"> <caption>Values:</caption> <thead> <tr> <th scope="col">Value</th> <th scope="col">Description</th> </tr> </thead> <tbody> <tr> <th class="value-name" scope="row">inline</th> <td class="value-description">When a user is providing input, text suggesting one way to complete the provided input might be dynamically inserted after the caret.</td> </tr> <tr> <th class="value-name" scope="row">list</th> <td class="value-description">When a user is providing input, an element containing a collection of values that could complete the provided input might be displayed.</td> </tr> <tr> <th class="value-name" scope="row">both</th> <td class="value-description">When a user is providing input, an element containing a collection of values that could complete the provided input might be displayed. If displayed, one value in the collection is automatically selected, and the text needed to complete the automatically selected value appears after the caret in the input.</td> </tr> <tr> <th class="value-name" scope="row"><strong class="default">none (default)</strong></th> <td class="value-description">When a user is providing input, an automatic suggestion that attempts to predict how the user intends to complete the input is not displayed.</td> </tr> </tbody> </table> </section> <section class="property notoc" id="aria-braillelabel"> <h4><span class="property-name" title="aria-braillelabel" aria-describedby="desc-aria-braillelabel"><code>aria-braillelabel</code> <span class="type-indicator">property</span></span></h4> <div class="property-description" id="desc-aria-braillelabel" role="definition"> <p><a href="#dfn-defines" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-defines-3">Defines</a> a string value that labels the current element, which is intended to be converted into Braille. See related <a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a>.</p> <p>The purpose of <a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a> is similar to that of <a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a>. It provides the user with a recognizable name of the object in Braille.</p> <p>The <a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a> property gives authors the ability to override how assistive technologies localize and express the accessible name of an element in Braille. Thus inappropriately using <a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a> might inhibit users' ability to understand an element on braille interfaces. Authors <em class="rfc2119">SHOULD</em> limit use of <a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a> to instances where the name of an element when converted to Braille is not the desired user experience.</p> <p> When using <code>aria-braillelabel</code>, authors <em class="rfc2119">SHOULD</em> also ensure that:</p> <ol> <li>The element to which <code>aria-braillelabel</code> is applied has a valid accessible name.</li> <li>The value of <code>aria-braillelabel</code> is not empty or does not contain only <a data-link-type="dfn" data-lt="ascii whitespace" href="https://infra.spec.whatwg.org/#ascii-whitespace">whitespace</a> characters.</li> <li>The value of <code>aria-braillelabel</code> does not contain any characters in <a href="#dfn-unicode-braille" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-unicode-braille-1">Unicode Braille Patterns</a> or consists of only characters in <a href="#dfn-unicode-braille" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-unicode-braille-2">Unicode Braille Patterns</a>; the value does not only contain Braille Pattern dots-0.</li> <li>The value of <code>aria-braillelabel</code> is not identical to the element's accessible name.</li> </ol> <p>Authors <em class="rfc2119">MUST NOT</em> specify <code>aria-braillelabel</code> on an element which has an explicit or implicit <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> role where <code>aria-braillelabel</code> is <a href="#prohibitedattributes">prohibited</a>.</p> <div class="note" role="note" id="issue-container-generatedID-39"><div role="heading" class="note-title marker" id="h-note-39" aria-level="4"><span>Note</span></div><p class="">Note that <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-54">Assistive Technologies</a> with braille support can convert the accessible name to Braille. In addition, assistive technologies will be able to customize such braille output according to user preferences. Using only the accessible name, e.g., from content or via <code>aria-label</code> is <strong>almost always</strong> the better user experience and authors are <strong>strongly discouraged</strong> from using <code>aria-braillelabel</code> to replicate <code>aria-label</code>. Instead, <code>aria-braillelabel</code> is meant to be used only if the accessible name cannot provide an adequate braille representation, i.e., when a specialized braille description is very different from a text description converted to Braille. It is very important to note that when using <code>aria-braillelabel</code>, authors are solely responsible for localizing the attribute value so that it aligns with the document language. In addition, authors need to design a way to clearly communicate the use of this attribute to the user. For example, this could be done in the product documentation. This is even more important when the value consists of Unicode Braille Patterns because <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-55">Assistive Technologies</a> will pass such content directly to the user without applying user specific braille translations; in general, authors are <strong>strongly discouraged</strong> from using Unicode Braille Patterns in <code>aria-braillelabel</code>. </p></div> <p><a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-56">Assistive technologies</a> <em class="rfc2119">SHOULD</em> use the value of <code>aria-braillelabel</code> when presenting the accessible name of an element in Braille, but <em class="rfc2119">SHOULD NOT</em> change other functionality. For example, an assistive technology that provides aural rendering <em class="rfc2119">SHOULD</em> use the accessible name.</p> <p><a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-57">Assistive technologies</a> <em class="rfc2119">SHOULD</em> expose the <code>aria-braillelabel</code> property as follows:</p> <ol> <li>If the value of <code>aria-braillelabel</code> does not contain characters in <a href="#dfn-unicode-braille" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-unicode-braille-3">Unicode Braille Patterns</a>, translate the value according to the user's preferred translation table.</li> <li>Otherwise, pass the value to the user without translation.</li> </ol> <p>The following example shows the use of <code>aria-braillelabel</code> to customize a button's name in braille output.</p> <div class="example" id="example-24"> <div class="marker"> <a class="self-link" href="#example-24">Example<bdi> 24</bdi></a> </div> <pre class="highlight" aria-busy="false"><code class="hljs abnf"><button aria-braillelabel<span class="hljs-operator">=</span><span class="hljs-string">"****"</span>> <img alt<span class="hljs-operator">=</span><span class="hljs-string">"4 stars"</span> src<span class="hljs-operator">=</span><span class="hljs-string">"images/stars.jpg"</span>> </button></code></pre> </div> <p>In the previous example, a braille display would display "btn ****" in Braille rather than the verbose "btn gra 4 stars".</p> </div> <table class="property-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="property-applicability-head" scope="row">Used in Roles:</th> <td class="property-applicability">All elements of the base markup except for the following roles: <a href="https://w3c.github.io/aria/#caption" class="role-reference"><code>caption</code></a>, <a href="https://w3c.github.io/aria/#code" class="role-reference"><code>code</code></a>, <a href="https://w3c.github.io/aria/#definition" class="role-reference"><code>definition</code></a>, <a href="https://w3c.github.io/aria/#deletion" class="role-reference"><code>deletion</code></a>, <a href="https://w3c.github.io/aria/#emphasis" class="role-reference"><code>emphasis</code></a>, <a href="https://w3c.github.io/aria/#generic" class="role-reference"><code>generic</code></a>, <a href="https://w3c.github.io/aria/#insertion" class="role-reference"><code>insertion</code></a>, <a href="https://w3c.github.io/aria/#mark" class="role-reference"><code>mark</code></a>, <a href="https://w3c.github.io/aria/#none" class="role-reference"><code>none</code></a>, <a href="https://w3c.github.io/aria/#paragraph" class="role-reference"><code>paragraph</code></a>, <a href="https://w3c.github.io/aria/#strong" class="role-reference"><code>strong</code></a>, <a href="https://w3c.github.io/aria/#subscript" class="role-reference"><code>subscript</code></a>, <a href="https://w3c.github.io/aria/#suggestion" class="role-reference"><code>suggestion</code></a>, <a href="https://w3c.github.io/aria/#superscript" class="role-reference"><code>superscript</code></a>, <a href="https://w3c.github.io/aria/#term" class="role-reference"><code>term</code></a>, <a href="https://w3c.github.io/aria/#time" class="role-reference"><code>time</code></a></td> </tr> <tr> <th class="property-value-head" scope="row">Value:</th> <td class="property-value"><a href="#valuetype_string">string</a></td> </tr> </tbody> </table> </section> <section class="property notoc" id="aria-brailleroledescription"> <h4><span class="property-name" title="aria-brailleroledescription" aria-describedby="desc-aria-brailleroledescription"><code>aria-brailleroledescription</code> <span class="type-indicator">property</span></span></h4> <div class="property-description" id="desc-aria-brailleroledescription" role="definition"> <p><a href="#dfn-defines" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-defines-4">Defines</a> a human-readable, author-localized abbreviated description for the <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-88">role</a> of an <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a>, which is intended to be converted into Braille. See related <a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a>.</p> <p>Some <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-58">assistive technologies</a>, such as screen readers, present the role of an element as part of the user experience. Such assistive technologies typically localize the name of the role, and they might customize it as well. Users of these assistive technologies depend on the presentation of the role name, such as "region," "button," or "slider," for an understanding of the purpose of the element and, if it is a widget, how to interact with it.</p> <p>The <code>aria-brailleroledescription</code> property gives authors the ability to override how <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-59">assistive technologies</a> localize and express the name of a role in Braille. Thus inappropriately using <code>aria-brailleroledescription</code> might inhibit users' ability to understand or interact with an element on braille interfaces. Authors <em class="rfc2119">SHOULD</em> limit use of <code>aria-brailleroledescription</code> to clarifying the purpose of non-interactive container roles like <a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a> or <a href="https://w3c.github.io/aria/#region" class="role-reference"><code>region</code></a>, or to providing a <em>more specific</em> description of a <a href="https://w3c.github.io/aria/#widget" class="role-reference"><code>widget</code></a> in a braille context.</p> <p>Authors <em class="rfc2119">MUST NOT</em> use <code>aria-brailleroledescription</code> without providing <code>aria-roledescription</code>. Additionally, as with <code>aria-roledescription</code>, authors <em class="rfc2119">MUST NOT</em> specify <code>aria-brailleroledescription</code> on an element which has an explicit or implicit <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> role where <code>aria-brailleroledescription</code> is <a href="#prohibitedattributes">prohibited</a>.</p> <p>In general, <code>aria-brailleroledescription</code> is only meant to be used in rare cases when a <code>aria-roledescription</code> is excessively verbose when rendered in Braille.</p> <p>When using <code>aria-brailleroledescription</code>, authors <em class="rfc2119">SHOULD</em> also ensure that:</p> <ol> <li>The element to which <code>aria-brailleroledescription</code> is applied has a valid <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> role or has an implicit <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> role semantic.</li> <li>The value of <code>aria-brailleroledescription</code> is not empty or does not contain only <a data-link-type="dfn" data-lt="ascii whitespace" href="https://infra.spec.whatwg.org/#ascii-whitespace">whitespace</a> characters.</li> <li>The value of <code>aria-brailleroledescription</code> does not contain any characters in <a href="#dfn-unicode-braille" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-unicode-braille-4">Unicode Braille Patterns</a> or consists of only characters in <a href="#dfn-unicode-braille" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-unicode-braille-5">Unicode Braille Patterns</a>; the value does not only contain Braille Pattern dots-0.</li> <li>The value of <code>aria-brailleroledescription</code> should not be identical to the element's <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> <code>aria-roledescription</code>, <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> <code>role</code> or implicit <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> role semantic.</li> </ol> <div class="note" role="note" id="issue-container-generatedID-40"><div role="heading" class="note-title marker" id="h-note-40" aria-level="4"><span>Note</span></div><p class="">Note that <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-60">Assistive Technologies</a> with braille support can convert <code>aria-roledescription</code> content to Braille. In addition, assistive technologies will be able to customize such braille output according to user preferences. Using only <code>aria-roledescription</code> is <strong>almost always</strong> the better user experience and authors are <strong>strongly discouraged</strong> from using <code>aria-brailleroledescription</code> to replicate <code>aria-roledescription</code>. Instead, <code>aria-brailleroledescription</code> is meant to be used only when <code>aria-roledescription</code> cannot provide an adequate braille representation, i.e., when a specialized braille description is very different from a text description converted to Braille. It is very important to note that when using <code>aria-brailleroledescription</code>, authors are solely responsible for localizing the attribute value so that it aligns with the document language. In addition, authors need to design a way to clearly communicate the use of this attribute to the user. For example, this could be done in the product documentation. This is even more important when the value consists of Unicode Braille Patterns because <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-61">Assistive Technologies</a> will pass such content directly to the user without applying user specific braille translations; in general, authors are <strong>strongly discouraged</strong> from using Unicode Braille Patterns in <code>aria-brailleroledescription</code>. </p></div> <p>User agents <em class="rfc2119">MUST NOT</em> expose the <code>aria-brailleroledescription</code> property if any of the following conditions exist:</p> <ol> <li>The value of <code>aria-brailleroledescription</code> is empty or contains only whitespace characters, which includes standard <a data-link-type="dfn" data-lt="ascii whitespace" href="https://infra.spec.whatwg.org/#ascii-whitespace">whitespace</a> and the empty Braille pattern: dots-0 (U+2800).</li> <li>The element to which <code>aria-brailleroledescription</code> is applied has an explicit or implicit <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> role where <code>aria-brailleroledescription</code> is <a href="#prohibitedattributes">prohibited</a>.</li> <li>The element to which <code>aria-brailleroledescription</code> is applied does not have a valid <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> <code>aria-roledescription</code>.</li> </ol> <p><a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-62">Assistive technologies</a> <em class="rfc2119">SHOULD</em> use the value of <code>aria-brailleroledescription</code> when presenting the role of an element in Braille, but <em class="rfc2119">SHOULD NOT</em> change other functionality based on the role of an element that has a value for <code>aria-brailleroledescription</code>. For example, an assistive technology that provides functions for navigating to the next <a href="https://w3c.github.io/aria/#region" class="role-reference"><code>region</code></a> or <a href="https://w3c.github.io/aria/#button" class="role-reference"><code>button</code></a> <em class="rfc2119">SHOULD</em> allow those functions to navigate to regions and buttons that have an <code>aria-brailleroledescription</code>.</p> <p><a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-63">Assistive technologies</a> <em class="rfc2119">SHOULD</em> expose the <code>aria-brailleroledescription</code> property as follows:</p> <ol> <li>If the value of <code>aria-brailleroledescription</code> does not contain characters in <a href="#dfn-unicode-braille" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-unicode-braille-6">Unicode Braille Patterns</a>, translate the value according to the user's preferred translation table.</li> <li>Otherwise, pass the value to the user without translation.</li> </ol> <p>The following two examples show the use of <code>aria-brailleroledescription</code> to abbreviate the role of a repeated non-interactive "slide" container in a web-based presentation application.</p> <div class="example" id="example-25"> <div class="marker"> <a class="self-link" href="#example-25">Example<bdi> 25</bdi></a> </div> <pre class="highlight" aria-busy="false"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"article"</span> <span class="hljs-attr">aria-roledescription</span>=<span class="hljs-string">"slide"</span> <span class="hljs-attr">aria-brailleroledescription</span>=<span class="hljs-string">"sld"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"slide"</span> <span class="hljs-attr">aria-labelledby</span>=<span class="hljs-string">"slideheading"</span>></span> <span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"slideheading"</span>></span>Quarterly Report<span class="hljs-tag"></<span class="hljs-name">h1</span>></span> <span class="hljs-comment"></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> </div> <div class="example" id="example-26"> <div class="marker"> <a class="self-link" href="#example-26">Example<bdi> 26</bdi></a> </div> <pre class="highlight" aria-busy="false"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">article</span> <span class="hljs-attr">aria-roledescription</span>=<span class="hljs-string">"slide"</span> <span class="hljs-attr">aria-brailleroledescription</span>=<span class="hljs-string">"sld"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"slide"</span> <span class="hljs-attr">aria-labelledby</span>=<span class="hljs-string">"slideheading"</span>></span> <span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"slideheading"</span>></span>Quarterly Report<span class="hljs-tag"></<span class="hljs-name">h1</span>></span> <span class="hljs-comment"></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> </div> <p>In the previous examples, a braille screen reader user would read "sld Quarterly Report" rather than the more verbose "slide Quarterly Report."</p> </div> <table class="property-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="property-applicability-head" scope="row">Used in Roles:</th> <td class="property-applicability">All elements of the base markup except for the following roles: <a href="https://w3c.github.io/aria/#generic" class="role-reference"><code>generic</code></a></td> </tr> <tr> <th class="property-value-head" scope="row">Value:</th> <td class="property-value"><a href="#valuetype_string">string</a></td> </tr> </tbody> </table> </section> <section class="state notoc" id="aria-busy"> <h4><span class="state-name" title="aria-busy" aria-describedby="desc-aria-busy"><code>aria-busy</code> <span class="type-indicator">state</span></span></h4> <div class="state-description" id="desc-aria-busy" role="definition"> <p><a href="#dfn-indicates" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-indicates-5">Indicates</a> an element is being modified and that assistive technologies could wait until the modifications are complete before exposing them to the user.</p> <p>The default value of <code>aria-busy</code> is <code>false</code> for all elements. When <code>aria-busy</code> is <code>true</code> for an element, assistive technologies can ignore changes to content that is an <a href="#dfn-accessibility-descendant" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-descendant-17">accessibility descendant</a> that element and then process all changes made during the busy period as a single, atomic update when <code>aria-busy</code> becomes <code>false</code>.</p> <p>If it is necessary to make multiple additions, modifications, or removals within a container element that is already either partially or fully rendered, authors <em class="rfc2119">MAY</em> set <code>aria-busy</code> to <code>true</code> on the container element before the first change, and then set it to <code>false</code> when the last change is complete. For example, if multiple changes to a <a href="#dfn-live-region" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-live-region-11">live region</a> should be spoken as a single unit of speech, authors <em class="rfc2119">MAY</em> set <code>aria-busy</code> to <code>true</code> while the changes are being made and then set it to <code>false</code> when the changes are complete and ready to be spoken.</p> <p>If an element with role <a href="https://w3c.github.io/aria/#feed" class="role-reference"><code>feed</code></a> is marked busy, assistive technologies might defer rendering changes that occur inside the <code>feed</code> with the exception of user-initiated changes that occur inside the <a href="https://w3c.github.io/aria/#article" class="role-reference"><code>article</code></a> that the user is reading during the busy period.</p> <p>If changes to a rendered <a href="https://w3c.github.io/aria/#widget" class="role-reference"><code>widget</code></a> would create a state where the <a href="https://w3c.github.io/aria/#widget" class="role-reference"><code>widget</code></a> is modifying <a href="#mustContain">Allowed Accessibility Child Roles</a> during script execution, authors <em class="rfc2119">MAY</em> set <code>aria-busy</code> to <code>true</code> on the <a href="https://w3c.github.io/aria/#widget" class="role-reference"><code>widget</code></a> during the update process. For example, if a rendered tree grid required a set of simultaneous updates to multiple discontiguous branches, an alternative to replacing the complete tree element with a single update would be to mark the tree busy while each of the branches are modified.</p> </div> <table class="state-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="state-applicability-head" scope="row">Used in Roles:</th> <td class="state-applicability">All elements of the base markup</td> </tr> <tr> <th class="state-value-head" scope="row">Value:</th> <td class="state-value"><a href="#valuetype_true-false">true/false</a></td> </tr> </tbody> </table> <table class="value-descriptions"> <caption>Values:</caption> <thead> <tr> <th scope="col">Value</th> <th scope="col">Description</th> </tr> </thead> <tbody> <tr> <th class="value-name" scope="row"><strong class="default">false (default)</strong>:</th> <td class="value-description">There are no expected updates for the element.</td> </tr> <tr> <th class="value-name" scope="row">true</th> <td class="value-description">The element is being updated.</td> </tr> </tbody> </table> </section> <section class="state notoc" id="aria-checked"> <h4><span class="state-name" title="aria-checked" aria-describedby="desc-aria-checked"><code>aria-checked</code> <span class="type-indicator">state</span></span></h4> <div class="state-description" id="desc-aria-checked" role="definition"> <p><a href="#dfn-indicates" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-indicates-6">Indicates</a> the current "checked" <a href="#dfn-state" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-state-25">state</a> of checkboxes, radio buttons, and other <a href="#dfn-widget" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-widget-24">widgets</a>. See related <a href="https://w3c.github.io/aria/#aria-pressed" class="state-reference"><code>aria-pressed</code></a> and <a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a>.</p> <p>The <a href="https://w3c.github.io/aria/#aria-checked" class="state-reference"><code>aria-checked</code></a> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attribute</a> indicates whether the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> is checked (<code>true</code>), unchecked (<code>false</code>), or represents a group of other elements that have a mixture of checked and unchecked <span>values</span> (<code>mixed</code>). Most inputs only support values of <code>true</code> and <code>false</code>, but the <code>mixed</code> value is supported by certain tri-state inputs such as a <a href="https://w3c.github.io/aria/#checkbox" class="role-reference"><code>checkbox</code></a> or <a href="https://w3c.github.io/aria/#menuitemcheckbox" class="role-reference"><code>menuitemcheckbox</code></a>.</p> <p>The <code>mixed</code> value is <em>not</em> supported on <a href="https://w3c.github.io/aria/#radio" class="role-reference"><code>radio</code></a>, <a href="https://w3c.github.io/aria/#menuitemradio" class="role-reference"><code>menuitemradio</code></a>, <a href="https://w3c.github.io/aria/#switch" class="role-reference"><code>switch</code></a> or any element that inherits from these, and <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agents</a> <em class="rfc2119">MUST</em> treat a <code>mixed</code> value as equivalent to <code>false</code> for those <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-89">roles</a>.</p> <p>Examples using the <code>mixed</code> value of tri-state inputs are covered in the <cite><a href="https://www.w3.org/WAI/ARIA/apg/" class="practices"><abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices Guide</a></cite>.</p> </div> <table class="state-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="state-applicability-head" scope="row">Used in Roles:</th> <td class="state-applicability"><ul> <li><a href="https://w3c.github.io/aria/#checkbox" class="role-reference"><code>checkbox</code></a></li> <li><a href="https://w3c.github.io/aria/#menuitemcheckbox" class="role-reference"><code>menuitemcheckbox</code></a></li> <li><a href="https://w3c.github.io/aria/#menuitemradio" class="role-reference"><code>menuitemradio</code></a></li> <li><a href="https://w3c.github.io/aria/#option" class="role-reference"><code>option</code></a></li> <li><a href="https://w3c.github.io/aria/#radio" class="role-reference"><code>radio</code></a></li> <li><a href="https://w3c.github.io/aria/#switch" class="role-reference"><code>switch</code></a></li> </ul> </td> </tr> <tr> <th class="state-descendants-head" scope="row">Inherits into Roles:</th> <td class="state-descendants"><ul> <li><a href="https://w3c.github.io/aria/#switch" class="role-reference"><code>switch</code></a></li> <li><a href="https://w3c.github.io/aria/#treeitem" class="role-reference"><code>treeitem</code></a></li> </ul> </td> </tr> <tr> <th class="state-value-head" scope="row">Value:</th> <td class="state-value"><a href="#valuetype_tristate">tristate</a></td> </tr> </tbody> </table> <table class="value-descriptions"> <caption>Values:</caption> <thead> <tr> <th scope="col">Value</th> <th scope="col">Description</th> </tr> </thead> <tbody> <tr> <th class="value-name" scope="row">false</th> <td class="value-description">The element supports being checked but is not currently checked.</td> </tr> <tr> <th class="value-name" scope="row">mixed</th> <td class="value-description">Indicates a mixed mode value for a tri-state checkbox or menuitemcheckbox.</td> </tr> <tr> <th class="value-name" scope="row">true</th> <td class="value-description">The element is checked.</td> </tr> <tr> <th class="value-name" scope="row"><strong class="default">undefined</strong> (default)</th> <td class="value-description">The element does not support being checked.</td> </tr> </tbody> </table> </section> <section class="property notoc" id="aria-colcount"> <h4><span class="property-name" title="aria-colcount" aria-describedby="desc-aria-colcount"><code>aria-colcount</code> <span class="type-indicator">property</span></span></h4> <div class="property-description" id="desc-aria-colcount" role="definition"> <p><a href="#dfn-defines" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-defines-5">Defines</a> the total number of columns in a <a href="https://w3c.github.io/aria/#table" class="role-reference"><code>table</code></a>, <a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a>, or <a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a>. See related <a href="https://w3c.github.io/aria/#aria-colindex" class="property-reference"><code>aria-colindex</code></a>.</p> <p>If all of the columns are present in the <abbr title="Document Object Model">DOM</abbr>, it is not necessary to set this <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attribute</a> as the <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agent</a> can automatically calculate the total number of columns. However, if only a portion of the columns is present in the <abbr title="Document Object Model">DOM</abbr> at a given moment, this attribute is needed to provide an explicit indication of the number of columns in the full table.</p> <p>Authors <em class="rfc2119">MUST</em> set the value of <a href="https://w3c.github.io/aria/#aria-colcount" class="property-reference"><code>aria-colcount</code></a> to an integer equal to the number of columns in the full table. If the total number of columns is unknown, authors <em class="rfc2119">MUST</em> set the value of <a href="https://w3c.github.io/aria/#aria-colcount" class="property-reference"><code>aria-colcount</code></a> to <code>-1</code> to indicate that the value should not be calculated by the user agent.</p> <p>The following example shows a grid with 16 columns, of which columns 2, 3, 4, and 9 are displayed to the user.</p> <div class="example" id="example-27"> <div class="marker"> <a class="self-link" href="#example-27">Example<bdi> 27</bdi></a> </div> <pre class="highlight" aria-busy="false"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"grid"</span> <span class="hljs-attr">aria-colcount</span>=<span class="hljs-string">"16"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"rowgroup"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"row"</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"columnheader"</span> <span class="hljs-attr">aria-colindex</span>=<span class="hljs-string">"2"</span>></span>First Name<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"columnheader"</span> <span class="hljs-attr">aria-colindex</span>=<span class="hljs-string">"3"</span>></span>Last Name<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"columnheader"</span> <span class="hljs-attr">aria-colindex</span>=<span class="hljs-string">"4"</span>></span>Company<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"columnheader"</span> <span class="hljs-attr">aria-colindex</span>=<span class="hljs-string">"9"</span>></span>Phone<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"rowgroup"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"row"</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span> <span class="hljs-attr">aria-colindex</span>=<span class="hljs-string">"2"</span>></span>Fred<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span> <span class="hljs-attr">aria-colindex</span>=<span class="hljs-string">"3"</span>></span>Jackson<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span> <span class="hljs-attr">aria-colindex</span>=<span class="hljs-string">"4"</span>></span>Acme, Inc.<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span> <span class="hljs-attr">aria-colindex</span>=<span class="hljs-string">"9"</span>></span>555-1234<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"row"</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span> <span class="hljs-attr">aria-colindex</span>=<span class="hljs-string">"2"</span>></span>Sara<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span> <span class="hljs-attr">aria-colindex</span>=<span class="hljs-string">"3"</span>></span>James<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span> <span class="hljs-attr">aria-colindex</span>=<span class="hljs-string">"4"</span>></span>Acme, Inc.<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span> <span class="hljs-attr">aria-colindex</span>=<span class="hljs-string">"9"</span>></span>555-1235<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> … <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> </div> </div> <table class="property-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="property-applicability-head" scope="row">Used in Roles:</th> <td class="property-applicability"><ul> <li><a href="https://w3c.github.io/aria/#table" class="role-reference"><code>table</code></a></li> </ul> </td> </tr> <tr> <th class="property-descendants-head" scope="row">Inherits into Roles:</th> <td class="property-descendants"><ul> <li><a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a></li> <li><a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a></li> </ul> </td> </tr> <tr> <th class="property-value-head" scope="row">Value:</th> <td class="property-value"><a href="#valuetype_integer">integer</a></td> </tr> </tbody> </table> </section> <section class="property notoc" id="aria-colindex"> <h4><span class="property-name" title="aria-colindex" aria-describedby="desc-aria-colindex"><code>aria-colindex</code> <span class="type-indicator">property</span></span></h4> <div class="property-description" id="desc-aria-colindex" role="definition"> <p><a href="#dfn-defines" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-defines-6">Defines</a> an <a data-link-type="dfn" data-lt="element" href="https://dom.spec.whatwg.org/#concept-element">element's</a> column index or position with respect to the total number of columns within a <a href="https://w3c.github.io/aria/#table" class="role-reference"><code>table</code></a>, <a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a>, or <a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a>. See related <a href="https://w3c.github.io/aria/#aria-colindextext" class="property-reference"><code>aria-colindextext</code></a>, <a href="https://w3c.github.io/aria/#aria-colcount" class="property-reference"><code>aria-colcount</code></a>, and <a href="https://w3c.github.io/aria/#aria-colspan" class="property-reference"><code>aria-colspan</code></a>.</p> <p>If all of the columns are present in the <abbr title="Document Object Model">DOM</abbr>, it is not necessary to set this <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attribute</a> as the <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agent</a> can automatically calculate the column index of each cell or <a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a>. However, if only a portion of the columns is present in the <abbr title="Document Object Model">DOM</abbr> at a given moment, this attribute is needed to provide an explicit indication of the column of each cell or gridcell with respect to the full table.</p> <p>Authors <em class="rfc2119">MUST</em> set the <span>value</span> for <a href="https://w3c.github.io/aria/#aria-colindex" class="property-reference"><code>aria-colindex</code></a> to an integer greater than or equal to 1, greater than the <a href="https://w3c.github.io/aria/#aria-colindex" class="property-reference"><code>aria-colindex</code></a> value of any previous elements within the same row, and less than or equal to the number of columns in the full table. For a cell or gridcell which spans multiple columns, authors <em class="rfc2119">MUST</em> set the value of <a href="https://w3c.github.io/aria/#aria-colindex" class="property-reference"><code>aria-colindex</code></a> to the start of the span.</p> <p>If the set of columns which is present in the <abbr title="Document Object Model">DOM</abbr> is contiguous, and if there are no cells which span more than one row or column in that set, then authors <em class="rfc2119">MAY</em> place <a href="https://w3c.github.io/aria/#aria-colindex" class="property-reference"><code>aria-colindex</code></a> on each row, setting the value to the index of the first column of the set. Otherwise, authors <em class="rfc2119">SHOULD</em> place <a href="https://w3c.github.io/aria/#aria-colindex" class="property-reference"><code>aria-colindex</code></a> on all of the <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-child-38">accessibility children</a> of each row.</p> <p>The following example shows a grid with 16 columns, of which columns 2 through 5 are displayed to the user. Because the set of columns is contiguous, <a href="https://w3c.github.io/aria/#aria-colindex" class="property-reference"><code>aria-colindex</code></a> can be placed on each row.</p> <div class="example" id="example-28"> <div class="marker"> <a class="self-link" href="#example-28">Example<bdi> 28</bdi></a> </div> <pre class="highlight" aria-busy="false"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"grid"</span> <span class="hljs-attr">aria-colcount</span>=<span class="hljs-string">"16"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"rowgroup"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"row"</span> <span class="hljs-attr">aria-colindex</span>=<span class="hljs-string">"2"</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"columnheader"</span>></span>First Name<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"columnheader"</span>></span>Last Name<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"columnheader"</span>></span>Company<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"columnheader"</span>></span>Address<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"rowgroup"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"row"</span> <span class="hljs-attr">aria-colindex</span>=<span class="hljs-string">"2"</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span>></span>Fred<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span>></span>Jackson<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span>></span>Acme, Inc.<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span>></span>123 Broad St.<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"row"</span> <span class="hljs-attr">aria-colindex</span>=<span class="hljs-string">"2"</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span>></span>Sara<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span>></span>James<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span>></span>Acme, Inc.<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span>></span>123 Broad St.<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> … <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> </div> <p>The following example shows a grid with 16 columns, of which columns 2 through 5 are displayed to the user. While the set of columns is contiguous, some of the cells span multiple rows. As a result, <a href="https://w3c.github.io/aria/#aria-colindex" class="property-reference"><code>aria-colindex</code></a> needs to be placed on all of the <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-child-39">accessibility children</a> of each row.</p> <div class="example" id="example-29"> <div class="marker"> <a class="self-link" href="#example-29">Example<bdi> 29</bdi></a> </div> <pre class="highlight" aria-busy="false"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"grid"</span> <span class="hljs-attr">aria-colcount</span>=<span class="hljs-string">"16"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"rowgroup"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"row"</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"columnheader"</span> <span class="hljs-attr">aria-colindex</span>=<span class="hljs-string">"2"</span>></span>First Name<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"columnheader"</span> <span class="hljs-attr">aria-colindex</span>=<span class="hljs-string">"3"</span>></span>Last Name<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"columnheader"</span> <span class="hljs-attr">aria-colindex</span>=<span class="hljs-string">"4"</span>></span>Company<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"columnheader"</span> <span class="hljs-attr">aria-colindex</span>=<span class="hljs-string">"5"</span>></span>Address<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"rowgroup"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"row"</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span> <span class="hljs-attr">aria-colindex</span>=<span class="hljs-string">"2"</span>></span>Fred<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span> <span class="hljs-attr">aria-colindex</span>=<span class="hljs-string">"3"</span>></span>Jackson<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span> <span class="hljs-attr">aria-colindex</span>=<span class="hljs-string">"4"</span> <span class="hljs-attr">aria-rowspan</span>=<span class="hljs-string">"2"</span>></span>Acme, Inc.<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span> <span class="hljs-attr">aria-colindex</span>=<span class="hljs-string">"5"</span> <span class="hljs-attr">aria-rowspan</span>=<span class="hljs-string">"2"</span>></span>123 Broad St.<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"row"</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span> <span class="hljs-attr">aria-colindex</span>=<span class="hljs-string">"2"</span>></span>Sara<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span> <span class="hljs-attr">aria-colindex</span>=<span class="hljs-string">"3"</span>></span>James<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> … <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> </div> <p>The following example shows a grid with 16 columns, of which columns 2, 3, 4, and 9 are displayed to the user. Because the set of columns is non-contiguous, <a href="https://w3c.github.io/aria/#aria-colindex" class="property-reference"><code>aria-colindex</code></a> needs to be placed on all of the <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-child-40">accessibility children</a> of each row.</p> <div class="example" id="example-30"> <div class="marker"> <a class="self-link" href="#example-30">Example<bdi> 30</bdi></a> </div> <pre class="highlight" aria-busy="false"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"grid"</span> <span class="hljs-attr">aria-colcount</span>=<span class="hljs-string">"16"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"rowgroup"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"row"</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"columnheader"</span> <span class="hljs-attr">aria-colindex</span>=<span class="hljs-string">"2"</span>></span>First Name<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"columnheader"</span> <span class="hljs-attr">aria-colindex</span>=<span class="hljs-string">"3"</span>></span>Last Name<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"columnheader"</span> <span class="hljs-attr">aria-colindex</span>=<span class="hljs-string">"4"</span>></span>Company<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"columnheader"</span> <span class="hljs-attr">aria-colindex</span>=<span class="hljs-string">"9"</span>></span>Phone<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"rowgroup"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"row"</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span> <span class="hljs-attr">aria-colindex</span>=<span class="hljs-string">"2"</span>></span>Fred<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span> <span class="hljs-attr">aria-colindex</span>=<span class="hljs-string">"3"</span>></span>Jackson<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span> <span class="hljs-attr">aria-colindex</span>=<span class="hljs-string">"4"</span>></span>Acme, Inc.<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span> <span class="hljs-attr">aria-colindex</span>=<span class="hljs-string">"9"</span>></span>555-1234<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"row"</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span> <span class="hljs-attr">aria-colindex</span>=<span class="hljs-string">"2"</span>></span>Sara<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span> <span class="hljs-attr">aria-colindex</span>=<span class="hljs-string">"3"</span>></span>James<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span> <span class="hljs-attr">aria-colindex</span>=<span class="hljs-string">"4"</span>></span>Acme, Inc.<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span> <span class="hljs-attr">aria-colindex</span>=<span class="hljs-string">"9"</span>></span>555-1235<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> … <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> </div> </div> <table class="property-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="property-applicability-head" scope="row">Used in Roles:</th> <td class="property-applicability"><ul> <li><a href="https://w3c.github.io/aria/#cell" class="role-reference"><code>cell</code></a></li> <li><a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a></li> </ul> </td> </tr> <tr> <th class="property-descendants-head" scope="row">Inherits into Roles:</th> <td class="property-descendants"><ul> <li><a href="https://w3c.github.io/aria/#columnheader" class="role-reference"><code>columnheader</code></a></li> <li><a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a></li> <li><a href="https://w3c.github.io/aria/#rowheader" class="role-reference"><code>rowheader</code></a></li> </ul> </td> </tr> <tr> <th class="property-value-head" scope="row">Value:</th> <td class="property-value"><a href="#valuetype_integer">integer</a></td> </tr> </tbody> </table> </section> <section class="property notoc" id="aria-colindextext"> <h4><span class="property-name" title="aria-colindextext" aria-describedby="desc-aria-colindextext"><code>aria-colindextext</code> <span class="type-indicator">property</span></span></h4> <div class="property-description" id="desc-aria-colindextext" role="definition"> <p><a href="#dfn-defines" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-defines-7">Defines</a> a human readable text alternative of <a href="https://w3c.github.io/aria/#aria-colindex" class="property-reference"><code>aria-colindex</code></a>. See related <a href="https://w3c.github.io/aria/#aria-rowindextext" class="property-reference"><code>aria-rowindextext</code></a>.</p> <p>Authors <em class="rfc2119">SHOULD</em> only use <code>aria-colindextext</code> when the provided or calculated value of <a href="https://w3c.github.io/aria/#aria-colindex" class="property-reference"><code>aria-colindex</code></a> is not meaningful or does not reflect the displayed index, as is the case with spreadsheets and chess boards.</p> <p>Authors <em class="rfc2119">SHOULD NOT</em> use <code>aria-colindextext</code> as a replacement for <a href="https://w3c.github.io/aria/#aria-colindex" class="property-reference"><code>aria-colindex</code></a> because some assistive technologies rely upon the numeric column index for the purpose of keeping track of the user's position or providing alternative table navigation.</p> <div class="note" role="note" id="issue-container-generatedID-41"><div role="heading" class="note-title marker" id="h-note-41" aria-level="4"><span>Note</span></div><p class="">Unlike <a href="https://w3c.github.io/aria/#aria-colindex" class="property-reference"><code>aria-colindex</code></a>, <code>aria-colindextext</code> is not a supported property of <a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a> because user agents have no way to reliably calculate <code>aria-colindextext</code> for the purpose of exposing its value on the <a href="https://w3c.github.io/aria/#cell" class="role-reference"><code>cell</code></a> or <a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a>.</p></div> </div> <table class="property-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="property-applicability-head" scope="row">Used in Roles:</th> <td class="property-applicability"><ul> <li><a href="https://w3c.github.io/aria/#cell" class="role-reference"><code>cell</code></a></li> </ul> </td> </tr> <tr> <th class="property-descendants-head" scope="row">Inherits into Roles:</th> <td class="property-descendants"><ul> <li><a href="https://w3c.github.io/aria/#columnheader" class="role-reference"><code>columnheader</code></a></li> <li><a href="https://w3c.github.io/aria/#rowheader" class="role-reference"><code>rowheader</code></a></li> </ul> </td> </tr> <tr> <th class="property-value-head" scope="row">Value:</th> <td class="property-value"><a href="#valuetype_integer">string</a></td> </tr> </tbody> </table> </section> <section class="property notoc" id="aria-colspan"> <h4><span class="property-name" title="aria-colspan" aria-describedby="desc-aria-colspan"><code>aria-colspan</code> <span class="type-indicator">property</span></span></h4> <div class="property-description" id="desc-aria-colspan" role="definition"> <p><a href="#dfn-defines" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-defines-8">Defines</a> the number of columns spanned by a cell or gridcell within a <a href="https://w3c.github.io/aria/#table" class="role-reference"><code>table</code></a>, <a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a>, or <a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a>. See related <a href="https://w3c.github.io/aria/#aria-colindex" class="property-reference"><code>aria-colindex</code></a> and <a href="https://w3c.github.io/aria/#aria-rowspan" class="property-reference"><code>aria-rowspan</code></a>.</p> <p>This <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attribute</a> is intended for cells and gridcells which are not contained in a native table. When defining the column span of cells or gridcells in a native table, authors <em class="rfc2119">SHOULD</em> use the host language's attribute instead of <a href="https://w3c.github.io/aria/#aria-colspan" class="property-reference"><code>aria-colspan</code></a>. If <a href="https://w3c.github.io/aria/#aria-colspan" class="property-reference"><code>aria-colspan</code></a> is used on an element for which the host language provides an equivalent attribute, <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agents</a> <em class="rfc2119">MUST</em> ignore the value of <a href="https://w3c.github.io/aria/#aria-colspan" class="property-reference"><code>aria-colspan</code></a> and instead expose the value of the host language's attribute to <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-64">assistive technologies</a>.</p> <p>Authors <em class="rfc2119">MUST</em> set the <span>value</span> of <a href="https://w3c.github.io/aria/#aria-colspan" class="property-reference"><code>aria-colspan</code></a> to an integer greater than or equal to 1 and less than the value which would cause the cell or gridcell to overlap the next cell or gridcell in the same row.</p> </div> <table class="property-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="property-applicability-head" scope="row">Used in Roles:</th> <td class="property-applicability"><ul> <li><a href="https://w3c.github.io/aria/#cell" class="role-reference"><code>cell</code></a></li> </ul> </td> </tr> <tr> <th class="property-descendants-head" scope="row">Inherits into Roles:</th> <td class="property-descendants"><ul> <li><a href="https://w3c.github.io/aria/#columnheader" class="role-reference"><code>columnheader</code></a></li> <li><a href="https://w3c.github.io/aria/#rowheader" class="role-reference"><code>rowheader</code></a></li> </ul> </td> </tr> <tr> <th class="property-value-head" scope="row">Value:</th> <td class="property-value"><a href="#valuetype_integer">integer</a></td> </tr> </tbody> </table> </section> <section class="property notoc" id="aria-controls"> <h4><span class="property-name" title="aria-controls" aria-describedby="desc-aria-controls"><code>aria-controls</code> <span class="type-indicator">property</span></span></h4> <div class="property-description" id="desc-aria-controls" role="definition"> <p><a href="#dfn-identifies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-identifies-4">Identifies</a> the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> (or elements) whose contents or presence are controlled by the current element. See related <a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a>.</p> <p>For example:</p> <ul> <li>A table of contents tree view can control the content of a neighboring document pane.</li> <li>A group of checkboxes can control what commodity prices are tracked live in a table or graph.</li> <li>A tab controls the display of its associated tab panel.</li> </ul> </div> <table class="property-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="property-applicability-head" scope="row">Used in Roles:</th> <td class="property-applicability">All elements of the base markup</td> </tr> <tr> <th class="property-value-head" scope="row">Value:</th> <td class="property-value"><a href="#valuetype_idref_list">ID reference list</a></td> </tr> </tbody> </table> </section> <section class="state notoc" id="aria-current"> <h4><span class="state-name" title="aria-current" aria-describedby="desc-aria-current"><code>aria-current</code> <span class="type-indicator">state</span></span></h4> <div class="state-description" id="desc-aria-current" role="definition"> <p><a href="#dfn-indicates" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-indicates-7">Indicates</a> the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> that represents the current item within a container or set of related elements.</p> <p>The <a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attribute</a> is a token type. Any value not included in the list of allowed values <em class="rfc2119">SHOULD</em> be treated by <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-65">assistive technologies</a> as if the value <code>true</code> had been provided. If the attribute is not present or its value is the empty string or <code>undefined</code>, the default value of <code>false</code> applies and the <a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> <a href="#dfn-state" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-state-26">state</a> <em class="rfc2119">MUST NOT</em> be exposed by user agents or assistive technologies.</p> <p>The <a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> attribute is used when an element within a set of related elements is visually styled to indicate it is the current item in the set. For example:</p> <ul> <li>A <code>page</code> token used to indicate a page within a set of pages, where the element is visually styled to represent the current page.</li> <li>A <code>step</code> token used to indicate a step within a step-based process, where the element is visually styled to represent the current step.</li> <li>A <code>location</code> token used to indicate the element that is visually styled as the current component, such as within a flow chart.</li> <li>A <code>date</code> token used to indicate the current date within a calendar or other date collection.</li> <li>A <code>time</code> token used to indicate the current time within a timetable or other time collection.</li> </ul> <p>Authors <em class="rfc2119">SHOULD</em> only mark one element in a set of elements as current with <a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a>.</p> <p>Authors <em class="rfc2119">SHOULD NOT</em> use the <a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a> attribute as a substitute for <a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a> in widgets where <a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a> has the same meaning. For example, in a <a href="https://w3c.github.io/aria/#tablist" class="role-reference"><code>tablist</code></a>, <a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a> is used on a <a href="https://w3c.github.io/aria/#tab" class="role-reference"><code>tab</code></a> to indicate the currently-displayed <a href="https://w3c.github.io/aria/#tabpanel" class="role-reference"><code>tabpanel</code></a>.</p> <div class="note" role="note" id="issue-container-generatedID-42"><div role="heading" class="note-title marker" id="h-note-42" aria-level="4"><span>Note</span></div><p class="">In some use cases for widgets that support <a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a>, current and selected can have different meanings and can both be used within the same set of elements. For example, <code>aria-current="page"</code> can be used in a navigation <a href="https://w3c.github.io/aria/#tree" class="role-reference"><code>tree</code></a> to indicate which page is currently displayed, while <code>aria-selected="true"</code> indicates which page will be displayed if the user activates the <a href="https://w3c.github.io/aria/#treeitem" class="role-reference"><code>treeitem</code></a>. Furthermore, the same tree can support operating on one or more selected pages (treeitems) by way of a context menu containing options such as "delete" and "move."</p></div> </div> <table class="state-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="state-applicability-head" scope="row">Used in Roles:</th> <td class="state-applicability">All elements of the base markup</td> </tr> <tr> <th class="state-value-head" scope="row">Value:</th> <td class="property-value"><a href="#valuetype_token">token</a></td> </tr> </tbody> </table> <table class="value-descriptions"> <caption>Values:</caption> <thead> <tr> <th scope="col">Value</th> <th scope="col">Description</th> </tr> </thead> <tbody> <tr> <th class="value-name" scope="row">page</th> <td class="value-description">Represents the current page within a set of pages.</td> </tr> <tr> <th class="value-name" scope="row">step</th> <td class="value-description">Represents the current step within a process.</td> </tr> <tr> <th class="value-name" scope="row">location</th> <td class="value-description">Represents the current location within an environment or context.</td> </tr> <tr> <th class="value-name" scope="row">date</th> <td class="value-description">Represents the current date within a collection of dates.</td> </tr> <tr> <th class="value-name" scope="row">time</th> <td class="value-description">Represents the current time within a set of times.</td> </tr> <tr> <th class="value-name" scope="row">true</th> <td class="value-description">Represents the current item within a set.</td> </tr> <tr> <th class="value-name" scope="row"><strong class="default">false (default)</strong></th> <td class="value-description">Does not represent the current item within a set.</td> </tr> </tbody> </table> </section> <section class="property notoc" id="aria-describedby"> <h4><span class="property-name" title="aria-describedby" aria-describedby="desc-aria-describedby"><code>aria-describedby</code> <span class="type-indicator">property</span></span></h4> <div class="property-description" id="desc-aria-describedby" role="definition"> <p><a href="#dfn-identifies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-identifies-5">Identifies</a> the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> (or elements) that describes the <a href="#dfn-object" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-object-17">object</a>. See related <a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a> and <a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a>.</p> <p>The <a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a> attribute is similar to <a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a> in that both reference other elements to calculate a text alternative (an accessible name, and description, respectively). While a concise accessible name is preferable, a description can either be concise, or provide more verbose information.</p> <p>The element or elements referenced by the aria-describedby comprise the entire description. Include ID references to multiple elements if necessary, or enclose a set of elements (e.g., paragraphs) with the element referenced by the ID.</p> </div> <table class="property-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="property-related-head" scope="row">Related Concepts:</th> <td class="property-related"> <ul> <li><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/forms.html#the-label-element">label</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></li> <li>online help</li> <li><abbr title="Hypertext Markup Language">HTML</abbr> table cell headers</li> </ul> </td> </tr> <tr> <th class="property-applicability-head" scope="row">Used in Roles:</th> <td class="property-applicability">All elements of the base markup</td> </tr> <tr> <th class="property-value-head" scope="row">Value:</th> <td class="property-value"><a href="#valuetype_idref_list">ID reference list</a></td> </tr> </tbody> </table> </section> <section class="property notoc" id="aria-description"> <h4><span class="property-name" title="aria-description" aria-describedby="desc-aria-description"><code>aria-description</code> <span class="type-indicator">property</span></span></h4> <div class="property-description" id="desc-aria-description" role="definition"> <p><a href="#dfn-defines" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-defines-9">Defines</a> a string value that describes or annotates the current element. See related <a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a>.</p> <p>The <a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a> attribute is similar to <a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a> in that both provide a flat string to associate with the element (an accessible description, and name, respectively). Unlike an accessible name, which is generally preferred to be concise, a description can provide more verbose information, as necessary.</p> <p>The purpose of <a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a> is the same as that of <a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a>. It provides the user with additional descriptive text for the object. The most common <a href="#dfn-accessibility-api" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-api-24">accessibility <abbr title="Application Programing Interfaces">API</abbr></a> mapping for a description is the <a class="informative" data-link-type="dfn" href="https://www.w3.org/TR/accname-1.2/#dfn-accessible-description">accessible description</a> property. User agents <em class="rfc2119">MUST</em> give precedence to <a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a> over <a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a> when computing the accessible description property.</p> <p>In cases where providing a visible description is not the desired user experience, authors <em class="rfc2119">MAY</em> set the accessible description of the element using <a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a>. However, if the description text is available in the <abbr title="Document Object Model">DOM</abbr>, authors <em class="rfc2119">SHOULD NOT</em> use <a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a>, but should use one of the following instead:</p> <ul> <li>Authors <em class="rfc2119">SHOULD</em> use <a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a> when the related description or annotation elements contain a simple, small description that is best experienced as a flat string, rather than by having the user navigate to them.</li> <li>Authors <em class="rfc2119">SHOULD</em> use <a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a> when the related description or annotation elements contain useful semantics or structure, or there is a lot of content within them, making it difficult to experience as a flat string. Using <a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a> will allow assistive technology users to visit the structured content and provide additional navigation commands, making it easier to understand the structure, or to experience the information in smaller pieces.</li> </ul> </div> <table class="property-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="property-related-head" scope="row">Related Concepts:</th> <td class="property-related"><code><code><a data-link-type="element-attr" href="https://html.spec.whatwg.org/multipage/dom.html#attr-title">title</a></code></code> attribute in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="property-applicability-head" scope="row">Used in Roles:</th> <td class="property-applicability">All elements of the base markup</td> </tr> <tr> <th class="property-value-head" scope="row">Value:</th> <td class="property-value"><a href="#valuetype_string">string</a></td> </tr> </tbody> </table> </section> <section class="property notoc" id="aria-details"> <h4><span class="property-name" title="aria-details" aria-describedby="desc-aria-details"><code>aria-details</code> <span class="type-indicator">property</span></span></h4> <div class="property-description" id="desc-aria-details" role="definition"> <p><a href="#dfn-identifies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-identifies-6">Identifies</a> the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> (or elements) that provide additional information related to the <a href="#dfn-object" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-object-18">object</a>. See related <a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a>.</p> <p>The <code>aria-details</code> property is for referencing elements that provide more detailed information than would normally be provided via <a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a>. The presence of <code>aria-details</code> enables <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-66">assistive technologies</a> to make users aware of the availability of extended information and navigate to it. Authors <em class="rfc2119">SHOULD</em> ensure that elements referenced by <code>aria-details</code> are visible to all users.</p> <p>Assistive technologies can use the role of elements referenced by the <code>aria-details</code> property to help users understand the types of information associated with the element. Authors <em class="rfc2119">MAY</em> convey the type of details associated with an element as follows:</p> <ul> <li>Comment: <code>aria-details</code> refers to an element with role <a href="https://w3c.github.io/aria/#comment" class="role-reference"><code>comment</code></a>.</li> <li>Definition: <code>aria-details</code> is applied to an element with role <a href="https://w3c.github.io/aria/#term" class="role-reference"><code>term</code></a> and refers to an element with role <a href="https://w3c.github.io/aria/#definition" class="role-reference"><code>definition</code></a>.</li> <li>Caption: <code>aria-details</code> is applied to an element with role <a href="https://w3c.github.io/aria/#figure" class="role-reference"><code>figure</code></a> and refers to an element with role <a href="https://w3c.github.io/aria/#caption" class="role-reference"><code>caption</code></a>, or an element within a <code>caption</code>.</li> <li>Footnote: <code>aria-details</code> refers to an element with role <code>doc-footnote</code>. This role is defined in [<cite><a class="bibref" data-link-type="biblio" href="#bib-dpub-aria-1.0" title="Digital Publishing WAI-ARIA Module 1.0">DPUB-ARIA-1.0</a></cite>].</li> <li>Endnote: <code>aria-details</code> refers to an element with role <code>doc-endnote</code>. This role is defined in [<cite><a class="bibref" data-link-type="biblio" href="#bib-dpub-aria-1.0" title="Digital Publishing WAI-ARIA Module 1.0">DPUB-ARIA-1.0</a></cite>].</li> <li>Description or general annotation: <code>aria-details</code> refers to an element with any other role.</li> </ul> <p>Unlike elements referenced by <code>aria-describedby</code>, elements referenced by <code>aria-details</code> are not used in the Accessible <a href="https://w3c.github.io/accname/#mapping_additional_nd_description" class="accname">Description Computation</a> as defined in the Accessible Name and Description specification. Thus, the content of elements referenced by <code>aria-details</code> are not flattened to a string when presented to assistive technology users. This makes <code>aria-details</code> particularly useful when converting the information to a string would cause a loss of information or make the extended information more difficult to understand.</p> <p>The <code>aria-details</code> property supports referring to multiple elements. For example, a paragraph in a document editor might reference multiple comments that are not related to each other. If a user agent relies on an accessibility <abbr title="application programming interface">API</abbr> that does not support exposing multiple descriptive relations, the user agent <em class="rfc2119">SHOULD</em> expose the relationship to the first element referenced by <code>aria-details</code>.</p> <p>It is valid for an element to have both <code>aria-details</code> and a description specified with either <code>aria-describedby</code> or <code>aria-description</code>. If a user agent relies on an accessibility <abbr title="application programming interface">API</abbr> that does not support exposing multiple descriptive relations, and if an element has both <code>aria-details</code> and <a href="https://w3c.github.io/aria/#aria-describedby" class="role-reference"><code>aria-describedby</code></a>, the user agent <em class="rfc2119">SHOULD</em> expose the <code>aria-details</code> relation and the description string computed from the <a href="https://w3c.github.io/aria/#aria-describedby" class="role-reference"><code>aria-describedby</code></a> relationship.</p> <p>A common use for <code>aria-details</code> is in digital publishing where an extended description needs to be conveyed in a book that requires structural markup or the embedding of other technology to provide illustrative content. The following example demonstrates this scenario.</p> <div class="example" id="example-31"> <div class="marker"> <a class="self-link" href="#example-31">Example<bdi> 31</bdi></a> </div> <pre class="highlight" aria-busy="false"><code class="hljs xml"><span class="hljs-comment"></span> <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"pythagorean.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Pythagorean Theorem"</span> <span class="hljs-attr">aria-details</span>=<span class="hljs-string">"det"</span>></span> <span class="hljs-tag"><<span class="hljs-name">details</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"det"</span>></span> <span class="hljs-tag"><<span class="hljs-name">summary</span>></span>Example<span class="hljs-tag"></<span class="hljs-name">summary</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span>></span> The Pythagorean Theorem is a relationship in Euclidean Geometry between the three sides of a right triangle, where the square of the hypotenuse is the sum of the squares of the two opposing sides. <span class="hljs-tag"></<span class="hljs-name">p</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span>></span> The following drawing illustrates an application of the Pythagorean Theorem when used to construct a skateboard ramp. <span class="hljs-tag"></<span class="hljs-name">p</span>></span> <span class="hljs-tag"><<span class="hljs-name">object</span> <span class="hljs-attr">data</span>=<span class="hljs-string">"skatebd-ramp.svg"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"image/svg+xml"</span>></span><span class="hljs-tag"></<span class="hljs-name">object</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span>></span> In this example you will notice a skateboard ramp with a base and vertical board whose width is the width of the ramp. To compute how long the ramp must be, simply calculate the base length, square it, sum it with the square of the height of the ramp, and take the square root of the sum. <span class="hljs-tag"></<span class="hljs-name">p</span>></span> <span class="hljs-tag"></<span class="hljs-name">details</span>></span></code></pre> </div> <p>Alternatively, <code>aria-details</code> can refer to a link to a web page having the extended description, as shown in the following example.</p> <div class="example" id="example-32"> <div class="marker"> <a class="self-link" href="#example-32">Example<bdi> 32</bdi></a> </div> <pre class="highlight" aria-busy="false"><code class="hljs xml"><span class="hljs-comment"></span> <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"pythagorean.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Pythagorean Theorem"</span> <span class="hljs-attr">aria-details</span>=<span class="hljs-string">"det"</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span>></span> See an <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"http://foo.com/pt.html"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"det"</span>></span>Application of the Pythagorean Theorem<span class="hljs-tag"></<span class="hljs-name">a</span>></span>. <span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre> </div> </div> <table class="property-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="property-applicability-head" scope="row">Used in Roles:</th> <td class="property-applicability">All elements of the base markup</td> </tr> <tr> <th class="property-value-head" scope="row">Value:</th> <td class="property-value"><a href="#valuetype_idref_list">ID reference list</a></td> </tr> </tbody> </table> </section> <section class="state notoc" id="aria-disabled"> <h4><span class="state-name" title="aria-disabled" aria-describedby="desc-aria-disabled"><code>aria-disabled</code> <span class="type-indicator">state</span></span></h4> <div class="state-description" id="desc-aria-disabled" role="definition"> <p><a href="#dfn-indicates" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-indicates-8">Indicates</a> that the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> is <a href="#dfn-perceivable" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-perceivable-6">perceivable</a> but disabled, so it is not editable or otherwise <a href="#dfn-operable" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-operable-3">operable</a>. See related <a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> and <a href="https://w3c.github.io/aria/#aria-readonly" class="property-reference"><code>aria-readonly</code></a>.</p> <p>For example, irrelevant options in a radio group can be disabled. Disabled elements might not receive focus from the tab order. For some disabled elements, applications might choose not to support navigation to descendants. In addition to setting the <a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> attribute, authors <em class="rfc2119">SHOULD</em> change the appearance (grayed out, etc.) to indicate that the item has been disabled.</p> <p>The <a href="#dfn-state" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-state-27">state</a> of being disabled applies to the element with aria-disabled and all focusable descendant elements of the element on which the <a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attribute</a> is applied.</p> <div class="note" role="note" id="issue-container-generatedID-43"><div role="heading" class="note-title marker" id="h-note-43" aria-level="4"><span>Note</span></div><p class="">While <a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> and proper scripting can successfully disable an element with role <a href="https://w3c.github.io/aria/#link" class="role-reference"><code>link</code></a>, fully disabling a host language equivalent can be problematic. Authors are advised not to use <a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> on elements that cannot be disabled through features of the host language alone.</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="4"><span>Note</span><span class="issue-label">: Usage on columnheader, rowheader and row</span></div><p class="">While <a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a> is currently supported on <a href="https://w3c.github.io/aria/#columnheader" class="role-reference"><code>columnheader</code></a>, <a href="https://w3c.github.io/aria/#rowheader" class="role-reference"><code>rowheader</code></a>, and <a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a>, in a future version the working group plans to prohibit its use on elements with any of those three roles except when they are in the context of a <a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a> or <a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></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="4"><span>Note</span></div><p class="">This state is being deprecated as a global state in <abbr title="Accessible Rich Internet Applications">ARIA</abbr> 1.2. In future versions it will only be allowed on roles where it is specifically supported.</p></div> </div> <table class="state-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="state-applicability-head" scope="row">Used in Roles:</th> <td class="state-applicability"><ul> <li><a href="https://w3c.github.io/aria/#application" class="role-reference"><code>application</code></a></li> <li><a href="https://w3c.github.io/aria/#button" class="role-reference"><code>button</code></a></li> <li><a href="https://w3c.github.io/aria/#composite" class="role-reference"><code>composite</code></a></li> <li><a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a></li> <li><a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a></li> <li><a href="https://w3c.github.io/aria/#input" class="role-reference"><code>input</code></a></li> <li><a href="https://w3c.github.io/aria/#link" class="role-reference"><code>link</code></a></li> <li><a href="https://w3c.github.io/aria/#menuitem" class="role-reference"><code>menuitem</code></a></li> <li><a href="https://w3c.github.io/aria/#scrollbar" class="role-reference"><code>scrollbar</code></a></li> <li><a href="https://w3c.github.io/aria/#separator" class="role-reference"><code>separator</code></a></li> <li><a href="https://w3c.github.io/aria/#tab" class="role-reference"><code>tab</code></a></li> </ul> </td> </tr> <tr> <th class="state-descendants-head" scope="row">Inherits into Roles:</th> <td class="state-descendants"><ul> <li><a href="https://w3c.github.io/aria/#checkbox" class="role-reference"><code>checkbox</code></a></li> <li><a href="https://w3c.github.io/aria/#columnheader" class="role-reference"><code>columnheader</code></a></li> <li><a href="https://w3c.github.io/aria/#combobox" class="role-reference"><code>combobox</code></a></li> <li><a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a></li> <li><a href="https://w3c.github.io/aria/#listbox" class="role-reference"><code>listbox</code></a></li> <li><a href="https://w3c.github.io/aria/#menu" class="role-reference"><code>menu</code></a></li> <li><a href="https://w3c.github.io/aria/#menubar" class="role-reference"><code>menubar</code></a></li> <li><a href="https://w3c.github.io/aria/#menuitemcheckbox" class="role-reference"><code>menuitemcheckbox</code></a></li> <li><a href="https://w3c.github.io/aria/#menuitemradio" class="role-reference"><code>menuitemradio</code></a></li> <li><a href="https://w3c.github.io/aria/#option" class="role-reference"><code>option</code></a></li> <li><a href="https://w3c.github.io/aria/#radio" class="role-reference"><code>radio</code></a></li> <li><a href="https://w3c.github.io/aria/#radiogroup" class="role-reference"><code>radiogroup</code></a></li> <li><a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a></li> <li><a href="https://w3c.github.io/aria/#rowheader" class="role-reference"><code>rowheader</code></a></li> <li><a href="https://w3c.github.io/aria/#searchbox" class="role-reference"><code>searchbox</code></a></li> <li><a href="https://w3c.github.io/aria/#select" class="role-reference"><code>select</code></a></li> <li><a href="https://w3c.github.io/aria/#slider" class="role-reference"><code>slider</code></a></li> <li><a href="https://w3c.github.io/aria/#spinbutton" class="role-reference"><code>spinbutton</code></a></li> <li><a href="https://w3c.github.io/aria/#switch" class="role-reference"><code>switch</code></a></li> <li><a href="https://w3c.github.io/aria/#tablist" class="role-reference"><code>tablist</code></a></li> <li><a href="https://w3c.github.io/aria/#textbox" class="role-reference"><code>textbox</code></a></li> <li><a href="https://w3c.github.io/aria/#toolbar" class="role-reference"><code>toolbar</code></a></li> <li><a href="https://w3c.github.io/aria/#tree" class="role-reference"><code>tree</code></a></li> <li><a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a></li> <li><a href="https://w3c.github.io/aria/#treeitem" class="role-reference"><code>treeitem</code></a></li> </ul> </td> </tr> <tr> <th class="state-value-head" scope="row">Value:</th> <td class="state-value"><a href="#valuetype_true-false">true/false</a></td> </tr> </tbody> </table> <table class="value-descriptions"> <caption>Values:</caption> <thead> <tr> <th scope="col">Value</th> <th scope="col">Description</th> </tr> </thead> <tbody> <tr> <th class="value-name" scope="row"><strong class="default">false (default)</strong></th> <td class="value-description">The element is enabled.</td> </tr> <tr> <th class="value-name" scope="row">true</th> <td class="value-description">The element and all focusable descendants are disabled and its value cannot be changed by the user.</td> </tr> </tbody> </table> </section> <section class="property deprecated notoc" id="aria-dropeffect"> <h4><span class="property-name" title="aria-dropeffect" aria-describedby="desc-aria-dropeffect"><code>aria-dropeffect</code> <span class="type-indicator">property</span></span></h4> <div class="property-description" id="desc-aria-dropeffect" role="definition"> <p>[Deprecated in <abbr title="Accessible Rich Internet Applications">ARIA</abbr> 1.1] Indicates what functions can be performed when a dragged object is released on the drop target.</p> <div class="note" role="note" id="issue-container-generatedID-46"><div role="heading" class="note-title marker" id="h-note-46" aria-level="4"><span>Note</span></div><p class="">The <code>aria-dropeffect</code> property is expected to be replaced by a new feature in a future version of <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr>. Authors are therefore advised to treat <code>aria-dropeffect</code> as <a href="#dfn-deprecated" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-deprecated-1">deprecated</a>.</p></div> <p>This <a data-link-type="dfn|abstract-op" href="#dfn-property" class="internalDFN" id="ref-for-dfn-property-22">property</a> allows assistive technologies to convey the possible drag options available to users, including whether a pop-up menu of choices is provided by the application. Typically, drop effect functions can only be provided once an object has been grabbed for a drag operation as the drop effect functions available are dependent on the object being dragged.</p> <p>More than one drop effect can be supported for a given <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a>. Therefore, the value of this <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attribute</a> is a space-separated set of tokens indicating the possible effects, or <code>none</code> if there is no supported operation. In addition to setting the <a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a> attribute, authors <em class="rfc2119">SHOULD</em> show a visual indication of potential drop targets.</p> </div> <table class="property-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="property-applicability-head" scope="row">Used in Roles:</th> <td class="property-applicability">All elements of the base markup</td> </tr> <tr> <th class="property-value-head" scope="row">Value:</th> <td class="property-value"><a href="#valuetype_token_list">token list</a></td> </tr> </tbody> </table> <table class="value-descriptions"> <caption>Values:</caption> <thead> <tr> <th scope="col">Value</th> <th scope="col">Description</th> </tr> </thead> <tbody> <tr> <th class="value-name" scope="row">copy</th> <td class="value-description">A duplicate of the source object will be dropped into the target.</td> </tr> <tr> <th class="value-name" scope="row">execute</th> <td class="value-description">A function supported by the drop target is executed, using the drag source as an input.</td> </tr> <tr> <th class="value-name" scope="row">link</th> <td class="value-description">A reference or shortcut to the dragged object will be created in the target object.</td> </tr> <tr> <th class="value-name" scope="row">move</th> <td class="value-description">The source object will be removed from its current location and dropped into the target.</td> </tr> <tr> <th class="value-name" scope="row"><strong class="default">none (default)</strong></th> <td class="value-description">No operation can be performed; effectively cancels the drag operation if an attempt is made to drop on this object. Ignored if combined with any other token value. e.g., 'none copy' is equivalent to a 'copy' value.</td> </tr> <tr> <th class="value-name" scope="row">popup</th> <td class="value-description">There is a popup menu or dialog that allows the user to choose one of the drag operations (copy, move, link, execute) and any other drag functionality, such as cancel.</td> </tr> </tbody> </table> </section> <section class="property notoc" id="aria-errormessage"> <h4><span class="property-name" title="aria-errormessage" aria-describedby="desc-aria-errormessage"><code>aria-errormessage</code> <span class="type-indicator">property</span></span></h4> <div class="property-description" id="desc-aria-errormessage" role="definition"> <p><a href="#dfn-identifies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-identifies-7">Identifies</a> the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> (or elements) that provides an error message for an <a href="#dfn-object" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-object-19">object</a>. See related <a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> and <a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a>.</p> <p>The <code>aria-errormessage</code> attribute references other elements that contain error message text. Authors <em class="rfc2119">MUST</em> use <a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> in conjunction with <code>aria-errormessage</code>.</p> <p>When the value of an object is not valid, <a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> is set to <code>true</code>, which indicates that the message contained by elements referenced by <code>aria-errormessage</code> is pertinent.</p> <p>When an object is in a valid state, it has either <a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> set to <code>false</code> or it does not have the <a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> attribute. Authors <em class="rfc2119">MAY</em> use <code>aria-errormessage</code> on an object that is currently valid, but only if the elements referenced by <code>aria-errormessage</code> are <a data-link-type="dfn|abstract-op" href="#dfn-hide-from-all-users" class="internalDFN" id="ref-for-dfn-hide-from-all-users-7">hidden from all users</a>, because the message they contain is not pertinent.</p> <p>When <code>aria-errormessage</code> is pertinent, authors <em class="rfc2119">MUST</em> ensure the content is not <a data-link-type="dfn|abstract-op" href="#dfn-hide-from-all-users" class="internalDFN" id="ref-for-dfn-hide-from-all-users-8">hidden from all users</a> so users can navigate to and examine the error message. Similarly, when <code>aria-errormessage</code> is not pertinent, authors <em class="rfc2119">MUST</em> either ensure the content is <a data-link-type="dfn|abstract-op" href="#dfn-hide-from-all-users" class="internalDFN" id="ref-for-dfn-hide-from-all-users-9">hidden from all users</a> or remove the <code>aria-errormessage</code> attribute or its value.</p> <p>User agents <em class="rfc2119">MUST NOT</em> expose <code>aria-errormessage</code> for an object with an <a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> value of <code>false</code>.</p> <p>Authors <em class="rfc2119">MAY</em> call attention to a newly rendered error message with a live region by either applying an <a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a> property or using one of the <a href="#live_region_roles">live region roles</a>, such as <a href="https://w3c.github.io/aria/#alert" class="role-reference"><code>alert</code></a>. A live region is appropriate when an error message is displayed to users after they have provided an invalid value.</p> <p>A typical message describes what is wrong and informs users what is required. For example, an error message might be, <q>Invalid time: the time must be between 9:00 AM and 5:00 PM.</q> The following example code shows markup for an initial valid state and for a subsequent invalid state. Note the changes to <a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> on the text input <a href="#dfn-object" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-object-20">object</a>, and to <a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a> on the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> containing the text of the error message:</p> <div class="example" id="example-33"> <div class="marker"> <a class="self-link" href="#example-33">Example<bdi> 33</bdi></a> </div> <pre class="highlight" aria-busy="false"><code class="hljs xml"><span class="hljs-comment"></span> <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"startTime"</span>></span> Please enter a start time for the meeting: <span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"startTime"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">aria-errormessage</span>=<span class="hljs-string">"msgID"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">""</span> <span class="hljs-attr">aria-invalid</span>=<span class="hljs-string">"false"</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"msgID"</span> <span class="hljs-attr">aria-live</span>=<span class="hljs-string">"assertive"</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"visibility:hidden"</span>></span>Invalid time: the time must be between 9:00 AM and 5:00 PM<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-comment"></span> <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"startTime"</span>></span> Please enter a start time for the meeting: <span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"startTime"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">aria-errormessage</span>=<span class="hljs-string">"msgID"</span> <span class="hljs-attr">aria-invalid</span>=<span class="hljs-string">"true"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"11:30 PM"</span> ></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"msgID"</span> <span class="hljs-attr">aria-live</span>=<span class="hljs-string">"assertive"</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"visibility:visible"</span>></span>Invalid time: the time must be between 9:00 AM and 5:00 PM<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span></code></pre> </div> <div class="note" role="note" id="issue-container-generatedID-47"><div role="heading" class="note-title marker" id="h-note-47" aria-level="4"><span>Note</span></div><p class="">This example uses <code>aria-live="assertive"</code> to indicate that assistive technologies should immediately announce the error message rather than completing other queued announcements first. This increases the likelihood that users are aware of the error message before they move focus out of the input.</p></div> <div class="note" role="note" id="issue-container-generatedID-48"><div role="heading" class="note-title marker" id="h-note-48" aria-level="4"><span>Note</span></div><p class="">This state is being deprecated as a global state in <abbr title="Accessible Rich Internet Applications">ARIA</abbr> 1.2. In future versions it will only be allowed on roles where it is specifically supported.</p></div> </div> <table class="property-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="property-applicability-head" scope="row">Used in Roles:</th> <td class="property-applicability"><ul> <li><a href="https://w3c.github.io/aria/#application" class="role-reference"><code>application</code></a></li> <li><a href="https://w3c.github.io/aria/#checkbox" class="role-reference"><code>checkbox</code></a></li> <li><a href="https://w3c.github.io/aria/#combobox" class="role-reference"><code>combobox</code></a></li> <li><a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a></li> <li><a href="https://w3c.github.io/aria/#listbox" class="role-reference"><code>listbox</code></a></li> <li><a href="https://w3c.github.io/aria/#radiogroup" class="role-reference"><code>radiogroup</code></a></li> <li><a href="https://w3c.github.io/aria/#slider" class="role-reference"><code>slider</code></a></li> <li><a href="https://w3c.github.io/aria/#spinbutton" class="role-reference"><code>spinbutton</code></a></li> <li><a href="https://w3c.github.io/aria/#textbox" class="role-reference"><code>textbox</code></a></li> <li><a href="https://w3c.github.io/aria/#tree" class="role-reference"><code>tree</code></a></li> </ul> </td> </tr> <tr> <th class="property-descendants-head" scope="row">Inherits into Roles:</th> <td class="property-descendants"><ul> <li><a href="https://w3c.github.io/aria/#columnheader" class="role-reference"><code>columnheader</code></a></li> <li><a href="https://w3c.github.io/aria/#rowheader" class="role-reference"><code>rowheader</code></a></li> <li><a href="https://w3c.github.io/aria/#searchbox" class="role-reference"><code>searchbox</code></a></li> <li><a href="https://w3c.github.io/aria/#switch" class="role-reference"><code>switch</code></a></li> <li><a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a></li> </ul> </td> </tr> <tr> <th class="property-value-head" scope="row">Value:</th> <td class="property-value"><a href="#valuetype_idref_list">ID reference list</a></td> </tr> </tbody> </table> </section> <section class="state notoc" id="aria-expanded"> <h4><span class="state-name" title="aria-expanded" aria-describedby="desc-aria-expanded"><code>aria-expanded</code> <span class="type-indicator">state</span></span></h4> <div class="state-description" id="desc-aria-expanded" role="definition"> <p><a href="#dfn-indicates" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-indicates-9">Indicates</a> whether a grouping element that is the <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-child-41">accessibility child</a> of or is controlled by this element is expanded or collapsed.</p> <p>The <a href="https://w3c.github.io/aria/#aria-expanded" class="state-reference"><code>aria-expanded</code></a> attribute is applied to a focusable, interactive element that toggles visibility of content in another element. For example, it is applied to a parent <a href="https://w3c.github.io/aria/#treeitem" class="role-reference"><code>treeitem</code></a> to indicate whether its child branch of the tree is shown. Similarly, it can be applied to a <a href="https://w3c.github.io/aria/#button" class="role-reference"><code>button</code></a> that controls visibility of a section of page content.</p> <p>If a grouping container that can be expanded or collapsed is not the <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-child-42">accessibility child</a> of the element that has the <a href="https://w3c.github.io/aria/#aria-expanded" class="state-reference"><code>aria-expanded</code></a> attribute, the author <em class="rfc2119">SHOULD</em> identify the controlling relationship by referencing the container from the element that has <a href="https://w3c.github.io/aria/#aria-expanded" class="state-reference"><code>aria-expanded</code></a> with the <a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a> property.</p> </div> <table class="state-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="state-applicability-head" scope="row">Used in Roles:</th> <td class="state-applicability"><ul> <li><a href="https://w3c.github.io/aria/#application" class="role-reference"><code>application</code></a></li> <li><a href="https://w3c.github.io/aria/#button" class="role-reference"><code>button</code></a></li> <li><a href="https://w3c.github.io/aria/#checkbox" class="role-reference"><code>checkbox</code></a></li> <li><a href="https://w3c.github.io/aria/#combobox" class="role-reference"><code>combobox</code></a></li> <li><a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a></li> <li><a href="https://w3c.github.io/aria/#link" class="role-reference"><code>link</code></a></li> <li><a href="https://w3c.github.io/aria/#listbox" class="role-reference"><code>listbox</code></a></li> <li><a href="https://w3c.github.io/aria/#menuitem" class="role-reference"><code>menuitem</code></a></li> <li><a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a></li> <li><a href="https://w3c.github.io/aria/#rowheader" class="role-reference"><code>rowheader</code></a></li> <li><a href="https://w3c.github.io/aria/#tab" class="role-reference"><code>tab</code></a></li> <li><a href="https://w3c.github.io/aria/#treeitem" class="role-reference"><code>treeitem</code></a></li> </ul> </td> </tr> <tr> <th class="state-descendants-head" scope="row">Inherits into Roles:</th> <td class="state-descendants"><ul> <li><a href="https://w3c.github.io/aria/#columnheader" class="role-reference"><code>columnheader</code></a></li> <li><a href="https://w3c.github.io/aria/#menuitemcheckbox" class="role-reference"><code>menuitemcheckbox</code></a></li> <li><a href="https://w3c.github.io/aria/#menuitemradio" class="role-reference"><code>menuitemradio</code></a></li> <li><a href="https://w3c.github.io/aria/#rowheader" class="role-reference"><code>rowheader</code></a></li> <li><a href="https://w3c.github.io/aria/#switch" class="role-reference"><code>switch</code></a></li> </ul> </td> </tr> <tr> <th class="state-value-head" scope="row">Value:</th> <td class="state-value"><a href="#valuetype_true-false-undefined">true/false/undefined</a></td> </tr> </tbody> </table> <table class="value-descriptions"> <caption>Values:</caption> <thead> <tr> <th scope="col">Value</th> <th scope="col">Description</th> </tr> </thead> <tbody> <tr> <th class="value-name" scope="row">false</th> <td class="value-description">The grouping element this element controls or is the accessibility parent of is collapsed.</td> </tr> <tr> <th class="value-name" scope="row">true</th> <td class="value-description">The grouping element this element controls or is the accessibility parent of is expanded.</td> </tr> <tr> <th class="value-name" scope="row"><strong class="default">undefined (default)</strong></th> <td class="value-description">The element does not own or control a grouping element that is expandable.</td> </tr> </tbody> </table> </section> <section class="property notoc" id="aria-flowto"> <h4><span class="property-name" title="aria-flowto" aria-describedby="desc-aria-flowto"><code>aria-flowto</code> <span class="type-indicator">property</span></span></h4> <div class="property-description" id="desc-aria-flowto" role="definition"> <p><a href="#dfn-identifies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-identifies-8">Identifies</a> the next <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.</p> <p>When <a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a> has a single ID reference, it allows <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-67">assistive technologies</a> to, at the user's request, forego normal document reading order and go to the targeted <a href="#dfn-object" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-object-21">object</a>. However, when <a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a> is provided with multiple ID references, assistive technologies <em class="rfc2119">SHOULD</em> present the referenced elements as path choices.</p> <p>In the case of one or more ID references, <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agents</a> or assistive technologies <em class="rfc2119">SHOULD</em> give the user the option of navigating to any of the targeted elements. The name of the path can be determined by the name of the target element of the <a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attribute</a>. <a href="#dfn-accessibility-api" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-api-25">Accessibility <abbr title="Application Programing Interfaces">APIs</abbr></a> can provide named path <a href="#dfn-relationship" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-relationship-12">relationships</a>.</p> </div> <table class="property-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="property-applicability-head" scope="row">Used in Roles:</th> <td class="property-applicability">All elements of the base markup</td> </tr> <tr> <th class="property-value-head" scope="row">Value:</th> <td class="property-value"><a href="#valuetype_idref_list">ID reference list</a></td> </tr> </tbody> </table> </section> <section class="state deprecated notoc" id="aria-grabbed"> <h4><span class="state-name" title="aria-grabbed" aria-describedby="desc-aria-grabbed"><code>aria-grabbed</code> <span class="type-indicator">state</span></span></h4> <div class="state-description" id="desc-aria-grabbed" role="definition"> <p>[Deprecated in <abbr title="Accessible Rich Internet Applications">ARIA</abbr> 1.1] Indicates an element's "grabbed" <a href="#dfn-state" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-state-28">state</a> in a drag-and-drop operation.</p> <div class="note" role="note" id="issue-container-generatedID-49"><div role="heading" class="note-title marker" id="h-note-49" aria-level="4"><span>Note</span></div><p class="">The <code>aria-grabbed</code> state is expected to be replaced by a new feature in a future version of <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr>. Authors are therefore advised to treat <code>aria-grabbed</code> as <a href="#dfn-deprecated" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-deprecated-2">deprecated</a>.</p></div> <p>Setting <code>aria-grabbed</code> to <code>true</code> indicates that the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> has been selected for dragging. Setting <code>aria-grabbed</code> to <code>false</code> indicates that the element can be grabbed for a drag-and-drop operation, but is not currently grabbed. If <code>aria-grabbed</code> is unspecified or set to <code>undefined</code> (default), the element cannot be grabbed.</p> <p>When <a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> is set to <code>true</code>, authors <em class="rfc2119">SHOULD</em> update the <a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attribute</a> of all potential drop targets. When an element is not grabbed (the value is set to <code>false</code> or <code>undefined</code>, or the attribute is removed), authors <em class="rfc2119">SHOULD</em> revert the <a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a> attributes of the associated drop targets to <code>none</code>.</p> </div> <table class="state-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="state-applicability-head" scope="row">Used in Roles:</th> <td class="state-applicability">All elements of the base markup</td> </tr> <tr> <th class="state-value-head" scope="row">Value:</th> <td class="state-value"><a href="#valuetype_true-false-undefined">true/false/undefined</a></td> </tr> </tbody> </table> <table class="value-descriptions"> <caption>Values:</caption> <thead> <tr> <th scope="col">Value</th> <th scope="col">Description</th> </tr> </thead> <tbody> <tr> <th class="value-name" scope="row">false</th> <td class="value-description">Indicates that the element supports being dragged.</td> </tr> <tr> <th class="value-name" scope="row">true</th> <td class="value-description">Indicates that the element has been "grabbed" for dragging.</td> </tr> <tr> <th class="value-name" scope="row"><strong class="default">undefined (default)</strong></th> <td class="value-description">Indicates that the element does not support being dragged.</td> </tr> </tbody> </table> </section> <section class="property notoc" id="aria-haspopup"> <h4><span class="property-name" title="aria-haspopup" aria-describedby="desc-aria-haspopup"><code>aria-haspopup</code> <span class="type-indicator">property</span></span></h4> <div class="property-description" id="desc-aria-haspopup" role="definition"> <p><a href="#dfn-indicates" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-indicates-10">Indicates</a> the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a>.</p> <p>A popup element usually appears as a block of content that is on top of other content. Authors <em class="rfc2119">MUST</em> ensure that the role of the element that serves as the container for the popup content is <a href="https://w3c.github.io/aria/#menu" class="role-reference"><code>menu</code></a>, <a href="https://w3c.github.io/aria/#listbox" class="role-reference"><code>listbox</code></a>, <a href="https://w3c.github.io/aria/#tree" class="role-reference"><code>tree</code></a>, <a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a>, or <a href="https://w3c.github.io/aria/#dialog" class="role-reference"><code>dialog</code></a>, and that the value of <code>aria-haspopup</code> matches the role of the popup container.</p> <p>For the popup element to be keyboard accessible, authors <em class="rfc2119">SHOULD</em> ensure that the element that can trigger the popup is focusable, that there is a keyboard mechanism for opening the popup, and that the popup element manages focus of all its descendants as described in <a href="#managingfocus">Managing Focus</a>.</p> <p>The <code>aria-haspopup</code> property is a token type. <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">User agents</a> <em class="rfc2119">MUST</em> treat any value of <code>aria-haspopup</code> that is not included in the list of allowed values, including the empty string, as if the value <code>false</code> had been provided. To provide backward compatibility with <abbr title="Accessible Rich Internet Applications">ARIA</abbr> 1.0 content, user agents <em class="rfc2119">MUST</em> treat an <code>aria-haspopup</code> value of <code>true</code> as equivalent to a value of <code>menu</code>.</p> <p><a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-68">Assistive technologies</a> and user agents <em class="rfc2119">SHOULD NOT</em> expose the <code>aria-haspopup</code> property if it has a value of <code>false</code>.</p> <div class="note" role="note" id="issue-container-generatedID-50"><div role="heading" class="note-title marker" id="h-note-50" aria-level="4"><span>Note</span></div><p class="">A <a href="https://w3c.github.io/aria/#tooltip" class="role-reference"><code>tooltip</code></a> is not considered to be a popup in this context.</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="4"><span>Note</span></div><p class=""><code>aria-haspopup</code> is most relevant to use when there is a visual indicator in the element that triggers the popup. For example, many controls styled with a downward pointing triangle, chevron, or ellipsis (three consecutive dots) have become standard visual indicators that a popup will display when the control is activated. If some functional difference is relevant to display to a sighted user by means of a different visual style, that functional difference is usually relevant to convey to users of assistive technology. If there is no visual indication that an element will trigger a popup, authors are advised to consider whether use of <code>aria-haspopup</code> is necessary, and avoid using it when it's not. </p></div> <div class="note" role="note" id="issue-container-generatedID-52"><div role="heading" class="note-title marker" id="h-note-52" aria-level="4"><span>Note</span></div><p class="">This property is being deprecated as a global property in <abbr title="Accessible Rich Internet Applications">ARIA</abbr> 1.2. In future versions it will only be allowed on roles where it is specifically supported.</p></div> </div> <table class="property-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="property-related-head" scope="row">Related Concepts:</th> <td class="property-related"> <a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a> </td> </tr> <tr> <th class="property-applicability-head" scope="row">Used in Roles:</th> <td class="property-applicability"><ul> <li><a href="https://w3c.github.io/aria/#application" class="role-reference"><code>application</code></a></li> <li><a href="https://w3c.github.io/aria/#button" class="role-reference"><code>button</code></a></li> <li><a href="https://w3c.github.io/aria/#combobox" class="role-reference"><code>combobox</code></a></li> <li><a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a></li> <li><a href="https://w3c.github.io/aria/#link" class="role-reference"><code>link</code></a></li> <li><a href="https://w3c.github.io/aria/#menuitem" class="role-reference"><code>menuitem</code></a></li> <li><a href="https://w3c.github.io/aria/#slider" class="role-reference"><code>slider</code></a></li> <li><a href="https://w3c.github.io/aria/#tab" class="role-reference"><code>tab</code></a></li> <li><a href="https://w3c.github.io/aria/#textbox" class="role-reference"><code>textbox</code></a></li> <li><a href="https://w3c.github.io/aria/#treeitem" class="role-reference"><code>treeitem</code></a></li> </ul> </td> </tr> <tr> <th class="property-descendants-head" scope="row">Inherits into Roles:</th> <td class="property-descendants"><ul> <li><a href="https://w3c.github.io/aria/#columnheader" class="role-reference"><code>columnheader</code></a></li> <li><a href="https://w3c.github.io/aria/#menuitemcheckbox" class="role-reference"><code>menuitemcheckbox</code></a></li> <li><a href="https://w3c.github.io/aria/#menuitemradio" class="role-reference"><code>menuitemradio</code></a></li> <li><a href="https://w3c.github.io/aria/#rowheader" class="role-reference"><code>rowheader</code></a></li> <li><a href="https://w3c.github.io/aria/#searchbox" class="role-reference"><code>searchbox</code></a></li> </ul> </td> </tr> <tr> <th class="property-value-head" scope="row">Value:</th> <td class="property-value"><a href="#valuetype_token">token</a></td> </tr> </tbody> </table> <table class="value-descriptions"> <caption>Values:</caption> <thead> <tr> <th scope="col">Value</th> <th scope="col">Description</th> </tr> </thead> <tbody> <tr> <th class="value-name" scope="row"><strong class="default">false (default)</strong></th> <td class="value-description">Indicates the element does not have a popup.</td> </tr> <tr> <th class="value-name" scope="row">true</th> <td class="value-description">Indicates the popup is a <a href="https://w3c.github.io/aria/#menu" class="role-reference"><code>menu</code></a>.</td> </tr> <tr> <th class="value-name" scope="row">menu</th> <td class="value-description">Indicates the popup is a <a href="https://w3c.github.io/aria/#menu" class="role-reference"><code>menu</code></a>.</td> </tr> <tr> <th class="value-name" scope="row">listbox</th> <td class="value-description">Indicates the popup is a <a href="https://w3c.github.io/aria/#listbox" class="role-reference"><code>listbox</code></a>.</td> </tr> <tr> <th class="value-name" scope="row">tree</th> <td class="value-description">Indicates the popup is a <a href="https://w3c.github.io/aria/#tree" class="role-reference"><code>tree</code></a>.</td> </tr> <tr> <th class="value-name" scope="row">grid</th> <td class="value-description">Indicates the popup is a <a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a>.</td> </tr> <tr> <th class="value-name" scope="row">dialog</th> <td class="value-description">Indicates the popup is a <a href="https://w3c.github.io/aria/#dialog" class="role-reference"><code>dialog</code></a>.</td> </tr> </tbody> </table> </section> <section class="state notoc" id="aria-hidden"> <h4><span class="state-name" title="aria-hidden" aria-describedby="desc-aria-hidden"><code>aria-hidden</code> <span class="type-indicator">state</span></span></h4> <div class="state-description" id="desc-aria-hidden" role="definition"> <p><a href="#dfn-indicates" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-indicates-11">Indicates</a>, when set to <code>true</code>, that an <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> and its entire subtree are hidden from assistive technology, regardless of whether it is visibly rendered.</p> <p>User agents determine an element's <a data-link-type="dfn|abstract-op" href="#dfn-hidden" class="internalDFN" id="ref-for-dfn-hidden-3">hidden</a> status based on whether it is rendered, and the rendering is usually controlled by <abbr title="Cascading Style Sheets">CSS</abbr>. For example, an element whose <code>display</code> property is set to <code>none</code> is not rendered. An element is considered <a data-link-type="dfn|abstract-op" href="#dfn-hidden" class="internalDFN" id="ref-for-dfn-hidden-4">hidden</a> if it, or any of its ancestors are not rendered or have their <code>aria-hidden</code> attribute value set to <code>true</code>.</p> <p>Authors <em class="rfc2119">MUST NOT</em> use <code>aria-hidden</code> to hide the root element or the host language element that <a href="https://html.spec.whatwg.org/multipage/dom.html#represents">represents</a> the contents of the primary document in view. For instance, the <code>html</code> or <code>body</code> elements in an <abbr title="Hypertext Markup Language">HTML</abbr> document. Authors <em class="rfc2119">MAY</em>, with caution, use <code>aria-hidden</code> to hide visibly rendered content from assistive technologies <em>only</em> if the act of hiding this content is intended to improve the experience for users of assistive technologies by removing redundant or extraneous content. Authors using <code>aria-hidden</code> to hide visible content from screen readers <em class="rfc2119">MUST</em> ensure that identical or equivalent meaning and functionality is exposed to assistive technologies.</p> <div class="note" role="note" id="issue-container-generatedID-53"><div role="heading" class="note-title marker" id="h-note-53" aria-level="4"><span>Note</span></div><p class="">Authors are advised to use extreme caution and consider a wide range of disabilities when hiding visibly rendered content from assistive technologies. For example, a sighted, dexterity-impaired individual might use voice-controlled assistive technologies to access a visual interface. If an author hides visible link text "Go to checkout" and exposes similar, yet non-identical link text "Check out now" to the accessibility <abbr title="application programming interface">API</abbr>, the user might be unable to access the interface they perceive using voice control software. Similar problems can also arise for screen reader users. For example, a sighted telephone support technician might attempt to have the blind screen reader user click the "Go to checkout" link, which they might be unable to find using a type-ahead item search ("Go to…"), since that text would have been hidden by the use of the attribute.</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="4"><span>Note</span></div><p class="">As of <abbr title="Accessible Rich Internet Applications">ARIA</abbr> 1.3, <code><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a>="false"</code> is now synonymous with <code>aria-hidden="undefined"</code>.</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="4"><span>Note</span></div><p class="">The original intent for <code>aria-hidden="false"</code> was to allow user agents to expose content that was otherwise hidden from the accessibility tree. However, due to ambiguity in the specification and inconsistent browser support for the <code>false</code> value, the original intent is no longer supported.</p></div> <p>To prevent authors erroneously hiding entire window-rendered documents only to those using assistive technology, user agents <em class="rfc2119">MUST NOT</em> expose the hidden state to assistive technologies if it is specified on the root element or the host language element that <a href="https://html.spec.whatwg.org/multipage/dom.html#represents">represents</a> the contents of the primary document in view. For instance, the <code>html</code> or <code>body</code> elements in an <abbr title="Hypertext Markup Language">HTML</abbr> document, or the root <code>svg</code> element if it is rendered as its own primary document in the browser window. If authors were to specify <code>aria-hidden="true"</code> on the opening tag for an embedded document, for instance on a <code>math</code> or <code>svg</code> embedded within an <abbr title="Hypertext Markup Language">HTML</abbr> document, user agents would still be expected to hide these elements from assistive technologies.</p> </div> <table class="state-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="state-applicability-head" scope="row">Used in Roles:</th> <td class="state-applicability">All elements of the base markup</td> </tr> <tr> <th class="state-value-head" scope="row">Value:</th> <td class="state-value"><a href="#valuetype_true-false-undefined">true/false/undefined</a></td> </tr> </tbody> </table> <table class="value-descriptions"> <caption>Values:</caption> <thead> <tr> <th scope="col">Value</th> <th scope="col">Description</th> </tr> </thead> <tbody> <tr> <th class="value-name" scope="row">false</th> <td class="value-description">The element's <a data-link-type="dfn|abstract-op" href="#dfn-hidden" class="internalDFN" id="ref-for-dfn-hidden-5">hidden</a> state is determined by the user agent based on whether it is rendered. Synonym of <code>undefined</code>.</td> </tr> <tr> <th class="value-name" scope="row">true</th> <td class="value-description">The element is <a data-link-type="dfn|abstract-op" href="#dfn-hidden" class="internalDFN" id="ref-for-dfn-hidden-6">hidden</a> from the accessibility <abbr title="application programming interface">API</abbr>.</td> </tr> <tr> <th class="value-name" scope="row"><strong class="default">undefined (default)</strong></th> <td class="value-description">The element's <a data-link-type="dfn|abstract-op" href="#dfn-hidden" class="internalDFN" id="ref-for-dfn-hidden-7">hidden</a> state is determined by the user agent based on whether it is rendered.</td> </tr> </tbody> </table> </section> <section class="state notoc" id="aria-invalid"> <h4><span class="state-name" title="aria-invalid" aria-describedby="desc-aria-invalid"><code>aria-invalid</code> <span class="type-indicator">state</span></span></h4> <div class="state-description" id="desc-aria-invalid" role="definition"> <p><a href="#dfn-indicates" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-indicates-12">Indicates</a> the entered value does not conform to the format expected by the application. See related <a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a>.</p> <p>If the value is computed to be invalid or out-of-range, the author <em class="rfc2119">SHOULD</em> set this <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attribute</a> to <code>true</code>. <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agents</a> <em class="rfc2119">SHOULD</em> inform the user of the error. Authors <em class="rfc2119">SHOULD</em> provide suggestions for corrections if they are known.</p> <p>When the user attempts to submit data involving a field for which <a href="https://w3c.github.io/aria/#aria-required" class="property-reference"><code>aria-required</code></a> is <code>true</code>, authors <em class="rfc2119">MAY</em> use the <a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> attribute to signal there is an error. However, if the user has not attempted to submit the form, authors <em class="rfc2119">SHOULD NOT</em> set the <a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> attribute on required <a href="#dfn-widget" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-widget-25">widgets</a> simply because the user has not yet entered data.</p> <p>For future expansion, the <a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a> attribute is a token type. Any value not recognized in the list of allowed <span>values</span> <em class="rfc2119">MUST</em> be treated by user agents as if the value <code>true</code> had been provided. If the attribute is not present, or its value is <code>false</code>, or its value is the empty string, the default value of <code>false</code> applies.</p> <div class="note" role="note" id="issue-container-generatedID-56"><div role="heading" class="note-title marker" id="h-note-56" aria-level="4"><span>Note</span></div><p class="">This state is being deprecated as a global state in <abbr title="Accessible Rich Internet Applications">ARIA</abbr> 1.2. In future versions it will only be allowed on roles where it is specifically supported.</p></div> </div> <table class="state-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="state-applicability-head" scope="row">Used in Roles:</th> <td class="state-applicability"><ul> <li><a href="https://w3c.github.io/aria/#application" class="role-reference"><code>application</code></a></li> <li><a href="https://w3c.github.io/aria/#checkbox" class="role-reference"><code>checkbox</code></a></li> <li><a href="https://w3c.github.io/aria/#combobox" class="role-reference"><code>combobox</code></a></li> <li><a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a></li> <li><a href="https://w3c.github.io/aria/#listbox" class="role-reference"><code>listbox</code></a></li> <li><a href="https://w3c.github.io/aria/#radiogroup" class="role-reference"><code>radiogroup</code></a></li> <li><a href="https://w3c.github.io/aria/#slider" class="role-reference"><code>slider</code></a></li> <li><a href="https://w3c.github.io/aria/#spinbutton" class="role-reference"><code>spinbutton</code></a></li> <li><a href="https://w3c.github.io/aria/#textbox" class="role-reference"><code>textbox</code></a></li> <li><a href="https://w3c.github.io/aria/#tree" class="role-reference"><code>tree</code></a></li> </ul> </td> </tr> <tr> <th class="state-descendants-head" scope="row">Inherits into Roles:</th> <td class="state-descendants"><ul> <li><a href="https://w3c.github.io/aria/#columnheader" class="role-reference"><code>columnheader</code></a></li> <li><a href="https://w3c.github.io/aria/#rowheader" class="role-reference"><code>rowheader</code></a></li> <li><a href="https://w3c.github.io/aria/#searchbox" class="role-reference"><code>searchbox</code></a></li> <li><a href="https://w3c.github.io/aria/#switch" class="role-reference"><code>switch</code></a></li> <li><a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a></li> </ul> </td> </tr> <tr> <th class="state-value-head" scope="row">Value:</th> <td class="state-value"><a href="#valuetype_token">token</a></td> </tr> </tbody> </table> <table class="value-descriptions"> <caption>Values:</caption> <thead> <tr> <th scope="col">Value</th> <th scope="col">Description</th> </tr> </thead> <tbody> <tr> <th class="value-name" scope="row">grammar</th> <td class="value-description">A grammatical error was detected.</td> </tr> <tr> <th class="value-name" scope="row"><strong class="default">false (default)</strong></th> <td class="value-description">There are no detected errors in the value.</td> </tr> <tr> <th class="value-name" scope="row">spelling</th> <td class="value-description">A spelling error was detected.</td> </tr> <tr> <th class="value-name" scope="row">true</th> <td class="value-description">The value entered by the user has failed validation.</td> </tr> </tbody> </table> </section> <section class="property notoc" id="aria-keyshortcuts"> <h4><span class="property-name" title="aria-keyshortcuts" aria-describedby="desc-aria-keyshortcuts"><code>aria-keyshortcuts</code> <span class="type-indicator">property</span></span></h4> <div class="property-description" id="desc-aria-keyshortcuts" role="definition"> <p><a href="#dfn-defines" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-defines-10">Defines</a> keyboard shortcuts that an author has implemented to activate or give focus to an element.</p> <p>The value of the <code>aria-keyshortcuts</code> attribute is a space-separated list of keyboard shortcuts that can be pressed to activate a command or textbox widget. The keys defined in the shortcuts represent the physical keys pressed and not the actual characters generated. Each keyboard shortcut consists of one or more tokens delimited by the plus sign ("+") representing zero or more modifier keys and exactly one non-modifier key that must be pressed simultaneously to activate the given shortcut.</p> <p>Authors <em class="rfc2119">MUST</em> specify modifier keys exactly according to the <a href="https://www.w3.org/TR/uievents-key/"><abbr title="User Interface">UI</abbr> Events KeyboardEvent key Values</a> spec [<cite><a class="bibref" data-link-type="biblio" href="#bib-uievents-key" title="UI Events KeyboardEvent key Values">uievents-key</a></cite>] - for example, "Alt", "Control", "Shift", "Meta", or "AltGraph". Note that Meta corresponds to the Command key, and Alt to the Option key, on Apple computers.</p> <p>The valid names for non-modifier keys are any printable character such as "A", "B", "1", "2", "$", "Plus" for a plus sign, "Space" for the spacebar, or the names of any other non-modifier key specified in the <a href="https://www.w3.org/TR/uievents-key/"><abbr title="User Interface">UI</abbr> Events KeyboardEvent key Values</a> spec [<cite><a class="bibref" data-link-type="biblio" href="#bib-uievents-key" title="UI Events KeyboardEvent key Values">uievents-key</a></cite>] - for example, "Enter", "Tab", "ArrowRight", "PageDown", "Escape", or "F1". The use of "Space" for the spacebar is an exception to the <a href="https://www.w3.org/TR/uievents-key/"><abbr title="User Interface">UI</abbr> Events KeyboardEvent key Values</a> spec [<cite><a class="bibref" data-link-type="biblio" href="#bib-uievents-key" title="UI Events KeyboardEvent key Values">uievents-key</a></cite>] as the space or spacebar key is encoded as <code>' '</code> and would be treated as a whitespace character.</p> <p>Authors <em class="rfc2119">MUST</em> ensure modifier keys come first when they are part of a keyboard shortcut. Authors <em class="rfc2119">MUST</em> ensure that required non-modifier keys come last when they are part of a shortcut. The order of the modifier keys is not otherwise significant, so "Alt+Shift+T" and "Shift+Alt+T" are equivalent, but "T+Shift+Alt" is not valid because all of the modifier keys don't come first, and "Alt" is not valid because it doesn't include at least one non-modifier key.</p> <p>When specifying an alphabetic key, both the uppercase and lowercase variants are considered equivalent: "a" and "A" are the same.</p> <p>When implementing keyboard shortcuts authors should consider the keyboards they intend to support to avoid unintended results. Keyboard designs vary significantly based on the device used and the languages supported. For example, many modifier keys are used in conjunction with other keys to create common punctuation symbols, create number characters, swap keyboard sides on bilingual keyboards to switch languages, and perform a number of other functions.</p> <p>For many supported keyboards, authors can prevent conflicts by avoiding keys other than ASCII letters, as number characters and common punctuation often require modifiers. Here, the keyboard shortcut entered does not equate to the key generated. For example, in French keyboard layouts, the number characters are not available until you press the Control key, so a keyboard shortcut defined as "Control+2" would be ambiguous as this is how one would type the "2" character on a French keyboard.</p> <p>If the character used is determined by a modifier key, the author <em class="rfc2119">MUST</em> specify the actual key used to generate the character, that is generated by the key, and not the resulting character. This convention enables the assistive technology to accurately convey what keys must be used to generate the shortcut. For example, on most U.S. English keyboards, the percent sign "%" can be input by pressing Shift+5. The correct way to specify this shortcut is "Shift+5". It is incorrect to specify "%" or "Shift+%". However, note that on some international keyboards the percent sign might be an unmodified key, in which case "%" and "Shift+%" could be correct on those keyboards.</p> <p>If the key that needs to be specified is illegal in the host language or would cause a string to be terminated, authors <em class="rfc2119">MUST</em> use the string escaping sequence of the host language to specify it. For example, the single-quote character can be encoded as "&#39;" in <abbr title="Hypertext Markup Language">HTML</abbr>.</p> <p>Examples of valid keyboard shortcuts include:</p> <ul> <li>"A"</li> <li>"Shift+Space"</li> <li>"Control+Alt+."</li> <li>"Control+Shift+&#39;"</li> <li>"Alt+Shift+P Control+F"</li> <li>"Meta+C Meta+Shift+C"</li> </ul> <p>User agents <em class="rfc2119">MUST NOT</em> change keyboard behavior in response to the <code>aria-keyshortcuts</code> attribute. Authors <em class="rfc2119">MUST</em> handle scripted keyboard events to process <code>aria-keyshortcuts</code>. The <code>aria-keyshortcuts</code> attribute exposes the existence of these shortcuts so that assistive technologies can communicate this information to users.</p> <p>Authors <em class="rfc2119">SHOULD</em> provide a way to expose keyboard shortcuts so that all users can discover them, such as through the use of a tooltip. Authors <em class="rfc2119">MUST</em> ensure that <code>aria-keyshortcuts</code> applied to disabled elements are unavailable.</p> <p>Authors <em class="rfc2119">SHOULD</em> avoid implementing shortcut keys that inhibit operating system, user agent, or assistive technology functionality. This requires the author to carefully consider both which keys to assign and the contexts and conditions in which the keys are available to the user. For guidance, see the keyboard shortcuts section of the <cite><a href="https://www.w3.org/WAI/ARIA/apg/" class="practices"><abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices Guide</a></cite>.</p> <p>Authors <em class="rfc2119">SHOULD</em> consider whether the keyboard shortcut will be valid in each language and physical keyboard layout, and consider localizing the shortcut in languages, locales, and common hardware keyboard configurations.</p> </div> <table class="property-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="property-related-head" scope="row">Related Concepts:</th> <td class="property-related"><a href="https://en.wikipedia.org/wiki/Keyboard_shortcut">Keyboard shortcut</a></td> </tr> <tr> <th class="property-applicability-head" scope="row">Used in Roles:</th> <td class="property-applicability">All elements of the base markup</td> </tr> <tr> <th class="property-value-head" scope="row">Value:</th> <td class="property-value"><a href="#valuetype_string">string</a></td> </tr> </tbody> </table> </section> <section class="property notoc" id="aria-label"> <h4><span class="property-name" title="aria-label" aria-describedby="desc-aria-label"><code>aria-label</code> <span class="type-indicator">property</span></span></h4> <div class="property-description" id="desc-aria-label" role="definition"> <p><a href="#dfn-defines" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-defines-11">Defines</a> a string value that labels the current element. See related <a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a>.</p> <p>The purpose of <a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a> is the same as that of <a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a>. It provides the user with a recognizable name of the object. The most common <a href="#dfn-accessibility-api" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-api-26">accessibility <abbr title="Application Programing Interfaces">API</abbr></a> mapping for a label is the <a class="informative" data-link-type="dfn" href="https://www.w3.org/TR/accname-1.2/#dfn-accessible-name">accessible name</a> property.</p> <p>Most host languages provide an attribute that could be used to name the element (e.g., the <code><code><a data-link-type="element-attr" href="https://html.spec.whatwg.org/multipage/dom.html#attr-title">title</a></code></code> attribute in <abbr title="Hypertext Markup Language">HTML</abbr>), yet this could present a browser tooltip. In the cases where <abbr title="Document Object Model">DOM</abbr> content or a tooltip is undesirable, authors <em class="rfc2119">MAY</em> set the accessible name of the element using <a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a>, if the element does not <a href="#prohibitedattributes">prohibit</a> use of the attribute. If the label text is available in the <abbr title="Document Object Model">DOM</abbr> (i.e. typically visible text content), authors <em class="rfc2119">SHOULD</em> use <a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a> and <em class="rfc2119">SHOULD NOT</em> use <a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a>. There might be instances where the name of an element cannot be determined programmatically from the <abbr title="Document Object Model">DOM</abbr>, and there are cases where referencing <abbr title="Document Object Model">DOM</abbr> content is not the desired user experience. Authors <em class="rfc2119">MUST NOT</em> specify <code>aria-label</code> on an element which has an explicit or implicit <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> role where <code>aria-label</code> is <a href="#prohibitedattributes">prohibited</a>. As required by the <a href="#textalternativecomputation">accessible name and description computation</a>, user agents give precedence to <a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a> over <a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a> when computing the accessible name property.</p> </div> <table class="property-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="property-applicability-head" scope="row">Used in Roles:</th> <td class="property-applicability">All elements of the base markup except for the following roles: <a href="https://w3c.github.io/aria/#caption" class="role-reference"><code>caption</code></a>, <a href="https://w3c.github.io/aria/#code" class="role-reference"><code>code</code></a>, <a href="https://w3c.github.io/aria/#definition" class="role-reference"><code>definition</code></a>, <a href="https://w3c.github.io/aria/#deletion" class="role-reference"><code>deletion</code></a>, <a href="https://w3c.github.io/aria/#emphasis" class="role-reference"><code>emphasis</code></a>, <a href="https://w3c.github.io/aria/#generic" class="role-reference"><code>generic</code></a>, <a href="https://w3c.github.io/aria/#insertion" class="role-reference"><code>insertion</code></a>, <a href="https://w3c.github.io/aria/#mark" class="role-reference"><code>mark</code></a>, <a href="https://w3c.github.io/aria/#none" class="role-reference"><code>none</code></a>, <a href="https://w3c.github.io/aria/#paragraph" class="role-reference"><code>paragraph</code></a>, <a href="https://w3c.github.io/aria/#strong" class="role-reference"><code>strong</code></a>, <a href="https://w3c.github.io/aria/#subscript" class="role-reference"><code>subscript</code></a>, <a href="https://w3c.github.io/aria/#suggestion" class="role-reference"><code>suggestion</code></a>, <a href="https://w3c.github.io/aria/#superscript" class="role-reference"><code>superscript</code></a>, <a href="https://w3c.github.io/aria/#term" class="role-reference"><code>term</code></a>, <a href="https://w3c.github.io/aria/#time" class="role-reference"><code>time</code></a></td> </tr> <tr> <th class="property-value-head" scope="row">Value:</th> <td class="property-value"><a href="#valuetype_string">string</a></td> </tr> </tbody> </table> </section> <section class="property notoc" id="aria-labelledby"> <h4><span class="property-name" title="aria-labelledby" aria-describedby="desc-aria-labelledby"><code>aria-labelledby</code> <span class="type-indicator">property</span></span></h4> <div class="property-description" id="desc-aria-labelledby" role="definition"> <p><a href="#dfn-identifies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-identifies-9">Identifies</a> the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> (or elements) that labels the current element. See related <a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a> and <a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a>.</p> <p>The purpose of <a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a> is the same as that of <a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a>. It provides the user with a recognizable name of the object. The most common <a href="#dfn-accessibility-api" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-api-27">accessibility <abbr title="Application Programing Interfaces">API</abbr></a> mapping for a label is the <a class="informative" data-link-type="dfn" href="https://www.w3.org/TR/accname-1.2/#dfn-accessible-name">accessible name</a> property.</p> <p>If the interface is such that it is not possible to have a visible label on the screen, authors <em class="rfc2119">SHOULD</em> use <a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a> and <em class="rfc2119">SHOULD NOT</em> use <a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a>. Authors <em class="rfc2119">MUST NOT</em> specify <code>aria-labelledby</code> on an element which has an explicit or implicit <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> role where <code>aria-labelledby</code> is <a href="#prohibitedattributes">prohibited</a>. As required by the <a href="#textalternativecomputation">accessible name and description computation</a>, user agents give precedence to <a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a> over <a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a> when computing the accessible name property.</p> <p>The <a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a> attribute is similar to <a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a> in that both reference other elements to calculate a text alternative (an accessible name, and description, respectively). While a concise accessible name is preferable, a description can either be concise, or provide more verbose information.</p> <div class="note" role="note" id="issue-container-generatedID-57"><div role="heading" class="note-title marker" id="h-note-57" aria-level="4"><span>Note</span></div><p class="">The expected spelling of this property in <abbr title="United States">U.S.</abbr> English is "labeledby." However, the <a href="#dfn-accessibility-api" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-api-28">accessibility <abbr title="Application Programing Interfaces">API</abbr></a> features to which this property is mapped have established the "labelledby" spelling. This property is spelled that way to match the convention and minimize the difficulty for developers.</p></div> </div> <table class="property-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="property-related-head" scope="row">Related Concepts:</th> <td class="property-related"><code><<code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/forms.html#the-label-element">label</a></code>></code> in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="property-applicability-head" scope="row">Used in Roles:</th> <td class="property-applicability">All elements of the base markup except for the following roles: <a href="https://w3c.github.io/aria/#caption" class="role-reference"><code>caption</code></a>, <a href="https://w3c.github.io/aria/#code" class="role-reference"><code>code</code></a>, <a href="https://w3c.github.io/aria/#definition" class="role-reference"><code>definition</code></a>, <a href="https://w3c.github.io/aria/#deletion" class="role-reference"><code>deletion</code></a>, <a href="https://w3c.github.io/aria/#emphasis" class="role-reference"><code>emphasis</code></a>, <a href="https://w3c.github.io/aria/#generic" class="role-reference"><code>generic</code></a>, <a href="https://w3c.github.io/aria/#insertion" class="role-reference"><code>insertion</code></a>, <a href="https://w3c.github.io/aria/#mark" class="role-reference"><code>mark</code></a>, <a href="https://w3c.github.io/aria/#none" class="role-reference"><code>none</code></a>, <a href="https://w3c.github.io/aria/#paragraph" class="role-reference"><code>paragraph</code></a>, <a href="https://w3c.github.io/aria/#strong" class="role-reference"><code>strong</code></a>, <a href="https://w3c.github.io/aria/#subscript" class="role-reference"><code>subscript</code></a>, <a href="https://w3c.github.io/aria/#suggestion" class="role-reference"><code>suggestion</code></a>, <a href="https://w3c.github.io/aria/#superscript" class="role-reference"><code>superscript</code></a>, <a href="https://w3c.github.io/aria/#term" class="role-reference"><code>term</code></a>, <a href="https://w3c.github.io/aria/#time" class="role-reference"><code>time</code></a></td> </tr> <tr> <th class="property-value-head" scope="row">Value:</th> <td class="property-value"><a href="#valuetype_idref_list">ID reference list</a></td> </tr> </tbody> </table> </section> <section class="property notoc" id="aria-level"> <h4><span class="property-name" title="aria-level" aria-describedby="desc-aria-level"><code>aria-level</code> <span class="type-indicator">property</span></span></h4> <div class="property-description" id="desc-aria-level" role="definition"> <p><a href="#dfn-defines" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-defines-12">Defines</a> the hierarchical level of an <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> within a structure.</p> <p>This can be applied inside trees to tree items, to headings inside a document, to nested grids, nested tablists and to other structural items that might appear inside a container or participate in an ownership hierarchy. The value for <a href="https://w3c.github.io/aria/#aria-level" class="property-reference"><code>aria-level</code></a> is an integer greater than or equal to 1.</p> <p>Levels increase with depth. If the <abbr title="Document Object Model">DOM</abbr> ancestry does not accurately represent the level, authors <em class="rfc2119">SHOULD</em> explicitly define the <a href="https://w3c.github.io/aria/#aria-level" class="property-reference"><code>aria-level</code></a> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attribute</a>.</p> <p>This attribute is applied to elements that act as leaf nodes within the orientation of the set, for example, on elements with role <a href="https://w3c.github.io/aria/#treeitem" class="role-reference"><code>treeitem</code></a> rather than elements with role <a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a>. This means that multiple elements in a set can have the same value for this attribute. Although it would be less repetitive to provide a single value on the container, restricting this to leaf nodes ensures that there is a single way for <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-69">assistive technologies</a> to use the attribute.</p> <p>If the <abbr title="Document Object Model">DOM</abbr> ancestry accurately represents the level, the <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agent</a> can calculate the level of an item from the document structure. This attribute can be used to provide an explicit indication of the level when that is not possible to calculate from the document structure or the <a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a> attribute. User agent support for automatic calculation of level might vary; authors <em class="rfc2119">SHOULD</em> test with <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agents</a> and assistive technologies to determine whether this attribute is needed. If the author intends for the user agent to calculate the level, the author <em class="rfc2119">SHOULD</em> omit this attribute.</p> <div class="note" role="note" id="issue-container-generatedID-58"><div role="heading" class="note-title marker" id="h-note-58" aria-level="4"><span>Note</span></div><p class=""> In the case of a <a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a>, <a href="https://w3c.github.io/aria/#aria-level" class="property-reference"><code>aria-level</code></a> is supported on elements with the role <a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a>, not elements with role <a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a>. At first glance, this might seem inconsistent with the application of <a href="https://w3c.github.io/aria/#aria-level" class="property-reference"><code>aria-level</code></a> on <a href="https://w3c.github.io/aria/#treeitem" class="role-reference"><code>treeitem</code></a> elements, but it is consistent in that the <a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a> acts as the leaf node within the vertical orientation of the <a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a>, whereas the <a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a> is a leaf node within the horizontal orientation of each <a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a>. Level is not supported on sets of cells within rows, so the <a href="https://w3c.github.io/aria/#aria-level" class="property-reference"><code>aria-level</code></a> attribute is applied to the element with the role <a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a>.</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="4"><span>Note</span></div><p class="">On elements with role <a href="https://w3c.github.io/aria/#heading" class="property-reference"><code>heading</code></a>, values for <a href="https://w3c.github.io/aria/#aria-level" class="property-reference"><code>aria-level</code></a> above 6 can create difficulties for users. Also, at the time of this writing, most combinations of user agents and assistive technologies only support <a href="https://w3c.github.io/aria/#aria-level" class="property-reference"><code>aria-level</code></a> integers 1-9 on headings.</p></div> </div> <table class="property-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="property-applicability-head" scope="row">Used in Roles:</th> <td class="property-applicability"><ul> <li><a href="https://w3c.github.io/aria/#comment" class="role-reference"><code>comment</code></a></li> <li><a href="https://w3c.github.io/aria/#heading" class="role-reference"><code>heading</code></a></li> <li><a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a></li> <li><a href="https://w3c.github.io/aria/#treeitem" class="role-reference"><code>treeitem</code></a></li> </ul> </td> </tr> <tr> <th class="property-value-head" scope="row">Value:</th> <td class="property-value"><a href="#valuetype_integer">integer</a></td> </tr> </tbody> </table> </section> <section class="property notoc" id="aria-live"> <h4><span class="property-name" title="aria-live" aria-describedby="desc-aria-live"><code>aria-live</code> <span class="type-indicator">property</span></span></h4> <div class="property-description" id="desc-aria-live" role="definition"> <p><a href="#dfn-indicates" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-indicates-13">Indicates</a> that an <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> will be updated, and describes the types of updates the <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agents</a>, <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-70">assistive technologies</a>, and user can expect from the <a href="#dfn-live-region" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-live-region-12">live region</a>.</p> <p>The <span>values</span> of this <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attribute</a> are expressed in degrees of importance. When regions are specified as <code>polite</code>, assistive technologies will notify users of updates but generally do not interrupt the current task, and updates take low priority. When regions are specified as <code>assertive</code>, assistive technologies will immediately notify the user, and could potentially clear the speech queue of previous updates.</p> <p>Politeness levels are essentially an ordering mechanism for updates and serve as a strong suggestion to user agents or assistive technologies. The value can be overridden by user agents, assistive technologies, or the user. For example, if assistive technologies can determine that a change occurred in response to a key press or a mouse click, the assistive technologies might present that change immediately even if the value of the <a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a> attribute states otherwise.</p> <p>Since different users have different needs, it is up to the user to tweak his or her assistive technologies' response to a live region with a certain politeness level from the commonly defined baseline. Assistive technologies might choose to implement increasing and decreasing levels of granularity so that the user can exercise control over queues and interruptions.</p> <p>When the <a data-link-type="dfn|abstract-op" href="#dfn-property" class="internalDFN" id="ref-for-dfn-property-23">property</a> is not set on an <a href="#dfn-object" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-object-22">object</a> that needs to send updates, the politeness level is the value of the nearest ancestor that sets the <a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a> attribute.</p> <p>The <a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a> attribute is the primary determination for the order of presentation of changes to live regions. Implementations will also consider the default level of politeness in a <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-90">role</a> when the <a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a> attribute is not set in the ancestor chain (e.g., <a href="https://w3c.github.io/aria/#log" class="role-reference"><code>log</code></a> changes are <code>polite</code> by default). Items which are <code>assertive</code> will be presented immediately, followed by <code>polite</code> items. User agents or assistive technologies can choose to clear queued changes when an assertive change occurs. (e.g., changes in an assertive region can remove all currently queued changes)</p> <p>When live regions are marked as <code>polite</code>, assistive technologies <em class="rfc2119">SHOULD</em> announce updates at the next graceful opportunity, such as at the end of speaking the current sentence or when the user pauses typing. When live regions are marked as <code>assertive</code>, assistive technologies <em class="rfc2119">SHOULD</em> notify the user immediately. Because an interruption might disorient users or cause them to not complete their current task, authors <em class="rfc2119">SHOULD NOT</em> use the assertive value unless the interruption is imperative.</p> </div> <table class="property-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="property-applicability-head" scope="row">Used in Roles:</th> <td class="property-applicability">All elements of the base markup</td> </tr> <tr> <th class="property-value-head" scope="row">Value:</th> <td class="property-value"><a href="#valuetype_token">token</a></td> </tr> </tbody> </table> <table class="value-descriptions"> <caption>Values:</caption> <thead> <tr> <th scope="col">Value</th> <th scope="col">Description</th> </tr> </thead> <tbody> <tr> <th class="value-name" scope="row">assertive</th> <td class="value-description">Indicates that updates to the region have the highest priority and should be presented the user immediately.</td> </tr> <tr> <th class="value-name" scope="row"><strong class="default">off (default)</strong></th> <td class="value-description">Indicates that updates to the region should not be presented to the user unless the user is currently focused on that region.</td> </tr> <tr> <th class="value-name" scope="row">polite</th> <td class="value-description">Indicates that updates to the region should be presented at the next graceful opportunity, such as at the end of speaking the current sentence or when the user pauses typing.</td> </tr> </tbody> </table> </section> <section class="property notoc" id="aria-modal"> <h4><span class="property-name" title="aria-modal" aria-describedby="desc-aria-modal"><code>aria-modal</code> <span class="type-indicator">property</span></span></h4> <div class="property-description" id="desc-aria-modal" role="definition"> <p><a href="#dfn-indicates" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-indicates-14">Indicates</a> whether an <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> is modal when displayed.</p> <p>The <a href="https://w3c.github.io/aria/#aria-modal" class="property-reference"><code>aria-modal</code></a> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attribute</a> is used to indicate that the presence of a "modal" element precludes usage of other content on the page. For example, when a modal dialog is displayed, it is expected that the user's interaction is limited to the contents of the dialog, until the modal dialog loses focus or is no longer displayed.</p> <p>When a modal element is displayed, assistive technologies <em class="rfc2119">SHOULD</em> navigate to the element unless focus has explicitly been set elsewhere. Some assistive technologies limit navigation to the modal element's contents. If focus moves to an element outside the modal element, assistive technologies <em class="rfc2119">SHOULD NOT</em> limit navigation to the modal element.</p> <p>When a modal element is displayed, authors <em class="rfc2119">MUST</em> ensure the interface can be controlled using only descendants of the modal element. In other words, if a modal dialog has a close button, the button should be a descendant of the dialog. When a modal element is displayed, authors <em class="rfc2119">SHOULD</em> mark all other contents as inert (such as "inert subtrees" in <abbr title="Hypertext Markup Language">HTML</abbr>) if the ability to do so exists in the host language.</p> </div> <table class="property-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="property-applicability-head" scope="row">Used in Roles:</th> <td class="property-applicability"><ul> <li><a href="https://w3c.github.io/aria/#window" class="role-reference"><code>window</code></a></li> </ul> </td> </tr> <tr> <th class="property-descendants-head" scope="row">Inherits into Roles:</th> <td class="property-descendants"><ul> <li><a href="https://w3c.github.io/aria/#alertdialog" class="role-reference"><code>alertdialog</code></a></li> <li><a href="https://w3c.github.io/aria/#dialog" class="role-reference"><code>dialog</code></a></li> </ul> </td> </tr> <tr> <th class="property-value-head" scope="row">Value:</th> <td class="property-value"><a href="#valuetype_true-false">true/false</a></td> </tr> </tbody> </table> <table class="value-descriptions"> <caption>Values:</caption> <thead> <tr> <th scope="col">Value</th> <th scope="col">Description</th> </tr> </thead> <tbody> <tr> <th class="value-name" scope="row"><strong class="default">false (default)</strong></th> <td class="value-description">Element is not modal.</td> </tr> <tr> <th class="value-name" scope="row">true</th> <td class="value-description">Element is modal.</td> </tr> </tbody> </table> </section> <section class="property notoc" id="aria-multiline"> <h4><span class="property-name" title="aria-multiline" aria-describedby="desc-aria-multiline"><code>aria-multiline</code> <span class="type-indicator">property</span></span></h4> <div class="property-description" id="desc-aria-multiline" role="definition"> <p><a href="#dfn-indicates" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-indicates-15">Indicates</a> whether a text box accepts multiple lines of input or only a single line.</p> <div class="note" role="note" id="issue-container-generatedID-60"><div role="heading" class="note-title marker" id="h-note-60" aria-level="4"><span>Note</span></div><p class="">In most user agent implementations, the default behavior of the <kbd>ENTER</kbd> or <kbd>RETURN</kbd> key is different between the single-line and multi-line text fields in <abbr title="Hypertext Markup Language">HTML</abbr>. When user has focus in a single-line <code><input type="text"></code> element, the keystroke usually submits the form. When user has focus in a multi-line <code><textarea></code> element, the keystroke inserts a line break. The <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> <code>textbox</code> role differentiates these types of boxes with the <a href="https://w3c.github.io/aria/#aria-multiline" class="property-reference"><code>aria-multiline</code></a> attribute, so authors are advised to be aware of this distinction when designing the field.</p></div> </div> <table class="property-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="property-applicability-head" scope="row">Used in Roles:</th> <td class="property-applicability"><ul> <li><a href="https://w3c.github.io/aria/#textbox" class="role-reference"><code>textbox</code></a></li> </ul> </td> </tr> <tr> <th class="property-descendants-head" scope="row">Inherits into Roles:</th> <td class="property-descendants"><ul> <li><a href="https://w3c.github.io/aria/#searchbox" class="role-reference"><code>searchbox</code></a></li> </ul> </td> </tr> <tr> <th class="property-value-head" scope="row">Value:</th> <td class="property-value"><a href="#valuetype_true-false">true/false</a></td> </tr> </tbody> </table> <table class="value-descriptions"> <caption>Values:</caption> <thead> <tr> <th scope="col">Value</th> <th scope="col">Description</th> </tr> </thead> <tbody> <tr> <th class="value-name" scope="row"><strong class="default">false (default)</strong></th> <td class="value-description">This is a single-line text box.</td> </tr> <tr> <th class="value-name" scope="row">true</th> <td class="value-description">This is a multi-line text box.</td> </tr> </tbody> </table> </section> <section class="property notoc" id="aria-multiselectable"> <h4><span class="property-name" title="aria-multiselectable" aria-describedby="desc-aria-multiselectable"><code>aria-multiselectable</code> <span class="type-indicator">property</span></span></h4> <div class="property-description" id="desc-aria-multiselectable" role="definition"> <p><a href="#dfn-indicates" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-indicates-16">Indicates</a> that the user can select more than one item from the current selectable descendants.</p> <p>Authors <em class="rfc2119">SHOULD</em> ensure that selected descendants have the <a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attribute</a> set to <code>true</code>, and selectable descendants that are not selected have the <a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a> attribute set to <code>false</code>. Authors <em class="rfc2119">SHOULD NOT</em> use the <a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a> attribute on descendants that are not selectable.</p> <div class="note" role="note" id="issue-container-generatedID-61"><div role="heading" class="note-title marker" id="h-note-61" aria-level="4"><span>Note</span></div><p class="">Lists and trees are examples of roles that might allow users to select more than one item at a time.</p></div> </div> <table class="property-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="property-applicability-head" scope="row">Used in Roles:</th> <td class="property-applicability"><ul> <li><a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a></li> <li><a href="https://w3c.github.io/aria/#listbox" class="role-reference"><code>listbox</code></a></li> <li><a href="https://w3c.github.io/aria/#tablist" class="role-reference"><code>tablist</code></a></li> <li><a href="https://w3c.github.io/aria/#tree" class="role-reference"><code>tree</code></a></li> </ul> </td> </tr> <tr> <th class="property-descendants-head" scope="row">Inherits into Roles:</th> <td class="property-descendants"><ul> <li><a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a></li> </ul> </td> </tr> <tr> <th class="property-value-head" scope="row">Value:</th> <td class="property-value"><a href="#valuetype_true-false">true/false</a></td> </tr> </tbody> </table> <table class="value-descriptions"> <caption>Values:</caption> <thead> <tr> <th scope="col">Value</th> <th scope="col">Description</th> </tr> </thead> <tbody> <tr> <th class="value-name" scope="row"><strong class="default">false (default)</strong></th> <td class="value-description">Only one item can be selected.</td> </tr> <tr> <th class="value-name" scope="row">true</th> <td class="value-description">More than one item in the widget can be selected at a time.</td> </tr> </tbody> </table> </section> <section class="property notoc" id="aria-orientation"> <h4><span class="property-name" title="aria-orientation" aria-describedby="desc-aria-orientation"><code>aria-orientation</code> <span class="type-indicator">property</span></span></h4> <div class="property-description" id="desc-aria-orientation" role="definition"> <p><a href="#dfn-indicates" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-indicates-17">Indicates</a> whether the element's orientation is horizontal, vertical, or unknown/ambiguous.</p> <div class="note" role="note" id="issue-container-generatedID-62"><div role="heading" class="note-title marker" id="h-note-62" aria-level="4"><span>Note</span></div><p class="">In <abbr title="Accessible Rich Internet Applications">ARIA</abbr> 1.1, the default value for <a href="https://w3c.github.io/aria/#aria-orientation" class="property-reference"><code>aria-orientation</code></a> changed from <code>horizontal</code> to <code>undefined</code>. Implicit defaults are defined on some roles (e.g., <a href="https://w3c.github.io/aria/#slider" class="role-reference"><code>slider</code></a> defaults to horizontal; <a href="https://w3c.github.io/aria/#scrollbar" class="role-reference"><code>scrollbar</code></a> defaults to vertical) but remain undefined on roles where an expected default orientation is ambiguous (e.g., <a href="https://w3c.github.io/aria/#radiogroup" class="role-reference"><code>radiogroup</code></a>).</p></div> </div> <table class="property-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="property-applicability-head" scope="row">Used in Roles:</th> <td class="property-applicability"><ul> <li><a href="https://w3c.github.io/aria/#scrollbar" class="role-reference"><code>scrollbar</code></a></li> <li><a href="https://w3c.github.io/aria/#select" class="role-reference"><code>select</code></a></li> <li><a href="https://w3c.github.io/aria/#separator" class="role-reference"><code>separator</code></a></li> <li><a href="https://w3c.github.io/aria/#slider" class="role-reference"><code>slider</code></a></li> <li><a href="https://w3c.github.io/aria/#tablist" class="role-reference"><code>tablist</code></a></li> <li><a href="https://w3c.github.io/aria/#toolbar" class="role-reference"><code>toolbar</code></a></li> </ul> </td> </tr> <tr> <th class="property-descendants-head" scope="row">Inherits into Roles:</th> <td class="property-descendants"><ul> <li><a href="https://w3c.github.io/aria/#listbox" class="role-reference"><code>listbox</code></a></li> <li><a href="https://w3c.github.io/aria/#menu" class="role-reference"><code>menu</code></a></li> <li><a href="https://w3c.github.io/aria/#menubar" class="role-reference"><code>menubar</code></a></li> <li><a href="https://w3c.github.io/aria/#radiogroup" class="role-reference"><code>radiogroup</code></a></li> <li><a href="https://w3c.github.io/aria/#tree" class="role-reference"><code>tree</code></a></li> <li><a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a></li> </ul> </td> </tr> <tr> <th class="property-value-head" scope="row">Value:</th> <td class="property-value"><a href="#valuetype_token">token</a></td> </tr> </tbody> </table> <table class="value-descriptions"> <caption>Values:</caption> <thead> <tr> <th scope="col">Value</th> <th scope="col">Description</th> </tr> </thead> <tbody> <tr> <th class="value-name" scope="row">horizontal</th> <td class="value-description">The element is oriented horizontally.</td> </tr> <tr> <th class="value-name" scope="row"><strong class="default">undefined (default)</strong></th> <td class="value-description">The element's orientation is unknown/ambiguous.</td> </tr> <tr> <th class="value-name" scope="row">vertical</th> <td class="value-description">The element is oriented vertically.</td> </tr> </tbody> </table> </section> <section class="property notoc" id="aria-owns"> <h4><span class="property-name" title="aria-owns" aria-describedby="desc-aria-owns"><code>aria-owns</code> <span class="type-indicator">property</span></span></h4> <div class="property-description" id="desc-aria-owns" role="definition"> <p><a href="#dfn-identifies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-identifies-10">Identifies</a> an <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> (or elements) in order to define a visual, functional, or contextual parent/child <a href="#dfn-relationship" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-relationship-13">relationship</a> between <abbr title="Document Object Model">DOM</abbr> elements where the <abbr title="Document Object Model">DOM</abbr> hierarchy cannot be used to represent the relationship. See related <a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a>.</p> <p>The value of the <a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attribute</a> is a space-separated ID reference list that references one or more elements in the document by ID. The reason for adding <a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a> is to expose a parent/child contextual relationship to <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-71">assistive technologies</a> that is otherwise impossible to infer from the <abbr title="Document Object Model">DOM</abbr>.</p> <p>If an element has both <a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a> and <abbr title="Document Object Model">DOM</abbr> children then the order of the child elements with respect to the parent/child relationship is the <abbr title="Document Object Model">DOM</abbr> children first, then the elements referenced in <a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a>. If the author intends that the <abbr title="Document Object Model">DOM</abbr> children are not first, then list the <abbr title="Document Object Model">DOM</abbr> children in <a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a> in the desired order. Authors <em class="rfc2119">SHOULD NOT</em> use <a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a> as a replacement for the <abbr title="Document Object Model">DOM</abbr> hierarchy. If the relationship is represented in the <abbr title="Document Object Model">DOM</abbr>, do not use <a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a>.</p> <p>Authors <em class="rfc2119">MUST</em> ensure that an element's ID is not specified in more than one other element's <a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a> attribute at any time. In other words, an element can have only one explicit owner. Authors <em class="rfc2119">MUST NOT</em> create circular references with <a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a>. In the case of authoring error with <a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a>, the user agent <em class="rfc2119">MAY</em> ignore some <a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a> element references in order to build a consistent model of the content.</p> <p>Authors <em class="rfc2119">MUST NOT</em> specify <a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a> on an element which has <a href="#childrenArePresentational">Presentational Children</a>.</p> </div> <table class="property-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="property-applicability-head" scope="row">Used in Roles:</th> <td class="property-applicability">All elements of the base markup</td> </tr> <tr> <th class="property-value-head" scope="row">Value:</th> <td class="property-value"><a href="#valuetype_idref_list">ID reference list</a></td> </tr> </tbody> </table> </section> <section class="property notoc" id="aria-placeholder"> <h4><span class="property-name" title="aria-placeholder" aria-describedby="desc-aria-placeholder"><code>aria-placeholder</code> <span class="type-indicator">property</span></span></h4> <div class="property-description" id="desc-aria-placeholder" role="definition"> <p><a href="#dfn-defines" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-defines-13">Defines</a> a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.</p> <p>Authors <em class="rfc2119">SHOULD NOT</em> use <a href="https://w3c.github.io/aria/#aria-placeholder" class="property-reference"><code>aria-placeholder</code></a> instead of a label as their purposes are different: The label indicates what kind of information is expected. The placeholder text is a hint about the expected value. See related <a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a> and <a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a>.</p> <p>Authors <em class="rfc2119">SHOULD</em> present this hint to the user by displaying the hint text at any time the control's <span>value</span> is the empty string. This includes cases where the control first receives focus, and when users remove a previously-entered value.</p> <div class="note" role="note" id="issue-container-generatedID-63"><div role="heading" class="note-title marker" id="h-note-63" aria-level="4"><span>Note</span></div><p class="">As is the case with the related <code><code><a data-link-type="element-attr" href="https://html.spec.whatwg.org/multipage/input.html#attr-input-placeholder">placeholder</a></code></code> attribute in <abbr title="Hypertext Markup Language">HTML</abbr>, use of placeholder text as a replacement for a displayed label can reduce the accessibility and usability of the control for a range of users including older users and users with cognitive, mobility, fine motor skill or vision impairments. While the hint given by the control's label is shown at all times, the short hint given in the placeholder attribute is only shown before the user enters a value. Furthermore, placeholder text might be mistaken for a pre-filled value, and as commonly implemented the default color of the placeholder text provides insufficient contrast and the lack of a separate visible label reduces the size of the hit region available for setting focus on the control.</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="4"><span>Note</span></div><p class="">The following examples do not use the <abbr title="Hypertext Markup Language">HTML</abbr> <code>label</code> element as it cannot be used to label <abbr title="Hypertext Markup Language">HTML</abbr> elements with <code>contenteditable</code>.</p></div> <p>The following example shows a <a href="https://w3c.github.io/aria/#searchbox" class="role-reference"><code>searchbox</code></a> in which the user has entered a value:</p> <div class="example" id="example-34"> <div class="marker"> <a class="self-link" href="#example-34">Example<bdi> 34</bdi></a> </div> <pre class="highlight" aria-busy="false"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"label"</span>></span>Birthday:<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">contenteditable</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"searchbox"</span> <span class="hljs-attr">aria-labelledby</span>=<span class="hljs-string">"label"</span> <span class="hljs-attr">aria-placeholder</span>=<span class="hljs-string">"MM-DD-YYYY"</span>></span>03-14-1879<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> </div> <p>The following example shows the same <a href="https://w3c.github.io/aria/#searchbox" class="role-reference"><code>searchbox</code></a> in which the user has not yet entered a value or has removed a previously-entered value:</p> <div class="example" id="example-35"> <div class="marker"> <a class="self-link" href="#example-35">Example<bdi> 35</bdi></a> </div> <pre class="highlight" aria-busy="false"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"label"</span>></span>Birthday:<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">contenteditable</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"searchbox"</span> <span class="hljs-attr">aria-labelledby</span>=<span class="hljs-string">"label"</span> <span class="hljs-attr">aria-placeholder</span>=<span class="hljs-string">"MM-DD-YYYY"</span>></span>MM-DD-YYYY<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> </div> </div> <table class="property-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="property-related-head" scope="row">Related Concepts:</th> <td class="property-related"><code><code><a data-link-type="element-attr" href="https://html.spec.whatwg.org/multipage/input.html#attr-input-placeholder">placeholder</a></code></code> attribute in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="property-applicability-head" scope="row">Used in Roles:</th> <td class="property-applicability"><ul> <li><a href="https://w3c.github.io/aria/#textbox" class="role-reference"><code>textbox</code></a></li> </ul> </td> </tr> <tr> <th class="property-descendants-head" scope="row">Inherits into Roles:</th> <td class="property-descendants"><ul> <li><a href="https://w3c.github.io/aria/#searchbox" class="role-reference"><code>searchbox</code></a></li> </ul> </td> </tr> <tr> <th class="property-value-head" scope="row">Value:</th> <td class="property-value"><a href="#valuetype_string">string</a></td> </tr> </tbody> </table> </section> <section class="property notoc" id="aria-posinset"> <h4><span class="property-name" title="aria-posinset" aria-describedby="desc-aria-posinset"><code>aria-posinset</code> <span class="type-indicator">property</span></span></h4> <div class="property-description" id="desc-aria-posinset" role="definition"> <p><a href="#dfn-defines" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-defines-14">Defines</a> an <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a>'s number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the <abbr title="Document Object Model">DOM</abbr>. See related <a href="https://w3c.github.io/aria/#aria-setsize" class="property-reference"><code>aria-setsize</code></a>.</p> <p>If all items in a set are present in the document structure, it is not necessary to set this <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attribute</a>, as the <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agent</a> can automatically calculate the set size and position for each item. However, if only a portion of the set is present in the document structure at a given moment, this <a data-link-type="dfn|abstract-op" href="#dfn-property" class="internalDFN" id="ref-for-dfn-property-24">property</a> is needed to provide an explicit indication of an element's position.</p> <p>The following example shows items 5 through 8 in a set of 16.</p> <div class="example" id="example-36"> <div class="marker"> <a class="self-link" href="#example-36">Example<bdi> 36</bdi></a> </div> <pre class="highlight" aria-busy="false"><code class="hljs abnf"><h2 id<span class="hljs-operator">=</span><span class="hljs-string">"label_fruit"</span>> Available Fruit </h2> <ul role<span class="hljs-operator">=</span><span class="hljs-string">"listbox"</span> aria-labelledby<span class="hljs-operator">=</span><span class="hljs-string">"label_fruit"</span>> <li role<span class="hljs-operator">=</span><span class="hljs-string">"option"</span> aria-setsize<span class="hljs-operator">=</span><span class="hljs-string">"16"</span> aria-posinset<span class="hljs-operator">=</span><span class="hljs-string">"5"</span>> apples </li> <li role<span class="hljs-operator">=</span><span class="hljs-string">"option"</span> aria-setsize<span class="hljs-operator">=</span><span class="hljs-string">"16"</span> aria-posinset<span class="hljs-operator">=</span><span class="hljs-string">"6"</span>> bananas </li> <li role<span class="hljs-operator">=</span><span class="hljs-string">"option"</span> aria-setsize<span class="hljs-operator">=</span><span class="hljs-string">"16"</span> aria-posinset<span class="hljs-operator">=</span><span class="hljs-string">"7"</span>> cantaloupes </li> <li role<span class="hljs-operator">=</span><span class="hljs-string">"option"</span> aria-setsize<span class="hljs-operator">=</span><span class="hljs-string">"16"</span> aria-posinset<span class="hljs-operator">=</span><span class="hljs-string">"8"</span>> dates </li> </ul></code></pre> </div> <p>When specifying <a href="https://w3c.github.io/aria/#aria-posinset" class="property-reference"><code>aria-posinset</code></a>, authors <em class="rfc2119">MUST</em> specify a value that is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known. If authors specify <a href="https://w3c.github.io/aria/#aria-posinset" class="property-reference"><code>aria-posinset</code></a>, authors <em class="rfc2119">MUST</em> also specify a value for <a href="https://w3c.github.io/aria/#aria-setsize" class="property-reference"><code>aria-setsize</code></a>.</p> <p>When specifying <code>aria-posinset</code> on a <a href="https://w3c.github.io/aria/#menuitem" class="role-reference"><code>menuitem</code></a>, <a href="https://w3c.github.io/aria/#menuitemcheckbox" class="role-reference"><code>menuitemcheckbox</code></a>, or <a href="https://w3c.github.io/aria/#menuitemradio" class="role-reference"><code>menuitemradio</code></a>, authors <em class="rfc2119">SHOULD</em> set the value of <code>aria-posinset</code> with respect to the total number of items in the <a href="https://w3c.github.io/aria/#menu" class="role-reference"><code>menu</code></a>, excluding any separators.</p> </div> <table class="property-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="property-applicability-head" scope="row">Used in Roles:</th> <td class="property-applicability"><ul> <li><a href="https://w3c.github.io/aria/#article" class="role-reference"><code>article</code></a></li> <li><a href="https://w3c.github.io/aria/#comment" class="role-reference"><code>comment</code></a></li> <li><a href="https://w3c.github.io/aria/#listitem" class="role-reference"><code>listitem</code></a></li> <li><a href="https://w3c.github.io/aria/#menuitem" class="role-reference"><code>menuitem</code></a></li> <li><a href="https://w3c.github.io/aria/#option" class="role-reference"><code>option</code></a></li> <li><a href="https://w3c.github.io/aria/#radio" class="role-reference"><code>radio</code></a></li> <li><a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a></li> <li><a href="https://w3c.github.io/aria/#tab" class="role-reference"><code>tab</code></a></li> </ul> </td> </tr> <tr> <th class="property-descendants-head" scope="row">Inherits into Roles:</th> <td class="property-descendants"><ul> <li><a href="https://w3c.github.io/aria/#comment" class="role-reference"><code>comment</code></a></li> <li><a href="https://w3c.github.io/aria/#menuitemcheckbox" class="role-reference"><code>menuitemcheckbox</code></a></li> <li><a href="https://w3c.github.io/aria/#menuitemradio" class="role-reference"><code>menuitemradio</code></a></li> <li><a href="https://w3c.github.io/aria/#treeitem" class="role-reference"><code>treeitem</code></a></li> </ul> </td> </tr> <tr> <th class="property-value-head" scope="row">Value:</th> <td class="property-value"><a href="#valuetype_integer">integer</a></td> </tr> </tbody> </table> </section> <section class="state notoc" id="aria-pressed"> <h4><span class="state-name" title="aria-pressed" aria-describedby="desc-aria-pressed"><code>aria-pressed</code> <span class="type-indicator">state</span></span></h4> <div class="state-description" id="desc-aria-pressed" role="definition"> <p><a href="#dfn-indicates" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-indicates-18">Indicates</a> the current "pressed" <a href="#dfn-state" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-state-29">state</a> of toggle buttons. See related <a href="https://w3c.github.io/aria/#aria-checked" class="state-reference"><code>aria-checked</code></a> and <a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a>.</p> <p>Toggle buttons require a full press-and-release cycle to change their value. Activating it once changes the value to <code>true</code>, and activating it another time changes the value back to <code>false</code>. A value of <code>mixed</code> means that the values of more than one item controlled by the button do not all share the same value. If the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attribute</a> is not present, the button is not a toggle button.</p> <p>The <a href="https://w3c.github.io/aria/#aria-pressed" class="state-reference"><code>aria-pressed</code></a> attribute is similar but not identical to the <a href="https://w3c.github.io/aria/#aria-checked" class="state-reference"><code>aria-checked</code></a> attribute. Operating systems support <code>pressed</code> on buttons and <code>checked</code> on checkboxes.</p> </div> <table class="state-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="state-applicability-head" scope="row">Used in Roles:</th> <td class="state-applicability"><ul> <li><a href="https://w3c.github.io/aria/#button" class="role-reference"><code>button</code></a></li> </ul> </td> </tr> <tr> <th class="state-value-head" scope="row">Value:</th> <td class="state-value"><a href="#valuetype_tristate">tristate</a></td> </tr> </tbody> </table> <table class="value-descriptions"> <caption>Values:</caption> <thead> <tr> <th scope="col">Value</th> <th scope="col">Description</th> </tr> </thead> <tbody> <tr> <th class="value-name" scope="row">false</th> <td class="value-description">The element supports being pressed but is not currently pressed.</td> </tr> <tr> <th class="value-name" scope="row">mixed</th> <td class="value-description">Indicates a mixed mode value for a tri-state toggle button.</td> </tr> <tr> <th class="value-name" scope="row">true</th> <td class="value-description">The element is pressed.</td> </tr> <tr> <th class="value-name" scope="row"><strong class="default">undefined (default)</strong></th> <td class="value-description">The element does not support being pressed.</td> </tr> </tbody> </table> </section> <section class="property notoc" id="aria-readonly"> <h4><span class="property-name" title="aria-readonly" aria-describedby="desc-aria-readonly"><code>aria-readonly</code> <span class="type-indicator">property</span></span></h4> <div class="property-description" id="desc-aria-readonly" role="definition"> <p> Indicates that the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> is not editable, but is otherwise <a href="#dfn-operable" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-operable-4">operable</a>. See related <a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a>.</p> <p>This means the user can read but not set the value of the <a href="#dfn-widget" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-widget-26">widget</a>. Readonly elements are relevant to the user, and authors <em class="rfc2119">SHOULD NOT</em> restrict navigation to the element or its focusable descendants. Other actions such as copying the value of the element are also supported. This is in contrast to disabled elements, to which applications might not allow user navigation to descendants.</p> <p>Examples include:</p> <ul> <li>A form element which represents a constant.</li> <li>Row or column headers in a spreadsheet grid.</li> <li>The result of a calculation such as a shopping cart total.</li> </ul> </div> <table class="property-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="property-related-head" scope="row">Related Concepts:</th> <td class="property-related"><code><code><a data-link-type="element-attr" href="https://html.spec.whatwg.org/multipage/input.html#attr-input-readonly">readonly</a></code></code> attribute in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="property-applicability-head" scope="row">Used in Roles:</th> <td class="property-applicability"><ul> <li><a href="https://w3c.github.io/aria/#checkbox" class="role-reference"><code>checkbox</code></a></li> <li><a href="https://w3c.github.io/aria/#combobox" class="role-reference"><code>combobox</code></a></li> <li><a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a></li> <li><a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a></li> <li><a href="https://w3c.github.io/aria/#listbox" class="role-reference"><code>listbox</code></a></li> <li><a href="https://w3c.github.io/aria/#radiogroup" class="role-reference"><code>radiogroup</code></a></li> <li><a href="https://w3c.github.io/aria/#slider" class="role-reference"><code>slider</code></a></li> <li><a href="https://w3c.github.io/aria/#spinbutton" class="role-reference"><code>spinbutton</code></a></li> <li><a href="https://w3c.github.io/aria/#textbox" class="role-reference"><code>textbox</code></a></li> </ul> </td> </tr> <tr> <th class="property-descendants-head" scope="row">Inherits into Roles:</th> <td class="property-descendants"><ul> <li><a href="https://w3c.github.io/aria/#columnheader" class="role-reference"><code>columnheader</code></a></li> <li><a href="https://w3c.github.io/aria/#rowheader" class="role-reference"><code>rowheader</code></a></li> <li><a href="https://w3c.github.io/aria/#searchbox" class="role-reference"><code>searchbox</code></a></li> <li><a href="https://w3c.github.io/aria/#switch" class="role-reference"><code>switch</code></a></li> <li><a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a></li> </ul> </td> </tr> <tr> <th class="property-value-head" scope="row">Value:</th> <td class="property-value"><a href="#valuetype_true-false">true/false</a></td> </tr> </tbody> </table> <table class="value-descriptions"> <caption>Values:</caption> <thead> <tr> <th scope="col">Value</th> <th scope="col">Description</th> </tr> </thead> <tbody> <tr> <th class="value-name" scope="row"><strong class="default">false (default)</strong></th> <td class="value-description">The user can set the value of the element.</td> </tr> <tr> <th class="value-name" scope="row">true</th> <td class="value-description">The user cannot change the value of the element.</td> </tr> </tbody> </table> </section> <section class="property notoc" id="aria-relevant"> <h4><span class="property-name" title="aria-relevant" aria-describedby="desc-aria-relevant"><code>aria-relevant</code> <span class="type-indicator">property</span></span></h4> <div class="property-description" id="desc-aria-relevant" role="definition"> <p><a href="#dfn-indicates" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-indicates-19">Indicates</a> what notifications the user agent will trigger when the <a href="#dfn-accessibility-tree" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-tree-4">accessibility tree</a> within a live region is modified. See related <a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a>.</p> <p>The <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attribute</a> is represented as a space-separated list of the following <span>values</span>: <code>additions</code>, <code>removals</code>, <code>text</code>; or a single catch-all value <code>all</code>.</p> <p>This is used to describe <a href="#dfn-semantics" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-semantics-6">semantically</a> meaningful changes, as opposed to merely presentational ones. For example, nodes that are removed from the top of a log are merely removed for purposes of creating room for other entries, and the removal of them does not have meaning. However, in the case of a buddy list, removal of a buddy name indicates that they are no longer online, and this is a meaningful <a href="#dfn-event" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-event-9">event</a>. In that case <a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a> will be set to <code>all</code>. When the <a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a> attribute is not provided, the default value, <code>additions text</code>, indicates that text modifications and node additions are relevant, but that node removals are irrelevant.</p> <div class="note" role="note" id="issue-container-generatedID-65"><div role="heading" class="note-title marker" id="h-note-65" aria-level="4"><span>Note</span></div><p class=""><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a> values of removals or all are to be used sparingly. Assistive technologies only need to be informed of content removal when its removal represents an important change, such as a buddy leaving a chat room.</p></div> <div class="note" role="note" id="issue-container-generatedID-66"><div role="heading" class="note-title marker" id="h-note-66" aria-level="4"><span>Note</span></div><p class="">Text removals should only be considered relevant if one of the specified values is 'removals' or 'all'. For example, for a text change from 'foo' to 'bar' in a live region with a default <a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a> value, the text addition ('bar') would be spoken, but the text removal ('foo') would not.</p></div> <p><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a> is an optional attribute of live regions. This is a suggestion to <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-72">assistive technologies</a>, but assistive technologies are not required to present changes of all the relevant types.</p> <p>When <a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a> is not defined, an element's value is inherited from the nearest ancestor with a defined value. Although the value is a <a href="#valuetype_token_list">token list</a>, inherited values are not additive; the value provided on a descendant element completely overrides any inherited value from an ancestor element.</p> <p>When text changes are denoted as relevant, user agents <em class="rfc2119">MUST</em> monitor any descendant node change that affects the <a href="#textalternativecomputation">accessible name and description computation</a> of the live region as if the accessible name were determined from contents (<a href="#namecalculation">nameFrom: contents</a>). For example, a text change would be triggered if the <abbr title="Hypertext Markup Language">HTML</abbr> <code>alt</code> attribute of a contained image changed. However, no change would be triggered if there was a text change to a node outside the live region, even if that node was referenced (via <a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a>) by an element contained in the live region.</p> </div> <table class="property-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="property-applicability-head" scope="row">Used in Roles:</th> <td class="property-applicability">All elements of the base markup</td> </tr> <tr> <th class="property-value-head" scope="row">Value:</th> <td class="property-value"><a href="#valuetype_token_list">token list</a></td> </tr> </tbody> </table> <table class="value-descriptions"> <caption>Values:</caption> <thead> <tr> <th scope="col">Value</th> <th scope="col">Description</th> </tr> </thead> <tbody> <tr> <th class="value-name" scope="row">additions</th> <td class="value-description">Element nodes are added to the <a href="#dfn-accessibility-tree" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-tree-5">accessibility tree</a> within the live region.</td> </tr> <tr> <th class="value-name" scope="row"><strong class="default">additions text (default)</strong></th> <td class="value-description">Equivalent to the combination of values, "additions text".</td> </tr> <tr> <th class="value-name" scope="row">all</th> <td class="value-description">Equivalent to the combination of all values, "additions removals text".</td> </tr> <tr> <th class="value-name" scope="row">removals</th> <td class="value-description">Text content, a text alternative, or an element node within the live region is removed from the <a href="#dfn-accessibility-tree" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-tree-6">accessibility tree</a>.</td> </tr> <tr> <th class="value-name" scope="row">text</th> <td class="value-description">Text content or a text alternative is added to any descendant in the <a href="#dfn-accessibility-tree" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-tree-7">accessibility tree</a> of the live region.</td> </tr> </tbody> </table> </section> <section class="property notoc" id="aria-required"> <h4><span class="property-name" title="aria-required" aria-describedby="desc-aria-required"><code>aria-required</code> <span class="type-indicator">property</span></span></h4> <div class="property-description" id="desc-aria-required" role="definition"> <p><a href="#dfn-indicates" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-indicates-20">Indicates</a> that user input is required on the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> before a form can be submitted.</p> <p>For example, if the user needs to fill in an address field, the author will need to set the field's <a href="https://w3c.github.io/aria/#aria-required" class="property-reference"><code>aria-required</code></a> attribute to <code>true</code>.</p> <div class="note" role="note" id="issue-container-generatedID-67"><div role="heading" class="note-title marker" id="h-note-67" aria-level="4"><span>Note</span></div><p class="">The fact that the element is required is often presented visually (such as a sign or symbol after the <a href="#dfn-widget" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-widget-27">widget</a>). Using the <a href="https://w3c.github.io/aria/#aria-required" class="property-reference"><code>aria-required</code></a> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attribute</a> allows the author to explicitly convey to <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-73">assistive technologies</a> that an element is required.</p></div> <p>Unless an exactly equivalent native attribute is available, host languages <em class="rfc2119">SHOULD</em> allow authors to use the <a href="https://w3c.github.io/aria/#aria-required" class="property-reference"><code>aria-required</code></a> attribute on host language form elements that require input or selection by the user.</p> </div> <table class="property-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="property-related-head" scope="row">Related Concepts:</th> <td class="property-related"><code><code><a data-link-type="element-attr" href="https://html.spec.whatwg.org/multipage/input.html#attr-input-required">required</a></code></code> attribute in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="property-applicability-head" scope="row">Used in Roles:</th> <td class="property-applicability"><ul> <li><a href="https://w3c.github.io/aria/#checkbox" class="role-reference"><code>checkbox</code></a></li> <li><a href="https://w3c.github.io/aria/#combobox" class="role-reference"><code>combobox</code></a></li> <li><a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a></li> <li><a href="https://w3c.github.io/aria/#listbox" class="role-reference"><code>listbox</code></a></li> <li><a href="https://w3c.github.io/aria/#radiogroup" class="role-reference"><code>radiogroup</code></a></li> <li><a href="https://w3c.github.io/aria/#spinbutton" class="role-reference"><code>spinbutton</code></a></li> <li><a href="https://w3c.github.io/aria/#textbox" class="role-reference"><code>textbox</code></a></li> <li><a href="https://w3c.github.io/aria/#tree" class="role-reference"><code>tree</code></a></li> </ul> </td> </tr> <tr> <th class="property-descendants-head" scope="row">Inherits into Roles:</th> <td class="property-descendants"><ul> <li><a href="https://w3c.github.io/aria/#columnheader" class="role-reference"><code>columnheader</code></a></li> <li><a href="https://w3c.github.io/aria/#rowheader" class="role-reference"><code>rowheader</code></a></li> <li><a href="https://w3c.github.io/aria/#searchbox" class="role-reference"><code>searchbox</code></a></li> <li><a href="https://w3c.github.io/aria/#switch" class="role-reference"><code>switch</code></a></li> <li><a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a></li> </ul> </td> </tr> <tr> <th class="property-value-head" scope="row">Value:</th> <td class="property-value"><a href="#valuetype_true-false">true/false</a></td> </tr> </tbody> </table> <table class="value-descriptions"> <caption>Values:</caption> <thead> <tr> <th scope="col">Value</th> <th scope="col">Description</th> </tr> </thead> <tbody> <tr> <th class="value-name" scope="row"><strong class="default">false (default)</strong></th> <td class="value-description">User input is not necessary to submit the form.</td> </tr> <tr> <th class="value-name" scope="row">true</th> <td class="value-description">Users need to provide input on an element before a form is submitted.</td> </tr> </tbody> </table> </section> <section class="property notoc" id="aria-roledescription"> <h4><span class="property-name" title="aria-roledescription" aria-describedby="desc-aria-roledescription"><code>aria-roledescription</code> <span class="type-indicator">property</span></span></h4> <div class="property-description" id="desc-aria-roledescription" role="definition"> <p><a href="#dfn-defines" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-defines-15">Defines</a> a human-readable, author-localized description for the <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-91">role</a> of an <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a>.</p> <p>Some <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-74">assistive technologies</a>, such as screen readers, present the role of an element as part of the user experience. Such assistive technologies typically localize the name of the role, and they might customize it as well. Users of these assistive technologies depend on the presentation of the role name, such as "region," "button," or "slider," for an understanding of the purpose of the element and, if it is a widget, how to interact with it.</p> <p>The <code>aria-roledescription</code> property gives authors the ability to override how assistive technologies localize and express the name of a role. Thus inappropriately using <code>aria-roledescription</code> might inhibit users' ability to understand or interact with an element. Authors <em class="rfc2119">SHOULD</em> limit use of <code>aria-roledescription</code> to clarifying the purpose of non-interactive container roles like <a href="https://w3c.github.io/aria/#group" class="role-reference"><code>group</code></a> or <a href="https://w3c.github.io/aria/#region" class="role-reference"><code>region</code></a>, or to providing a <em>more specific</em> description of a <a href="https://w3c.github.io/aria/#widget" class="role-reference"><code>widget</code></a>.</p> <p>When using <code>aria-roledescription</code>, authors <em class="rfc2119">SHOULD</em> also ensure that:</p> <ol> <li>The element to which <code>aria-roledescription</code> is applied has a valid <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> role or has an implicit <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> role semantic.</li> <li>The value of <code>aria-roledescription</code> is not empty or does not contain only <a data-link-type="dfn" data-lt="ascii whitespace" href="https://infra.spec.whatwg.org/#ascii-whitespace">whitespace</a> characters.</li> </ol> <div class="note" role="note" id="issue-container-generatedID-68"><div role="heading" class="note-title marker" id="h-note-68" aria-level="4"><span>Note</span></div><p class="">Depending on the assistive technology, user verbosity settings, or other factors, certain elements' role descriptions might not be conveyed. If specifying <code>aria-roledescription</code> on such elements, then the custom role descriptions might also not be conveyed by these assistive technologies.</p></div> <p>Additionally, authors <em class="rfc2119">MUST NOT</em> specify <code>aria-roledescription</code> on an element which has an explicit or implicit <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> role where <code>aria-roledescription</code> is <a href="#prohibitedattributes">prohibited</a>.</p> <p>User agents <em class="rfc2119">MUST NOT</em> expose the <code>aria-roledescription</code> property if any of the following conditions exist:</p> <ol> <li>The element to which <code>aria-roledescription</code> is applied has an explicit or implicit <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> role where <code>aria-roledescription</code> is <a href="#prohibitedattributes">prohibited</a>.</li> <li>The value of <code>aria-roledescription</code> is undefined or the empty string.</li> </ol> <p><a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-75">Assistive technologies</a> <em class="rfc2119">SHOULD</em> use the value of <code>aria-roledescription</code> when presenting the role of an element, but <em class="rfc2119">SHOULD NOT</em> change other functionality based on the role of an element that has a value for <code>aria-roledescription</code>. For example, an assistive technology that provides functions for navigating to the next <a href="https://w3c.github.io/aria/#region" class="role-reference"><code>region</code></a> or <a href="https://w3c.github.io/aria/#button" class="role-reference"><code>button</code></a> <em class="rfc2119">SHOULD</em> allow those functions to navigate to regions and buttons that have an <code>aria-roledescription</code>.</p> <p>The following two examples show the use of <code>aria-roledescription</code> to indicate that a non-interactive container is a "slide" in a web-based presentation application.</p> <div class="example" id="example-37"> <div class="marker"> <a class="self-link" href="#example-37">Example<bdi> 37</bdi></a> </div> <pre class="highlight" aria-busy="false"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"article"</span> <span class="hljs-attr">aria-roledescription</span>=<span class="hljs-string">"slide"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"slide"</span> <span class="hljs-attr">aria-labelledby</span>=<span class="hljs-string">"slideheading"</span>></span> <span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"slideheading"</span>></span>Quarterly Report<span class="hljs-tag"></<span class="hljs-name">h1</span>></span> <span class="hljs-comment"></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> </div> <div class="example" id="example-38"> <div class="marker"> <a class="self-link" href="#example-38">Example<bdi> 38</bdi></a> </div> <pre class="highlight" aria-busy="false"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">article</span> <span class="hljs-attr">aria-roledescription</span>=<span class="hljs-string">"slide"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"slide"</span> <span class="hljs-attr">aria-labelledby</span>=<span class="hljs-string">"slideheading"</span>></span> <span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"slideheading"</span>></span>Quarterly Report<span class="hljs-tag"></<span class="hljs-name">h1</span>></span> <span class="hljs-comment"></span> <span class="hljs-tag"></<span class="hljs-name">article</span>></span></code></pre> </div> <p>In the previous examples, a screen reader user might hear "Quarterly Report, slide" rather than the more vague "Quarterly Report, article" or "Quarterly Report, group."</p> </div> <table class="property-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="property-applicability-head" scope="row">Used in Roles:</th> <td class="property-applicability">All elements of the base markup except for the following roles: <a href="https://w3c.github.io/aria/#generic" class="role-reference"><code>generic</code></a></td> </tr> <tr> <th class="property-value-head" scope="row">Value:</th> <td class="property-value"><a href="#valuetype_string">string</a></td> </tr> </tbody> </table> </section> <section class="property notoc" id="aria-rowcount"> <h4><span class="property-name" title="aria-rowcount" aria-describedby="desc-aria-rowcount"><code>aria-rowcount</code> <span class="type-indicator">property</span></span></h4> <div class="property-description" id="desc-aria-rowcount" role="definition"> <p><a href="#dfn-defines" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-defines-16">Defines</a> the total number of rows in a <a href="https://w3c.github.io/aria/#table" class="role-reference"><code>table</code></a>, <a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a>, or <a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a>. See related <a href="https://w3c.github.io/aria/#aria-rowindex" class="property-reference"><code>aria-rowindex</code></a>.</p> <p>If all of the rows are present in the <abbr title="Document Object Model">DOM</abbr>, it is not necessary to set this <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attribute</a> as the <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agent</a> can automatically calculate the total number of rows. However, if only a portion of the rows is present in the <abbr title="Document Object Model">DOM</abbr> at a given moment, this attribute is needed to provide an explicit indication of the number of rows in the full table.</p> <p>Authors <em class="rfc2119">MUST</em> set the value of <a href="https://w3c.github.io/aria/#aria-rowcount" class="property-reference"><code>aria-rowcount</code></a> to an integer equal to the number of rows in the full table. If the total number of rows is unknown, authors <em class="rfc2119">MUST</em> set the value of <a href="https://w3c.github.io/aria/#aria-rowcount" class="property-reference"><code>aria-rowcount</code></a> to <code>-1</code> to indicate that the value should not be calculated by the user agent.</p> <p>The following example shows a grid with 2000 rows, of which the first row and rows 100 through 102 are displayed to the user.</p> <div class="example" id="example-39"> <div class="marker"> <a class="self-link" href="#example-39">Example<bdi> 39</bdi></a> </div> <pre class="highlight" aria-busy="false"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"grid"</span> <span class="hljs-attr">aria-rowcount</span>=<span class="hljs-string">"2000"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"rowgroup"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"row"</span> <span class="hljs-attr">aria-rowindex</span>=<span class="hljs-string">"1"</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"columnheader"</span>></span>First Name<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"columnheader"</span>></span>Last Name<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"columnheader"</span>></span>Company<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"columnheader"</span>></span>Phone<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"rowgroup"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"row"</span> <span class="hljs-attr">aria-rowindex</span>=<span class="hljs-string">"100"</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span>></span>Fred<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span>></span>Jackson<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span>></span>Acme, Inc.<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span>></span>555-1234<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"row"</span> <span class="hljs-attr">aria-rowindex</span>=<span class="hljs-string">"101"</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span>></span>Sara<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span>></span>James<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span>></span>Acme, Inc.<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span>></span>555-1235<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"row"</span> <span class="hljs-attr">aria-rowindex</span>=<span class="hljs-string">"102"</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span>></span>Taylor<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span>></span>Johnson<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span>></span>Acme, Inc.<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span>></span>555-1236<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> </div> </div> <table class="property-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="property-applicability-head" scope="row">Used in Roles:</th> <td class="property-applicability"><ul> <li><a href="https://w3c.github.io/aria/#table" class="role-reference"><code>table</code></a></li> </ul> </td> </tr> <tr> <th class="property-descendants-head" scope="row">Inherits into Roles:</th> <td class="property-descendants"><ul> <li><a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a></li> <li><a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a></li> </ul> </td> </tr> <tr> <th class="property-value-head" scope="row">Value:</th> <td class="property-value"><a href="#valuetype_integer">integer</a></td> </tr> </tbody> </table> </section> <section class="property notoc" id="aria-rowindex"> <h4><span class="property-name" title="aria-rowindex" aria-describedby="desc-aria-rowindex"><code>aria-rowindex</code> <span class="type-indicator">property</span></span></h4> <div class="property-description" id="desc-aria-rowindex" role="definition"> <p><a href="#dfn-defines" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-defines-17">Defines</a> an <a data-link-type="dfn" data-lt="element" href="https://dom.spec.whatwg.org/#concept-element">element's</a> row index or position with respect to the total number of rows within a <a href="https://w3c.github.io/aria/#table" class="role-reference"><code>table</code></a>, <a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a>, or <a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a>. See related <a href="https://w3c.github.io/aria/#aria-rowindextext" class="property-reference"><code>aria-rowindextext</code></a>, <a href="https://w3c.github.io/aria/#aria-rowcount" class="property-reference"><code>aria-rowcount</code></a>, and <a href="https://w3c.github.io/aria/#aria-rowspan" class="property-reference"><code>aria-rowspan</code></a>.</p> <p>If all of the rows are present in the <abbr title="Document Object Model">DOM</abbr>, it is not necessary to set this <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attribute</a> as the <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agent</a> can automatically calculate the index of each row. However, if only a portion of the rows is present in the <abbr title="Document Object Model">DOM</abbr> at a given moment, this attribute is needed to provide an explicit indication of each row's position with respect to the full table.</p> <p>Authors <em class="rfc2119">MUST</em> set the <span>value</span> for <a href="https://w3c.github.io/aria/#aria-rowindex" class="property-reference"><code>aria-rowindex</code></a> to an integer greater than or equal to 1, greater than the <a href="https://w3c.github.io/aria/#aria-rowindex" class="property-reference"><code>aria-rowindex</code></a> value of any previous rows, and less than or equal to the number of rows in the full table. For a cell or gridcell which spans multiple rows, authors <em class="rfc2119">MUST</em> set the value of <a href="https://w3c.github.io/aria/#aria-rowindex" class="property-reference"><code>aria-rowindex</code></a> to the start of the span.</p> <p>Authors <em class="rfc2119">SHOULD</em> place <a href="https://w3c.github.io/aria/#aria-rowindex" class="property-reference"><code>aria-rowindex</code></a> on each row. Authors <em class="rfc2119">MAY</em> also place <a href="https://w3c.github.io/aria/#aria-rowindex" class="property-reference"><code>aria-rowindex</code></a> on all of the <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-child-43">accessibility children</a> of each row.</p> <p>The following example shows a grid with 2000 rows, of which the first row and rows 100 through 102 are displayed to the user.</p> <div class="example" id="example-40"> <div class="marker"> <a class="self-link" href="#example-40">Example<bdi> 40</bdi></a> </div> <pre class="highlight" aria-busy="false"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"grid"</span> <span class="hljs-attr">aria-rowcount</span>=<span class="hljs-string">"2000"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"rowgroup"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"row"</span> <span class="hljs-attr">aria-rowindex</span>=<span class="hljs-string">"1"</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"columnheader"</span>></span>First Name<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"columnheader"</span>></span>Last Name<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"columnheader"</span>></span>Company<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"columnheader"</span>></span>Phone<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"rowgroup"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"row"</span> <span class="hljs-attr">aria-rowindex</span>=<span class="hljs-string">"100"</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span>></span>Fred<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span>></span>Jackson<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span>></span>Acme, Inc.<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span>></span>555-1234<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"row"</span> <span class="hljs-attr">aria-rowindex</span>=<span class="hljs-string">"101"</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span>></span>Sara<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span>></span>James<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span>></span>Acme, Inc.<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span>></span>555-1235<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"row"</span> <span class="hljs-attr">aria-rowindex</span>=<span class="hljs-string">"102"</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span>></span>Taylor<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span>></span>Johnson<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span>></span>Acme, Inc.<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span>></span>555-1236<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> </div> <p>The following example shows the grid from the previous example with <a href="https://w3c.github.io/aria/#aria-rowindex" class="property-reference"><code>aria-rowindex</code></a> also placed on all of the <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-child-44">accessibility children</a> of each row.</p> <div class="example" id="example-41"> <div class="marker"> <a class="self-link" href="#example-41">Example<bdi> 41</bdi></a> </div> <pre class="highlight" aria-busy="false"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"grid"</span> <span class="hljs-attr">aria-rowcount</span>=<span class="hljs-string">"2000"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"rowgroup"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"row"</span> <span class="hljs-attr">aria-rowindex</span>=<span class="hljs-string">"1"</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"columnheader"</span> <span class="hljs-attr">aria-rowindex</span>=<span class="hljs-string">"1"</span>></span>First Name<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"columnheader"</span> <span class="hljs-attr">aria-rowindex</span>=<span class="hljs-string">"1"</span>></span>Last Name<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"columnheader"</span> <span class="hljs-attr">aria-rowindex</span>=<span class="hljs-string">"1"</span>></span>Company<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"columnheader"</span> <span class="hljs-attr">aria-rowindex</span>=<span class="hljs-string">"1"</span>></span>Phone<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"rowgroup"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"row"</span> <span class="hljs-attr">aria-rowindex</span>=<span class="hljs-string">"100"</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span> <span class="hljs-attr">aria-rowindex</span>=<span class="hljs-string">"100"</span>></span>Fred<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span> <span class="hljs-attr">aria-rowindex</span>=<span class="hljs-string">"100"</span>></span>Jackson<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span> <span class="hljs-attr">aria-rowindex</span>=<span class="hljs-string">"100"</span>></span>Acme, Inc.<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span> <span class="hljs-attr">aria-rowindex</span>=<span class="hljs-string">"100"</span>></span>555-1234<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"row"</span> <span class="hljs-attr">aria-rowindex</span>=<span class="hljs-string">"101"</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span> <span class="hljs-attr">aria-rowindex</span>=<span class="hljs-string">"101"</span>></span>Sara<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span> <span class="hljs-attr">aria-rowindex</span>=<span class="hljs-string">"101"</span>></span>James<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span> <span class="hljs-attr">aria-rowindex</span>=<span class="hljs-string">"101"</span>></span>Acme, Inc.<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span> <span class="hljs-attr">aria-rowindex</span>=<span class="hljs-string">"101"</span>></span>555-1235<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"row"</span> <span class="hljs-attr">aria-rowindex</span>=<span class="hljs-string">"102"</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span> <span class="hljs-attr">aria-rowindex</span>=<span class="hljs-string">"102"</span>></span>Taylor<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span> <span class="hljs-attr">aria-rowindex</span>=<span class="hljs-string">"102"</span>></span>Johnson<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span> <span class="hljs-attr">aria-rowindex</span>=<span class="hljs-string">"102"</span>></span>Acme, Inc.<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"gridcell"</span> <span class="hljs-attr">aria-rowindex</span>=<span class="hljs-string">"102"</span>></span>555-1236<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> </div> </div> <table class="property-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="property-applicability-head" scope="row">Used in Roles:</th> <td class="property-applicability"><ul> <li><a href="https://w3c.github.io/aria/#cell" class="role-reference"><code>cell</code></a></li> <li><a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a></li> </ul> </td> </tr> <tr> <th class="property-descendants-head" scope="row">Inherits into Roles:</th> <td class="property-descendants"><ul> <li><a href="https://w3c.github.io/aria/#columnheader" class="role-reference"><code>columnheader</code></a></li> <li><a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a></li> <li><a href="https://w3c.github.io/aria/#rowheader" class="role-reference"><code>rowheader</code></a></li> </ul> </td> </tr> <tr> <th class="property-value-head" scope="row">Value:</th> <td class="property-value"><a href="#valuetype_integer">integer</a></td> </tr> </tbody> </table> </section> <section class="property notoc" id="aria-rowindextext"> <h4><span class="property-name" title="aria-rowindextext" aria-describedby="desc-aria-rowindextext"><code>aria-rowindextext</code> <span class="type-indicator">property</span></span></h4> <div class="property-description" id="desc-aria-rowindextext" role="definition"> <p><a href="#dfn-defines" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-defines-18">Defines</a> a human readable text alternative of <a href="https://w3c.github.io/aria/#aria-rowindex" class="property-reference"><code>aria-rowindex</code></a>. See related <a href="https://w3c.github.io/aria/#aria-colindextext" class="property-reference"><code>aria-colindextext</code></a>.</p> <p>Authors <em class="rfc2119">SHOULD</em> only use <code>aria-rowindextext</code> when the provided or calculated value of <a href="https://w3c.github.io/aria/#aria-rowindex" class="property-reference"><code>aria-rowindex</code></a> is not meaningful or does not reflect the displayed index, as can be seen in the game Battleship.</p> <p>Authors <em class="rfc2119">SHOULD NOT</em> use <code>aria-rowindextext</code> as a replacement for <a href="https://w3c.github.io/aria/#aria-rowindex" class="property-reference"><code>aria-rowindex</code></a> because some assistive technologies rely upon the numeric row index for the purpose of keeping track of the user's position or providing alternative table navigation.</p> <p>Authors <em class="rfc2119">SHOULD</em> place <code>aria-rowindextext</code> on each row. Authors <em class="rfc2119">MAY</em> also place <code>aria-rowindextext</code> on all of the <a href="#dfn-accessibility-child" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-child-45">accessibility children</a> of each row.</p> </div> <table class="property-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="property-applicability-head" scope="row">Used in Roles:</th> <td class="property-applicability"><ul> <li><a href="https://w3c.github.io/aria/#cell" class="role-reference"><code>cell</code></a></li> <li><a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a></li> </ul> </td> </tr> <tr> <th class="property-descendants-head" scope="row">Inherits into Roles:</th> <td class="property-descendants"><ul> <li><a href="https://w3c.github.io/aria/#columnheader" class="role-reference"><code>columnheader</code></a></li> <li><a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a></li> <li><a href="https://w3c.github.io/aria/#rowheader" class="role-reference"><code>rowheader</code></a></li> </ul> </td> </tr> <tr> <th class="property-value-head" scope="row">Value:</th> <td class="property-value"><a href="#valuetype_integer">string</a></td> </tr> </tbody> </table> </section> <section class="property notoc" id="aria-rowspan"> <h4><span class="property-name" title="aria-rowspan" aria-describedby="desc-aria-rowspan"><code>aria-rowspan</code> <span class="type-indicator">property</span></span></h4> <div class="property-description" id="desc-aria-rowspan" role="definition"> <p><a href="#dfn-defines" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-defines-19">Defines</a> the number of rows spanned by a cell or gridcell within a <a href="https://w3c.github.io/aria/#table" class="role-reference"><code>table</code></a>, <a href="https://w3c.github.io/aria/#grid" class="role-reference"><code>grid</code></a>, or <a href="https://w3c.github.io/aria/#treegrid" class="role-reference"><code>treegrid</code></a>. See related <a href="https://w3c.github.io/aria/#aria-rowindex" class="property-reference"><code>aria-rowindex</code></a> and <a href="https://w3c.github.io/aria/#aria-colspan" class="property-reference"><code>aria-colspan</code></a>.</p> <p>This <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attribute</a> is intended for cells and gridcells which are not contained in a native table. When defining the row span of cells or gridcells in a native table, authors <em class="rfc2119">SHOULD</em> use the host language's attribute instead of <a href="https://w3c.github.io/aria/#aria-rowspan" class="property-reference"><code>aria-rowspan</code></a>. If <a href="https://w3c.github.io/aria/#aria-rowspan" class="property-reference"><code>aria-rowspan</code></a> is used on an element for which the host language provides an equivalent attribute, <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agents</a> <em class="rfc2119">MUST</em> ignore the value of <a href="https://w3c.github.io/aria/#aria-rowspan" class="property-reference"><code>aria-rowspan</code></a> and instead expose the value of the host language's attribute to <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-76">assistive technologies</a>.</p> <p>Authors <em class="rfc2119">MUST</em> set the <span>value</span> of <a href="https://w3c.github.io/aria/#aria-rowspan" class="property-reference"><code>aria-rowspan</code></a> to an integer greater than or equal to 0 and less than the value which would cause the cell or gridcell to overlap the next cell or gridcell in the same column. Setting the value to 0 indicates that the cell or gridcell is to span all the remaining rows in the row group.</p> </div> <table class="property-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="property-applicability-head" scope="row">Used in Roles:</th> <td class="property-applicability"><ul> <li><a href="https://w3c.github.io/aria/#cell" class="role-reference"><code>cell</code></a></li> </ul> </td> </tr> <tr> <th class="property-descendants-head" scope="row">Inherits into Roles:</th> <td class="property-descendants"><ul> <li><a href="https://w3c.github.io/aria/#columnheader" class="role-reference"><code>columnheader</code></a></li> <li><a href="https://w3c.github.io/aria/#rowheader" class="role-reference"><code>rowheader</code></a></li> </ul> </td> </tr> <tr> <th class="property-value-head" scope="row">Value:</th> <td class="property-value"><a href="#valuetype_integer">integer</a></td> </tr> </tbody> </table> </section> <section class="state notoc" id="aria-selected"> <h4><span class="state-name" title="aria-selected" aria-describedby="desc-aria-selected"><code>aria-selected</code> <span class="type-indicator">state</span></span></h4> <div class="state-description" id="desc-aria-selected" role="definition"> <p><a href="#dfn-indicates" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-indicates-21">Indicates</a> the current "selected" <a href="#dfn-state" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-state-30">state</a> of various <a href="#dfn-widget" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-widget-28">widgets</a>. See related <a href="https://w3c.github.io/aria/#aria-checked" class="state-reference"><code>aria-checked</code></a> and <a href="https://w3c.github.io/aria/#aria-pressed" class="state-reference"><code>aria-pressed</code></a>.</p> <p>This <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attribute</a> is used to indicate which elements within single-selection and multiple-selection <a href="https://w3c.github.io/aria/#composite" class="role-reference"><code>composite</code></a> widgets are selected.</p> <p>The <a href="https://w3c.github.io/aria/#option" class="role-reference"><code>option</code></a>, <a href="https://w3c.github.io/aria/#tab" class="role-reference"><code>tab</code></a>, and <a href="https://w3c.github.io/aria/#treeitem" class="role-reference"><code>treeitem</code></a> roles permit user agents to provide an implicit value for <a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a> when specified conditions are met. User agents <em class="rfc2119">MUST NOT</em> provide an implicit value for aria-selected in any other circumstance.</p> </div> <table class="state-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="state-applicability-head" scope="row">Used in Roles:</th> <td class="state-applicability"><ul> <li><a href="https://w3c.github.io/aria/#gridcell" class="role-reference"><code>gridcell</code></a></li> <li><a href="https://w3c.github.io/aria/#option" class="role-reference"><code>option</code></a></li> <li><a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a></li> <li><a href="https://w3c.github.io/aria/#tab" class="role-reference"><code>tab</code></a></li> </ul> </td> </tr> <tr> <th class="state-descendants-head" scope="row">Inherits into Roles:</th> <td class="state-descendants"><ul> <li><a href="https://w3c.github.io/aria/#columnheader" class="role-reference"><code>columnheader</code></a></li> <li><a href="https://w3c.github.io/aria/#rowheader" class="role-reference"><code>rowheader</code></a></li> <li><a href="https://w3c.github.io/aria/#treeitem" class="role-reference"><code>treeitem</code></a></li> </ul> </td> </tr> <tr> <th class="state-value-head" scope="row">Value:</th> <td class="state-value"><a href="#valuetype_true-false-undefined">true/false/undefined</a></td> </tr> </tbody> </table> <table class="value-descriptions"> <caption>Values:</caption> <thead> <tr> <th scope="col">Value</th> <th scope="col">Description</th> </tr> </thead> <tbody> <tr> <th class="value-name" scope="row">false</th> <td class="value-description">The selectable element is not selected.</td> </tr> <tr> <th class="value-name" scope="row">true</th> <td class="value-description">The selectable element is selected.</td> </tr> <tr> <th class="value-name" scope="row"><strong class="default">undefined (default)</strong></th> <td class="value-description">The element is not selectable.</td> </tr> </tbody> </table> </section> <section class="property notoc" id="aria-setsize"> <h4><span class="property-name" title="aria-setsize" aria-describedby="desc-aria-setsize"><code>aria-setsize</code> <span class="type-indicator">property</span></span></h4> <div class="property-description" id="desc-aria-setsize" role="definition"> <p><a href="#dfn-defines" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-defines-20">Defines</a> the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the <abbr title="Document Object Model">DOM</abbr>. See related <a href="https://w3c.github.io/aria/#aria-posinset" class="property-reference"><code>aria-posinset</code></a>.</p> <p>This <a data-link-type="dfn|abstract-op" href="#dfn-property" class="internalDFN" id="ref-for-dfn-property-25">property</a> is marked on the members of a set, not the container element that collects the members of the set. To orient the user by saying an element is "item X out of Y," the <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-77">assistive technologies</a> would use X equal to the <a href="https://w3c.github.io/aria/#aria-posinset" class="property-reference"><code>aria-posinset</code></a> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attribute</a> and Y equal to the <code>aria-setsize</code> attribute.</p> <p>If all items up to the current item in a set are present in the document structure, it is not necessary to set this <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attribute</a>, as the <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agent</a> can automatically calculate the position for these items. However, if all previous items in the set are not present in the document structure at a given moment, the author <em class="rfc2119">MUST</em> set this <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attribute</a>to provide an explicit indication of an element's position.</p> <p>When specifying <code>aria-setsize</code>, authors <em class="rfc2119">MUST</em> set the value to an integer equal to the number of items in the set. If the total number of items is unknown, authors <em class="rfc2119">SHOULD</em> set the value of <code>aria-setsize</code> to <code>-1</code>.</p> <p>When specifying <code>aria-setsize</code> on a <a href="https://w3c.github.io/aria/#menuitem" class="role-reference"><code>menuitem</code></a>, <a href="https://w3c.github.io/aria/#menuitemcheckbox" class="role-reference"><code>menuitemcheckbox</code></a>, or <a href="https://w3c.github.io/aria/#menuitemradio" class="role-reference"><code>menuitemradio</code></a>, authors <em class="rfc2119">SHOULD</em> set the value of <code>aria-setsize</code> based on the total number of items in the <a href="https://w3c.github.io/aria/#menu" class="role-reference"><code>menu</code></a>, excluding any separators.</p> <p>The following example shows items 5 through 8 in a set of 16.</p> <div class="example" id="example-42"> <div class="marker"> <a class="self-link" href="#example-42">Example<bdi> 42</bdi></a> </div> <pre class="highlight" aria-busy="false"><code class="hljs abnf"><h2 id<span class="hljs-operator">=</span><span class="hljs-string">"label_fruit"</span>> Available Fruit </h2> <ul role<span class="hljs-operator">=</span><span class="hljs-string">"listbox"</span> aria-labelledby<span class="hljs-operator">=</span><span class="hljs-string">"label_fruit"</span>> <li role<span class="hljs-operator">=</span><span class="hljs-string">"option"</span> aria-setsize<span class="hljs-operator">=</span><span class="hljs-string">"16"</span> aria-posinset<span class="hljs-operator">=</span><span class="hljs-string">"5"</span>> apples </li> <li role<span class="hljs-operator">=</span><span class="hljs-string">"option"</span> aria-setsize<span class="hljs-operator">=</span><span class="hljs-string">"16"</span> aria-posinset<span class="hljs-operator">=</span><span class="hljs-string">"6"</span>> bananas </li> <li role<span class="hljs-operator">=</span><span class="hljs-string">"option"</span> aria-setsize<span class="hljs-operator">=</span><span class="hljs-string">"16"</span> aria-posinset<span class="hljs-operator">=</span><span class="hljs-string">"7"</span>> cantaloupes </li> <li role<span class="hljs-operator">=</span><span class="hljs-string">"option"</span> aria-setsize<span class="hljs-operator">=</span><span class="hljs-string">"16"</span> aria-posinset<span class="hljs-operator">=</span><span class="hljs-string">"8"</span>> dates </li> </ul></code></pre> </div> <p>The following example shows items 5 through 8 in a set whose total size is unknown.</p> <div class="example" id="example-43"> <div class="marker"> <a class="self-link" href="#example-43">Example<bdi> 43</bdi></a> </div> <pre class="highlight" aria-busy="false"><code class="hljs abnf"><h2 id<span class="hljs-operator">=</span><span class="hljs-string">"label_fruit"</span>> Available Fruit </h2> <ul role<span class="hljs-operator">=</span><span class="hljs-string">"listbox"</span> aria-labelledby<span class="hljs-operator">=</span><span class="hljs-string">"label_fruit"</span>> <li role<span class="hljs-operator">=</span><span class="hljs-string">"option"</span> aria-setsize<span class="hljs-operator">=</span><span class="hljs-string">"-1"</span> aria-posinset<span class="hljs-operator">=</span><span class="hljs-string">"5"</span>> apples </li> <li role<span class="hljs-operator">=</span><span class="hljs-string">"option"</span> aria-setsize<span class="hljs-operator">=</span><span class="hljs-string">"-1"</span> aria-posinset<span class="hljs-operator">=</span><span class="hljs-string">"6"</span>> bananas </li> <li role<span class="hljs-operator">=</span><span class="hljs-string">"option"</span> aria-setsize<span class="hljs-operator">=</span><span class="hljs-string">"-1"</span> aria-posinset<span class="hljs-operator">=</span><span class="hljs-string">"7"</span>> cantaloupes </li> <li role<span class="hljs-operator">=</span><span class="hljs-string">"option"</span> aria-setsize<span class="hljs-operator">=</span><span class="hljs-string">"-1"</span> aria-posinset<span class="hljs-operator">=</span><span class="hljs-string">"8"</span>> dates </li> </ul></code></pre> </div> </div> <table class="property-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="property-applicability-head" scope="row">Used in Roles:</th> <td class="property-applicability"><ul> <li><a href="https://w3c.github.io/aria/#article" class="role-reference"><code>article</code></a></li> <li><a href="https://w3c.github.io/aria/#comment" class="role-reference"><code>comment</code></a></li> <li><a href="https://w3c.github.io/aria/#listitem" class="role-reference"><code>listitem</code></a></li> <li><a href="https://w3c.github.io/aria/#menuitem" class="role-reference"><code>menuitem</code></a></li> <li><a href="https://w3c.github.io/aria/#option" class="role-reference"><code>option</code></a></li> <li><a href="https://w3c.github.io/aria/#radio" class="role-reference"><code>radio</code></a></li> <li><a href="https://w3c.github.io/aria/#row" class="role-reference"><code>row</code></a></li> <li><a href="https://w3c.github.io/aria/#tab" class="role-reference"><code>tab</code></a></li> </ul> </td> </tr> <tr> <th class="property-descendants-head" scope="row">Inherits into Roles:</th> <td class="property-descendants"><ul> <li><a href="https://w3c.github.io/aria/#comment" class="role-reference"><code>comment</code></a></li> <li><a href="https://w3c.github.io/aria/#menuitemcheckbox" class="role-reference"><code>menuitemcheckbox</code></a></li> <li><a href="https://w3c.github.io/aria/#menuitemradio" class="role-reference"><code>menuitemradio</code></a></li> <li><a href="https://w3c.github.io/aria/#treeitem" class="role-reference"><code>treeitem</code></a></li> </ul> </td> </tr> <tr> <th class="property-value-head" scope="row">Value:</th> <td class="property-value"><a href="#valuetype_integer">integer</a></td> </tr> </tbody> </table> </section> <section class="property notoc" id="aria-sort"> <h4><span class="property-name" title="aria-sort" aria-describedby="desc-aria-sort"><code>aria-sort</code> <span class="type-indicator">property</span></span></h4> <div class="property-description" id="desc-aria-sort" role="definition"> <p><a href="#dfn-indicates" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-indicates-22">Indicates</a> if items in a table or grid are sorted in ascending or descending order.</p> <p>Authors <em class="rfc2119">SHOULD</em> only apply this <a data-link-type="dfn|abstract-op" href="#dfn-property" class="internalDFN" id="ref-for-dfn-property-26">property</a> to table headers or grid headers. If the property is not provided, there is no defined sort order. For each table or grid, authors <em class="rfc2119">SHOULD</em> apply <a href="https://w3c.github.io/aria/#aria-sort" class="property-reference"><code>aria-sort</code></a> to only one header at a time.</p> </div> <table class="property-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="property-applicability-head" scope="row">Used in Roles:</th> <td class="property-applicability"><ul> <li><a href="https://w3c.github.io/aria/#columnheader" class="role-reference"><code>columnheader</code></a></li> <li><a href="https://w3c.github.io/aria/#rowheader" class="role-reference"><code>rowheader</code></a></li> </ul> </td> </tr> <tr> <th class="property-value-head" scope="row">Value:</th> <td class="property-value"><a href="#valuetype_token">token</a></td> </tr> </tbody> </table> <table class="value-descriptions"> <caption>Values:</caption> <thead> <tr> <th scope="col">Value</th> <th scope="col">Description</th> </tr> </thead> <tbody> <tr> <th class="value-name" scope="row">ascending</th> <td class="value-description">Items are sorted in ascending order.</td> </tr> <tr> <th class="value-name" scope="row">descending</th> <td class="value-description">Items are sorted in descending order.</td> </tr> <tr> <th class="value-name" scope="row"><strong class="default">none (default)</strong></th> <td class="value-description">There is no defined sort applied.</td> </tr> <tr> <th class="value-name" scope="row">other</th> <td class="value-description">A sort algorithm other than ascending or descending has been applied.</td> </tr> </tbody> </table> </section> <section class="property notoc" id="aria-valuemax"> <h4><span class="property-name" title="aria-valuemax" aria-describedby="desc-aria-valuemax"><code>aria-valuemax</code> <span class="type-indicator">property</span></span></h4> <div class="property-description" id="desc-aria-valuemax" role="definition"> <p><a href="#dfn-defines" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-defines-21">Defines</a> the maximum allowed value for a range <a href="#dfn-widget" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-widget-29">widget</a>.</p> <p>Authors <em class="rfc2119">MUST</em> ensure the value of <a href="https://w3c.github.io/aria/#aria-valuemax" class="property-reference"><code>aria-valuemax</code></a> is greater than or equal to the value of <a href="https://w3c.github.io/aria/#aria-valuemin" class="property-reference"><code>aria-valuemin</code></a>. If the <a href="https://w3c.github.io/aria/#aria-valuenow" class="property-reference"><code>aria-valuenow</code></a> has a known maximum and minimum, the author <em class="rfc2119">SHOULD</em> provide properties for <a href="https://w3c.github.io/aria/#aria-valuemax" class="property-reference"><code>aria-valuemax</code></a> and <a href="https://w3c.github.io/aria/#aria-valuemin" class="property-reference"><code>aria-valuemin</code></a>.</p> <div class="note" role="note" id="issue-container-generatedID-69"><div role="heading" class="note-title marker" id="h-note-69" aria-level="4"><span>Note</span></div><p class="">A range widget starts with a given value, which can be increased until reaching the maximum value, defined by this <a data-link-type="dfn|abstract-op" href="#dfn-property" class="internalDFN" id="ref-for-dfn-property-27">property</a>. Declaring the minimum and maximum <span>values</span> allows assistive technology to convey the size of the range to users.</p></div> </div> <table class="property-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="property-related-head" scope="row">Related Concepts:</th> <td class="property-related"><code><input type="<code><a data-link-type="attr-value" href="https://html.spec.whatwg.org/multipage/input.html#attr-input-type-range-keyword">range</a></code>"></code> element <code><code><a data-link-type="element-attr" href="https://html.spec.whatwg.org/multipage/input.html#attr-input-max">max</a></code></code> attribute in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="property-applicability-head" scope="row">Used in Roles:</th> <td class="property-applicability"><ul> <li><a href="https://w3c.github.io/aria/#range" class="role-reference"><code>range</code></a></li> <li><a href="https://w3c.github.io/aria/#scrollbar" class="role-reference"><code>scrollbar</code></a></li> <li><a href="https://w3c.github.io/aria/#separator" class="role-reference"><code>separator</code></a></li> <li><a href="https://w3c.github.io/aria/#slider" class="role-reference"><code>slider</code></a></li> <li><a href="https://w3c.github.io/aria/#spinbutton" class="role-reference"><code>spinbutton</code></a></li> </ul> </td> </tr> <tr> <th class="property-descendants-head" scope="row">Inherits into Roles:</th> <td class="property-descendants"><ul> <li><a href="https://w3c.github.io/aria/#meter" class="role-reference"><code>meter</code></a></li> <li><a href="https://w3c.github.io/aria/#progressbar" class="role-reference"><code>progressbar</code></a></li> <li><a href="https://w3c.github.io/aria/#scrollbar" class="role-reference"><code>scrollbar</code></a></li> <li><a href="https://w3c.github.io/aria/#slider" class="role-reference"><code>slider</code></a></li> <li><a href="https://w3c.github.io/aria/#spinbutton" class="role-reference"><code>spinbutton</code></a></li> </ul> </td> </tr> <tr> <th class="property-value-head" scope="row">Value:</th> <td class="property-value"><a href="#valuetype_number">number</a></td> </tr> </tbody> </table> </section> <section class="property notoc" id="aria-valuemin"> <h4><span class="property-name" title="aria-valuemin" aria-describedby="desc-aria-valuemin"><code>aria-valuemin</code> <span class="type-indicator">property</span></span></h4> <div class="property-description" id="desc-aria-valuemin" role="definition"> <p><a href="#dfn-defines" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-defines-22">Defines</a> the minimum allowed value for a range <a href="#dfn-widget" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-widget-30">widget</a>.</p> <p>Authors <em class="rfc2119">MUST</em> ensure the value of <a href="https://w3c.github.io/aria/#aria-valuemin" class="property-reference"><code>aria-valuemin</code></a> is less than or equal to the value of <a href="https://w3c.github.io/aria/#aria-valuemax" class="property-reference"><code>aria-valuemax</code></a>. If the <a href="https://w3c.github.io/aria/#aria-valuenow" class="property-reference"><code>aria-valuenow</code></a> has a known maximum and minimum, the author <em class="rfc2119">SHOULD</em> provide properties for <a href="https://w3c.github.io/aria/#aria-valuemax" class="property-reference"><code>aria-valuemax</code></a> and <a href="https://w3c.github.io/aria/#aria-valuemin" class="property-reference"><code>aria-valuemin</code></a>.</p> <div class="note" role="note" id="issue-container-generatedID-70"><div role="heading" class="note-title marker" id="h-note-70" aria-level="4"><span>Note</span></div><p class="">A range widget starts with a given value, which can be decreased until reaching the minimum value, defined by this <a data-link-type="dfn|abstract-op" href="#dfn-property" class="internalDFN" id="ref-for-dfn-property-28">property</a>. Declaring the minimum and maximum <span>values</span> allows assistive technology to convey the size of the range to users.</p></div> </div> <table class="property-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="property-related-head" scope="row">Related Concepts:</th> <td class="property-related"><code><input type="<code><a data-link-type="attr-value" href="https://html.spec.whatwg.org/multipage/input.html#attr-input-type-range-keyword">range</a></code>"></code> element <code><code><a data-link-type="element-attr" href="https://html.spec.whatwg.org/multipage/input.html#attr-input-min">min</a></code></code> attribute in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="property-applicability-head" scope="row">Used in Roles:</th> <td class="property-applicability"><ul> <li><a href="https://w3c.github.io/aria/#range" class="role-reference"><code>range</code></a></li> <li><a href="https://w3c.github.io/aria/#scrollbar" class="role-reference"><code>scrollbar</code></a></li> <li><a href="https://w3c.github.io/aria/#separator" class="role-reference"><code>separator</code></a></li> <li><a href="https://w3c.github.io/aria/#slider" class="role-reference"><code>slider</code></a></li> <li><a href="https://w3c.github.io/aria/#spinbutton" class="role-reference"><code>spinbutton</code></a></li> </ul> </td> </tr> <tr> <th class="property-descendants-head" scope="row">Inherits into Roles:</th> <td class="property-descendants"><ul> <li><a href="https://w3c.github.io/aria/#meter" class="role-reference"><code>meter</code></a></li> <li><a href="https://w3c.github.io/aria/#progressbar" class="role-reference"><code>progressbar</code></a></li> <li><a href="https://w3c.github.io/aria/#scrollbar" class="role-reference"><code>scrollbar</code></a></li> <li><a href="https://w3c.github.io/aria/#slider" class="role-reference"><code>slider</code></a></li> <li><a href="https://w3c.github.io/aria/#spinbutton" class="role-reference"><code>spinbutton</code></a></li> </ul> </td> </tr> <tr> <th class="property-value-head" scope="row">Value:</th> <td class="property-value"><a href="#valuetype_number">number</a></td> </tr> </tbody> </table> </section> <section class="property notoc" id="aria-valuenow"> <h4><span class="property-name" title="aria-valuenow" aria-describedby="desc-aria-valuenow"><code>aria-valuenow</code> <span class="type-indicator">property</span></span></h4> <div class="property-description" id="desc-aria-valuenow" role="definition"> <p><a href="#dfn-defines" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-defines-23">Defines</a> the current value for a range <a href="#dfn-widget" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-widget-31">widget</a>. See related <a href="https://w3c.github.io/aria/#aria-valuetext" class="property-reference"><code>aria-valuetext</code></a>.</p> <p>This property is used, for example, on a range widget such as a slider or progress bar.</p> <p>If the current value is not known (for example, an indeterminate progress bar), the author <em class="rfc2119">SHOULD NOT</em> set the <a href="https://w3c.github.io/aria/#aria-valuenow" class="property-reference"><code>aria-valuenow</code></a> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attribute</a>. If the <a href="https://w3c.github.io/aria/#aria-valuenow" class="property-reference"><code>aria-valuenow</code></a> attribute is absent, no information is implied about the current value. If the <a href="https://w3c.github.io/aria/#aria-valuenow" class="property-reference"><code>aria-valuenow</code></a> has a known maximum and minimum, the author <em class="rfc2119">SHOULD</em> provide properties for <a href="https://w3c.github.io/aria/#aria-valuemax" class="property-reference"><code>aria-valuemax</code></a> and <a href="https://w3c.github.io/aria/#aria-valuemin" class="property-reference"><code>aria-valuemin</code></a>.</p> <p>The value of <a href="https://w3c.github.io/aria/#aria-valuenow" class="property-reference"><code>aria-valuenow</code></a> is a decimal number. If the range is a set of numeric values, then <a href="https://w3c.github.io/aria/#aria-valuenow" class="property-reference"><code>aria-valuenow</code></a> is one of those values. For example, if the range is [0, 1], a valid <a href="https://w3c.github.io/aria/#aria-valuenow" class="property-reference"><code>aria-valuenow</code></a> is 0.5. A value outside the range, such as -2.5 or 1.1, is invalid.</p> <p>For <a href="https://w3c.github.io/aria/#progressbar" class="role-reference"><code>progressbar</code></a> elements and <a href="https://w3c.github.io/aria/#scrollbar" class="role-reference"><code>scrollbar</code></a> elements, assistive technologies <em class="rfc2119">SHOULD</em> render the value to users as a percent, calculated as a position on the range from <a href="https://w3c.github.io/aria/#aria-valuemin" class="property-reference"><code>aria-valuemin</code></a> to <a href="https://w3c.github.io/aria/#aria-valuemax" class="property-reference"><code>aria-valuemax</code></a> if both are defined, otherwise the actual value with a percent indicator. For elements with role <a href="https://w3c.github.io/aria/#slider" class="role-reference"><code>slider</code></a> and <a href="https://w3c.github.io/aria/#spinbutton" class="role-reference"><code>spinbutton</code></a>, assistive technologies <em class="rfc2119">SHOULD</em> render the actual value to users.</p> <p>When the rendered value cannot be accurately represented as a number, authors <em class="rfc2119">SHOULD</em> use the <a href="https://w3c.github.io/aria/#aria-valuetext" class="property-reference"><code>aria-valuetext</code></a> attribute in conjunction with <a href="https://w3c.github.io/aria/#aria-valuenow" class="property-reference"><code>aria-valuenow</code></a> to provide a user-friendly representation of the range's current value. For example, a slider might have rendered values of <code>small</code>, <code>medium</code>, and <code>large</code>. In this case, the values of <a href="https://w3c.github.io/aria/#aria-valuetext" class="property-reference"><code>aria-valuetext</code></a> would be one of the strings: <code>small</code>, <code>medium</code>, or <code>large</code>.</p> <div class="note" role="note" id="issue-container-generatedID-71"><div role="heading" class="note-title marker" id="h-note-71" aria-level="4"><span>Note</span></div><p class="">If <a href="https://w3c.github.io/aria/#aria-valuetext" class="property-reference"><code>aria-valuetext</code></a> is specified, assistive technologies render that instead of the value of <a href="https://w3c.github.io/aria/#aria-valuenow" class="property-reference"><code>aria-valuenow</code></a>.</p></div> </div> <table class="property-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="property-related-head" scope="row">Related Concepts:</th> <td class="property-related"><code><input type="<code><a data-link-type="attr-value" href="https://html.spec.whatwg.org/multipage/input.html#attr-input-type-range-keyword">range</a></code>"></code> element <code><code><a data-link-type="element-attr" href="https://html.spec.whatwg.org/multipage/input.html#attr-input-value">value</a></code></code> attribute in <abbr title="Hypertext Markup Language">HTML</abbr></td> </tr> <tr> <th class="property-applicability-head" scope="row">Used in Roles:</th> <td class="property-applicability"><ul> <li><a href="https://w3c.github.io/aria/#meter" class="role-reference"><code>meter</code></a></li> <li><a href="https://w3c.github.io/aria/#range" class="role-reference"><code>range</code></a></li> <li><a href="https://w3c.github.io/aria/#scrollbar" class="role-reference"><code>scrollbar</code></a></li> <li><a href="https://w3c.github.io/aria/#separator" class="role-reference"><code>separator</code></a></li> <li><a href="https://w3c.github.io/aria/#slider" class="role-reference"><code>slider</code></a></li> <li><a href="https://w3c.github.io/aria/#spinbutton" class="role-reference"><code>spinbutton</code></a></li> </ul> </td> </tr> <tr> <th class="property-descendants-head" scope="row">Inherits into Roles:</th> <td class="property-descendants"><ul> <li><a href="https://w3c.github.io/aria/#meter" class="role-reference"><code>meter</code></a></li> <li><a href="https://w3c.github.io/aria/#progressbar" class="role-reference"><code>progressbar</code></a></li> <li><a href="https://w3c.github.io/aria/#scrollbar" class="role-reference"><code>scrollbar</code></a></li> <li><a href="https://w3c.github.io/aria/#slider" class="role-reference"><code>slider</code></a></li> <li><a href="https://w3c.github.io/aria/#spinbutton" class="role-reference"><code>spinbutton</code></a></li> </ul> </td> </tr> <tr> <th class="property-value-head" scope="row">Value:</th> <td class="property-value"><a href="#valuetype_number">number</a></td> </tr> </tbody> </table> </section> <section class="property notoc" id="aria-valuetext"> <h4><span class="property-name" title="aria-valuetext" aria-describedby="desc-aria-valuetext"><code>aria-valuetext</code> <span class="type-indicator">property</span></span></h4> <div class="property-description" id="desc-aria-valuetext" role="definition"> <p><a href="#dfn-defines" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-defines-24">Defines</a> the human readable text alternative of <a href="https://w3c.github.io/aria/#aria-valuenow" class="property-reference"><code>aria-valuenow</code></a> for a range <a href="#dfn-widget" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-widget-32">widget</a>.</p> <p>This property is used, for example, on a range widget such as a slider or progress bar.</p> <p>If the <a href="https://w3c.github.io/aria/#aria-valuetext" class="property-reference"><code>aria-valuetext</code></a> attribute is set, authors <em class="rfc2119">SHOULD</em> also set the <a href="https://w3c.github.io/aria/#aria-valuenow" class="property-reference"><code>aria-valuenow</code></a> attribute, unless that value is unknown (for example, on an indeterminate <a href="https://w3c.github.io/aria/#progressbar" class="role-reference"><code>progressbar</code></a>).</p> <p>Authors <em class="rfc2119">SHOULD</em> only set the <a href="https://w3c.github.io/aria/#aria-valuetext" class="property-reference"><code>aria-valuetext</code></a> attribute when the rendered value cannot be meaningfully represented as a number. For example, a slider might have rendered values of <code>small</code>, <code>medium</code>, and <code>large</code>. In this case, the values of <a href="https://w3c.github.io/aria/#aria-valuenow" class="property-reference"><code>aria-valuenow</code></a> could range from 1 through 3, which indicate the position of each value in the value space, but the <a href="https://w3c.github.io/aria/#aria-valuetext" class="property-reference"><code>aria-valuetext</code></a> would be one of the strings: <code>small</code>, <code>medium</code>, or <code>large</code>. If the <a href="https://w3c.github.io/aria/#aria-valuetext" class="property-reference"><code>aria-valuetext</code></a> attribute is absent, the <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-78">assistive technologies</a> will rely solely on the <a href="https://w3c.github.io/aria/#aria-valuenow" class="property-reference"><code>aria-valuenow</code></a> attribute for the current value.</p> <p>If <a href="https://w3c.github.io/aria/#aria-valuetext" class="property-reference"><code>aria-valuetext</code></a> is specified, assistive technologies <em class="rfc2119">SHOULD</em> render that value instead of the value of <a href="https://w3c.github.io/aria/#aria-valuenow" class="property-reference"><code>aria-valuenow</code></a>.</p> </div> <table class="property-features"> <caption>Characteristics:</caption> <thead> <tr> <th scope="col">Characteristic</th> <th scope="col">Value</th> </tr> </thead> <tbody> <tr> <th class="property-applicability-head" scope="row">Used in Roles:</th> <td class="property-applicability"><ul> <li><a href="https://w3c.github.io/aria/#range" class="role-reference"><code>range</code></a></li> <li><a href="https://w3c.github.io/aria/#separator" class="role-reference"><code>separator</code></a></li> <li><a href="https://w3c.github.io/aria/#spinbutton" class="role-reference"><code>spinbutton</code></a></li> </ul> </td> </tr> <tr> <th class="property-descendants-head" scope="row">Inherits into Roles:</th> <td class="property-descendants"><ul> <li><a href="https://w3c.github.io/aria/#meter" class="role-reference"><code>meter</code></a></li> <li><a href="https://w3c.github.io/aria/#progressbar" class="role-reference"><code>progressbar</code></a></li> <li><a href="https://w3c.github.io/aria/#scrollbar" class="role-reference"><code>scrollbar</code></a></li> <li><a href="https://w3c.github.io/aria/#slider" class="role-reference"><code>slider</code></a></li> <li><a href="https://w3c.github.io/aria/#spinbutton" class="role-reference"><code>spinbutton</code></a></li> </ul> </td> </tr> <tr> <th class="property-value-head" scope="row">Value:</th> <td class="property-value"><a href="#valuetype_string">string</a></td> </tr> </tbody> </table> </section> </section> </section> <section class="normative" id="accessibility_tree"><div class="header-wrapper"><h2 id="x7-accessibility-tree"><bdi class="secno">7. </bdi><dfn class="export" data-export="" id="dfn-accessibility-tree" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">Accessibility Tree</dfn></h2><a class="self-link" href="#accessibility_tree" aria-label="Permalink for Section 7."></a></div> <p>The <a class="termref informative internalDFN" href="#dfn-accessibility-tree" data-link-type="dfn" id="ref-for-dfn-accessibility-tree-8">accessibility tree</a> and the <abbr title="Document Object Model">DOM</abbr> tree are parallel structures. The <a class="termref informative internalDFN" href="#dfn-accessibility-tree" data-link-type="dfn" id="ref-for-dfn-accessibility-tree-9">accessibility tree</a> includes the user interface objects of the <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agent</a> and the objects of the document. <a href="#dfn-accessible-object" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessible-object-1">Accessible objects</a> are created in the accessibility tree for every <abbr title="Document Object Model">DOM</abbr> element that should be exposed to an <a href="#dfn-assistive-technologies" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-assistive-technologies-79">assistive technology</a>, either because it might fire an accessibility <a href="#dfn-event" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-event-10">event</a> or because it has a <a data-link-type="dfn|abstract-op" href="#dfn-property" class="internalDFN" id="ref-for-dfn-property-29">property</a>, <a href="#dfn-relationship" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-relationship-14">relationship</a> or feature which needs to be exposed.</p> <section id="tree_exclusion"><div class="header-wrapper"><h3 id="x7-1-excluding-elements-from-the-accessibility-tree"><bdi class="secno">7.1 </bdi>Excluding Elements from the Accessibility Tree</h3><a class="self-link" href="#tree_exclusion" aria-label="Permalink for Section 7.1"></a></div> <p>The following <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a> are not exposed via the <a href="#dfn-accessibility-api" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-api-29">accessibility <abbr title="Application Programing Interfaces">API</abbr></a> and user agents <em class="rfc2119">MUST NOT</em> include them in the <a class="termref informative internalDFN" href="#dfn-accessibility-tree" data-link-type="dfn" id="ref-for-dfn-accessibility-tree-10">accessibility tree</a>:</p> <ul> <li>Elements, including their descendent elements, that have host language semantics specifying that the element is not displayed, such as <abbr title="Cascading Style Sheets">CSS</abbr> <code>display:none</code>, <code>visibility:hidden</code>, or the <abbr title="Hypertext Markup Language">HTML</abbr> <code>hidden</code> attribute.</li> <li>Elements with <a href="https://w3c.github.io/aria/#none" class="role-reference"><code>none</code></a> or <a href="https://w3c.github.io/aria/#presentation" class="role-reference"><code>presentation</code></a> as the first role in the role attribute. However, their exclusion is conditional. In addition, the element's descendants and text content are generally included. These exceptions and conditions are documented in the <a href="#presentation">presentation (role)</a> section.</li> </ul> <p>If not already excluded from the accessibility tree per the above rules, user agents <em class="rfc2119">SHOULD NOT</em> include the following elements in the accessibility tree:</p> <ul> <li>Elements, including their descendants, that have <a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> set to <code>true</code>. In other words, <code>aria-hidden="true"</code> on a parent overrides <code>aria-hidden="false"</code> on descendants.</li> <li> <p>Any descendants of elements that have the characteristic "<a href="#childrenArePresentational">Children Presentational: True</a>" unless the descendant is not allowed to be presentational because it meets one of the conditions for exception described in <a href="#conflict_resolution_presentation_none">Presentational Roles Conflict Resolution</a>. However, the text content of any excluded descendants is included.</p> <p>Elements with the following roles have the characteristic "Children Presentational: True":</p> <ul> <li><a href="https://w3c.github.io/aria/#button" class="role-reference"><code>button</code></a></li> <li><a href="https://w3c.github.io/aria/#checkbox" class="role-reference"><code>checkbox</code></a></li> <li><a href="https://w3c.github.io/aria/#img" class="role-reference"><code>img</code></a></li> <li><a href="https://w3c.github.io/aria/#menuitemcheckbox" class="role-reference"><code>menuitemcheckbox</code></a></li> <li><a href="https://w3c.github.io/aria/#menuitemradio" class="role-reference"><code>menuitemradio</code></a></li> <li><a href="https://w3c.github.io/aria/#meter" class="role-reference"><code>meter</code></a></li> <li><a href="https://w3c.github.io/aria/#option" class="role-reference"><code>option</code></a></li> <li><a href="https://w3c.github.io/aria/#progressbar" class="role-reference"><code>progressbar</code></a></li> <li><a href="https://w3c.github.io/aria/#radio" class="role-reference"><code>radio</code></a></li> <li><a href="https://w3c.github.io/aria/#scrollbar" class="role-reference"><code>scrollbar</code></a></li> <li><a href="https://w3c.github.io/aria/#separator" class="role-reference"><code>separator</code></a></li> <li><a href="https://w3c.github.io/aria/#slider" class="role-reference"><code>slider</code></a></li> <li><a href="https://w3c.github.io/aria/#switch" class="role-reference"><code>switch</code></a></li> <li><a href="https://w3c.github.io/aria/#tab" class="role-reference"><code>tab</code></a></li> </ul> </li> </ul> </section> <section id="tree_inclusion"><div class="header-wrapper"><h3 id="x7-2-including-elements-in-the-accessibility-tree"><bdi class="secno">7.2 </bdi>Including Elements in the Accessibility Tree</h3><a class="self-link" href="#tree_inclusion" aria-label="Permalink for Section 7.2"></a></div> <p>If not excluded from the accessibility tree per the rules above in <a href="#tree_exclusion">Excluding Elements in the Accessibility Tree</a>, user agents <em class="rfc2119">MUST</em> provide an <a href="#dfn-accessible-object" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessible-object-2">accessible object</a> in the <a class="termref informative internalDFN" href="#dfn-accessibility-tree" data-link-type="dfn" id="ref-for-dfn-accessibility-tree-11">accessibility tree</a> for <abbr title="Document Object Model">DOM</abbr> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a> that meet any of the following criteria:</p> <ul> <li>Elements that are not <a data-link-type="dfn|abstract-op" href="#dfn-hidden" class="internalDFN" id="ref-for-dfn-hidden-8">hidden</a> and can fire an <a href="#dfn-accessibility-api" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-api-30">accessibility <abbr title="Application Program Interface">API</abbr></a> <a href="#dfn-event" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-event-11">event</a>, including: <ul> <li>Elements that are currently focused, even if the element or one of its ancestor elements has its <a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> attribute set to <code>true</code>.</li> <li>Elements that are a valid target of an <a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a> attribute.</li> </ul> </li> <li>Elements that have an explicit role or a global <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> attribute and do not have <a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a> set to <code>true</code>. (See <a href="#tree_exclusion">Excluding Elements in the Accessibility Tree</a> for additional guidance on <a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a>.)</li> <li>Elements that are not <a data-link-type="dfn|abstract-op" href="#dfn-hidden" class="internalDFN" id="ref-for-dfn-hidden-9">hidden</a> and have an ID that is referenced by another element via a <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> property. <div class="note" role="note" id="issue-container-generatedID-72"><div role="heading" class="note-title marker" id="h-note-72" aria-level="4"><span>Note</span></div><p class="">Text equivalents for <a data-link-type="dfn|abstract-op" href="#dfn-hidden" class="internalDFN" id="ref-for-dfn-hidden-10">hidden</a> referenced objects can still be used in the <a href="https://w3c.github.io/accname/#mapping_additional_nd" class="accname">name and description computation</a> even when not included in the accessibility tree.</p></div> </li> </ul> </section> <section id="tree_relationships"><div class="header-wrapper"><h3 id="x7-3-relationships-in-the-accessibility-tree"><bdi class="secno">7.3 </bdi>Relationships in the Accessibility Tree</h3><a class="self-link" href="#tree_relationships" aria-label="Permalink for Section 7.3"></a></div> <p>The following terms are used to describe relationships between <abbr title="Document Object Model">DOM</abbr> elements.</p> <p>The <dfn data-export="" data-lt="accessibility child|owned child|child element|child|children|child elements|accessibility children" id="dfn-accessibility-child" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">accessibility children</dfn> of a <abbr title="Document Object Model">DOM</abbr> element are all of the children of that element's corresponding <a href="#dfn-accessible-object" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessible-object-3">accessible object</a> in the <a href="#dfn-accessibility-tree" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-tree-12">accessibility tree</a>. In terms of the <abbr title="Document Object Model">DOM</abbr>, that includes the following (with exclusions listed blow):</p> <ul> <li>The <abbr title="Document Object Model">DOM</abbr> children of the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a>. </li> <li>All <abbr title="Document Object Model">DOM</abbr> descendants of the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> with only elements of role <a href="https://w3c.github.io/aria/#generic" class="role-reference"><code>generic</code></a> or <a href="https://w3c.github.io/aria/#none" class="role-reference"><code>none</code></a> intervening. </li> <li>All <abbr title="Document Object Model">DOM</abbr> elements specified via an <a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a> relationship to the element. </li> <li>All <abbr title="Document Object Model">DOM</abbr> descendants of an element with role <a href="https://w3c.github.io/aria/#generic" class="role-reference"><code>generic</code></a> or <a href="https://w3c.github.io/aria/#none" class="role-reference"><code>none</code></a> specified via <a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a> with only elements of role <a href="https://w3c.github.io/aria/#generic" class="role-reference"><code>generic</code></a> or <a href="https://w3c.github.io/aria/#none" class="role-reference"><code>none</code></a> intervening. </li> </ul> <p>And excludes the following: </p><ul> <li>All <abbr title="Document Object Model">DOM</abbr> elements that have no corresponding <a href="#dfn-accessible-object" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessible-object-4">accessible object</a> because they have been <a href="#tree_exclusion">excluded from the accessibility tree</a>.</li> <li>All <abbr title="Document Object Model">DOM</abbr> elements whose corresponding <a href="#dfn-accessible-object" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessible-object-5">accessible object</a> have been reparented in the <a href="#dfn-accessibility-tree" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-tree-13">accessibility tree</a> via <a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a>.</li> </ul> <p></p> <p>In the following example, the <a href="https://w3c.github.io/aria/#list" class="role-reference"><code>list</code></a> element has four accessibility children:</p> <div class="example" id="example-44"> <div class="marker"> <a class="self-link" href="#example-44">Example<bdi> 44</bdi></a> </div> <pre class="highlight" aria-busy="false"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"list"</span> <span class="hljs-attr">aria-owns</span>=<span class="hljs-string">"child3 child4"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"listitem"</span>></span>Accessibility Child 1<span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"listitem"</span>></span>Accessibility Child 2<span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"child3"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"listitem"</span>></span>Accessibility Child 3<span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"child4"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"listitem"</span>></span>Accessibility Child 4<span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> </div> <p>In the following example, the first <a href="https://w3c.github.io/aria/#list" class="role-reference"><code>list</code></a> element has no accessibility children, where as the second <a href="https://w3c.github.io/aria/#list" class="role-reference"><code>list</code></a> element has one accessibility child, specifically the <a href="https://w3c.github.io/aria/#listitem" class="role-reference"><code>listitem</code></a> with ID value "reparented".</p> <div class="example" id="example-45"> <div class="marker"> <a class="self-link" href="#example-45">Example<bdi> 45</bdi></a> </div> <pre class="highlight" aria-busy="false"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"list"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"listitem"</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">"true"</span>></span>Excluded element<span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"listitem"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"reparented"</span>></span>Reparented element<span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"list"</span> <span class="hljs-attr">aria-owns</span>=<span class="hljs-string">"reparented"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> </div> <p>The <dfn data-export="" data-lt="accessibility descendant|accessibility descendants" id="dfn-accessibility-descendant" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">accessibility descendants</dfn> of a <abbr title="Document Object Model">DOM</abbr> element are all <abbr title="Document Object Model">DOM</abbr> elements which correspond to descendants of the corresponding <a href="#dfn-accessible-object" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessible-object-6">accessible object</a> in the <a class="termref informative internalDFN" href="#dfn-accessibility-tree" data-link-type="dfn" id="ref-for-dfn-accessibility-tree-14">accessibility tree</a>.</p> <p>The <dfn data-export="" data-lt="accessibility parent|parent element|parent" id="dfn-accessibility-parent" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">accessibility parent</dfn> of a <abbr title="Document Object Model">DOM</abbr> element is the parent of the corresponding <a href="#dfn-accessible-object" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessible-object-7">accessible object</a> in the <a href="#dfn-accessibility-tree" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-tree-15">accessibility tree</a>. In terms of the <abbr title="Document Object Model">DOM</abbr>, the accessibility parent is one of the following:</p> <ul> <li>The <abbr title="Document Object Model">DOM</abbr> parent of the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a>. </li> <li>The <abbr title="Document Object Model">DOM</abbr> ancestor of the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> with only elements of role <a href="https://w3c.github.io/aria/#generic" class="role-reference"><code>generic</code></a> or <a href="https://w3c.github.io/aria/#none" class="role-reference"><code>none</code></a> intervening. </li> <li>A <abbr title="Document Object Model">DOM</abbr> element with <a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a> set to the <abbr title="Document Object Model">DOM</abbr> ID of the <abbr title="Document Object Model">DOM</abbr> element in question. </li> <li>A <abbr title="Document Object Model">DOM</abbr> element with <a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a> set to the <abbr title="Document Object Model">DOM</abbr> ID of an ancestor of the <abbr title="Document Object Model">DOM</abbr> element in question, with only elements of role <a href="https://w3c.github.io/aria/#generic" class="role-reference"><code>generic</code></a> or <a href="https://w3c.github.io/aria/#none" class="role-reference"><code>none</code></a> intervening. </li> </ul> <p>The following four examples all contain a <a href="https://w3c.github.io/aria/#listitem" class="role-reference"><code>listitem</code></a> element with an accessibility parent of role <a href="https://w3c.github.io/aria/#list" class="role-reference"><code>list</code></a>:</p> <div class="example" id="example-46"> <div class="marker"> <a class="self-link" href="#example-46">Example<bdi> 46</bdi></a> </div> <pre class="highlight" aria-busy="false"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"list"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"listitem"</span>></span>The "list" is my accessibility parent.<span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> </div> <div class="example" id="example-47"> <div class="marker"> <a class="self-link" href="#example-47">Example<bdi> 47</bdi></a> </div> <pre class="highlight" aria-busy="false"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"list"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"listitem"</span>></span>The "list" is my accessibility parent.<span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> </div> <div class="example" id="example-48"> <div class="marker"> <a class="self-link" href="#example-48">Example<bdi> 48</bdi></a> </div> <pre class="highlight" aria-busy="false"><code class="hljs abnf"><div role<span class="hljs-operator">=</span><span class="hljs-string">"list"</span> aria-owns<span class="hljs-operator">=</span><span class="hljs-string">"child"</span>></div> <div id<span class="hljs-operator">=</span><span class="hljs-string">"child"</span> role<span class="hljs-operator">=</span><span class="hljs-string">"listitem"</span>>The <span class="hljs-string">"list"</span> is my accessibility parent.</div></code></pre> </div> <div class="example" id="example-49"> <div class="marker"> <a class="self-link" href="#example-49">Example<bdi> 49</bdi></a> </div> <pre class="highlight" aria-busy="false"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"list"</span> <span class="hljs-attr">aria-owns</span>=<span class="hljs-string">"child"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"child"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"listitem"</span>></span>The "list" is my accessibility parent.<span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> </div> </section> </section> <section class="normative" id="host_languages"><div class="header-wrapper"><h2 id="x8-implementation-in-host-languages"><bdi class="secno">8. </bdi>Implementation in Host Languages</h2><a class="self-link" href="#host_languages" aria-label="Permalink for Section 8."></a></div> <p>The <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-92">roles</a>, <a href="#dfn-state" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-state-31">state</a>, and <a data-link-type="dfn|abstract-op" href="#dfn-property" class="internalDFN" id="ref-for-dfn-property-30">properties</a> defined in this specification do not form a complete web language or format. They are intended to be used in the context of a host language. This section discusses how host languages are to implement <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr>, to ensure that the markup specified here will integrate smoothly and effectively with the host language markup.</p> <p>Although markup languages look alike superficially, they do not share language definition infrastructure. To accommodate differences in language-building approaches, the requirements are both general and modularization-specific. While allowing for differences in how the specifications are written, the intent is to maintain consistency in how the <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> information looks to authors and how it is manipulated in the <abbr title="Document Object Model">DOM</abbr> by scripts.</p> <p><abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> roles, states, and properties are implemented as <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attributes</a> of <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a>. Roles are applied by placing their names among the tokens appearing in the value of a host-language-provided <code>role</code> attribute. States and properties each get their own attribute, with values as defined for each particular state or property in this specification. The name of the attribute is the aria-prefixed name of the state or property.</p> <section id="host_general_role"><div class="header-wrapper"><h3 id="x8-1-role-attribute"><bdi class="secno">8.1 </bdi>Role Attribute</h3><a class="self-link" href="#host_general_role" aria-label="Permalink for Section 8.1"></a></div> <p>An implementing host language will provide a <code><a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-93">role</a></code> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attribute</a> with the following characteristics:</p> <ul> <li>The attribute value <em class="rfc2119">MUST</em> allow a <a data-link-type="dfn|abstract-op" href="#dfn-token-list" class="internalDFN" id="ref-for-dfn-token-list-1">token list</a> as the value;</li> <li>The appearance of the name literal of any concrete <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-94">role</a> as one of these tokens <em class="rfc2119">MUST NOT</em> in and of itself make the attribute value illegal in the host-language syntax; and</li> <li>The first name literal of a non-abstract <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> role in the list of tokens in the role attribute defines the role according to which the user agent <em class="rfc2119">MUST</em> process the element. User Agent processing for roles is defined in the <cite><a href="https://w3c.github.io/core-aam/" class="core-mapping">Core Accessibility <abbr title="application programming interface">API</abbr> Mappings</a></cite> [<cite><a class="bibref" data-link-type="biblio" href="#bib-core-aam-1.2" title="Core Accessibility API Mappings 1.2">CORE-AAM-1.2</a></cite>].</li> </ul> </section> <section id="host_general_attrs"><div class="header-wrapper"><h3 id="x8-2-state-and-property-attributes"><bdi class="secno">8.2 </bdi>State and Property Attributes</h3><a class="self-link" href="#host_general_attrs" aria-label="Permalink for Section 8.2"></a></div> <p>An implementing host language <em class="rfc2119">MUST</em> allow <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attributes</a> with the following characteristics:</p> <ul> <li>The attribute name is the name of any state or property identified in the <a href="#states_and_properties">Supported States and Properties</a> section, such as <a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a>, <a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a>, <a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a>, <a href="https://w3c.github.io/aria/#aria-valuetext" class="property-reference"><code>aria-valuetext</code></a>;</li> <li>The syntax does <strong>NOT</strong> prevent the attribute from appearing anywhere that it is applicable, as specified in this specification;</li> <li>When these attributes appear in a document instance, the attributes will be processed as defined in this specification.</li> </ul> <p> Host languages that support <cite><a href="https://www.w3.org/TR/2006/REC-xml-names-20060816/">XML Namespaces</a></cite> [<cite><a class="bibref" data-link-type="biblio" href="#bib-xml-names" title="Namespaces in XML 1.0 (Third Edition)">XML-NAMES</a></cite>] <strong><em class="rfc2119">MAY</em></strong> require that <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> attributes be used with a namespace. In this case, the namespace for <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> state and property attributes <strong><em class="rfc2119">MUST</em></strong> be <code>http://www.w3.org/ns/wai-aria/</code>. To use <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> in host languages that do not explicitly describe support for it, authors <strong><em class="rfc2119">SHOULD</em></strong> use this namespace as well, if the host language supports namespaces and there is expectation that user agents will recognize the <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> namespace. The namespace prefix is not defined by this specification but generally is expected to be "<code>aria</code>". </p> <div class="note" role="note" id="issue-container-generatedID-73"><div role="heading" class="note-title marker" id="h-note-73" aria-level="4"><span>Note</span></div><p class="">The <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> state and property attributes have a naming convention such that they all begin with the string "<code>aria-</code>". This is <em>not</em> a namespace prefix, it is a part of the state or property name. Therefore, when using <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> states and properties with namespace prefixes, the complete attribute name will be like "<code>aria:aria-foo</code>".</p></div> <p>Some host languages do not use namespaces with <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> state and property attributes, either because the host language does not support namespaces or because the designers wish to incorporate <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> into the core feature set. In these host languages, the namespace name for these attributes has no value. The names of these attributes do not have a prefix offset by a colon; in the terms of namespaces they are unprefixed attribute names. The ECMAScript binding of the <abbr title="Document Object Model">DOM</abbr> interface <code>getAttributeNS</code> for example, treats the empty string (<code>""</code>) as representing this condition, so that both <code>getAttribute("aria-busy")</code> and <code>getAttributeNS("", "aria-busy")</code> access the same <a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a> attribute in the <abbr title="Document Object Model">DOM</abbr>.</p> <div class="note" role="note" id="issue-container-generatedID-74"><div role="heading" class="note-title marker" id="h-note-74" aria-level="4"><span>Note</span></div><p class="">According to the requirements of this section, some user agents recognize <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> state and property attributes <em>with</em> namespaces, some <em>without</em> namespaces, and some might recognize both. Authors are advised to be aware of which form is supported for the host language they are using. Unless the host language and supporting user agents explicitly indicate that the namespace is required, authors are advised to use the attribute without namespaces. Even user agents that support namespaces generally do not publish namespaced <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> states and properties to accessibility <abbr title="Application Programing Interfaces">APIs</abbr>. In particular, current implementations of <abbr title="Hypertext Markup Language">HTML</abbr>, including <abbr title="Extensible Hypertext Markup Language">XHTML</abbr>, do not support this namespace.</p></div> </section> <section id="host_general_focus"><div class="header-wrapper"><h3 id="x8-3-focus-navigation"><bdi class="secno">8.3 </bdi>Focus Navigation</h3><a class="self-link" href="#host_general_focus" aria-label="Permalink for Section 8.3"></a></div> <p>An implementing host language <em class="rfc2119">MUST</em> provide support for the author to make all interactive elements focusable, that is, any renderable or event-receiving elements. An implementing host language <em class="rfc2119">MUST</em> provide a facility to allow authors to define whether these focusable, interactive elements appear in the default tab navigation order. The <code>tabindex</code> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attribute</a> in <abbr title="Hypertext Markup Language">HTML</abbr> is an example of one implementation.</p> </section> <section id="implicit_semantics"><div class="header-wrapper"><h3 id="x8-4-implicit-wai-aria-semantics"><bdi class="secno">8.4 </bdi>Implicit <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> Semantics</h3><a class="self-link" href="#implicit_semantics" aria-label="Permalink for Section 8.4"></a></div> <p><abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> is designed to provide <a href="#dfn-semantics" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-semantics-7">semantic</a> information about objects when host languages lack native semantics for the object. <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> is designed, however, to provide additional semantics for many host languages. Furthermore, host languages over time can evolve and provide new native features that correspond to <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> features. Therefore, there are many situations in which <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> semantics are redundant with host language semantics. </p> <p>These host language features can be viewed as having "implicit <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> semantics". User agent processing of features with implicit <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> semantics would be similar to the processing for the <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> feature. The processing might not be identical because of lexical differences between the host language feature and the <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> feature, but generally the user agent would expose the same information to the accessibility <abbr title="application programming interface">API</abbr>. Features with implicit <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> semantics satisfy <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> structural requirements such as Required Accessibility Parent Roles, Allowed Accessibility Child Roles, required states and properties, etc. and do not require explicit <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> semantics to be provided. On elements with implicit <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> roles, authors can also use <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> states and properties supported by those roles <em>without</em> requiring explicit indication of the <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> role.</p> <p>For example, if an element with the functionality already exists, such as a checkbox or radio button, use the native semantics of the host language. <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> markup is only intended to be used to enhance the native semantics (e.g., indicating that the element is required with <a href="https://w3c.github.io/aria/#aria-required" class="property-reference"><code>aria-required</code></a>), or to change the semantics to a different purpose from the standard functionality of the element.</p> <p>Implicit <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> semantics affect the conflict resolution procedures in the following section, Conflicts with Host Language Semantics. Therefore, implicit <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> semantics need to be defined in a normative specification, such as the host language specification or the <cite><a href="https://w3c.github.io/core-aam/" class="core-mapping">Core Accessibility <abbr title="application programming interface">API</abbr> Mappings</a></cite>.</p> </section> <section id="host_general_conflict"><div class="header-wrapper"><h3 id="x8-5-conflicts-with-host-language-semantics"><bdi class="secno">8.5 </bdi>Conflicts with Host Language Semantics</h3><a class="self-link" href="#host_general_conflict" aria-label="Permalink for Section 8.5"></a></div> <p><abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> roles, states, and properties are intended to add <a href="#dfn-semantics" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-semantics-8">semantic</a> information when native host language elements with these semantics are not available, and are generally used on elements that have no native semantics of their own. They can also be used on elements that have similar but non-identical semantics (for example, a nested list could be used to represent a tree structure). This method can be part of a fallback strategy for older browsers that have no <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> implementation, or because native presentation of the repurposed element reduces the amount of style and/or script needed. Except for the cases outlined below, user agents <em class="rfc2119">MUST</em> always use the <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> semantics to define how it exposes the element to accessibility <abbr title="Application Programing Interfaces">APIs</abbr>, rather than using the host language semantics.</p> <p>In addition to these normal situations in which <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> is expected to override native semantics, there are elements that are inappropriate to override with <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr>. This could be because identical host language semantics exist, so <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> is not needed, or because semantics from <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> directly conflict with host language semantics. When a feature in the host language with identical role semantics and values is available, and the author has no compelling reason to avoid using the host language feature, authors <em class="rfc2119">SHOULD</em> use the host language features rather than repurpose other elements with <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr>.</p> <p>Host languages can have features that have implicit <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> semantics corresponding to roles. When a <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> role is provided, user agents <em class="rfc2119">MUST</em> use the semantic of the <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> role for processing, not the native semantic, unless the role requires <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> states and properties whose attributes are explicitly forbidden on the native element by the host language. Values for roles do not conflict in the same way as values for states and properties (for example, the <abbr title="Hypertext Markup Language">HTML</abbr> 'checked' attribute and the 'aria-checked' attribute could have conflicting values), and authors are expected to have valid reason to provide a <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> role even on elements that would not normally be repurposed.</p> <p>When <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> states and properties correspond to host language features that have the same <a href="#implicit_semantics">implicit <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> semantic</a>, it can be particularly problematic to use the <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> feature. If the <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> feature and the host language feature are both provided but their values are not kept in sync, user agents and assistive technologies cannot know which value to use. Therefore, to prevent providing conflicting states and properties to assistive technologies, host languages <em class="rfc2119">MUST</em> explicitly declare where the use of <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> attributes on each host language element conflicts with native features for that element. When a host language declares a <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> attribute to be in direct semantic conflict with a native feature for a given element, user agents <em class="rfc2119">MUST</em> ignore the <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> attribute and instead use the host language feature with the same implicit semantic.</p> <p>Host languages <em class="rfc2119">MAY</em> document features that cannot be overridden with <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> (these are called "strong native semantics"). These can be features that have implicit <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> semantics, as well as features where the processing would be uncertain if the semantics were changed with <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr>. Conformance checkers <em class="rfc2119">MAY</em> signal an error or warning when a <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> role is used on elements with strong native semantics, but as described above, user agents <em class="rfc2119">MUST</em> still use the value of the semantic of the <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> role when exposing the element to accessibility <abbr title="Application Programing Interfaces">APIs</abbr> unless the native host language semantic is permanently presentational.</p> <p>The opportunity for host languages to create exceptions to the <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> override of native features is meant to avoid potential author errors or problems with intrinsic processing of host language features. Author errors could happen when a host language and <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> provide similar but not identical features, where it might not be clear how changing one but not the other affects the accessibility <abbr title="application programming interface">API</abbr>. Intrinsic processing refers to the way a feature is processed, beyond simple rendering and exposure to the Accessibility <abbr title="application programming interface">API</abbr>, that cannot reasonably be changed in response to an <abbr title="Accessible Rich Internet Applications">ARIA</abbr> feature, and would lead to unpredictable results were <abbr title="Accessible Rich Internet Applications">ARIA</abbr> allowed. In these situations, there is good reason for host languages to limit the scope of <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr>. However, this provision does not give blanket permission for host languages to forbid the use of <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> simply by documenting, feature by feature, that it cannot be used. Host languages should create restrictions on the use of <abbr title="Accessible Rich Internet Applications">ARIA</abbr> only when it is critical to effective processing of content.</p> <p>Certain <abbr title="Accessible Rich Internet Applications">ARIA</abbr> features are critical to building a complete model in the accessibility <abbr title="application programming interface">API</abbr>. Such features are not expected to conflict with native host language semantics (though they can complement them). Therefore, host languages <em class="rfc2119">MUST NOT</em> declare strong native semantics that prevent use of the following <abbr title="Accessible Rich Internet Applications">ARIA</abbr> features:</p> <ul> <li><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></li> <li><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></li> </ul> </section> <section id="state_property_processing"><div class="header-wrapper"><h3 id="x8-6-state-and-property-attribute-processing"><bdi class="secno">8.6 </bdi>State and Property Attribute Processing</h3><a class="self-link" href="#state_property_processing" aria-label="Permalink for Section 8.6"></a></div> <p>State and property attributes are included in host languages, and therefore syntax for representation of their value types is governed by the host language. For each of the value types defined in <a href="#propcharacteristic_value">Value</a>, an appropriate value type from the host language is used. Recommended correspondences between <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> value types and various host language value types are listed in <a href="#typemapping">Mapping <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> Value types to languages</a>. This is a non-normative mapping in order to accommodate new host languages supporting <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr>.</p> <p>The list value types—ID reference list and token list—allow more than one value of the given type to be provided. The values are separated by delimiter characters recognized by the host language for list attributes, such as space characters, commas, etc. Some languages might require a specific, single delimiter, while others might allow various delimiters.</p> <p>Global states and properties are supported on any element in the host language. However, authors <em class="rfc2119">MUST</em> only use non-global states and properties on elements with a role supporting the state or property; either defined as an explicit <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> role, or as defined by the host language implicit <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> semantic matching an appropriate <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> role. When a role attribute is added to an element, the <a href="#dfn-semantics" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-semantics-9">semantics</a> and behavior of the element, including support for <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> states and properties, are augmented or overridden by the role behavior. User agents <strong><em class="rfc2119">MUST</em></strong> ignore non-global states and properties used on an element without a role supporting the state or property; either defined as an explicit <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> role, or as defined by the host language <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> semantic matching an appropriate <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> role. For example, the <a href="https://w3c.github.io/aria/#aria-valuetext" class="property-reference"><code>aria-valuetext</code></a> attribute can be used on a <a href="https://w3c.github.io/aria/#progressbar" class="role-reference"><code>progressbar</code></a>.</p> <p><abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> roles have associated states and properties that are qualified as "supported" or "required". An example of a property <em>supported</em> by the <a class="role-reference" href="https://w3c.github.io/aria/#combobox">combobox</a> role is <a class="property-reference" href="https://w3c.github.io/aria/#aria-autocomplete">aria-autocomplete</a>. The property is designated "supported" in this case because a given <code>combobox</code> might or might not implement auto completion. In contrast, the <code>combobox</code> role <em>requires</em> the <a class="state-reference" href="https://w3c.github.io/aria/#aria-expanded">aria-expanded</a> state in order to indicate that it is expandable. Comboboxes have a controlled popup element, such as a <code>listbox</code>, that is either open or closed. If the <code>listbox</code> is open, the <code>combobox</code> is in its expanded state; otherwise it is collapsed. </p> <p>When <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> roles are used, <em>supported</em> states and properties that are not present in the <abbr title="Document Object Model">DOM</abbr> are treated according to their default value. Keeping with the <code>combobox</code> example, a missing <code>aria-autocomplete</code> attribute is equivalent to <code>aria-autocomplete="none"</code>, meaning the <code>combobox</code> does not offer auto completion. </p> <p>However, <em>required</em> states and properties that are absent are an author error. Missing required states and properties are processed as detailed at <a href="#document-handling_author-errors">Handling Author Errors</a>.</p> <p>Elements that have implicit <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> semantics support the full set of <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> states and properties supported by the corresponding role. Therefore, authors <em class="rfc2119">MAY</em> omit the role when setting states and properties. The role is only needed when the implicit <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> role of the element needs to be changed.</p> <p>Sometimes states and properties are present in the <abbr title="Document Object Model">DOM</abbr> but have a zero-length string ("") as their value. Authors <em class="rfc2119">MAY</em> specify a zero-length string ("") for any supported (but not required) state or property. User agents <em class="rfc2119">SHOULD</em> treat state and property attributes with a value of "" the same as they treat an absent attribute. For supported states and properties, this corresponds to the default value, but if it is a required attribute, it signals an author error and is processed as detailed at <a href="#document-handling_author-errors">Handling Author Errors</a>. </p> <section id="mapping_additional_relations_error_processing"><div class="header-wrapper"><h4 id="x8-6-1-id-reference-error-processing"><bdi class="secno">8.6.1 </bdi>ID Reference Error Processing</h4><a class="self-link" href="#mapping_additional_relations_error_processing" aria-label="Permalink for Section 8.6.1"></a></div> <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agents</a> <em class="rfc2119">SHOULD</em> ignore ID references that do not match the ID of another <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> in the same document.</p> <p>It is the author's responsibility to ensure that IDs are unique. If more than one element has the same ID, the user agent <em class="rfc2119">SHOULD</em> use the first element found with the given ID. The behavior will be the same as <code>getElementById</code>.</p> <p>If the same element is specified multiple times in a single <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> relation, user agents <em class="rfc2119">SHOULD</em> return multiple pointers to the same <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a>.</p> <p><a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a> is defined as referencing only a single ID reference. Any <code>aria-activedescendant</code> value that does not match an existing ID reference exactly is an author error and will not match any element in the <abbr title="Document Object Model">DOM</abbr>.</p> </section> </section> <section id="document-handling_css-selectors"><div class="header-wrapper"><h3 id="x8-7-css-selectors"><bdi class="secno">8.7 </bdi><abbr title="Cascading Style Sheets">CSS</abbr> Selectors</h3><a class="self-link" href="#document-handling_css-selectors" aria-label="Permalink for Section 8.7"></a></div> <div class="note" role="note" id="issue-container-generatedID-75"><div role="heading" class="note-title marker" id="h-note-75" aria-level="4"><span>Note</span></div><p class="">This section might be removed in a future version.</p></div> <p>Support for <a class="termref informative" data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attribute</a> selectors <em class="rfc2119">MUST</em> include <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> attributes. For example, <samp>.fooMenuItem[aria-haspopup="true"]</samp> would select all <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a> with class <code>fooMenuItem</code>, and <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> property <a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a> with value of <code>true</code>. The presentation <em class="rfc2119">MUST</em> be updated for dynamic changes to <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> attributes. This allows authors to match styling with <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> <a href="#dfn-semantics" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-semantics-10">semantics</a>. </p> </section> </section> <section id="document-handling_author-errors"><div class="header-wrapper"><h2 id="x9-handling-author-errors"><bdi class="secno">9. </bdi>Handling Author Errors</h2><a class="self-link" href="#document-handling_author-errors" aria-label="Permalink for Section 9."></a></div> <section id="document-handling_author-errors_roles"><div class="header-wrapper"><h3 id="x9-1-roles"><bdi class="secno">9.1 </bdi>Roles</h3><a class="self-link" href="#document-handling_author-errors_roles" aria-label="Permalink for Section 9.1"></a></div> <p>User agents are expected to perform validation of <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-95">roles</a>.</p> <p>As stated in the <a href="#role_definitions">Definition of Roles</a> section, it is considered an authoring error to use <a href="#abstract_roles">abstract roles</a> in content. User agents <em class="rfc2119">MUST NOT</em> map abstract roles via the standard role mechanism of the accessibility <abbr title="application programming interface">API</abbr>.</p> <p>If the <code>role</code> attribute contains no tokens matching the name of a non-abstract <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> role, the user agent <em class="rfc2119">MUST</em> treat the element as if no <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-96">role</a> had been provided. For example, <code><table role="foo"></code> should be exposed in the same way as <code><table></code> and <code><input type="text" role="structure"></code> in the same way as <code><input type="text"></code>.</p> <p>Certain landmark roles require names from authors. In situations where an author has not specified names for these landmarks, it is considered an authoring error. The user agent <em class="rfc2119">MUST</em> treat such elements as if no <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-97">role</a> had been provided. If a valid fallback role had been specified, or if the element had an implicit <abbr title="Accessible Rich Internet Applications">ARIA</abbr> role, then user agents would continue to expose that role, instead. Instances of such roles are as follows:</p> <ul> <li><a href="https://w3c.github.io/aria/#form" class="role-reference"><code>form</code></a></li> <li><a href="https://w3c.github.io/aria/#region" class="role-reference"><code>region</code></a></li> </ul> </section> <section id="document-handling_author-errors_states-properties"><div class="header-wrapper"><h3 id="x9-2-states-and-properties"><bdi class="secno">9.2 </bdi>States and Properties</h3><a class="self-link" href="#document-handling_author-errors_states-properties" aria-label="Permalink for Section 9.2"></a></div> <p>In general, <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#user-agent">user agents</a> do not do much validation of <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> <a data-link-type="dfn|abstract-op" href="#dfn-property" class="internalDFN" id="ref-for-dfn-property-31">properties</a>. User agents <em class="rfc2119">MAY</em> do some minor validation on request and enforce things like <a href="https://w3c.github.io/aria/#aria-posinset" class="property-reference"><code>aria-posinset</code></a> being within 1 and <a href="https://w3c.github.io/aria/#aria-setsize" class="property-reference"><code>aria-setsize</code></a>, inclusive. User agents are not responsible for logical validation, such as the following:</p> <ol> <li>Circular references created by relations, such as specifying that two <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a> own each other. </li> <li>Correct usage with regard to <abbr title="Document Object Model">DOM</abbr> tree structure, such as an <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">element</a> being owned by more than one other element.</li> <li>Elements with <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> <a href="#dfn-role" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-role-98">roles</a> correctly implement the behavior of the specified role. For example, user agents do not verify that an element with a role of <a href="https://w3c.github.io/aria/#checkbox" class="role-reference"><code>checkbox</code></a> actually behaves like a checkbox.</li> <li>Elements that do not correctly observe required child / parent role relationships or that appear elsewhere than in their required parent.</li> <li>Determining whether <a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a> actually points to an <a href="#dfn-accessibility-descendant" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-descendant-18">accessibility descendant</a> of the container widget.</li> <li>Determining implicit values of <a href="https://w3c.github.io/aria/#aria-setsize" class="property-reference"><code>aria-setsize</code></a> and <a href="https://w3c.github.io/aria/#aria-posinset" class="property-reference"><code>aria-posinset</code></a> when they are specified on some but not all the elements of the set.</li> </ol> <p>If the author specifies a non-numeric value for a decimal or integer value type, the user agent <em class="rfc2119">SHOULD</em> do the following:</p> <ul> <li>When asked for the string version of the property, return the string if specified by the author.</li> <li>When asked for the numeric version: <ul> <li>Follow the guidance in the <a href="#authorErrorDefaultValuesTable">Fallback values for missing required attributes</a> table below, if applicable. </li> <li>Otherwise, return a fallback value of 0.0 for decimal value types and 0 for integer value types. </li> </ul> </li> </ul> <p>If a <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> property contains an unknown or disallowed value, the user agent <em class="rfc2119">SHOULD</em> expose to platform <a href="#dfn-accessibility-api" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-accessibility-api-31">accessibility <abbr title="Application Programing Interfaces">APIs</abbr></a> as follows:</p> <ul> <li>When exposing as a platform accessibility <abbr title="application programming interface">API</abbr> attribute, expose the unknown value — do not vet it against possible values. </li> <li>When exposing as a platform <abbr title="application programming interface">API</abbr> Boolean state: <ul> <li>For values of "" (empty string), "undefined" or no <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute">attribute</a> present: <ul> <li>Follow the guidance in the <a href="#authorErrorDefaultValuesTable">Fallback values for missing required attributes</a> table below, if applicable. </li> <li>Otherwise, treat as false. </li> </ul> </li> <li>Treat any other value as true.</li> </ul> </li> <li>Otherwise, ignore the value and treat the property as not present.</li> </ul> <div class="note" role="note" id="issue-container-generatedID-76"><div role="heading" class="note-title marker" id="h-note-76" aria-level="4"><span>Note</span></div><p class="">In <abbr title="User Interface Automation">UIA</abbr>, the user agent might leave the corresponding property set to "unsupported."</p></div> <p>User agents <em class="rfc2119">MUST NOT</em> expose <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> attributes that reference unresolved IDs. For example:</p> <ul> <li>When the state or property has only one ID reference that cannot be resolved, treat as if the state or property is not present.</li> <li>When the state or property has a list of ID references, ignore any that can't be resolved. If none in the list can be resolved, treat as if the state or property is not present.</li> </ul> <p>If a required <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> attribute for a given role is missing, user agents <em class="rfc2119">SHOULD</em> process the attribute as if the values given in the following table were provided.</p> <table id="authorErrorDefaultValuesTable"> <caption>Fallback values for missing required attributes</caption> <thead> <tr> <th><abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> role</th> <th>Required Attribute</th> <th>Fallback value</th> </tr> </thead> <tbody> <tr> <td><a href="https://w3c.github.io/aria/#checkbox" class="role-reference"><code>checkbox</code></a></td> <td><a href="https://w3c.github.io/aria/#aria-checked" class="state-reference"><code>aria-checked</code></a></td> <td><code>false</code> </td> </tr> <tr> <td><a href="https://w3c.github.io/aria/#combobox" class="role-reference"><code>combobox</code></a></td> <td><a href="https://w3c.github.io/aria/#aria-controls" class="state-reference"><code>aria-controls</code></a></td> <td>no mapping</td> </tr> <tr> <td><a href="https://w3c.github.io/aria/#combobox" class="role-reference"><code>combobox</code></a></td> <td><a href="https://w3c.github.io/aria/#aria-expanded" class="state-reference"><code>aria-expanded</code></a></td> <td><code>false</code></td> </tr> <tr> <td><a href="https://w3c.github.io/aria/#heading" class="role-reference"><code>heading</code></a></td> <td><a href="https://w3c.github.io/aria/#aria-level" class="property-reference"><code>aria-level</code></a></td> <td><code>2</code></td> </tr> <tr> <td><a href="https://w3c.github.io/aria/#menuitemcheckbox" class="role-reference"><code>menuitemcheckbox</code></a></td> <td><a href="https://w3c.github.io/aria/#aria-checked" class="state-reference"><code>aria-checked</code></a></td> <td><code>false</code> </td> </tr> <tr> <td><a href="https://w3c.github.io/aria/#menuitemradio" class="role-reference"><code>menuitemradio</code></a></td> <td><a href="https://w3c.github.io/aria/#aria-checked" class="state-reference"><code>aria-checked</code></a></td> <td><code>false</code> </td> </tr> <tr> <td><a href="https://w3c.github.io/aria/#radio" class="role-reference"><code>radio</code></a></td> <td><a href="https://w3c.github.io/aria/#aria-checked" class="state-reference"><code>aria-checked</code></a></td> <td><code>false</code> </td> </tr> <tr> <td><a href="https://w3c.github.io/aria/#scrollbar" class="role-reference"><code>scrollbar</code></a></td> <td><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></td> <td>no mapping</td> </tr> <tr> <td><a href="https://w3c.github.io/aria/#scrollbar" class="role-reference"><code>scrollbar</code></a></td> <td><a href="https://w3c.github.io/aria/#aria-valuenow" class="property-reference"><code>aria-valuenow</code></a></td> <td>If missing or not a <a href="#valuetype_number">number</a>,<code>(aria-valuemax - aria-valuemin) / 2</code>. If present but less than <code>aria-valuemin</code>, the value of <code>aria-valuemin</code>. If present but greater than <code>aria-valuemax</code>, the value of <code>aria-valuemax</code>.</td> </tr> <tr> <td><a href="https://w3c.github.io/aria/#separator" class="role-reference"><code>separator</code></a> (if focusable)</td> <td><a href="https://w3c.github.io/aria/#aria-valuenow" class="property-reference"><code>aria-valuenow</code></a></td> <td>If missing or not a <a href="#valuetype_number">number</a>,<code>(aria-valuemax - aria-valuemin) / 2</code>. If present but less than <code>aria-valuemin</code>, the value of <code>aria-valuemin</code>. If present but greater than <code>aria-valuemax</code>, the value of <code>aria-valuemax</code>.</td> </tr> <tr> <td><a href="https://w3c.github.io/aria/#slider" class="role-reference"><code>slider</code></a></td> <td><a href="https://w3c.github.io/aria/#aria-valuenow" class="property-reference"><code>aria-valuenow</code></a></td> <td>If missing or not a <a href="#valuetype_number">number</a>,<code>(aria-valuemax - aria-valuemin) / 2</code>. If present but less than <code>aria-valuemin</code>, the value of <code>aria-valuemin</code>. If present but greater than <code>aria-valuemax</code>, the value of <code>aria-valuemax</code>. </td> </tr> <tr> <td><a href="https://w3c.github.io/aria/#switch" class="role-reference"><code>switch</code></a></td> <td><a href="https://w3c.github.io/aria/#aria-checked" class="state-reference"><code>aria-checked</code></a></td> <td><code>false</code> </td> </tr> <tr> <td><a href="https://w3c.github.io/aria/#meter" class="role-reference"><code>meter</code></a></td> <td><a href="https://w3c.github.io/aria/#aria-valuenow" class="property-reference"><code>aria-valuenow</code></a></td> <td>A value matching the implicit or explicitly set <code>aria-valuemin</code>.</td> </tr> </tbody> </table> <div class="note" role="note" id="issue-container-generatedID-77"><div role="heading" class="note-title marker" id="h-note-77" aria-level="4"><span>Note</span></div><p class="">Implicit values for non-required states and properties appear in the characteristics table for each role. These are not considered fallback values so are not included here.</p></div> </section> <section id="conflict_resolution_presentation_none"><div class="header-wrapper"><h3 id="x9-3-presentational-roles-conflict-resolution"><bdi class="secno">9.3 </bdi>Presentational Roles Conflict Resolution</h3><a class="self-link" href="#conflict_resolution_presentation_none" aria-label="Permalink for Section 9.3"></a></div> <p>There are a number of ways presentational role conflicts are resolved.</p> <p>User agents <em class="rfc2119">MUST NOT</em> expose <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element">elements</a> having explicit or inherited presentational role in the accessibility tree, with these exceptions:</p> <ul> <li>If an element is focusable, user agents <em class="rfc2119">MUST</em> ignore the <a href="https://w3c.github.io/aria/#none" class="role-reference"><code>none</code></a>/<a href="https://w3c.github.io/aria/#presentation" class="role-reference"><code>presentation</code></a> role and expose the element with its implicit role, in order to ensure that the element is <a href="#dfn-operable" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-operable-5">operable</a>.</li> <li>If an <a href="#mustContain">allowed child element</a> has an explicit non-presentational role, user agents <em class="rfc2119">MUST</em> ignore an inherited presentational role and expose the element with its explicit role. If the action of exposing the explicit role causes the accessibility tree to be malformed, the expected results are undefined.</li> <li>If an element has <a href="#dfn-global" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-global-1">global</a> <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> states or properties, user agents <em class="rfc2119">MUST</em> ignore the <a href="https://w3c.github.io/aria/#none" class="role-reference"><code>none</code></a>/<a href="https://w3c.github.io/aria/#presentation" class="role-reference"><code>presentation</code></a> role and instead expose the element's implicit role. However, if an element has only non-global, role-specific <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> states or properties, the element <em class="rfc2119">MUST NOT</em> be exposed unless the presentational role is inherited and an explicit non-presentational role is applied.</li> </ul> <div class="note" role="note" id="issue-container-generatedID-78"><div role="heading" class="note-title marker" id="h-note-78" aria-level="4"><span>Note</span></div><p class="">Some <a href="#dfn-global" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-global-2">global</a> <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> states and properties are <a href="#dfn-prohibited" class="internalDFN" data-link-type="dfn" id="ref-for-dfn-prohibited-1">prohibited</a> on certain roles. These states and properties are still considered global for the purposes of Presentational Role Conflict resolution.</p></div> <p>For example, <a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a> is a global attribute and would always be applied; <a href="https://w3c.github.io/aria/#aria-level" class="property-reference"><code>aria-level</code></a> is not a global attribute and would therefore only apply if the element was not in a presentational state.</p> <div class="example" id="example-50"> <div class="marker"> <a class="self-link" href="#example-50">Example<bdi> 50</bdi></a> </div> <pre class="highlight" aria-busy="false"><code class="hljs xml"><span class="hljs-comment"></span> <span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"none"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"comment-1"</span>></span> Sample Content <span class="hljs-tag"></<span class="hljs-name">h1</span>></span> <span class="hljs-comment"></span> <span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"none"</span> <span class="hljs-attr">aria-level</span>=<span class="hljs-string">"2"</span>></span> Sample Content <span class="hljs-tag"></<span class="hljs-name">h1</span>></span></code></pre> </div> <p>Authors <em class="rfc2119">MUST NOT</em> use <a href="https://w3c.github.io/aria/#presentation" class="role-reference"><code>presentation</code></a> and <a href="https://w3c.github.io/aria/#none" class="role-reference"><code>none</code></a> on elements where user agents will ignore that role because it conflicts with one of the above items.</p> </section> </section> <section id="idl-interface" class="normative"><div class="header-wrapper"><h2 id="x10-idl-interface"><bdi class="secno">10. </bdi>IDL Interface</h2><a class="self-link" href="#idl-interface" aria-label="Permalink for Section 10."></a></div> <p>Conforming user agents <em class="rfc2119">MUST</em> implement the following IDL interface.</p> <section id="ARIAMixin" class="normative" data-dfn-for="ARIAMixin" data-link-for="ARIAMixin"><div class="header-wrapper"><h3 id="x10-1-interface-mixin-ariamixin"><bdi class="secno">10.1 </bdi>Interface Mixin <dfn data-export="" data-dfn-type="interface" id="dom-ariamixin" data-idl="interface mixin" data-title="ARIAMixin" data-dfn-for="" tabindex="0" aria-haspopup="dialog"><code>ARIAMixin</code></dfn></h3><a class="self-link" href="#ARIAMixin" aria-label="Permalink for Section 10.1"></a></div> <pre class="idl def" data-cite="webidl" id="webidl-622806144"><span class="idlHeader"><a class="self-link" href="#webidl-622806144">WebIDL</a></span><code><span data-idl="" class="idlInterface mixin" id="idl-def-ariamixin" data-title="ARIAMixin">interface mixin <a class="internalDFN idlID" data-link-type="interface" href="#dom-ariamixin" id="ref-for-dom-ariamixin-1"><code>ARIAMixin</code></a> {<span data-idl="" class="idlAttribute" id="idl-def-ariamixin-role" data-title="role" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString">DOMString</a>?</span> <dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-role" data-idl="attribute" data-title="role" data-dfn-for="ARIAMixin" data-type="DOMString" data-lt="role" data-local-lt="ARIAMixin.role" class="idlName" tabindex="0" aria-haspopup="dialog"><code>role</code></dfn>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariaactivedescendantelement" data-title="ariaActiveDescendantElement" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://dom.spec.whatwg.org/#element">Element</a>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariaactivedescendantelement" id="ref-for-dom-ariamixin-ariaactivedescendantelement-1"><code>ariaActiveDescendantElement</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariaatomic" data-title="ariaAtomic" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString">DOMString</a>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariaatomic" id="ref-for-dom-ariamixin-ariaatomic-1"><code>ariaAtomic</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariaautocomplete" data-title="ariaAutoComplete" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString">DOMString</a>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariaautocomplete" id="ref-for-dom-ariamixin-ariaautocomplete-1"><code>ariaAutoComplete</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariabraillelabel" data-title="ariaBrailleLabel" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString">DOMString</a>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariabraillelabel" id="ref-for-dom-ariamixin-ariabraillelabel-1"><code>ariaBrailleLabel</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariabrailleroledescription" data-title="ariaBrailleRoleDescription" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString">DOMString</a>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariabrailleroledescription" id="ref-for-dom-ariamixin-ariabrailleroledescription-1"><code>ariaBrailleRoleDescription</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariabusy" data-title="ariaBusy" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString">DOMString</a>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariabusy" id="ref-for-dom-ariamixin-ariabusy-1"><code>ariaBusy</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariachecked" data-title="ariaChecked" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString">DOMString</a>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariachecked" id="ref-for-dom-ariamixin-ariachecked-1"><code>ariaChecked</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariacolcount" data-title="ariaColCount" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString">DOMString</a>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariacolcount" id="ref-for-dom-ariamixin-ariacolcount-1"><code>ariaColCount</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariacolindex" data-title="ariaColIndex" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString">DOMString</a>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariacolindex" id="ref-for-dom-ariamixin-ariacolindex-1"><code>ariaColIndex</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariacolindextext" data-title="ariaColIndexText" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString">DOMString</a>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariacolindextext" id="ref-for-dom-ariamixin-ariacolindextext-1"><code>ariaColIndexText</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariacolspan" data-title="ariaColSpan" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString">DOMString</a>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariacolspan" id="ref-for-dom-ariamixin-ariacolspan-1"><code>ariaColSpan</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariacontrolselements" data-title="ariaControlsElements" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-frozen-array">FrozenArray</a><<a data-link-type="interface" href="https://dom.spec.whatwg.org/#element">Element</a>>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariacontrolselements" id="ref-for-dom-ariamixin-ariacontrolselements-1"><code>ariaControlsElements</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariacurrent" data-title="ariaCurrent" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString">DOMString</a>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariacurrent" id="ref-for-dom-ariamixin-ariacurrent-1"><code>ariaCurrent</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariadescribedbyelements" data-title="ariaDescribedByElements" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-frozen-array">FrozenArray</a><<a data-link-type="interface" href="https://dom.spec.whatwg.org/#element">Element</a>>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariadescribedbyelements" id="ref-for-dom-ariamixin-ariadescribedbyelements-1"><code>ariaDescribedByElements</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariadescription" data-title="ariaDescription" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString">DOMString</a>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariadescription" id="ref-for-dom-ariamixin-ariadescription-1"><code>ariaDescription</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariadetailselements" data-title="ariaDetailsElements" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-frozen-array">FrozenArray</a><<a data-link-type="interface" href="https://dom.spec.whatwg.org/#element">Element</a>>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariadetailselements" id="ref-for-dom-ariamixin-ariadetailselements-1"><code>ariaDetailsElements</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariadisabled" data-title="ariaDisabled" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString">DOMString</a>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariadisabled" id="ref-for-dom-ariamixin-ariadisabled-1"><code>ariaDisabled</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariaerrormessageelements" data-title="ariaErrorMessageElements" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-frozen-array">FrozenArray</a><<a data-link-type="interface" href="https://dom.spec.whatwg.org/#element">Element</a>>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariaerrormessageelements" id="ref-for-dom-ariamixin-ariaerrormessageelements-1"><code>ariaErrorMessageElements</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariaexpanded" data-title="ariaExpanded" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString">DOMString</a>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariaexpanded" id="ref-for-dom-ariamixin-ariaexpanded-1"><code>ariaExpanded</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariaflowtoelements" data-title="ariaFlowToElements" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-frozen-array">FrozenArray</a><<a data-link-type="interface" href="https://dom.spec.whatwg.org/#element">Element</a>>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariaflowtoelements" id="ref-for-dom-ariamixin-ariaflowtoelements-1"><code>ariaFlowToElements</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariahaspopup" data-title="ariaHasPopup" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString">DOMString</a>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariahaspopup" id="ref-for-dom-ariamixin-ariahaspopup-1"><code>ariaHasPopup</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariahidden" data-title="ariaHidden" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString">DOMString</a>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariahidden" id="ref-for-dom-ariamixin-ariahidden-1"><code>ariaHidden</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariainvalid" data-title="ariaInvalid" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString">DOMString</a>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariainvalid" id="ref-for-dom-ariamixin-ariainvalid-1"><code>ariaInvalid</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariakeyshortcuts" data-title="ariaKeyShortcuts" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString">DOMString</a>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariakeyshortcuts" id="ref-for-dom-ariamixin-ariakeyshortcuts-1"><code>ariaKeyShortcuts</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-arialabel" data-title="ariaLabel" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString">DOMString</a>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-arialabel" id="ref-for-dom-ariamixin-arialabel-1"><code>ariaLabel</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-arialabelledbyelements" data-title="ariaLabelledByElements" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-frozen-array">FrozenArray</a><<a data-link-type="interface" href="https://dom.spec.whatwg.org/#element">Element</a>>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-arialabelledbyelements" id="ref-for-dom-ariamixin-arialabelledbyelements-1"><code>ariaLabelledByElements</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-arialevel" data-title="ariaLevel" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString">DOMString</a>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-arialevel" id="ref-for-dom-ariamixin-arialevel-1"><code>ariaLevel</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-arialive" data-title="ariaLive" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString">DOMString</a>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-arialive" id="ref-for-dom-ariamixin-arialive-1"><code>ariaLive</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariamodal" data-title="ariaModal" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString">DOMString</a>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariamodal" id="ref-for-dom-ariamixin-ariamodal-1"><code>ariaModal</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariamultiline" data-title="ariaMultiLine" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString">DOMString</a>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariamultiline" id="ref-for-dom-ariamixin-ariamultiline-1"><code>ariaMultiLine</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariamultiselectable" data-title="ariaMultiSelectable" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString">DOMString</a>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariamultiselectable" id="ref-for-dom-ariamixin-ariamultiselectable-1"><code>ariaMultiSelectable</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariaorientation" data-title="ariaOrientation" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString">DOMString</a>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariaorientation" id="ref-for-dom-ariamixin-ariaorientation-1"><code>ariaOrientation</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariaownselements" data-title="ariaOwnsElements" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-frozen-array">FrozenArray</a><<a data-link-type="interface" href="https://dom.spec.whatwg.org/#element">Element</a>>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariaownselements" id="ref-for-dom-ariamixin-ariaownselements-1"><code>ariaOwnsElements</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariaplaceholder" data-title="ariaPlaceholder" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString">DOMString</a>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariaplaceholder" id="ref-for-dom-ariamixin-ariaplaceholder-1"><code>ariaPlaceholder</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariaposinset" data-title="ariaPosInSet" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString">DOMString</a>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariaposinset" id="ref-for-dom-ariamixin-ariaposinset-1"><code>ariaPosInSet</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariapressed" data-title="ariaPressed" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString">DOMString</a>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariapressed" id="ref-for-dom-ariamixin-ariapressed-1"><code>ariaPressed</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariareadonly" data-title="ariaReadOnly" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString">DOMString</a>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariareadonly" id="ref-for-dom-ariamixin-ariareadonly-1"><code>ariaReadOnly</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariarelevant" data-title="ariaRelevant" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString">DOMString</a>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariarelevant" id="ref-for-dom-ariamixin-ariarelevant-1"><code>ariaRelevant</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariarequired" data-title="ariaRequired" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString">DOMString</a>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariarequired" id="ref-for-dom-ariamixin-ariarequired-1"><code>ariaRequired</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariaroledescription" data-title="ariaRoleDescription" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString">DOMString</a>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariaroledescription" id="ref-for-dom-ariamixin-ariaroledescription-1"><code>ariaRoleDescription</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariarowcount" data-title="ariaRowCount" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString">DOMString</a>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariarowcount" id="ref-for-dom-ariamixin-ariarowcount-1"><code>ariaRowCount</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariarowindex" data-title="ariaRowIndex" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString">DOMString</a>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariarowindex" id="ref-for-dom-ariamixin-ariarowindex-1"><code>ariaRowIndex</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariarowindextext" data-title="ariaRowIndexText" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString">DOMString</a>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariarowindextext" id="ref-for-dom-ariamixin-ariarowindextext-1"><code>ariaRowIndexText</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariarowspan" data-title="ariaRowSpan" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString">DOMString</a>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariarowspan" id="ref-for-dom-ariamixin-ariarowspan-1"><code>ariaRowSpan</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariaselected" data-title="ariaSelected" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString">DOMString</a>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariaselected" id="ref-for-dom-ariamixin-ariaselected-1"><code>ariaSelected</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariasetsize" data-title="ariaSetSize" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString">DOMString</a>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariasetsize" id="ref-for-dom-ariamixin-ariasetsize-1"><code>ariaSetSize</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariasort" data-title="ariaSort" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString">DOMString</a>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariasort" id="ref-for-dom-ariamixin-ariasort-1"><code>ariaSort</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariavaluemax" data-title="ariaValueMax" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString">DOMString</a>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariavaluemax" id="ref-for-dom-ariamixin-ariavaluemax-1"><code>ariaValueMax</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariavaluemin" data-title="ariaValueMin" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString">DOMString</a>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariavaluemin" id="ref-for-dom-ariamixin-ariavaluemin-1"><code>ariaValueMin</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariavaluenow" data-title="ariaValueNow" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString">DOMString</a>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariavaluenow" id="ref-for-dom-ariamixin-ariavaluenow-1"><code>ariaValueNow</code></a>;</span><span data-idl="" class="idlAttribute" id="idl-def-ariamixin-ariavaluetext" data-title="ariaValueText" data-dfn-for="ARIAMixin"> [<span class="extAttr"><a data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">CEReactions</a></span>] attribute<span class="idlType"> <a data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString">DOMString</a>?</span> <a class="internalDFN idlName" data-link-type="attribute" href="#dom-ariamixin-ariavaluetext" id="ref-for-dom-ariamixin-ariavaluetext-1"><code>ariaValueText</code></a>;</span> };</span><span class="idlIncludes"> <a data-link-type="interface" href="https://dom.spec.whatwg.org/#element">Element</a> includes <a data-link-type="idl" href="#dom-ariamixin" class="internalDFN" id="ref-for-dom-ariamixin-2"><code>ARIAMixin</code></a>;</span></code></pre> <p>For every IDL attribute <var>idlAttribute</var> defined in <code>ARIAMixin</code> when included on an element:</p> <ol> <li><p>Let <var>contentAttributeName</var> be the local name of the <abbr title="Accessible Rich Internet Applications">ARIA</abbr> content attribute determined by looking up <var>idlAttribute</var> in the <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Attribute Correspondence table.</p></li> <li><p><var>idlAttribute</var> must <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/common-dom-interfaces.html#reflect">reflect</a> <var>contentAttributeName</var> and support <a data-link-type="interface" data-lt="ElementInternals" href="https://html.spec.whatwg.org/multipage/custom-elements.html#elementinternals"><code>ElementInternals</code></a>.</p></li> </ol> <div class="note" role="note" id="issue-container-generatedID-79"><div role="heading" class="note-title marker" id="h-note-79" aria-level="4"><span>Note</span></div><p class="">In practice, this means that, e.g., the <code>role</code> IDL attribute on <code>Element</code> reflects the <code>role</code> content attribute; the <code>ariaValueMin</code> IDL attribute reflects the <a href="https://w3c.github.io/aria/#aria-valuemin" class="property-reference"><code>aria-valuemin</code></a> content attribute; etc. Ambiguity clarifications (such as <code>ariaPosInSet</code>) are listed in <a href="#idl_attr_exceptions">IDL Attribute Name Notes or Exceptions</a>.</p></div> </section> <section id="accessibilityroleandproperties-correspondence" class="normative" data-dfn-for="ARIAMixin" data-link-for="ARIAMixin"><div class="header-wrapper"><h3 id="x10-2-aria-attribute-correspondence"><bdi class="secno">10.2 </bdi><abbr title="Accessible Rich Internet Applications">ARIA</abbr> Attribute Correspondence</h3><a class="self-link" href="#accessibilityroleandproperties-correspondence" aria-label="Permalink for Section 10.2"></a></div> <p>The following table provides a correspondence between IDL attribute names and content attribute names, for use by <code>ARIAMixin</code>.</p> <table> <tbody><tr><th>IDL Attribute</th><th>Reflected <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Content Attribute</th></tr> <tr><td>role</td><td><a href="#introroles">role</a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariaactivedescendantelement" data-idl="attribute" data-title="ariaActiveDescendantElement" data-dfn-for="ARIAMixin" data-type="Element" data-lt="ariaActiveDescendantElement" data-local-lt="ARIAMixin.ariaActiveDescendantElement" tabindex="0" aria-haspopup="dialog"><code>ariaActiveDescendantElement</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-activedescendant" class="property-reference"><code>aria-activedescendant</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariaatomic" data-idl="attribute" data-title="ariaAtomic" data-dfn-for="ARIAMixin" data-type="DOMString" data-lt="ariaAtomic" data-local-lt="ARIAMixin.ariaAtomic" tabindex="0" aria-haspopup="dialog"><code>ariaAtomic</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-atomic" class="property-reference"><code>aria-atomic</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariaautocomplete" data-idl="attribute" data-title="ariaAutoComplete" data-dfn-for="ARIAMixin" data-type="DOMString" data-lt="ariaAutoComplete" data-local-lt="ARIAMixin.ariaAutoComplete" tabindex="0" aria-haspopup="dialog"><code>ariaAutoComplete</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-autocomplete" class="property-reference"><code>aria-autocomplete</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariabraillelabel" data-idl="attribute" data-title="ariaBrailleLabel" data-dfn-for="ARIAMixin" data-type="DOMString" data-lt="ariaBrailleLabel" data-local-lt="ARIAMixin.ariaBrailleLabel" tabindex="0" aria-haspopup="dialog"><code>ariaBrailleLabel</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariabrailleroledescription" data-idl="attribute" data-title="ariaBrailleRoleDescription" data-dfn-for="ARIAMixin" data-type="DOMString" data-lt="ariaBrailleRoleDescription" data-local-lt="ARIAMixin.ariaBrailleRoleDescription" tabindex="0" aria-haspopup="dialog"><code>ariaBrailleRoleDescription</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariabusy" data-idl="attribute" data-title="ariaBusy" data-dfn-for="ARIAMixin" data-type="DOMString" data-lt="ariaBusy" data-local-lt="ARIAMixin.ariaBusy" tabindex="0" aria-haspopup="dialog"><code>ariaBusy</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-busy" class="state-reference"><code>aria-busy</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariachecked" data-idl="attribute" data-title="ariaChecked" data-dfn-for="ARIAMixin" data-type="DOMString" data-lt="ariaChecked" data-local-lt="ARIAMixin.ariaChecked" tabindex="0" aria-haspopup="dialog"><code>ariaChecked</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-checked" class="state-reference"><code>aria-checked</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariacolcount" data-idl="attribute" data-title="ariaColCount" data-dfn-for="ARIAMixin" data-type="DOMString" data-lt="ariaColCount" data-local-lt="ARIAMixin.ariaColCount" tabindex="0" aria-haspopup="dialog"><code>ariaColCount</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-colcount" class="property-reference"><code>aria-colcount</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariacolindex" data-idl="attribute" data-title="ariaColIndex" data-dfn-for="ARIAMixin" data-type="DOMString" data-lt="ariaColIndex" data-local-lt="ARIAMixin.ariaColIndex" tabindex="0" aria-haspopup="dialog"><code>ariaColIndex</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-colindex" class="property-reference"><code>aria-colindex</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariacolindextext" data-idl="attribute" data-title="ariaColIndexText" data-dfn-for="ARIAMixin" data-type="DOMString" data-lt="ariaColIndexText" data-local-lt="ARIAMixin.ariaColIndexText" tabindex="0" aria-haspopup="dialog"><code>ariaColIndexText</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-colindextext" class="property-reference"><code>aria-colindextext</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariacolspan" data-idl="attribute" data-title="ariaColSpan" data-dfn-for="ARIAMixin" data-type="DOMString" data-lt="ariaColSpan" data-local-lt="ARIAMixin.ariaColSpan" tabindex="0" aria-haspopup="dialog"><code>ariaColSpan</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-colspan" class="property-reference"><code>aria-colspan</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariacontrolselements" data-idl="attribute" data-title="ariaControlsElements" data-dfn-for="ARIAMixin" data-type="FrozenArray" data-lt="ariaControlsElements" data-local-lt="ARIAMixin.ariaControlsElements" tabindex="0" aria-haspopup="dialog"><code>ariaControlsElements</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-controls" class="property-reference"><code>aria-controls</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariacurrent" data-idl="attribute" data-title="ariaCurrent" data-dfn-for="ARIAMixin" data-type="DOMString" data-lt="ariaCurrent" data-local-lt="ARIAMixin.ariaCurrent" tabindex="0" aria-haspopup="dialog"><code>ariaCurrent</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-current" class="state-reference"><code>aria-current</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariadescribedbyelements" data-idl="attribute" data-title="ariaDescribedByElements" data-dfn-for="ARIAMixin" data-type="FrozenArray" data-lt="ariaDescribedByElements" data-local-lt="ARIAMixin.ariaDescribedByElements" tabindex="0" aria-haspopup="dialog"><code>ariaDescribedByElements</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-describedby" class="property-reference"><code>aria-describedby</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariadescription" data-idl="attribute" data-title="ariaDescription" data-dfn-for="ARIAMixin" data-type="DOMString" data-lt="ariaDescription" data-local-lt="ARIAMixin.ariaDescription" tabindex="0" aria-haspopup="dialog"><code>ariaDescription</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariadetailselements" data-idl="attribute" data-title="ariaDetailsElements" data-dfn-for="ARIAMixin" data-type="FrozenArray" data-lt="ariaDetailsElements" data-local-lt="ARIAMixin.ariaDetailsElements" tabindex="0" aria-haspopup="dialog"><code>ariaDetailsElements</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariadisabled" data-idl="attribute" data-title="ariaDisabled" data-dfn-for="ARIAMixin" data-type="DOMString" data-lt="ariaDisabled" data-local-lt="ARIAMixin.ariaDisabled" tabindex="0" aria-haspopup="dialog"><code>ariaDisabled</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-disabled" class="state-reference"><code>aria-disabled</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariaerrormessageelements" data-idl="attribute" data-title="ariaErrorMessageElements" data-dfn-for="ARIAMixin" data-type="FrozenArray" data-lt="ariaErrorMessageElements" data-local-lt="ARIAMixin.ariaErrorMessageElements" tabindex="0" aria-haspopup="dialog"><code>ariaErrorMessageElements</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-errormessage" class="property-reference"><code>aria-errormessage</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariaexpanded" data-idl="attribute" data-title="ariaExpanded" data-dfn-for="ARIAMixin" data-type="DOMString" data-lt="ariaExpanded" data-local-lt="ARIAMixin.ariaExpanded" tabindex="0" aria-haspopup="dialog"><code>ariaExpanded</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-expanded" class="state-reference"><code>aria-expanded</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariaflowtoelements" data-idl="attribute" data-title="ariaFlowToElements" data-dfn-for="ARIAMixin" data-type="FrozenArray" data-lt="ariaFlowToElements" data-local-lt="ARIAMixin.ariaFlowToElements" tabindex="0" aria-haspopup="dialog"><code>ariaFlowToElements</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-flowto" class="property-reference"><code>aria-flowto</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariahaspopup" data-idl="attribute" data-title="ariaHasPopup" data-dfn-for="ARIAMixin" data-type="DOMString" data-lt="ariaHasPopup" data-local-lt="ARIAMixin.ariaHasPopup" tabindex="0" aria-haspopup="dialog"><code>ariaHasPopup</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference"><code>aria-haspopup</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariahidden" data-idl="attribute" data-title="ariaHidden" data-dfn-for="ARIAMixin" data-type="DOMString" data-lt="ariaHidden" data-local-lt="ARIAMixin.ariaHidden" tabindex="0" aria-haspopup="dialog"><code>ariaHidden</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-hidden" class="state-reference"><code>aria-hidden</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariainvalid" data-idl="attribute" data-title="ariaInvalid" data-dfn-for="ARIAMixin" data-type="DOMString" data-lt="ariaInvalid" data-local-lt="ARIAMixin.ariaInvalid" tabindex="0" aria-haspopup="dialog"><code>ariaInvalid</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-invalid" class="state-reference"><code>aria-invalid</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariakeyshortcuts" data-idl="attribute" data-title="ariaKeyShortcuts" data-dfn-for="ARIAMixin" data-type="DOMString" data-lt="ariaKeyShortcuts" data-local-lt="ARIAMixin.ariaKeyShortcuts" tabindex="0" aria-haspopup="dialog"><code>ariaKeyShortcuts</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-keyshortcuts" class="property-reference"><code>aria-keyshortcuts</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-arialabel" data-idl="attribute" data-title="ariaLabel" data-dfn-for="ARIAMixin" data-type="DOMString" data-lt="ariaLabel" data-local-lt="ARIAMixin.ariaLabel" tabindex="0" aria-haspopup="dialog"><code>ariaLabel</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-label" class="property-reference"><code>aria-label</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-arialabelledbyelements" data-idl="attribute" data-title="ariaLabelledByElements" data-dfn-for="ARIAMixin" data-type="FrozenArray" data-lt="ariaLabelledByElements" data-local-lt="ARIAMixin.ariaLabelledByElements" tabindex="0" aria-haspopup="dialog"><code>ariaLabelledByElements</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-labelledby" class="property-reference"><code>aria-labelledby</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-arialevel" data-idl="attribute" data-title="ariaLevel" data-dfn-for="ARIAMixin" data-type="DOMString" data-lt="ariaLevel" data-local-lt="ARIAMixin.ariaLevel" tabindex="0" aria-haspopup="dialog"><code>ariaLevel</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-level" class="property-reference"><code>aria-level</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-arialive" data-idl="attribute" data-title="ariaLive" data-dfn-for="ARIAMixin" data-type="DOMString" data-lt="ariaLive" data-local-lt="ARIAMixin.ariaLive" tabindex="0" aria-haspopup="dialog"><code>ariaLive</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-live" class="property-reference"><code>aria-live</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariamodal" data-idl="attribute" data-title="ariaModal" data-dfn-for="ARIAMixin" data-type="DOMString" data-lt="ariaModal" data-local-lt="ARIAMixin.ariaModal" tabindex="0" aria-haspopup="dialog"><code>ariaModal</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-modal" class="property-reference"><code>aria-modal</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariamultiline" data-idl="attribute" data-title="ariaMultiLine" data-dfn-for="ARIAMixin" data-type="DOMString" data-lt="ariaMultiLine" data-local-lt="ARIAMixin.ariaMultiLine" tabindex="0" aria-haspopup="dialog"><code>ariaMultiLine</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-multiline" class="property-reference"><code>aria-multiline</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariamultiselectable" data-idl="attribute" data-title="ariaMultiSelectable" data-dfn-for="ARIAMixin" data-type="DOMString" data-lt="ariaMultiSelectable" data-local-lt="ARIAMixin.ariaMultiSelectable" tabindex="0" aria-haspopup="dialog"><code>ariaMultiSelectable</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-multiselectable" class="property-reference"><code>aria-multiselectable</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariaorientation" data-idl="attribute" data-title="ariaOrientation" data-dfn-for="ARIAMixin" data-type="DOMString" data-lt="ariaOrientation" data-local-lt="ARIAMixin.ariaOrientation" tabindex="0" aria-haspopup="dialog"><code>ariaOrientation</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-orientation" class="property-reference"><code>aria-orientation</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariaownselements" data-idl="attribute" data-title="ariaOwnsElements" data-dfn-for="ARIAMixin" data-type="FrozenArray" data-lt="ariaOwnsElements" data-local-lt="ARIAMixin.ariaOwnsElements" tabindex="0" aria-haspopup="dialog"><code>ariaOwnsElements</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-owns" class="property-reference"><code>aria-owns</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariaplaceholder" data-idl="attribute" data-title="ariaPlaceholder" data-dfn-for="ARIAMixin" data-type="DOMString" data-lt="ariaPlaceholder" data-local-lt="ARIAMixin.ariaPlaceholder" tabindex="0" aria-haspopup="dialog"><code>ariaPlaceholder</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-placeholder" class="property-reference"><code>aria-placeholder</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariaposinset" data-idl="attribute" data-title="ariaPosInSet" data-dfn-for="ARIAMixin" data-type="DOMString" data-lt="ariaPosInSet" data-local-lt="ARIAMixin.ariaPosInSet" tabindex="0" aria-haspopup="dialog"><code>ariaPosInSet</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-posinset" class="property-reference"><code>aria-posinset</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariapressed" data-idl="attribute" data-title="ariaPressed" data-dfn-for="ARIAMixin" data-type="DOMString" data-lt="ariaPressed" data-local-lt="ARIAMixin.ariaPressed" tabindex="0" aria-haspopup="dialog"><code>ariaPressed</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-pressed" class="state-reference"><code>aria-pressed</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariareadonly" data-idl="attribute" data-title="ariaReadOnly" data-dfn-for="ARIAMixin" data-type="DOMString" data-lt="ariaReadOnly" data-local-lt="ARIAMixin.ariaReadOnly" tabindex="0" aria-haspopup="dialog"><code>ariaReadOnly</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-readonly" class="property-reference"><code>aria-readonly</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariarelevant" data-idl="attribute" data-title="ariaRelevant" data-dfn-for="ARIAMixin" data-type="DOMString" data-lt="ariaRelevant" data-local-lt="ARIAMixin.ariaRelevant" tabindex="0" aria-haspopup="dialog"><code>ariaRelevant</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-relevant" class="property-reference"><code>aria-relevant</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariarequired" data-idl="attribute" data-title="ariaRequired" data-dfn-for="ARIAMixin" data-type="DOMString" data-lt="ariaRequired" data-local-lt="ARIAMixin.ariaRequired" tabindex="0" aria-haspopup="dialog"><code>ariaRequired</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-required" class="property-reference"><code>aria-required</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariaroledescription" data-idl="attribute" data-title="ariaRoleDescription" data-dfn-for="ARIAMixin" data-type="DOMString" data-lt="ariaRoleDescription" data-local-lt="ARIAMixin.ariaRoleDescription" tabindex="0" aria-haspopup="dialog"><code>ariaRoleDescription</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-roledescription" class="property-reference"><code>aria-roledescription</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariarowcount" data-idl="attribute" data-title="ariaRowCount" data-dfn-for="ARIAMixin" data-type="DOMString" data-lt="ariaRowCount" data-local-lt="ARIAMixin.ariaRowCount" tabindex="0" aria-haspopup="dialog"><code>ariaRowCount</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-rowcount" class="property-reference"><code>aria-rowcount</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariarowindex" data-idl="attribute" data-title="ariaRowIndex" data-dfn-for="ARIAMixin" data-type="DOMString" data-lt="ariaRowIndex" data-local-lt="ARIAMixin.ariaRowIndex" tabindex="0" aria-haspopup="dialog"><code>ariaRowIndex</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-rowindex" class="property-reference"><code>aria-rowindex</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariarowindextext" data-idl="attribute" data-title="ariaRowIndexText" data-dfn-for="ARIAMixin" data-type="DOMString" data-lt="ariaRowIndexText" data-local-lt="ARIAMixin.ariaRowIndexText" tabindex="0" aria-haspopup="dialog"><code>ariaRowIndexText</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-rowindextext" class="property-reference"><code>aria-rowindextext</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariarowspan" data-idl="attribute" data-title="ariaRowSpan" data-dfn-for="ARIAMixin" data-type="DOMString" data-lt="ariaRowSpan" data-local-lt="ARIAMixin.ariaRowSpan" tabindex="0" aria-haspopup="dialog"><code>ariaRowSpan</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-rowspan" class="property-reference"><code>aria-rowspan</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariaselected" data-idl="attribute" data-title="ariaSelected" data-dfn-for="ARIAMixin" data-type="DOMString" data-lt="ariaSelected" data-local-lt="ARIAMixin.ariaSelected" tabindex="0" aria-haspopup="dialog"><code>ariaSelected</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-selected" class="state-reference"><code>aria-selected</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariasetsize" data-idl="attribute" data-title="ariaSetSize" data-dfn-for="ARIAMixin" data-type="DOMString" data-lt="ariaSetSize" data-local-lt="ARIAMixin.ariaSetSize" tabindex="0" aria-haspopup="dialog"><code>ariaSetSize</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-setsize" class="property-reference"><code>aria-setsize</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariasort" data-idl="attribute" data-title="ariaSort" data-dfn-for="ARIAMixin" data-type="DOMString" data-lt="ariaSort" data-local-lt="ARIAMixin.ariaSort" tabindex="0" aria-haspopup="dialog"><code>ariaSort</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-sort" class="property-reference"><code>aria-sort</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariavaluemax" data-idl="attribute" data-title="ariaValueMax" data-dfn-for="ARIAMixin" data-type="DOMString" data-lt="ariaValueMax" data-local-lt="ARIAMixin.ariaValueMax" tabindex="0" aria-haspopup="dialog"><code>ariaValueMax</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-valuemax" class="property-reference"><code>aria-valuemax</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariavaluemin" data-idl="attribute" data-title="ariaValueMin" data-dfn-for="ARIAMixin" data-type="DOMString" data-lt="ariaValueMin" data-local-lt="ARIAMixin.ariaValueMin" tabindex="0" aria-haspopup="dialog"><code>ariaValueMin</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-valuemin" class="property-reference"><code>aria-valuemin</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariavaluenow" data-idl="attribute" data-title="ariaValueNow" data-dfn-for="ARIAMixin" data-type="DOMString" data-lt="ariaValueNow" data-local-lt="ARIAMixin.ariaValueNow" tabindex="0" aria-haspopup="dialog"><code>ariaValueNow</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-valuenow" class="property-reference"><code>aria-valuenow</code></a></td></tr> <tr><td><dfn data-export="" data-dfn-type="attribute" id="dom-ariamixin-ariavaluetext" data-idl="attribute" data-title="ariaValueText" data-dfn-for="ARIAMixin" data-type="DOMString" data-lt="ariaValueText" data-local-lt="ARIAMixin.ariaValueText" tabindex="0" aria-haspopup="dialog"><code>ariaValueText</code></dfn></td><td><a href="https://w3c.github.io/aria/#aria-valuetext" class="property-reference"><code>aria-valuetext</code></a></td></tr> </tbody></table> <div class="note" role="note" id="issue-container-generatedID-80"><div role="heading" class="note-title marker" id="h-note-80" aria-level="4"><span>Note</span></div><p class="">Note: Attributes <a href="https://w3c.github.io/aria/#aria-dropeffect" class="property-reference"><code>aria-dropeffect</code></a> and <a href="https://w3c.github.io/aria/#aria-grabbed" class="state-reference"><code>aria-grabbed</code></a> were deprecated in <abbr title="Accessible Rich Internet Applications">ARIA</abbr> 1.1 and do not have corresponding IDL attributes.</p></div> <section class="informative" id="idl_attr_disambiguation"><div class="header-wrapper"><h4 id="x10-2-1-disambiguation-pattern"><bdi class="secno">10.2.1 </bdi>Disambiguation Pattern</h4><a class="self-link" href="#idl_attr_disambiguation" aria-label="Permalink for Section 10.2.1"></a></div><p><em>This section is non-normative.</em></p> <p>Though specification authors can make exceptions to this pattern, the following rules were used to disambiguate names and case of the IDL attributes listed above.</p> <ul> <li>Any attribute name referencing concepts that are combinations of two or more words (such as "value text") becomes a camel-cased IDL attribute capitalizing each word boundary. For example, <a href="https://w3c.github.io/aria/#aria-valuetext" class="property-reference"><code>aria-valuetext</code></a> becomes <code>ariaValueText</code> with both the V and T capitalized.</li> <li>Likewise, any attribute name referencing concepts that can be hyphenated (such as "multi-selectable") becomes a camel-cased IDL attribute capitalizing each hyphenation boundary. For example, the only valid spelling for "multi-selectable" is hyphenated, so <a href="https://w3c.github.io/aria/#aria-multiselectable" class="property-reference"><code>aria-multiselectable</code></a> becomes <code>ariaMultiSelectable</code> with both the M and S capitalized.</li> <li>When trusted dictionary sources list both hyphenated or non-hyphenated spellings (e.g. "multi-line" and "multiline" are both valid spellings) use the hyphenated version and apply the hyphenation rule above. For example, <a href="https://w3c.github.io/aria/#aria-multiline" class="property-reference"><code>aria-multiline</code></a> becomes <code>ariaMultiLine</code> with both the M and L capitalized.</li> <li>If all trusted dictionary sources list a single spelling of a compound word with no spaces or hyphens, only the first letter of the term is capitalized. For example, neither “place-holder” nor “place holder” are considered valid spellings of the term “placeholder,” so <a href="https://w3c.github.io/aria/#aria-placeholder" class="property-reference"><code>aria-placeholder</code></a> becomes <code>ariaPlaceholder</code> with only the P capitalized.</li> <li>There are currently no acronym-based <abbr title="Accessible Rich Internet Applications">ARIA</abbr> attributes, but if future attributes include acronym usage, attempt to match existing <abbr title="Document Object Model">DOM</abbr> conventions (e.g. ID becomes Id).</li> </ul> </section> <section class="informative" id="idl_attr_exceptions"><div class="header-wrapper"><h4 id="x10-2-2-idl-attribute-name-notes-or-exceptions"><bdi class="secno">10.2.2 </bdi>IDL Attribute Name Notes or Exceptions</h4><a class="self-link" href="#idl_attr_exceptions" aria-label="Permalink for Section 10.2.2"></a></div><p><em>This section is non-normative.</em></p> <p>Any notes or exceptions for specific attribute names will be listed here.</p> <ul> <li><code>ariaPosInSet</code>: The <a href="https://w3c.github.io/aria/#aria-posinset" class="property-reference"><code>aria-posinset</code></a> attribute refers to an item's position in a set (two words: "in set") rather than the "inset" of an item from the beginning of the collection. Therefore the IDL attribute name is <code>ariaPosInSet</code> with the P, I, and second S capitalized, <em>not</em> <code>ariaPosInset</code>.</li> </ul> </section> </section> <section class="informative" id="idl_example_usage"><div class="header-wrapper"><h3 id="x10-3-example-idl-attribute-usage"><bdi class="secno">10.3 </bdi>Example IDL Attribute Usage</h3><a class="self-link" href="#idl_example_usage" aria-label="Permalink for Section 10.3"></a></div><p><em>This section is non-normative.</em></p> <p>The primary purpose of <abbr title="Accessible Rich Internet Applications">ARIA</abbr> IDL attribute reflection is to ease JavaScript-based manipulation of values. The following examples demonstrate its usage.</p> <aside class="example" id="example-51"><div class="marker"> <a class="self-link" href="#example-51">Example<bdi> 51</bdi></a> </div> <pre aria-busy="false"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"inaccessibleButton"</span>></span> <span class="hljs-comment"></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> <pre aria-busy="false"><code class="hljs javascript"><span class="hljs-comment">// Get a reference to the element.</span> <span class="hljs-keyword">let</span> el = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'inaccessibleButton'</span>); el.<span class="hljs-property">tabIndex</span> = <span class="hljs-number">0</span>; <span class="hljs-comment">// Make it focusable.</span> <span class="hljs-comment">// Set the role and label.</span> el.<span class="hljs-property">role</span> = <span class="hljs-string">"button"</span>; el.<span class="hljs-property">ariaLabel</span> = <span class="hljs-string">"Edit"</span>; <span class="hljs-comment">// Get the role and label.</span> el.<span class="hljs-property">role</span>; <span class="hljs-comment">// Returns "button"</span> el.<span class="hljs-property">ariaLabel</span>; <span class="hljs-comment">// Returns "Edit"</span> <span class="hljs-comment">// These are interchangeable with the more verbose setAttribute and getAttribute methods.</span> el.<span class="hljs-title function_">setAttribute</span>(<span class="hljs-string">"role"</span>, <span class="hljs-string">"button"</span>); el.<span class="hljs-title function_">setAttribute</span>(<span class="hljs-string">"aria-label"</span>, <span class="hljs-string">"Edit"</span>); el.<span class="hljs-title function_">getAttribute</span>(<span class="hljs-string">"role"</span>); <span class="hljs-comment">// Returns "button"</span> el.<span class="hljs-title function_">getAttribute</span>(<span class="hljs-string">"aria-label"</span>); <span class="hljs-comment">// Returns "Edit"</span> <span class="hljs-comment">// Changes via either interface are reflected by the other.</span> el.<span class="hljs-title function_">setAttribute</span>(<span class="hljs-string">"aria-label"</span>, <span class="hljs-string">"Delete"</span>); el.<span class="hljs-property">ariaLabel</span>; <span class="hljs-comment">// Returns "Delete"</span> el.<span class="hljs-property">ariaLabel</span> = <span class="hljs-string">"Publish"</span>; el.<span class="hljs-title function_">getAttribute</span>(<span class="hljs-string">"aria-label"</span>); <span class="hljs-comment">// Returns "Publish"</span></code></pre> </aside> </section> </section> <section class="informative" id="security-considerations"><div class="header-wrapper"><h2 id="x11-security-considerations"><bdi class="secno">11. </bdi>Security Considerations</h2><a class="self-link" href="#security-considerations" aria-label="Permalink for Section 11."></a></div><p><em>This section is non-normative.</em></p> <p>This specification introduces no new security considerations.</p> </section> <section class="informative" id="privacy-considerations"><div class="header-wrapper"><h2 id="x12-privacy-considerations"><bdi class="secno">12. </bdi>Privacy Considerations</h2><a class="self-link" href="#privacy-considerations" aria-label="Permalink for Section 12."></a></div><p><em>This section is non-normative.</em></p> <p>In accordance with <a href="https://www.w3.org/TR/design-principles/#do-not-expose-use-of-assistive-tech">Web Platform Design Principles</a>, this specification provides no programmatic interface to determine if information is being used by Assistive Technologies. However, this specification does allow an author to present different information to users of Assistive Technologies from the information available to users who do not use Assistive Technologies. This is possible using many features of the <abbr title="Accessible Rich Internet Applications">ARIA</abbr> specification, just as this is possible using many other parts of the web technology stack. This content disparity could be abused to perform <a href="https://www.w3.org/TR/fingerprinting-guidance/#active-0">active fingerprinting</a> of users of Assistive Technologies.</p> </section> <section class="informative appendix" id="typemapping"><div class="header-wrapper"><h2 id="a-mapping-wai-aria-value-types-to-languages"><bdi class="secno">A. </bdi>Mapping <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> Value types to languages</h2><a class="self-link" href="#typemapping" aria-label="Permalink for Appendix A."></a></div><p><em>This section is non-normative.</em></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="">The <abbr title="Hypertext Markup Language">HTML</abbr> column of the table below is advisory. Guidance on use of <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> state and properties in <abbr title="Hypertext Markup Language">HTML</abbr> is provided in <a href="https://www.w3.org/TR/html-aria/#docconformance">Document conformance requirements for use of <abbr title="Accessible Rich Internet Applications">ARIA</abbr> attributes in <abbr title="Hypertext Markup Language">HTML</abbr></a> ([<cite><a class="bibref" data-link-type="biblio" href="#bib-html-aria" title="ARIA in HTML">HTML-ARIA</a></cite>]).</p></div> <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="">The suggested mappings for true/false values in <abbr title="Hypertext Markup Language">HTML</abbr> use <a href="https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#keywords-and-enumerated-attributes">Keyword and enumerated attributes</a> with allowed values of <code>true</code> and <code>false</code>, instead of using the <abbr title="Hypertext Markup Language">HTML</abbr> boolean value type. </p></div> <p>The table below provides recommended mappings between <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> state and property types and attribute types from <cite><a data-matched-text="[[[HTML]]]" href="https://html.spec.whatwg.org/multipage/">HTML Standard</a></cite> and <cite><a data-matched-text="[[[XMLSCHEMA11-2]]]" href="https://www.w3.org/TR/xmlschema11-2/">W3C XML Schema Definition Language (XSD) 1.1 Part 2: Datatypes</a></cite>.</p> <p>Languages not listed below might have appropriate value types defined in the language. If they do not, we recommend XML Schema Datatypes for general purpose XML languages. Documents using DTDs instead of schemas will not be able to validate automatically and require additional processing on <abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> attributes.</p> <table> <tbody><tr> <th scope="col"><abbr title="Accessible Rich Internet Application">WAI-ARIA</abbr> type</th> <th scope="col"><abbr title="Hypertext Markup Language">HTML</abbr></th> <th scope="col">XML Schema</th> </tr> <tr> <td>true/false</td> <td><a href="https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#keywords-and-enumerated-attributes">Keyword and enumerated attributes</a> with allowed values of "true" and "false"</td> <td><a href="https://www.w3.org/TR/xmlschema11-2/#boolean">boolean</a></td> </tr> <tr> <td>true/false/undefined</td> <td><a href="https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#keywords-and-enumerated-attributes">Keyword and enumerated attributes</a> with allowed values of <code>true</code>, <code>false</code>, and <code>undefined</code></td> <td><a href="https://www.w3.org/TR/xmlschema11-2/#NMTOKEN">NMTOKEN</a> with an <a href="https://www.w3.org/TR/xmlschema11-2/#NMTOKEN">enumeration constraint</a> allowing values of <code>true</code>, <code>false</code>, and <code>undefined</code></td> </tr> <tr> <td>tristate</td> <td><a href="https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#keywords-and-enumerated-attributes">Keyword and enumerated attributes</a> with allowed values of "true", "false", and "mixed"</td> <td><a href="https://www.w3.org/TR/xmlschema11-2/#NMTOKEN">NMTOKEN</a> with an <a href="https://www.w3.org/TR/xmlschema11-2/#NMTOKEN">enumeration constraint</a> allowing values of "true", "false", and "mixed"</td> </tr> <tr> <td>number</td> <td><a href="https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#floating-point-numbers">Floating-point numbers</a></td> <td><a href="https://www.w3.org/TR/xmlschema11-2/#decimal">decimal</a></td> </tr> <tr> <td>integer</td> <td><a href="https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#floating-point-numbers">Non-negative integer</a></td> <td><a href="https://www.w3.org/TR/xmlschema11-2/#integer">integer</a></td> </tr> <tr> <td>token</td> <td><a href="https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#keywords-and-enumerated-attributes">Keyword and enumerated attributes</a></td> <td><a href="https://www.w3.org/TR/xmlschema11-2/#NMTOKEN">NMTOKEN</a> with an <a href="https://www.w3.org/TR/xmlschema11-2/#dt-enumeration">enumeration constraint</a> allowing values listed in the state or property definition</td> </tr> <tr> <td>token list</td> <td><a href="https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#space-separated-tokens">Space-separated tokens</a></td> <td><a href="https://www.w3.org/TR/xmlschema11-2/#NMTOKENS">NMTOKENS</a> with an <a href="https://www.w3.org/TR/xmlschema11-2/#dt-enumeration">enumeration constraint</a> allowing values listed in the state or property definition</td> </tr> <tr> <td>ID reference</td> <td>The value of a defined <a href="https://html.spec.whatwg.org/multipage/dom.html#the-id-attribute">id attribute</a> on another element</td> <td><a href="https://www.w3.org/TR/xmlschema11-2/#IDREF">IDREF</a></td> </tr> <tr> <td>ID reference list</td> <td>The value of one or more defined <a href="https://html.spec.whatwg.org/multipage/dom.html#the-id-attribute">id attributes</a> on other element(s), represented as <a href="https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#space-separated-tokens">Space-separated tokens</a></td> <td><a href="https://www.w3.org/TR/xmlschema11-2/#IDREFS">IDREFS</a></td> </tr> <tr> <td>string</td> <td>No value constraints</td> <td><a href="https://www.w3.org/TR/xmlschema11-2/#string">string</a></td> </tr> </tbody></table> </section> <section class="appendix" id="changelog"><div class="header-wrapper"><h2 id="b-change-log"><bdi class="secno">B. </bdi>Change Log</h2><a class="self-link" href="#changelog" aria-label="Permalink for Appendix B."></a></div> <section id="major-feature-in-this-release"><div class="header-wrapper"><h3 id="b-1-major-feature-in-this-release"><bdi class="secno">B.1 </bdi>Major feature in this release</h3><a class="self-link" href="#major-feature-in-this-release" aria-label="Permalink for Appendix B.1"></a></div> <ul> <li>11-Mar-2020: Add <a href="https://w3c.github.io/aria/#aria-braillelabel" class="property-reference"><code>aria-braillelabel</code></a></li> <li>13-Feb-2020: Role <a href="https://w3c.github.io/aria/#suggestion" class="role-reference"><code>suggestion</code></a> added</li> <li>11-Feb-2020: Update <a href="https://w3c.github.io/aria/#aria-details" class="property-reference"><code>aria-details</code></a> to allow multiple IDrefs</li> <li>11-Feb-2020: Role <a href="https://w3c.github.io/aria/#comment" class="role-reference"><code>comment</code></a> added</li> <li>16-Jan-2020: Add <a href="https://w3c.github.io/aria/#aria-description" class="property-reference"><code>aria-description</code></a></li> <li>15-Jan-2020: Role <a href="https://w3c.github.io/aria/#mark" class="role-reference"><code>mark</code></a>: Added</li> <li>14-Oct-2019: Add <a href="https://w3c.github.io/aria/#aria-brailleroledescription" class="property-reference"><code>aria-brailleroledescription</code></a></li> </ul> </section> <section id="substantive-changes-since-aria-1-2"><div class="header-wrapper"><h3 id="b-2-substantive-changes-since-aria-1-2"><bdi class="secno">B.2 </bdi>Substantive changes since <abbr title="Accessible Rich Internet Applications">ARIA</abbr> 1.2</h3><a class="self-link" href="#substantive-changes-since-aria-1-2" aria-label="Permalink for Appendix B.2"></a></div> <ul> <li><a href="https://github.com/w3c/aria/commit/4d3fefe">Fix link to definition of accessibility child</a></li> <li><a href="https://github.com/w3c/aria/commit/5bd87f4">interop-accessibilty repo rename</a> (<a href="https://github.com/w3c/aria/pull/2077">#2077</a>)</li> <li><a href="https://github.com/w3c/aria/commit/0486a98">Add statemment about translating in keyshortcuts</a> (<a href="https://github.com/w3c/aria/pull/2041">#2041</a>)</li> <li><a href="https://github.com/w3c/aria/commit/9b2a146">Clarify that user agents should not expose aria-haspopup=false</a> (<a href="https://github.com/w3c/aria/pull/2030">#2030</a>)</li> <li><a href="https://github.com/w3c/aria/commit/ff9b9c3">Add accessibility web stack and tests diagrams</a> (<a href="https://github.com/w3c/aria/pull/2009">#2009</a>)</li> <li><a href="https://github.com/w3c/aria/commit/ef1ad85">Makes aria-braillelabel prohibited whereever aria-label is prohibited…</a></li> <li><a href="https://github.com/w3c/aria/commit/122fad6">"cell" and "treegrid" roles are the only ones without any reference t…</a></li> <li><a href="https://github.com/w3c/aria/commit/411bd50">Updated the characteristics table of "caption" role</a> (<a href="https://github.com/w3c/aria/pull/1975">#1975</a>)</li> <li><a href="https://github.com/w3c/aria/commit/dc19188">Clarification for exposure of generic elements</a> (<a href="https://github.com/w3c/aria/pull/1949">#1949</a>)</li> <li><a href="https://github.com/w3c/aria/commit/051ed84">Distinction between none and generic</a> (<a href="https://github.com/w3c/aria/pull/1959">#1959</a>)</li> <li><a href="https://github.com/w3c/aria/commit/cd6b483">fix/1939 swap presentation/none roles</a> (<a href="https://github.com/w3c/aria/pull/1945">#1945</a>)</li> <li><a href="https://github.com/w3c/aria/commit/7205d35">aria-atomic has no default</a> (<a href="https://github.com/w3c/aria/pull/1894">#1894</a>)</li> <li><a href="https://github.com/w3c/aria/commit/232ae78">Update required owned elements and required context role</a> (<a href="https://github.com/w3c/aria/pull/1454">#1454</a>)</li> <li><a href="https://github.com/w3c/aria/commit/11902fc">aria-errormessage is hidden or removed when not pertinent</a> (<a href="https://github.com/w3c/aria/pull/1588">#1588</a>)</li> <li><a href="https://github.com/w3c/aria/commit/c77c2c4">Add search role’s base concept pointing to <abbr title="Hypertext Markup Language">HTML</abbr> spec. Fix #1898</a> (<a href="https://github.com/w3c/aria/pull/1900">#1900</a>)</li> <li><a href="https://github.com/w3c/aria/commit/abbef89">role=note fleshed out a little.</a> (<a href="https://github.com/w3c/aria/pull/1639">#1639</a>)</li> <li><a href="https://github.com/w3c/aria/commit/af84654">fix(aria-level): update to specify only level 1-6</a> (<a href="https://github.com/w3c/aria/pull/1873">#1873</a>)</li> <li><a href="https://github.com/w3c/aria/commit/11c8909">Change aria-errormessage to ID reference list</a> (<a href="https://github.com/w3c/aria/pull/1802">#1802</a>)</li> <li><a href="https://github.com/w3c/aria/commit/a31260e">fix: Permit UA to ignore user-triggered changes inside live regions (…</a></li> <li><a href="https://github.com/w3c/aria/commit/7314996">Are all constraints inherited?</a> (<a href="https://github.com/w3c/aria/pull/1815">#1815</a>)</li> <li><a href="https://github.com/w3c/aria/commit/bcf44d1">Allude to other widgets that allow group in group role definition (#1…</a></li> <li><a href="https://github.com/w3c/aria/commit/c625cb7">update figure role</a> (<a href="https://github.com/w3c/aria/pull/1705">#1705</a>)</li> <li><a href="https://github.com/w3c/aria/commit/2617046">Add accessibility tree definition</a> (<a href="https://github.com/w3c/aria/pull/1784">#1784</a>)</li> <li><a href="https://github.com/w3c/aria/commit/72063a0">remove overly prescriptive distinctions from aria-current values. (#1…</a></li> <li><a href="https://github.com/w3c/aria/commit/8ef7dde">proposed rewording for the complementary landmark</a> (<a href="https://github.com/w3c/aria/pull/1698">#1698</a>)</li> <li><a href="https://github.com/w3c/aria/commit/d925596">fix(reword): use 'on a page' instead of 'within any document or appli…</a></li> <li><a href="https://github.com/w3c/aria/commit/483334d">add [CEReactions] to IDL.</a> (<a href="https://github.com/w3c/aria/pull/1766">#1766</a>)</li> <li><a href="https://github.com/w3c/aria/commit/82bd83f">Resolving user agent must not statement and whitespace defs</a> (<a href="https://github.com/w3c/aria/pull/1778">#1778</a>)</li> <li><a href="https://github.com/w3c/aria/commit/ece14a1">Revised complementary definition re: <abbr title="Document Object Model">DOM</abbr> hierarchy</a> (<a href="https://github.com/w3c/aria/pull/1779">#1779</a>)</li> <li><a href="https://github.com/w3c/aria/commit/7a56f40">Fix for "name required" for tab at 5.2.8.4 and 5.2.8.5</a> (<a href="https://github.com/w3c/aria/pull/1771">#1771</a>)</li> <li><a href="https://github.com/w3c/aria/commit/6d46a9a">Clarify description for aria-keyshortcuts</a> (<a href="https://github.com/w3c/aria/pull/1713">#1713</a>)</li> <li><a href="https://github.com/w3c/aria/commit/060b878">Resolves #978, add back <abbr title="Accessible Rich Internet Applications">ARIA</abbr> element reflection IDL</a> (<a href="https://github.com/w3c/aria/pull/1755">#1755</a>)</li> <li><a href="https://github.com/w3c/aria/commit/9cb71e9">add note to aria-roledescription</a> (<a href="https://github.com/w3c/aria/pull/1666">#1666</a>)</li> <li><a href="https://github.com/w3c/aria/commit/2ece5c5">include mention of figure/caption</a> (<a href="https://github.com/w3c/aria/pull/1704">#1704</a>)</li> <li><a href="https://github.com/w3c/aria/commit/f215561">Replace irrelevant ariaDescribedBy example with ariaValueText</a> (<a href="https://github.com/w3c/aria/pull/1729">#1729</a>)</li> <li><a href="https://github.com/w3c/aria/commit/2d2d341">revise caption definition</a> (<a href="https://github.com/w3c/aria/pull/1703">#1703</a>)</li> <li><a href="https://github.com/w3c/aria/commit/43b6a45">added a label to the combobox listbox example</a> (<a href="https://github.com/w3c/aria/pull/1728">#1728</a>)</li> <li><a href="https://github.com/w3c/aria/commit/51e0073">Update authoring requirement for aria-selected on options</a> (<a href="https://github.com/w3c/aria/pull/1719">#1719</a>)</li> <li><a href="https://github.com/w3c/aria/commit/47db8e8">Handling Author Errors: form & region roles</a> (<a href="https://github.com/w3c/aria/pull/1683">#1683</a>)</li> <li><a href="https://github.com/w3c/aria/commit/e138d5c">add lang clarification to translatable attributes section.</a> (<a href="https://github.com/w3c/aria/pull/1690">#1690</a>)</li> <li><a href="https://github.com/w3c/aria/commit/157d711">abstract roles remove 'name from'</a> (<a href="https://github.com/w3c/aria/pull/1667">#1667</a>)</li> <li><a href="https://github.com/w3c/aria/commit/3aed0e2">Fix: add aria-level as supported on treeitem</a> (<a href="https://github.com/w3c/aria/pull/1676">#1676</a>)</li> <li><a href="https://github.com/w3c/aria/commit/e1d9d12">progressbar: clarify described-by</a> (<a href="https://github.com/w3c/aria/pull/1671">#1671</a>)</li> <li><a href="https://github.com/w3c/aria/commit/b710565">Update aria sort value descriptions to include "row" fixes #1614</a> (<a href="https://github.com/w3c/aria/pull/1616">#1616</a>)</li> <li><a href="https://github.com/w3c/aria/commit/028bbbb">Change aria-keyshortcuts initial keyword from Indicates to Defines. R…</a></li> <li><a href="https://github.com/w3c/aria/commit/9653692">Add note to checkbox def</a> (<a href="https://github.com/w3c/aria/pull/1657">#1657</a>)</li> <li><a href="https://github.com/w3c/aria/commit/1e0383a">removed references to <range></a> (<a href="https://github.com/w3c/aria/pull/1652">#1652</a>)</li> <li><a href="https://github.com/w3c/aria/commit/bd03476">updates to IDL section per discussion in #1598</a> (<a href="https://github.com/w3c/aria/pull/1633">#1633</a>)</li> <li><a href="https://github.com/w3c/aria/commit/0d06a71">Update IDL and enumerated attribute section</a> (<a href="https://github.com/w3c/aria/pull/1611">#1611</a>)</li> <li><a href="https://github.com/w3c/aria/commit/b41a010">Revisions to accessible name required</a> (<a href="https://github.com/w3c/aria/pull/1477">#1477</a>)</li> <li><a href="https://github.com/w3c/aria/commit/7f72832">Remove aria-level attribute from listitem</a> (<a href="https://github.com/w3c/aria/pull/1484">#1484</a>)</li> <li><a href="https://github.com/w3c/aria/commit/912ff77">rewording of how a _name_ (not necessarily a “label” - so changed tha…</a></li> <li><a href="https://github.com/w3c/aria/commit/627b3a6">Change containing to owning in Required Owned Elements.</a> (<a href="https://github.com/w3c/aria/pull/1438">#1438</a>)</li> <li><a href="https://github.com/w3c/aria/commit/103dec9">Revert new labeling mechanisms</a> (<a href="https://github.com/w3c/aria/pull/1491">#1491</a>)</li> <li><a href="https://github.com/w3c/aria/commit/f4c6669">Add and link attribute terms: Defines, Identifies, and Indicates. (#1…</a></li> <li><a href="https://github.com/w3c/aria/commit/d75a248">Add role=image as synonym for role=img</a> (<a href="https://github.com/w3c/aria/pull/1370">#1370</a>)</li> <li><a href="https://github.com/w3c/aria/commit/3ebb415">add local abstract role usage warnings. fixes #1428</a> (<a href="https://github.com/w3c/aria/pull/1445">#1445</a>)</li> <li><a href="https://github.com/w3c/aria/commit/e482b6f">clarify "current element"</a> (<a href="https://github.com/w3c/aria/pull/1460">#1460</a>)</li> <li><a href="https://github.com/w3c/aria/commit/8c597bf">prohibit name from time role</a> (<a href="https://github.com/w3c/aria/pull/1464">#1464</a>)</li> <li><a href="https://github.com/w3c/aria/commit/e68a7ff">update bullet 3 of name calc</a> (<a href="https://github.com/w3c/aria/pull/1475">#1475</a>)</li> <li><a href="https://github.com/w3c/aria/commit/c908c7f">Updated aria-setsize and aria-posinset to clarify usage for authors (…</a></li> <li><a href="https://github.com/w3c/aria/commit/8fa8068">Assistive tech <em class="rfc2119">SHOULD</em> provide landmark navigation... user agents <em class="rfc2119">MAY</em> …</a></li> <li><a href="https://github.com/w3c/aria/commit/327a22f">Adds sentence about group role</a> (<a href="https://github.com/w3c/aria/pull/1422">#1422</a>)</li> <li><a href="https://github.com/w3c/aria/commit/ce5d37d">Use "containing/contained by" wording instead of arrow abbreviations …</a></li> <li><a href="https://github.com/w3c/aria/commit/c38c9af">resolves #1407 by changing example in aria-brailleroledescription (#1…</a></li> <li><a href="https://github.com/w3c/aria/commit/3dc85aa">resolves #1394, remove misleading note about <abbr title="Assistive Technologies">AT</abbr> modifying attrs direc…</a></li> <li><a href="https://github.com/w3c/aria/commit/4c3484b">Fix remaining instance of confusing role="none presentation" note (#1…</a></li> <li><a href="https://github.com/w3c/aria/commit/4f387e3">Move section on presentation role conflicts to “Handling Author Error…</a></li> <li><a href="https://github.com/w3c/aria/commit/b35ecf9">Implicit values for required properties section needs revising</a> (<a href="https://github.com/w3c/aria/pull/1414">#1414</a>)</li> <li><a href="https://github.com/w3c/aria/commit/0218c25">aria-expanded requirement needs to be the same for tab and tablist (#…</a></li> <li><a href="https://github.com/w3c/aria/commit/fc6b7fb">Listbox and tree: clarify requirements for selected and checked</a> (<a href="https://github.com/w3c/aria/pull/1340">#1340</a>)</li> <li><a href="https://github.com/w3c/aria/commit/c803925">Tighten up Required Context Role: group</a> (<a href="https://github.com/w3c/aria/pull/1359">#1359</a>)</li> <li><a href="https://github.com/w3c/aria/commit/e496a4d">term/definition should use aria-details instead of aria-labelledby (#…</a></li> <li><a href="https://github.com/w3c/aria/commit/48ad8d4">Add a conditional on when aria-controls is needed</a> (<a href="https://github.com/w3c/aria/pull/1335">#1335</a>)</li> <li><a href="https://github.com/w3c/aria/commit/257b0e1">make menuitemradio subclass menuitem, require aria-checked</a> (<a href="https://github.com/w3c/aria/pull/1354">#1354</a>)</li> <li><a href="https://github.com/w3c/aria/commit/78ab6b6">Stricter language for authors using aria-owns</a> (<a href="https://github.com/w3c/aria/pull/1351">#1351</a>)</li> <li><a href="https://github.com/w3c/aria/commit/42417ce">improve wording for braille patterns</a> (<a href="https://github.com/w3c/aria/pull/1287">#1287</a>)</li> <li><a href="https://github.com/w3c/aria/commit/fc91e55">aria-braille properties: improve authoring note</a> (<a href="https://github.com/w3c/aria/pull/1291">#1291</a>)</li> <li><a href="https://github.com/w3c/aria/commit/586af31">remove name required from marquee</a> (<a href="https://github.com/w3c/aria/pull/1342">#1342</a>)</li> <li><a href="https://github.com/w3c/aria/commit/02fee23">Generalize AccessibilityRole/AriaAttributes IDL</a> (<a href="https://github.com/w3c/aria/pull/984">#984</a>) </li> <li><a href="https://github.com/w3c/aria/commit/d781656">Add editor note for label role</a></li> <li><a href="https://github.com/w3c/aria/commit/26cb23d">Issue 1151: updated document to use the terms owned and container for…</a></li> <li><a href="https://github.com/w3c/aria/commit/48282a0">Fix list structure for required owners in <code>suggestion</code></a> (<a href="https://github.com/w3c/aria/pull/1293">#1293</a>)</li> <li><a href="https://github.com/w3c/aria/commit/37ca124">Clarify wording in "Including Elements in the Accessibility Tree" sec…</a></li> <li><a href="https://github.com/w3c/aria/commit/9c73b5b">Make fallback value for separator aria-valuenow consistent with scrol…</a></li> <li><a href="https://github.com/w3c/aria/commit/99763b0">feat: aria-braillelabel</a> (<a href="https://github.com/w3c/aria/pull/923">#923</a>)</li> <li><a href="https://github.com/w3c/aria/commit/db5a8c5">brailleroledescription update</a> (<a href="https://github.com/w3c/aria/pull/1097">#1097</a>)</li> <li><a href="https://github.com/w3c/aria/commit/76474e5">Remove superfluous authoring requirement to specify aria-multiline (#…</a></li> <li><a href="https://github.com/w3c/aria/commit/2a047fd">Add suggestion role</a> (<a href="https://github.com/w3c/aria/pull/1134">#1134</a>)</li> <li><a href="https://github.com/w3c/aria/commit/dfe62bf">clarify that modal requires an accessible name</a> (<a href="https://github.com/w3c/aria/pull/1180">#1180</a>)</li> <li><a href="https://github.com/w3c/aria/commit/8420961">Correct mistake in aria-description pointed out in issue 1186.</a> (<a href="https://github.com/w3c/aria/pull/1193">#1193</a>)</li> <li><a href="https://github.com/w3c/aria/commit/e8b2274">Update aria-details</a> (<a href="https://github.com/w3c/aria/pull/1136">#1136</a>)</li> <li><a href="https://github.com/w3c/aria/commit/eed0ef0">Add comment role</a> (<a href="https://github.com/w3c/aria/pull/1135">#1135</a>)</li> <li><a href="https://github.com/w3c/aria/commit/f262087">Add aria-description</a> (<a href="https://github.com/w3c/aria/pull/1137">#1137</a>)</li> <li><a href="https://github.com/w3c/aria/commit/b3017b3">Add mark role</a> (<a href="https://github.com/w3c/aria/pull/1133">#1133</a>)</li> </ul> </section> </section> <section class="appendix informative section" id="acknowledgements"><div class="header-wrapper"><h2 id="c-acknowledgments"><bdi class="secno">C. </bdi>Acknowledgments</h2><a class="self-link" href="#acknowledgements" aria-label="Permalink for Appendix C."></a></div><p><em>This section is non-normative.</em></p> <p>The following people contributed to the development of this document.</p> <ul id="gh-contributors"><li><a href="https://github.com/aleventhal">Aaron Leventhal</a></li><li><a href="https://github.com/adampage">Adam Page</a></li><li><a href="https://github.com/aardrian">Adrian Roselli</a></li><li><a href="https://github.com/AlexLloyd0">Alex Lloyd</a></li><li><a href="https://github.com/asurkov">Alexander Surkov</a></li><li><a href="https://github.com/AmeliaBR">Amelia Bellamy-Royds</a></li><li><a href="https://github.com/andreancardona">Andrea N. Cardona</a></li><li><a href="https://github.com/annevk">Anne van Kesteren</a></li><li><a href="https://github.com/agcolom">Anne-Gaelle Colom</a></li><li><a href="https://github.com/ariellalgilmore">Ariella Gilmore</a></li><li><a href="https://github.com/benbeaudry">Benjamin Beaudry</a></li><li><a href="https://github.com/boazsender">Boaz</a></li><li><a href="https://github.com/boggydigital">Bogdan Brinza</a></li><li><a href="https://github.com/bpmcneilly">bpmcneilly</a></li><li><a href="https://github.com/brennanyoung">Brennan Young</a></li><li><a href="https://github.com/accdc">Bryan Garaventa</a></li><li><a href="https://github.com/carmacleod">Carolyn MacLeod</a></li><li><a href="https://github.com/chlane">chlane</a></li><li><a href="https://github.com/svgeesus">Chris Lilley</a></li><li><a href="https://github.com/smockle">Clay Miller</a></li><li><a href="https://github.com/jlp-craigmorten">Craig Morten</a></li><li><a href="https://github.com/cyns">Cynthia Shelly</a></li><li><a href="https://github.com/dakahn">D.A. Kahn</a></li><li><a href="https://github.com/dbjorge">Dan Bjorge</a></li><li><a href="https://github.com/dandclark">Dan Clark</a></li><li><a href="https://github.com/deniak">Denis Ah-Kang</a></li><li><a href="https://github.com/domenic">Domenic Denicola</a></li><li><a href="https://github.com/dontcallmedom">Dominique Hazael-Massieux</a></li><li><a href="https://github.com/einSelbst">einSelbst</a></li><li><a href="https://github.com/Epigenetic">Epigenetic</a></li><li><a href="https://github.com/estelle">Estelle Weyl</a></li><li><a href="https://github.com/fstrr">Francis Storr</a></li><li><a href="https://github.com/fred-wang">Frédéric Wang</a></li><li><a href="https://github.com/design1online">Games for Girls</a></li><li><a href="https://github.com/giacomo-petri">Giacomo Petri</a></li><li><a href="https://github.com/schne324">Harris Schneiderman</a></li><li><a href="https://github.com/innovimax">Innovimax</a></li><li><a href="https://github.com/isaacdurazo">Isaac Durazo </a></li><li><a href="https://github.com/iherman">Ivan Herman</a></li><li><a href="https://github.com/jaragunde">Jacobo Aragunde Pérez</a></li><li><a href="https://github.com/a11ydoer">JaEun Jemma Ku</a></li><li><a href="https://github.com/cookiecrook">James Craig</a></li><li><a href="https://github.com/jasonkiss">Jason Kiss</a></li><li><a href="https://github.com/JAWS-test">JAWS-test</a></li><li><a href="https://github.com/JAWS-test2">JAWS-test2</a></li><li><a href="https://github.com/joanmarie">joanmarie</a></li><li><a href="https://github.com/Johanna-hub">Johanna</a></li><li><a href="https://github.com/jongund">Jon Gunderson</a></li><li><a href="https://github.com/jorycunningham">Jory Cunningham</a></li><li><a href="https://github.com/klown">Joseph Scheuhammer</a></li><li><a href="https://github.com/SalazarJosh">Josh Salazar</a></li><li><a href="https://github.com/saschanaz">Kagami Sascha Rosylight</a></li><li><a href="https://github.com/kasperisager">Kasper Isager Dalsgarð</a></li><li><a href="https://github.com/LaurenceRLewis">Laurence Lewis</a></li><li><a href="https://github.com/LJWatson">Léonie Watson</a></li><li><a href="https://github.com/mrego">Manuel Rego</a></li><li><a href="https://github.com/marcoscaceres">Marcos Cáceres</a></li><li><a href="https://github.com/mlewand">Marek Lewandowski</a></li><li><a href="https://github.com/MarioBatusic">MarioB</a></li><li><a href="https://github.com/mattgarrish">Matt Garrish</a></li><li><a href="https://github.com/mcking65">Matt King</a></li><li><a href="https://github.com/melanierichards">Melanie Richards</a></li><li><a href="https://github.com/MelSumner">Melanie Sumner</a></li><li><a href="https://github.com/nschonni">Nick Schonning</a></li><li><a href="https://github.com/nicolas17">Nicolás Alvarez</a></li><li><a href="https://github.com/nolanlawson">Nolan Lawson</a></li><li><a href="https://github.com/OisinNolan">Oisín Nolan</a></li><li><a href="https://github.com/patrickhlauke">Patrick H. Lauke</a></li><li><a href="https://github.com/plehegar">Philippe Le Hegaret</a></li><li><a href="https://github.com/prayagverma">Prayag Verma </a></li><li><a href="https://github.com/ricksbrown">R Brown</a></li><li><a href="https://github.com/rahimabdi">Rahim Abdi</a></li><li><a href="https://github.com/richschwer">Richard Schwerdtfeger</a></li><li><a href="https://github.com/Rondinelly">Rondinelly</a></li><li><a href="https://github.com/smhigley">Sarah Higley</a></li><li><a href="https://github.com/sivakusayan">Sayan Sivakumaran</a></li><li><a href="https://github.com/scottaohara">Scott O'Hara</a></li><li><a href="https://github.com/eps1lon">Sebastian "Sebbie" Silbermann</a></li><li><a href="https://github.com/billybonks">Sebastien Stettler</a></li><li><a href="https://github.com/halindrome">Shane McCarron</a></li><li><a href="https://github.com/pocka">Shota FUJI</a></li><li><a href="https://github.com/sidvishnoi">Sid Vishnoi</a></li><li><a href="https://github.com/sideshowbarker">sideshowbarker</a></li><li><a href="https://github.com/zcorpan">Simon Pieters</a></li><li><a href="https://github.com/sirajrkhan">Siraj Khan</a></li><li><a href="https://github.com/notabene">Stephane Deschamps</a></li><li><a href="https://github.com/stevefaulkner">Steve Faulkner</a></li><li><a href="https://github.com/thibaudcolas">Thibaud Colas</a></li><li><a href="https://github.com/twilco">Tyler Wilcock</a></li><li><a href="https://github.com/TzviyaSiegman">Tzviya</a></li><li><a href="https://github.com/spectranaut">Valerie Young</a></li><li><a href="https://github.com/vikas-parashar">Vikas Parashar</a></li><li><a href="https://github.com/aristov">Vyacheslav Aristov</a></li><li><a href="https://github.com/WilcoFiers">Wilco Fiers</a></li><li><a href="https://github.com/WilliamTennisNFCU">WilliamTennisNFCU</a></li><li><a href="https://github.com/siusin">Xiaoqian Wu</a></li><li><a href="https://github.com/YummyBacon5">Yummy_Bacon5</a></li><li><a href="https://github.com/ylafon">Yves Lafon</a></li></ul> <section class="section" id="ack_group"><div class="header-wrapper"><h3 id="c-1-aria-wg-participants-at-the-time-of-publication"><bdi class="secno">C.1 </bdi><abbr title="Accessible Rich Internet Applications">ARIA</abbr> WG participants at the time of publication</h3><a class="self-link" href="#ack_group" aria-label="Permalink for Appendix C.1"></a></div> <ul> <li>Rahim Abdi (Apple Inc.)</li><li>NAVYA AGARWAL (Adobe)</li><li>Mario Batušić (Fabasoft)</li><li>Benjamin Beaudry (Microsoft Corporation)</li><li>Curt Bellew (Oracle Corporation)</li><li>Zoë Bijl (<abbr title="World Wide Web Consortium">W3C</abbr> Invited Experts)</li><li>Aleksandar Cindrikj (Netcetera)</li><li>Keith Cirkel (Microsoft Corporation)</li><li>Daniel Clark (Microsoft Corporation)</li><li>James Craig (Apple Inc.)</li><li>Chris Cuellar (Bocoup)</li><li>Hidde de Vries (Logius)</li><li>Joanmarie Diggs (Igalia)</li><li>Howard Edwards (Bocoup)</li><li>James Edwards (TPGi)</li><li>Mayuri Faldu (Navy Federal Credit Union)</li><li>Betsy Fanning (PDF Association)</li><li>Steve Faulkner (TetraLogical Services Ltd)</li><li>Bryan Garaventa (<abbr title="World Wide Web Consortium">W3C</abbr> Invited Experts)</li><li>Rashmi Garimella (Google LLC)</li><li>Matt Garrish (DAISY Consortium)</li><li>Doug Geoffray (Microsoft Corporation)</li><li>Jaunita George (Navy Federal Credit Union)</li><li>Ariella Gilmore (IBM Corporation)</li><li>Glen Gordon (TPGi)</li><li>Shirisha Gubba (Google LLC)</li><li>Jon Gunderson (University of Illinois)</li><li>Oliver Habersetzer (SAP SE)</li><li>Theo Hale (Microsoft Corporation)</li><li>Sunny Hardasani (Adobe)</li><li>Matthew Hardy (Adobe)</li><li>Peter Heumader (Fabasoft)</li><li>Sarah Higley (Microsoft Corporation)</li><li>Hans Hillen (TPGi)</li><li>Isabel Holdsworth (TPGi)</li><li>Stanley Hon (Microsoft Corporation)</li><li>Jeroen Hulscher (Logius)</li><li>Michael Jackson (Microsoft Corporation)</li><li>Duff Johnson (PDF Association)</li><li>Summer Jones (Thomson Reuters Corp.)</li><li>Sanket Joshi (Microsoft Corporation)</li><li>William Kilian (TargetStream Technologies)</li><li>Matthew King (Meta)</li><li>Zachary Kinsey (TargetStream Technologies)</li><li>Greta Krafsig (The Washington Post)</li><li>Peter Krautzberger (krautzource UG)</li><li>Nina Krauß (SAP SE)</li><li>JaEun Jemma Ku (University of Illinois)</li><li>Joe Lamyman (TetraLogical Services Ltd)</li><li>Charles LaPierre (Benetech)</li><li>Philip Lazarevic (Level Access)</li><li>Aaron Leventhal (Google LLC)</li><li>Brett Lewis (TPGi)</li><li>Andy Luhrs (Microsoft Corporation)</li><li>Sazzad Mahamud (Google LLC)</li><li>Alison Maher (Microsoft Corporation)</li><li>Mark McCarthy (University of Illinois)</li><li>Clay Miller (Microsoft Corporation)</li><li>Daniel Montalvo (<abbr title="World Wide Web Consortium">W3C</abbr>)</li><li>James Nurthen (Adobe)</li><li>Scott O'Hara (Microsoft Corporation)</li><li>Lola Odelola (<abbr title="World Wide Web Consortium">W3C</abbr> Invited Experts)</li><li>Adam Page (Hilton)</li><li>Michael Pennisi (Bocoup)</li><li>Roberto Perez (Microsoft Corporation)</li><li>Giacomo Petri (UsableNet)</li><li>Daniel Pöll (Fabasoft)</li><li>Paul Rayius (Allyant)</li><li>Adrian Roselli (<abbr title="World Wide Web Consortium">W3C</abbr> Invited Experts)</li><li>Marco Sabidussi (UsableNet)</li><li>Trisha Salas (Level Access)</li><li>Stefan Schnabel (SAP SE)</li><li>Harris Schneiderman (Deque Systems, Inc.)</li><li>Raymond Schwartz (Navy Federal Credit Union)</li><li>Cynthia Shelly (Google LLC)</li><li>Tzviya Siegman (<abbr title="World Wide Web Consortium">W3C</abbr>)</li><li>Arturo Silva (The Washington Post)</li><li>Avneesh Singh (DAISY Consortium)</li><li>Michael[tm] Smith (sideshowbarker) (<abbr title="World Wide Web Consortium">W3C</abbr>)</li><li>Francis Storr (Intel Corporation)</li><li>Melanie Sumner (<abbr title="World Wide Web Consortium">W3C</abbr> Invited Experts)</li><li>Alexander Surkov (Igalia)</li><li>James Teh (Mozilla Foundation)</li><li>Jocelyn Tran (Google LLC)</li><li>Léonie Watson (TetraLogical Services Ltd)</li><li>Jan Williams (TPGi)</li><li>Valerie Young (Igalia)</li><li>Kate Zhao (Thomson Reuters Corp.)</li><li>Xiao (Helen) Zhou (University of Illinois)</li><li>Filippo Zorzi (UsableNet)</li></ul> </section> <section class="section" id="ack_funders"><div class="header-wrapper"><h3 id="c-2-enabling-funders"><bdi class="secno">C.2 </bdi>Enabling funders</h3><a class="self-link" href="#ack_funders" aria-label="Permalink for Appendix C.2"></a></div> <p>This publication has been funded in part with U.S. Federal funds from the Department of Education, National Institute on Disability, Independent Living, and Rehabilitation Research (NIDILRR), initially under contract number ED-OSE-10-C-0067, then under contract number HHSP23301500054C, and now under HHS75P00120P00168. The content of this publication does not necessarily reflect the views or policies of 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="d-references"><bdi class="secno">D. </bdi>References</h2><a class="self-link" href="#references" aria-label="Permalink for Appendix D."></a></div><section id="normative-references"><div class="header-wrapper"><h3 id="d-1-normative-references"><bdi class="secno">D.1 </bdi>Normative references</h3><a class="self-link" href="#normative-references" aria-label="Permalink for Appendix D.1"></a></div> <dl class="bibliography"><dt id="bib-accname-1.2">[ACCNAME-1.2]</dt><dd> <a href="https://www.w3.org/TR/accname-1.2/"><cite>Accessible Name and Description Computation 1.2</cite></a>. Bryan Garaventa; Melanie Sumner. W3C. 6 February 2025. W3C Working Draft. URL: <a href="https://www.w3.org/TR/accname-1.2/">https://www.w3.org/TR/accname-1.2/</a> </dd><dt id="bib-core-aam">[CORE-AAM]</dt><dd> <a href="https://www.w3.org/TR/core-aam-1.1/"><cite>Core Accessibility API Mappings 1.1</cite></a>. Joanmarie Diggs; Joseph Scheuhammer; Richard Schwerdtfeger; Michael Cooper; Andi Snow-Weaver; Aaron Leventhal. W3C. 14 December 2017. W3C Recommendation. URL: <a href="https://www.w3.org/TR/core-aam-1.1/">https://www.w3.org/TR/core-aam-1.1/</a> </dd><dt id="bib-core-aam-1.2">[CORE-AAM-1.2]</dt><dd> <a href="https://www.w3.org/TR/core-aam-1.2/"><cite>Core Accessibility API Mappings 1.2</cite></a>. Valerie Young; Alexander Surkov. W3C. 19 December 2024. CRD. URL: <a href="https://www.w3.org/TR/core-aam-1.2/">https://www.w3.org/TR/core-aam-1.2/</a> </dd><dt id="bib-css3-selectors">[CSS3-SELECTORS]</dt><dd> <a href="https://www.w3.org/TR/selectors-3/"><cite>Selectors Level 3</cite></a>. Tantek Çelik; Elika Etemad; Daniel Glazman; Ian Hickson; Peter Linss; John Williams. W3C. 6 November 2018. W3C Recommendation. URL: <a href="https://www.w3.org/TR/selectors-3/">https://www.w3.org/TR/selectors-3/</a> </dd><dt id="bib-dom">[DOM]</dt><dd> <a href="https://dom.spec.whatwg.org/"><cite>DOM Standard</cite></a>. Anne van Kesteren. WHATWG. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a> </dd><dt id="bib-dpub-aria-1.0">[DPUB-ARIA-1.0]</dt><dd> <a href="https://www.w3.org/TR/dpub-aria-1.0/"><cite>Digital Publishing WAI-ARIA Module 1.0</cite></a>. Matt Garrish; Tzviya Siegman; Markus Gylling; Shane McCarron. W3C. 14 December 2017. W3C Recommendation. URL: <a href="https://www.w3.org/TR/dpub-aria-1.0/">https://www.w3.org/TR/dpub-aria-1.0/</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; Dominic Farolino; 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-infra">[infra]</dt><dd> <a href="https://infra.spec.whatwg.org/"><cite>Infra Standard</cite></a>. Anne van Kesteren; Domenic Denicola. WHATWG. Living Standard. URL: <a href="https://infra.spec.whatwg.org/">https://infra.spec.whatwg.org/</a> </dd><dt id="bib-mathml3">[MathML3]</dt><dd> <a href="https://www.w3.org/TR/MathML3/"><cite>Mathematical Markup Language (MathML) Version 3.0 2nd Edition</cite></a>. David Carlisle; Patrick D F Ion; Robert R Miner. W3C. 10 April 2014. W3C Recommendation. URL: <a href="https://www.w3.org/TR/MathML3/">https://www.w3.org/TR/MathML3/</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-role-attribute">[ROLE-ATTRIBUTE]</dt><dd> <a href="https://www.w3.org/TR/role-attribute/"><cite>Role Attribute 1.0</cite></a>. Shane McCarron et al. W3C. 28 March 2013. W3C Recommendation. URL: <a href="https://www.w3.org/TR/role-attribute/">https://www.w3.org/TR/role-attribute/</a> </dd><dt id="bib-svg2">[SVG2]</dt><dd> <a href="https://www.w3.org/TR/SVG2/"><cite>Scalable Vector Graphics (SVG) 2</cite></a>. Amelia Bellamy-Royds; Bogdan Brinza; Chris Lilley; Dirk Schulze; David Storey; Eric Willigers. W3C. 4 October 2018. W3C Candidate Recommendation. URL: <a href="https://www.w3.org/TR/SVG2/">https://www.w3.org/TR/SVG2/</a> </dd><dt id="bib-uievents-key">[uievents-key]</dt><dd> <a href="https://www.w3.org/TR/uievents-key/"><cite>UI Events KeyboardEvent key Values</cite></a>. Travis Leithead; Gary Kacmarcik. W3C. 26 November 2024. W3C Proposed Recommendation. URL: <a href="https://www.w3.org/TR/uievents-key/">https://www.w3.org/TR/uievents-key/</a> </dd><dt id="bib-webidl">[WEBIDL]</dt><dd> <a href="https://webidl.spec.whatwg.org/"><cite>Web IDL Standard</cite></a>. Edgar Chen; Timothy Gu. WHATWG. Living Standard. URL: <a href="https://webidl.spec.whatwg.org/">https://webidl.spec.whatwg.org/</a> </dd><dt id="bib-xml-names">[XML-NAMES]</dt><dd> <a href="https://www.w3.org/TR/xml-names/"><cite>Namespaces in XML 1.0 (Third Edition)</cite></a>. Tim Bray; Dave Hollander; Andrew Layman; Richard Tobin; Henry Thompson et al. W3C. 8 December 2009. W3C Recommendation. URL: <a href="https://www.w3.org/TR/xml-names/">https://www.w3.org/TR/xml-names/</a> </dd></dl> </section><section id="informative-references"><div class="header-wrapper"><h3 id="d-2-informative-references"><bdi class="secno">D.2 </bdi>Informative references</h3><a class="self-link" href="#informative-references" aria-label="Permalink for Appendix D.2"></a></div> <dl class="bibliography"><dt id="bib-at-spi">[AT-SPI]</dt><dd> <a href="https://gnome.pages.gitlab.gnome.org/at-spi2-core/libatspi/"><cite>Assistive Technology Service Provider Interface</cite></a>. The GNOME Project. URL: <a href="https://gnome.pages.gitlab.gnome.org/at-spi2-core/libatspi/">https://gnome.pages.gitlab.gnome.org/at-spi2-core/libatspi/</a> </dd><dt id="bib-atk">[ATK]</dt><dd> <a href="https://developer.gnome.org/atk/stable/"><cite>ATK - Accessibility Toolkit</cite></a>. The GNOME Project. URL: <a href="https://developer.gnome.org/atk/stable/">https://developer.gnome.org/atk/stable/</a> </dd><dt id="bib-axapi">[AXAPI]</dt><dd> <a href="https://developer.apple.com/documentation/appkit/nsaccessibility"><cite>The NSAccessibility Protocol for macOS</cite></a>. Apple, Inc. URL: <a href="https://developer.apple.com/documentation/appkit/nsaccessibility">https://developer.apple.com/documentation/appkit/nsaccessibility</a> </dd><dt id="bib-design-principles">[design-principles]</dt><dd> <a href="https://www.w3.org/TR/design-principles/"><cite>Web Platform Design Principles</cite></a>. Lea Verou; Martin Thomson; Jeffrey Yasskin. W3C. 6 January 2025. W3C Working Group Note. URL: <a href="https://www.w3.org/TR/design-principles/">https://www.w3.org/TR/design-principles/</a> </dd><dt id="bib-fingerprinting-guidance">[fingerprinting-guidance]</dt><dd> <a href="https://www.w3.org/TR/fingerprinting-guidance/"><cite>Mitigating Browser Fingerprinting in Web Specifications</cite></a>. Nick Doty. W3C. 28 March 2019. W3C Working Group Note. URL: <a href="https://www.w3.org/TR/fingerprinting-guidance/">https://www.w3.org/TR/fingerprinting-guidance/</a> </dd><dt id="bib-html-aria">[HTML-ARIA]</dt><dd> <a href="https://www.w3.org/TR/html-aria/"><cite>ARIA in HTML</cite></a>. Scott O'Hara; Patrick Lauke. W3C. 7 February 2025. W3C Recommendation. URL: <a href="https://www.w3.org/TR/html-aria/">https://www.w3.org/TR/html-aria/</a> </dd><dt id="bib-iaccessible2">[IAccessible2]</dt><dd> <a href="https://wiki.linuxfoundation.org/accessibility/iaccessible2/"><cite>IAccessible2</cite></a>. Linux Foundation. URL: <a href="https://wiki.linuxfoundation.org/accessibility/iaccessible2/">https://wiki.linuxfoundation.org/accessibility/iaccessible2/</a> </dd><dt id="bib-msaa">[MSAA]</dt><dd> <a href="https://docs.microsoft.com/en-us/windows/win32/winauto/microsoft-active-accessibility"><cite>Microsoft Active Accessibility (MSAA)</cite></a>. Microsoft Corporation. URL: <a href="https://docs.microsoft.com/en-us/windows/win32/winauto/microsoft-active-accessibility">https://docs.microsoft.com/en-us/windows/win32/winauto/microsoft-active-accessibility</a> </dd><dt id="bib-ui-automation">[UI-AUTOMATION]</dt><dd> <a href="https://docs.microsoft.com/en-us/windows/win32/winauto/ui-automation-specification"><cite>UI Automation</cite></a>. Microsoft Corporation. URL: <a href="https://docs.microsoft.com/en-us/windows/win32/winauto/ui-automation-specification">https://docs.microsoft.com/en-us/windows/win32/winauto/ui-automation-specification</a> </dd><dt id="bib-uia-express">[UIA-EXPRESS]</dt><dd> <a href="https://docs.microsoft.com/en-us/windows/win32/winauto/iaccessibleex"><cite>The IAccessibleEx Interface</cite></a>. Microsoft Corporation. URL: <a href="https://docs.microsoft.com/en-us/windows/win32/winauto/iaccessibleex">https://docs.microsoft.com/en-us/windows/win32/winauto/iaccessibleex</a> </dd><dt id="bib-wai-aria-1.1">[wai-aria-1.1]</dt><dd> <a href="https://www.w3.org/TR/wai-aria-1.1/"><cite>Accessible Rich Internet Applications (WAI-ARIA) 1.1</cite></a>. Joanmarie Diggs; Shane McCarron; Michael Cooper; Richard Schwerdtfeger; James Craig. W3C. 14 December 2017. W3C Recommendation. URL: <a href="https://www.w3.org/TR/wai-aria-1.1/">https://www.w3.org/TR/wai-aria-1.1/</a> </dd><dt id="bib-wai-aria-practices-1.2">[WAI-ARIA-PRACTICES-1.2]</dt><dd> <a href="https://www.w3.org/TR/wai-aria-practices-1.2/"><cite>WAI-ARIA Authoring Practices 1.2</cite></a>. Matthew King; JaEun Jemma Ku; James Nurthen; Zoë Bijl; Michael Cooper. W3C. 19 May 2022. W3C Working Group Note. URL: <a href="https://www.w3.org/TR/wai-aria-practices-1.2/">https://www.w3.org/TR/wai-aria-practices-1.2/</a> </dd><dt id="bib-wcag21">[WCAG21]</dt><dd> <a href="https://www.w3.org/TR/WCAG21/"><cite>Web Content Accessibility Guidelines (WCAG) 2.1</cite></a>. Michael Cooper; Andrew Kirkpatrick; Joshue O'Connor; Alastair Campbell. W3C. 12 December 2024. W3C Recommendation. URL: <a href="https://www.w3.org/TR/WCAG21/">https://www.w3.org/TR/WCAG21/</a> </dd><dt id="bib-xmlschema11-2">[XMLSCHEMA11-2]</dt><dd> <a href="https://www.w3.org/TR/xmlschema11-2/"><cite>W3C XML Schema Definition Language (XSD) 1.1 Part 2: Datatypes</cite></a>. David Peterson; Sandy Gao; Ashok Malhotra; Michael Sperberg-McQueen; Henry Thompson; Paul V. Biron et al. W3C. 5 April 2012. W3C Recommendation. URL: <a href="https://www.w3.org/TR/xmlschema11-2/">https://www.w3.org/TR/xmlschema11-2/</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-accessibility-api" aria-label="Links in this document to definition: Accessibility API"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-accessibility-api" aria-label="Permalink for definition: Accessibility API. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-accessibility-api-1" title="§ 1. Introduction">§ 1. Introduction</a> <a href="#ref-for-dfn-accessibility-api-2" title="Reference 2">(2)</a> <a href="#ref-for-dfn-accessibility-api-3" title="Reference 3">(3)</a> </li><li> <a href="#ref-for-dfn-accessibility-api-4" title="§ 1.1 Rich Internet Application Accessibility">§ 1.1 Rich Internet Application Accessibility</a> </li><li> <a href="#ref-for-dfn-accessibility-api-5" title="§ 1.3 User Agent Support">§ 1.3 User Agent Support</a> </li><li> <a href="#ref-for-dfn-accessibility-api-6" title="§ 2. Important Terms">§ 2. Important Terms</a> <a href="#ref-for-dfn-accessibility-api-7" title="Reference 2">(2)</a> <a href="#ref-for-dfn-accessibility-api-8" title="Reference 3">(3)</a> <a href="#ref-for-dfn-accessibility-api-9" title="Reference 4">(4)</a> <a href="#ref-for-dfn-accessibility-api-10" title="Reference 5">(5)</a> </li><li> <a href="#ref-for-dfn-accessibility-api-11" title="§ 3.1 Non-interference with the Host Language">§ 3.1 Non-interference with the Host Language</a> </li><li> <a href="#ref-for-dfn-accessibility-api-12" title="§ 4.2 WAI-ARIA States and Properties">§ 4.2 WAI-ARIA States and Properties</a> </li><li> <a href="#ref-for-dfn-accessibility-api-13" title="§ 4.3.2 Information for User Agents">§ 4.3.2 Information for User Agents</a> </li><li> <a href="#ref-for-dfn-accessibility-api-14" title="§ 5.2.9 Presentational Children">§ 5.2.9 Presentational Children</a> </li><li> <a href="#ref-for-dfn-accessibility-api-15" title="§ 5.4 Definition of Roles">§ 5.4 Definition of Roles</a> <a href="#ref-for-dfn-accessibility-api-16" title="Reference 2">(2)</a> <a href="#ref-for-dfn-accessibility-api-17" title="Reference 3">(3)</a> <a href="#ref-for-dfn-accessibility-api-18" title="Reference 4">(4)</a> <a href="#ref-for-dfn-accessibility-api-19" title="Reference 5">(5)</a> <a href="#ref-for-dfn-accessibility-api-20" title="Reference 6">(6)</a> <a href="#ref-for-dfn-accessibility-api-21" title="Reference 7">(7)</a> </li><li> <a href="#ref-for-dfn-accessibility-api-22" title="§ 6.6.1 Widget Attributes">§ 6.6.1 Widget Attributes</a> </li><li> <a href="#ref-for-dfn-accessibility-api-23" title="§ 6.8 Definitions of States and Properties (all aria-* attributes)">§ 6.8 Definitions of States and Properties (all aria-* attributes)</a> <a href="#ref-for-dfn-accessibility-api-24" title="Reference 2">(2)</a> <a href="#ref-for-dfn-accessibility-api-25" title="Reference 3">(3)</a> <a href="#ref-for-dfn-accessibility-api-26" title="Reference 4">(4)</a> <a href="#ref-for-dfn-accessibility-api-27" title="Reference 5">(5)</a> <a href="#ref-for-dfn-accessibility-api-28" title="Reference 6">(6)</a> </li><li> <a href="#ref-for-dfn-accessibility-api-29" title="§ 7.1 Excluding Elements from the Accessibility Tree">§ 7.1 Excluding Elements from the Accessibility Tree</a> </li><li> <a href="#ref-for-dfn-accessibility-api-30" title="§ 7.2 Including Elements in the Accessibility Tree">§ 7.2 Including Elements in the Accessibility Tree</a> </li><li> <a href="#ref-for-dfn-accessibility-api-31" title="§ 9.2 States and Properties">§ 9.2 States and Properties</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-accessible-object" aria-label="Links in this document to definition: Accessible object"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-accessible-object" aria-label="Permalink for definition: Accessible object. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-accessible-object-1" title="§ 7. Accessibility Tree">§ 7. Accessibility Tree</a> </li><li> <a href="#ref-for-dfn-accessible-object-2" title="§ 7.2 Including Elements in the Accessibility Tree">§ 7.2 Including Elements in the Accessibility Tree</a> </li><li> <a href="#ref-for-dfn-accessible-object-3" title="§ 7.3 Relationships in the Accessibility Tree">§ 7.3 Relationships in the Accessibility Tree</a> <a href="#ref-for-dfn-accessible-object-4" title="Reference 2">(2)</a> <a href="#ref-for-dfn-accessible-object-5" title="Reference 3">(3)</a> <a href="#ref-for-dfn-accessible-object-6" title="Reference 4">(4)</a> <a href="#ref-for-dfn-accessible-object-7" title="Reference 5">(5)</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 Technologies"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-assistive-technologies" aria-label="Permalink for definition: Assistive Technologies. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-assistive-technologies-1" title="§ 1. Introduction">§ 1. Introduction</a> </li><li> <a href="#ref-for-dfn-assistive-technologies-2" title="§ 1.1 Rich Internet Application Accessibility">§ 1.1 Rich Internet Application Accessibility</a> <a href="#ref-for-dfn-assistive-technologies-3" title="Reference 2">(2)</a> </li><li> <a href="#ref-for-dfn-assistive-technologies-4" title="§ 1.2 Target Audience">§ 1.2 Target Audience</a> <a href="#ref-for-dfn-assistive-technologies-5" title="Reference 2">(2)</a> <a href="#ref-for-dfn-assistive-technologies-6" title="Reference 3">(3)</a> </li><li> <a href="#ref-for-dfn-assistive-technologies-7" title="§ 1.3 User Agent Support">§ 1.3 User Agent Support</a> </li><li> <a href="#ref-for-dfn-assistive-technologies-8" title="§ 2. Important Terms">§ 2. Important Terms</a> <a href="#ref-for-dfn-assistive-technologies-9" title="Reference 2">(2)</a> <a href="#ref-for-dfn-assistive-technologies-10" title="Reference 3">(3)</a> </li><li> <a href="#ref-for-dfn-assistive-technologies-11" title="§ 3.3 Assistive Technology Notifications Communicated to Web Applications">§ 3.3 Assistive Technology Notifications Communicated to Web Applications</a> </li><li> <a href="#ref-for-dfn-assistive-technologies-12" title="§ 4. Using WAI-ARIA">§ 4. Using WAI-ARIA</a> </li><li> <a href="#ref-for-dfn-assistive-technologies-13" title="§ 4.1 WAI-ARIA Roles">§ 4.1 WAI-ARIA Roles</a> </li><li> <a href="#ref-for-dfn-assistive-technologies-14" title="§ 4.2 WAI-ARIA States and Properties">§ 4.2 WAI-ARIA States and Properties</a> </li><li> <a href="#ref-for-dfn-assistive-technologies-15" title="§ 4.3.1 Information for Authors">§ 4.3.1 Information for Authors</a> </li><li> <a href="#ref-for-dfn-assistive-technologies-16" title="§ 5.4 Definition of Roles">§ 5.4 Definition of Roles</a> <a href="#ref-for-dfn-assistive-technologies-17" title="Reference 2">(2)</a> <a href="#ref-for-dfn-assistive-technologies-18" title="Reference 3">(3)</a> <a href="#ref-for-dfn-assistive-technologies-19" title="Reference 4">(4)</a> <a href="#ref-for-dfn-assistive-technologies-20" title="Reference 5">(5)</a> <a href="#ref-for-dfn-assistive-technologies-21" title="Reference 6">(6)</a> <a href="#ref-for-dfn-assistive-technologies-22" title="Reference 7">(7)</a> <a href="#ref-for-dfn-assistive-technologies-23" title="Reference 8">(8)</a> <a href="#ref-for-dfn-assistive-technologies-24" title="Reference 9">(9)</a> <a href="#ref-for-dfn-assistive-technologies-25" title="Reference 10">(10)</a> <a href="#ref-for-dfn-assistive-technologies-26" title="Reference 11">(11)</a> <a href="#ref-for-dfn-assistive-technologies-27" title="Reference 12">(12)</a> <a href="#ref-for-dfn-assistive-technologies-28" title="Reference 13">(13)</a> <a href="#ref-for-dfn-assistive-technologies-29" title="Reference 14">(14)</a> <a href="#ref-for-dfn-assistive-technologies-30" title="Reference 15">(15)</a> <a href="#ref-for-dfn-assistive-technologies-31" title="Reference 16">(16)</a> <a href="#ref-for-dfn-assistive-technologies-32" title="Reference 17">(17)</a> <a href="#ref-for-dfn-assistive-technologies-33" title="Reference 18">(18)</a> <a href="#ref-for-dfn-assistive-technologies-34" title="Reference 19">(19)</a> <a href="#ref-for-dfn-assistive-technologies-35" title="Reference 20">(20)</a> <a href="#ref-for-dfn-assistive-technologies-36" title="Reference 21">(21)</a> <a href="#ref-for-dfn-assistive-technologies-37" title="Reference 22">(22)</a> <a href="#ref-for-dfn-assistive-technologies-38" title="Reference 23">(23)</a> <a href="#ref-for-dfn-assistive-technologies-39" title="Reference 24">(24)</a> <a href="#ref-for-dfn-assistive-technologies-40" title="Reference 25">(25)</a> <a href="#ref-for-dfn-assistive-technologies-41" title="Reference 26">(26)</a> <a href="#ref-for-dfn-assistive-technologies-42" title="Reference 27">(27)</a> <a href="#ref-for-dfn-assistive-technologies-43" title="Reference 28">(28)</a> <a href="#ref-for-dfn-assistive-technologies-44" title="Reference 29">(29)</a> <a href="#ref-for-dfn-assistive-technologies-45" title="Reference 30">(30)</a> <a href="#ref-for-dfn-assistive-technologies-46" title="Reference 31">(31)</a> <a href="#ref-for-dfn-assistive-technologies-47" title="Reference 32">(32)</a> <a href="#ref-for-dfn-assistive-technologies-48" title="Reference 33">(33)</a> <a href="#ref-for-dfn-assistive-technologies-49" title="Reference 34">(34)</a> </li><li> <a href="#ref-for-dfn-assistive-technologies-50" title="§ 6.6.1 Widget Attributes">§ 6.6.1 Widget Attributes</a> </li><li> <a href="#ref-for-dfn-assistive-technologies-51" title="§ 6.6.2 Live Region Attributes">§ 6.6.2 Live Region Attributes</a> </li><li> <a href="#ref-for-dfn-assistive-technologies-52" title="§ 6.6.3 Drag-and-Drop Attributes">§ 6.6.3 Drag-and-Drop Attributes</a> </li><li> <a href="#ref-for-dfn-assistive-technologies-53" title="§ 6.8 Definitions of States and Properties (all aria-* attributes)">§ 6.8 Definitions of States and Properties (all aria-* attributes)</a> <a href="#ref-for-dfn-assistive-technologies-54" title="Reference 2">(2)</a> <a href="#ref-for-dfn-assistive-technologies-55" title="Reference 3">(3)</a> <a href="#ref-for-dfn-assistive-technologies-56" title="Reference 4">(4)</a> <a href="#ref-for-dfn-assistive-technologies-57" title="Reference 5">(5)</a> <a href="#ref-for-dfn-assistive-technologies-58" title="Reference 6">(6)</a> <a href="#ref-for-dfn-assistive-technologies-59" title="Reference 7">(7)</a> <a href="#ref-for-dfn-assistive-technologies-60" title="Reference 8">(8)</a> <a href="#ref-for-dfn-assistive-technologies-61" title="Reference 9">(9)</a> <a href="#ref-for-dfn-assistive-technologies-62" title="Reference 10">(10)</a> <a href="#ref-for-dfn-assistive-technologies-63" title="Reference 11">(11)</a> <a href="#ref-for-dfn-assistive-technologies-64" title="Reference 12">(12)</a> <a href="#ref-for-dfn-assistive-technologies-65" title="Reference 13">(13)</a> <a href="#ref-for-dfn-assistive-technologies-66" title="Reference 14">(14)</a> <a href="#ref-for-dfn-assistive-technologies-67" title="Reference 15">(15)</a> <a href="#ref-for-dfn-assistive-technologies-68" title="Reference 16">(16)</a> <a href="#ref-for-dfn-assistive-technologies-69" title="Reference 17">(17)</a> <a href="#ref-for-dfn-assistive-technologies-70" title="Reference 18">(18)</a> <a href="#ref-for-dfn-assistive-technologies-71" title="Reference 19">(19)</a> <a href="#ref-for-dfn-assistive-technologies-72" title="Reference 20">(20)</a> <a href="#ref-for-dfn-assistive-technologies-73" title="Reference 21">(21)</a> <a href="#ref-for-dfn-assistive-technologies-74" title="Reference 22">(22)</a> <a href="#ref-for-dfn-assistive-technologies-75" title="Reference 23">(23)</a> <a href="#ref-for-dfn-assistive-technologies-76" title="Reference 24">(24)</a> <a href="#ref-for-dfn-assistive-technologies-77" title="Reference 25">(25)</a> <a href="#ref-for-dfn-assistive-technologies-78" title="Reference 26">(26)</a> </li><li> <a href="#ref-for-dfn-assistive-technologies-79" title="§ 7. Accessibility Tree">§ 7. Accessibility Tree</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-deprecated" aria-label="Links in this document to definition: Deprecated"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-deprecated" aria-label="Permalink for definition: Deprecated. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-deprecated-1" title="§ 6.8 Definitions of States and Properties (all aria-* attributes)">§ 6.8 Definitions of States and Properties (all aria-* attributes)</a> <a href="#ref-for-dfn-deprecated-2" title="Reference 2">(2)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-defines" aria-label="Links in this document to definition: Defines"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-defines" aria-label="Permalink for definition: Defines. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-defines-1" title="§ 2. Important Terms">§ 2. Important Terms</a> <a href="#ref-for-dfn-defines-2" title="Reference 2">(2)</a> </li><li> <a href="#ref-for-dfn-defines-3" title="§ 6.8 Definitions of States and Properties (all aria-* attributes)">§ 6.8 Definitions of States and Properties (all aria-* attributes)</a> <a href="#ref-for-dfn-defines-4" title="Reference 2">(2)</a> <a href="#ref-for-dfn-defines-5" title="Reference 3">(3)</a> <a href="#ref-for-dfn-defines-6" title="Reference 4">(4)</a> <a href="#ref-for-dfn-defines-7" title="Reference 5">(5)</a> <a href="#ref-for-dfn-defines-8" title="Reference 6">(6)</a> <a href="#ref-for-dfn-defines-9" title="Reference 7">(7)</a> <a href="#ref-for-dfn-defines-10" title="Reference 8">(8)</a> <a href="#ref-for-dfn-defines-11" title="Reference 9">(9)</a> <a href="#ref-for-dfn-defines-12" title="Reference 10">(10)</a> <a href="#ref-for-dfn-defines-13" title="Reference 11">(11)</a> <a href="#ref-for-dfn-defines-14" title="Reference 12">(12)</a> <a href="#ref-for-dfn-defines-15" title="Reference 13">(13)</a> <a href="#ref-for-dfn-defines-16" title="Reference 14">(14)</a> <a href="#ref-for-dfn-defines-17" title="Reference 15">(15)</a> <a href="#ref-for-dfn-defines-18" title="Reference 16">(16)</a> <a href="#ref-for-dfn-defines-19" title="Reference 17">(17)</a> <a href="#ref-for-dfn-defines-20" title="Reference 18">(18)</a> <a href="#ref-for-dfn-defines-21" title="Reference 19">(19)</a> <a href="#ref-for-dfn-defines-22" title="Reference 20">(20)</a> <a href="#ref-for-dfn-defines-23" title="Reference 21">(21)</a> <a href="#ref-for-dfn-defines-24" title="Reference 22">(22)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-desktop-focus-event" aria-label="Links in this document to definition: Desktop focus event"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-desktop-focus-event" aria-label="Permalink for definition: Desktop focus event. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-desktop-focus-event-1" title="§ 4.3 Managing Focus and Supporting Keyboard Navigation">§ 4.3 Managing Focus and Supporting Keyboard Navigation</a> </li><li> <a href="#ref-for-dfn-desktop-focus-event-2" title="§ 4.3.2 Information for User Agents">§ 4.3.2 Information for User Agents</a> <a href="#ref-for-dfn-desktop-focus-event-3" title="Reference 2">(2)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-event" aria-label="Links in this document to definition: Event"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-event" aria-label="Permalink for definition: Event. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-event-1" title="§ 1.1 Rich Internet Application Accessibility">§ 1.1 Rich Internet Application Accessibility</a> </li><li> <a href="#ref-for-dfn-event-2" title="§ 2. Important Terms">§ 2. Important Terms</a> <a href="#ref-for-dfn-event-3" title="Reference 2">(2)</a> </li><li> <a href="#ref-for-dfn-event-4" title="§ 4.2 WAI-ARIA States and Properties">§ 4.2 WAI-ARIA States and Properties</a> </li><li> <a href="#ref-for-dfn-event-5" title="§ 4.3.2 Information for User Agents">§ 4.3.2 Information for User Agents</a> </li><li> <a href="#ref-for-dfn-event-6" title="§ 5.4 Definition of Roles">§ 5.4 Definition of Roles</a> <a href="#ref-for-dfn-event-7" title="Reference 2">(2)</a> </li><li> <a href="#ref-for-dfn-event-8" title="§ 6.7 State change notification">§ 6.7 State change notification</a> </li><li> <a href="#ref-for-dfn-event-9" title="§ 6.8 Definitions of States and Properties (all aria-* attributes)">§ 6.8 Definitions of States and Properties (all aria-* attributes)</a> </li><li> <a href="#ref-for-dfn-event-10" title="§ 7. Accessibility Tree">§ 7. Accessibility Tree</a> </li><li> <a href="#ref-for-dfn-event-11" title="§ 7.2 Including Elements in the Accessibility Tree">§ 7.2 Including Elements in the Accessibility Tree</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-expose" aria-label="Links in this document to definition: Expose"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-expose" aria-label="Permalink for definition: Expose. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li>Not referenced in this document.</li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-graphical-document" aria-label="Links in this document to definition: Graphical Document"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-graphical-document" aria-label="Permalink for definition: Graphical Document. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-graphical-document-1" title="§ 5.4 Definition of Roles">§ 5.4 Definition of Roles</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-hidden" aria-label="Links in this document to definition: Hidden"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-hidden" aria-label="Permalink for definition: Hidden. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-hidden-1" title="§ 2. Important Terms">§ 2. Important Terms</a> <a href="#ref-for-dfn-hidden-2" title="Reference 2">(2)</a> </li><li> <a href="#ref-for-dfn-hidden-3" title="§ 6.8 Definitions of States and Properties (all aria-* attributes)">§ 6.8 Definitions of States and Properties (all aria-* attributes)</a> <a href="#ref-for-dfn-hidden-4" title="Reference 2">(2)</a> <a href="#ref-for-dfn-hidden-5" title="Reference 3">(3)</a> <a href="#ref-for-dfn-hidden-6" title="Reference 4">(4)</a> <a href="#ref-for-dfn-hidden-7" title="Reference 5">(5)</a> </li><li> <a href="#ref-for-dfn-hidden-8" title="§ 7.2 Including Elements in the Accessibility Tree">§ 7.2 Including Elements in the Accessibility Tree</a> <a href="#ref-for-dfn-hidden-9" title="Reference 2">(2)</a> <a href="#ref-for-dfn-hidden-10" title="Reference 3">(3)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-hide-from-all-users" aria-label="Links in this document to definition: Hidden From All Users"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-hide-from-all-users" aria-label="Permalink for definition: Hidden From All Users. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-hide-from-all-users-1" title="§ 2. Important Terms">§ 2. Important Terms</a> <a href="#ref-for-dfn-hide-from-all-users-2" title="Reference 2">(2)</a> </li><li> <a href="#ref-for-dfn-hide-from-all-users-3" title="§ 5.4 Definition of Roles">§ 5.4 Definition of Roles</a> <a href="#ref-for-dfn-hide-from-all-users-4" title="Reference 2">(2)</a> <a href="#ref-for-dfn-hide-from-all-users-5" title="Reference 3">(3)</a> <a href="#ref-for-dfn-hide-from-all-users-6" title="Reference 4">(4)</a> </li><li> <a href="#ref-for-dfn-hide-from-all-users-7" title="§ 6.8 Definitions of States and Properties (all aria-* attributes)">§ 6.8 Definitions of States and Properties (all aria-* attributes)</a> <a href="#ref-for-dfn-hide-from-all-users-8" title="Reference 2">(2)</a> <a href="#ref-for-dfn-hide-from-all-users-9" title="Reference 3">(3)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-identifies" aria-label="Links in this document to definition: Identifies"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-identifies" aria-label="Permalink for definition: Identifies. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-identifies-1" title="§ 2. Important Terms">§ 2. Important Terms</a> <a href="#ref-for-dfn-identifies-2" title="Reference 2">(2)</a> </li><li> <a href="#ref-for-dfn-identifies-3" title="§ 6.8 Definitions of States and Properties (all aria-* attributes)">§ 6.8 Definitions of States and Properties (all aria-* attributes)</a> <a href="#ref-for-dfn-identifies-4" title="Reference 2">(2)</a> <a href="#ref-for-dfn-identifies-5" title="Reference 3">(3)</a> <a href="#ref-for-dfn-identifies-6" title="Reference 4">(4)</a> <a href="#ref-for-dfn-identifies-7" title="Reference 5">(5)</a> <a href="#ref-for-dfn-identifies-8" title="Reference 6">(6)</a> <a href="#ref-for-dfn-identifies-9" title="Reference 7">(7)</a> <a href="#ref-for-dfn-identifies-10" title="Reference 8">(8)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-indicates" aria-label="Links in this document to definition: Indicates"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-indicates" aria-label="Permalink for definition: Indicates. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-indicates-1" title="§ 2. Important Terms">§ 2. Important Terms</a> <a href="#ref-for-dfn-indicates-2" title="Reference 2">(2)</a> </li><li> <a href="#ref-for-dfn-indicates-3" title="§ 6.8 Definitions of States and Properties (all aria-* attributes)">§ 6.8 Definitions of States and Properties (all aria-* attributes)</a> <a href="#ref-for-dfn-indicates-4" title="Reference 2">(2)</a> <a href="#ref-for-dfn-indicates-5" title="Reference 3">(3)</a> <a href="#ref-for-dfn-indicates-6" title="Reference 4">(4)</a> <a href="#ref-for-dfn-indicates-7" title="Reference 5">(5)</a> <a href="#ref-for-dfn-indicates-8" title="Reference 6">(6)</a> <a href="#ref-for-dfn-indicates-9" title="Reference 7">(7)</a> <a href="#ref-for-dfn-indicates-10" title="Reference 8">(8)</a> <a href="#ref-for-dfn-indicates-11" title="Reference 9">(9)</a> <a href="#ref-for-dfn-indicates-12" title="Reference 10">(10)</a> <a href="#ref-for-dfn-indicates-13" title="Reference 11">(11)</a> <a href="#ref-for-dfn-indicates-14" title="Reference 12">(12)</a> <a href="#ref-for-dfn-indicates-15" title="Reference 13">(13)</a> <a href="#ref-for-dfn-indicates-16" title="Reference 14">(14)</a> <a href="#ref-for-dfn-indicates-17" title="Reference 15">(15)</a> <a href="#ref-for-dfn-indicates-18" title="Reference 16">(16)</a> <a href="#ref-for-dfn-indicates-19" title="Reference 17">(17)</a> <a href="#ref-for-dfn-indicates-20" title="Reference 18">(18)</a> <a href="#ref-for-dfn-indicates-21" title="Reference 19">(19)</a> <a href="#ref-for-dfn-indicates-22" title="Reference 20">(20)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-keyboard-accessible" aria-label="Links in this document to definition: Keyboard Accessible"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-keyboard-accessible" aria-label="Permalink for definition: Keyboard Accessible. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-keyboard-accessible-1" title="§ 1.1 Rich Internet Application Accessibility">§ 1.1 Rich Internet Application Accessibility</a> </li><li> <a href="#ref-for-dfn-keyboard-accessible-2" title="§ 2. Important Terms">§ 2. Important Terms</a> </li><li> <a href="#ref-for-dfn-keyboard-accessible-3" title="§ 5.4 Definition of Roles">§ 5.4 Definition of Roles</a> <a href="#ref-for-dfn-keyboard-accessible-4" title="Reference 2">(2)</a> <a href="#ref-for-dfn-keyboard-accessible-5" title="Reference 3">(3)</a> <a href="#ref-for-dfn-keyboard-accessible-6" title="Reference 4">(4)</a> <a href="#ref-for-dfn-keyboard-accessible-7" title="Reference 5">(5)</a> <a href="#ref-for-dfn-keyboard-accessible-8" title="Reference 6">(6)</a> <a href="#ref-for-dfn-keyboard-accessible-9" title="Reference 7">(7)</a> <a href="#ref-for-dfn-keyboard-accessible-10" title="Reference 8">(8)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-landmark" aria-label="Links in this document to definition: Landmark"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-landmark" aria-label="Permalink for definition: Landmark. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-landmark-1" title="§ 1.1 Rich Internet Application Accessibility">§ 1.1 Rich Internet Application Accessibility</a> </li><li> <a href="#ref-for-dfn-landmark-2" title="§ 5.3.4 Landmark Roles">§ 5.3.4 Landmark Roles</a> </li><li> <a href="#ref-for-dfn-landmark-3" title="§ 5.4 Definition of Roles">§ 5.4 Definition of Roles</a> <a href="#ref-for-dfn-landmark-4" title="Reference 2">(2)</a> <a href="#ref-for-dfn-landmark-5" title="Reference 3">(3)</a> <a href="#ref-for-dfn-landmark-6" title="Reference 4">(4)</a> <a href="#ref-for-dfn-landmark-7" title="Reference 5">(5)</a> <a href="#ref-for-dfn-landmark-8" title="Reference 6">(6)</a> <a href="#ref-for-dfn-landmark-9" title="Reference 7">(7)</a> <a href="#ref-for-dfn-landmark-10" title="Reference 8">(8)</a> <a href="#ref-for-dfn-landmark-11" title="Reference 9">(9)</a> <a href="#ref-for-dfn-landmark-12" title="Reference 10">(10)</a> <a href="#ref-for-dfn-landmark-13" title="Reference 11">(11)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-live-region" aria-label="Links in this document to definition: Live Region"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-live-region" aria-label="Permalink for definition: Live Region. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-live-region-1" title="§ 5.3.5 Live Region Roles">§ 5.3.5 Live Region Roles</a> </li><li> <a href="#ref-for-dfn-live-region-2" title="§ 5.4 Definition of Roles">§ 5.4 Definition of Roles</a> <a href="#ref-for-dfn-live-region-3" title="Reference 2">(2)</a> <a href="#ref-for-dfn-live-region-4" title="Reference 3">(3)</a> <a href="#ref-for-dfn-live-region-5" title="Reference 4">(4)</a> <a href="#ref-for-dfn-live-region-6" title="Reference 5">(5)</a> <a href="#ref-for-dfn-live-region-7" title="Reference 6">(6)</a> <a href="#ref-for-dfn-live-region-8" title="Reference 7">(7)</a> </li><li> <a href="#ref-for-dfn-live-region-9" title="§ 6.6.2 Live Region Attributes">§ 6.6.2 Live Region Attributes</a> </li><li> <a href="#ref-for-dfn-live-region-10" title="§ 6.8 Definitions of States and Properties (all aria-* attributes)">§ 6.8 Definitions of States and Properties (all aria-* attributes)</a> <a href="#ref-for-dfn-live-region-11" title="Reference 2">(2)</a> <a href="#ref-for-dfn-live-region-12" title="Reference 3">(3)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-managed-state" aria-label="Links in this document to definition: Managed State"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-managed-state" aria-label="Permalink for definition: Managed State. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-managed-state-1" title="§ 4.2 WAI-ARIA States and Properties">§ 4.2 WAI-ARIA States and Properties</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-nemeth-braille" aria-label="Links in this document to definition: Nemeth Braille"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-nemeth-braille" aria-label="Permalink for definition: Nemeth Braille. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-nemeth-braille-1" title="§ 5.4 Definition of Roles">§ 5.4 Definition of Roles</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-object" aria-label="Links in this document to definition: Object"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-object" aria-label="Permalink for definition: Object. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-object-1" title="§ 1.1 Rich Internet Application Accessibility">§ 1.1 Rich Internet Application Accessibility</a> </li><li> <a href="#ref-for-dfn-object-2" title="§ 2. Important Terms">§ 2. Important Terms</a> <a href="#ref-for-dfn-object-3" title="Reference 2">(2)</a> <a href="#ref-for-dfn-object-4" title="Reference 3">(3)</a> <a href="#ref-for-dfn-object-5" title="Reference 4">(4)</a> <a href="#ref-for-dfn-object-6" title="Reference 5">(5)</a> <a href="#ref-for-dfn-object-7" title="Reference 6">(6)</a> <a href="#ref-for-dfn-object-8" title="Reference 7">(7)</a> </li><li> <a href="#ref-for-dfn-object-9" title="§ 4.3.2 Information for User Agents">§ 4.3.2 Information for User Agents</a> </li><li> <a href="#ref-for-dfn-object-10" title="§ 5.1.4 Base Concept">§ 5.1.4 Base Concept</a> </li><li> <a href="#ref-for-dfn-object-11" title="§ 5.2.2 Required States and Properties">§ 5.2.2 Required States and Properties</a> </li><li> <a href="#ref-for-dfn-object-12" title="§ 5.4 Definition of Roles">§ 5.4 Definition of Roles</a> <a href="#ref-for-dfn-object-13" title="Reference 2">(2)</a> <a href="#ref-for-dfn-object-14" title="Reference 3">(3)</a> <a href="#ref-for-dfn-object-15" title="Reference 4">(4)</a> </li><li> <a href="#ref-for-dfn-object-16" title="§ 6.1 Clarification of States versus Properties">§ 6.1 Clarification of States versus Properties</a> </li><li> <a href="#ref-for-dfn-object-17" title="§ 6.8 Definitions of States and Properties (all aria-* attributes)">§ 6.8 Definitions of States and Properties (all aria-* attributes)</a> <a href="#ref-for-dfn-object-18" title="Reference 2">(2)</a> <a href="#ref-for-dfn-object-19" title="Reference 3">(3)</a> <a href="#ref-for-dfn-object-20" title="Reference 4">(4)</a> <a href="#ref-for-dfn-object-21" title="Reference 5">(5)</a> <a href="#ref-for-dfn-object-22" title="Reference 6">(6)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-ontology" aria-label="Links in this document to definition: Ontology"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-ontology" aria-label="Permalink for definition: Ontology. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-ontology-1" title="§ 1.1 Rich Internet Application Accessibility">§ 1.1 Rich Internet Application Accessibility</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-operable" aria-label="Links in this document to definition: Operable"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-operable" aria-label="Permalink for definition: Operable. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-operable-1" title="§ 1.1 Rich Internet Application Accessibility">§ 1.1 Rich Internet Application Accessibility</a> <a href="#ref-for-dfn-operable-2" title="Reference 2">(2)</a> </li><li> <a href="#ref-for-dfn-operable-3" title="§ 6.8 Definitions of States and Properties (all aria-* attributes)">§ 6.8 Definitions of States and Properties (all aria-* attributes)</a> <a href="#ref-for-dfn-operable-4" title="Reference 2">(2)</a> </li><li> <a href="#ref-for-dfn-operable-5" title="§ 9.3 Presentational Roles Conflict Resolution">§ 9.3 Presentational Roles Conflict Resolution</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-perceivable" aria-label="Links in this document to definition: Perceivable"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-perceivable" aria-label="Permalink for definition: Perceivable. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-perceivable-1" title="§ 1.1 Rich Internet Application Accessibility">§ 1.1 Rich Internet Application Accessibility</a> <a href="#ref-for-dfn-perceivable-2" title="Reference 2">(2)</a> </li><li> <a href="#ref-for-dfn-perceivable-3" title="§ 2. Important Terms">§ 2. Important Terms</a> </li><li> <a href="#ref-for-dfn-perceivable-4" title="§ 5.4 Definition of Roles">§ 5.4 Definition of Roles</a> <a href="#ref-for-dfn-perceivable-5" title="Reference 2">(2)</a> </li><li> <a href="#ref-for-dfn-perceivable-6" title="§ 6.8 Definitions of States and Properties (all aria-* attributes)">§ 6.8 Definitions of States and Properties (all aria-* attributes)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-property" aria-label="Links in this document to definition: Property"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-property" aria-label="Permalink for definition: Property. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-property-1" title="§ 1.1 Rich Internet Application Accessibility">§ 1.1 Rich Internet Application Accessibility</a> </li><li> <a href="#ref-for-dfn-property-2" title="§ 1.5.1 Authoring Tools">§ 1.5.1 Authoring Tools</a> </li><li> <a href="#ref-for-dfn-property-3" title="§ 2. Important Terms">§ 2. Important Terms</a> <a href="#ref-for-dfn-property-4" title="Reference 2">(2)</a> <a href="#ref-for-dfn-property-5" title="Reference 3">(3)</a> </li><li> <a href="#ref-for-dfn-property-6" title="§ 3.3 Assistive Technology Notifications Communicated to Web Applications">§ 3.3 Assistive Technology Notifications Communicated to Web Applications</a> </li><li> <a href="#ref-for-dfn-property-7" title="§ 4. Using WAI-ARIA">§ 4. Using WAI-ARIA</a> </li><li> <a href="#ref-for-dfn-property-8" title="§ 4.1 WAI-ARIA Roles">§ 4.1 WAI-ARIA Roles</a> </li><li> <a href="#ref-for-dfn-property-9" title="§ 4.2 WAI-ARIA States and Properties">§ 4.2 WAI-ARIA States and Properties</a> </li><li> <a href="#ref-for-dfn-property-10" title="§ 5.2.2 Required States and Properties">§ 5.2.2 Required States and Properties</a> </li><li> <a href="#ref-for-dfn-property-11" title="§ 5.2.3 Supported States and Properties">§ 5.2.3 Supported States and Properties</a> </li><li> <a href="#ref-for-dfn-property-12" title="§ 5.2.4 Inherited States and Properties">§ 5.2.4 Inherited States and Properties</a> </li><li> <a href="#ref-for-dfn-property-13" title="§ 6.1 Clarification of States versus Properties">§ 6.1 Clarification of States versus Properties</a> </li><li> <a href="#ref-for-dfn-property-14" title="§ 6.2.1 Related Concepts">§ 6.2.1 Related Concepts</a> </li><li> <a href="#ref-for-dfn-property-15" title="§ 6.2.2 Used in Roles">§ 6.2.2 Used in Roles</a> </li><li> <a href="#ref-for-dfn-property-16" title="§ 6.2.3 Inherits into Roles">§ 6.2.3 Inherits into Roles</a> </li><li> <a href="#ref-for-dfn-property-17" title="§ 6.2.4 Value">§ 6.2.4 Value</a> </li><li> <a href="#ref-for-dfn-property-18" title="§ 6.4 Translatable Attributes">§ 6.4 Translatable Attributes</a> </li><li> <a href="#ref-for-dfn-property-19" title="§ 6.5 Global States and Properties">§ 6.5 Global States and Properties</a> </li><li> <a href="#ref-for-dfn-property-20" title="§ 6.8 Definitions of States and Properties (all aria-* attributes)">§ 6.8 Definitions of States and Properties (all aria-* attributes)</a> <a href="#ref-for-dfn-property-21" title="Reference 2">(2)</a> <a href="#ref-for-dfn-property-22" title="Reference 3">(3)</a> <a href="#ref-for-dfn-property-23" title="Reference 4">(4)</a> <a href="#ref-for-dfn-property-24" title="Reference 5">(5)</a> <a href="#ref-for-dfn-property-25" title="Reference 6">(6)</a> <a href="#ref-for-dfn-property-26" title="Reference 7">(7)</a> <a href="#ref-for-dfn-property-27" title="Reference 8">(8)</a> <a href="#ref-for-dfn-property-28" title="Reference 9">(9)</a> </li><li> <a href="#ref-for-dfn-property-29" title="§ 7. Accessibility Tree">§ 7. Accessibility Tree</a> </li><li> <a href="#ref-for-dfn-property-30" title="§ 8. Implementation in Host Languages">§ 8. Implementation in Host Languages</a> </li><li> <a href="#ref-for-dfn-property-31" title="§ 9.2 States and Properties">§ 9.2 States and Properties</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-relationship" aria-label="Links in this document to definition: Relationship"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-relationship" aria-label="Permalink for definition: Relationship. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-relationship-1" title="§ 1. Introduction">§ 1. Introduction</a> </li><li> <a href="#ref-for-dfn-relationship-2" title="§ 1.1 Rich Internet Application Accessibility">§ 1.1 Rich Internet Application Accessibility</a> </li><li> <a href="#ref-for-dfn-relationship-3" title="§ 5.4 Definition of Roles">§ 5.4 Definition of Roles</a> <a href="#ref-for-dfn-relationship-4" title="Reference 2">(2)</a> <a href="#ref-for-dfn-relationship-5" title="Reference 3">(3)</a> <a href="#ref-for-dfn-relationship-6" title="Reference 4">(4)</a> <a href="#ref-for-dfn-relationship-7" title="Reference 5">(5)</a> <a href="#ref-for-dfn-relationship-8" title="Reference 6">(6)</a> <a href="#ref-for-dfn-relationship-9" title="Reference 7">(7)</a> <a href="#ref-for-dfn-relationship-10" title="Reference 8">(8)</a> </li><li> <a href="#ref-for-dfn-relationship-11" title="§ 6.6.4 Relationship Attributes">§ 6.6.4 Relationship Attributes</a> </li><li> <a href="#ref-for-dfn-relationship-12" title="§ 6.8 Definitions of States and Properties (all aria-* attributes)">§ 6.8 Definitions of States and Properties (all aria-* attributes)</a> <a href="#ref-for-dfn-relationship-13" title="Reference 2">(2)</a> </li><li> <a href="#ref-for-dfn-relationship-14" title="§ 7. Accessibility Tree">§ 7. Accessibility Tree</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> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-role-1" title="§ 1. Introduction">§ 1. Introduction</a> </li><li> <a href="#ref-for-dfn-role-2" title="§ 1.1 Rich Internet Application Accessibility">§ 1.1 Rich Internet Application Accessibility</a> <a href="#ref-for-dfn-role-3" title="Reference 2">(2)</a> </li><li> <a href="#ref-for-dfn-role-4" title="§ 1.5.1 Authoring Tools">§ 1.5.1 Authoring Tools</a> </li><li> <a href="#ref-for-dfn-role-5" title="§ 2. Important Terms">§ 2. Important Terms</a> </li><li> <a href="#ref-for-dfn-role-6" title="§ 4. Using WAI-ARIA">§ 4. Using WAI-ARIA</a> </li><li> <a href="#ref-for-dfn-role-7" title="§ 4.1 WAI-ARIA Roles">§ 4.1 WAI-ARIA Roles</a> <a href="#ref-for-dfn-role-8" title="Reference 2">(2)</a> </li><li> <a href="#ref-for-dfn-role-9" title="§ 4.2 WAI-ARIA States and Properties">§ 4.2 WAI-ARIA States and Properties</a> </li><li> <a href="#ref-for-dfn-role-10" title="§ 4.3.2 Information for User Agents">§ 4.3.2 Information for User Agents</a> <a href="#ref-for-dfn-role-11" title="Reference 2">(2)</a> </li><li> <a href="#ref-for-dfn-role-12" title="§ 5. The Roles Model">§ 5. The Roles Model</a> </li><li> <a href="#ref-for-dfn-role-13" title="§ 5.1.1 Superclass Role">§ 5.1.1 Superclass Role</a> </li><li> <a href="#ref-for-dfn-role-14" title="§ 5.1.2 Subclass Roles">§ 5.1.2 Subclass Roles</a> </li><li> <a href="#ref-for-dfn-role-15" title="§ 5.1.4 Base Concept">§ 5.1.4 Base Concept</a> </li><li> <a href="#ref-for-dfn-role-16" title="§ 5.2.1 Abstract Roles">§ 5.2.1 Abstract Roles</a> </li><li> <a href="#ref-for-dfn-role-17" title="§ 5.2.2 Required States and Properties">§ 5.2.2 Required States and Properties</a> </li><li> <a href="#ref-for-dfn-role-18" title="§ 5.2.3 Supported States and Properties">§ 5.2.3 Supported States and Properties</a> </li><li> <a href="#ref-for-dfn-role-19" title="§ 5.2.4 Inherited States and Properties">§ 5.2.4 Inherited States and Properties</a> </li><li> <a href="#ref-for-dfn-role-20" title="§ 5.2.5 Prohibited States and Properties">§ 5.2.5 Prohibited States and Properties</a> </li><li> <a href="#ref-for-dfn-role-21" title="§ 5.2.6 Allowed Accessibility Child Roles">§ 5.2.6 Allowed Accessibility Child Roles</a> </li><li> <a href="#ref-for-dfn-role-22" title="§ 5.2.7 Required Accessibility Parent Role">§ 5.2.7 Required Accessibility Parent Role</a> </li><li> <a href="#ref-for-dfn-role-23" title="§ 5.2.8 Accessible Name Calculation">§ 5.2.8 Accessible Name Calculation</a> </li><li> <a href="#ref-for-dfn-role-24" title="§ 5.3 Categorization of Roles">§ 5.3 Categorization of Roles</a> </li><li> <a href="#ref-for-dfn-role-25" title="§ 5.3.1 Abstract Roles">§ 5.3.1 Abstract Roles</a> </li><li> <a href="#ref-for-dfn-role-26" title="§ 5.3.3 Document Structure Roles">§ 5.3.3 Document Structure Roles</a> </li><li> <a href="#ref-for-dfn-role-27" title="§ 5.3.4 Landmark Roles">§ 5.3.4 Landmark Roles</a> </li><li> <a href="#ref-for-dfn-role-28" title="§ 5.3.5 Live Region Roles">§ 5.3.5 Live Region Roles</a> </li><li> <a href="#ref-for-dfn-role-29" title="§ 5.3.6 Window Roles">§ 5.3.6 Window Roles</a> </li><li> <a href="#ref-for-dfn-role-30" title="§ 5.4 Definition of Roles">§ 5.4 Definition of Roles</a> <a href="#ref-for-dfn-role-31" title="Reference 2">(2)</a> <a href="#ref-for-dfn-role-32" title="Reference 3">(3)</a> <a href="#ref-for-dfn-role-33" title="Reference 4">(4)</a> <a href="#ref-for-dfn-role-34" title="Reference 5">(5)</a> <a href="#ref-for-dfn-role-35" title="Reference 6">(6)</a> <a href="#ref-for-dfn-role-36" title="Reference 7">(7)</a> <a href="#ref-for-dfn-role-37" title="Reference 8">(8)</a> <a href="#ref-for-dfn-role-38" title="Reference 9">(9)</a> <a href="#ref-for-dfn-role-39" title="Reference 10">(10)</a> <a href="#ref-for-dfn-role-40" title="Reference 11">(11)</a> <a href="#ref-for-dfn-role-41" title="Reference 12">(12)</a> <a href="#ref-for-dfn-role-42" title="Reference 13">(13)</a> <a href="#ref-for-dfn-role-43" title="Reference 14">(14)</a> <a href="#ref-for-dfn-role-44" title="Reference 15">(15)</a> <a href="#ref-for-dfn-role-45" title="Reference 16">(16)</a> <a href="#ref-for-dfn-role-46" title="Reference 17">(17)</a> <a href="#ref-for-dfn-role-47" title="Reference 18">(18)</a> <a href="#ref-for-dfn-role-48" title="Reference 19">(19)</a> <a href="#ref-for-dfn-role-49" title="Reference 20">(20)</a> <a href="#ref-for-dfn-role-50" title="Reference 21">(21)</a> <a href="#ref-for-dfn-role-51" title="Reference 22">(22)</a> <a href="#ref-for-dfn-role-52" title="Reference 23">(23)</a> <a href="#ref-for-dfn-role-53" title="Reference 24">(24)</a> <a href="#ref-for-dfn-role-54" title="Reference 25">(25)</a> <a href="#ref-for-dfn-role-55" title="Reference 26">(26)</a> <a href="#ref-for-dfn-role-56" title="Reference 27">(27)</a> <a href="#ref-for-dfn-role-57" title="Reference 28">(28)</a> <a href="#ref-for-dfn-role-58" title="Reference 29">(29)</a> <a href="#ref-for-dfn-role-59" title="Reference 30">(30)</a> <a href="#ref-for-dfn-role-60" title="Reference 31">(31)</a> <a href="#ref-for-dfn-role-61" title="Reference 32">(32)</a> <a href="#ref-for-dfn-role-62" title="Reference 33">(33)</a> <a href="#ref-for-dfn-role-63" title="Reference 34">(34)</a> <a href="#ref-for-dfn-role-64" title="Reference 35">(35)</a> <a href="#ref-for-dfn-role-65" title="Reference 36">(36)</a> <a href="#ref-for-dfn-role-66" title="Reference 37">(37)</a> <a href="#ref-for-dfn-role-67" title="Reference 38">(38)</a> <a href="#ref-for-dfn-role-68" title="Reference 39">(39)</a> <a href="#ref-for-dfn-role-69" title="Reference 40">(40)</a> <a href="#ref-for-dfn-role-70" title="Reference 41">(41)</a> <a href="#ref-for-dfn-role-71" title="Reference 42">(42)</a> <a href="#ref-for-dfn-role-72" title="Reference 43">(43)</a> <a href="#ref-for-dfn-role-73" title="Reference 44">(44)</a> <a href="#ref-for-dfn-role-74" title="Reference 45">(45)</a> <a href="#ref-for-dfn-role-75" title="Reference 46">(46)</a> <a href="#ref-for-dfn-role-76" title="Reference 47">(47)</a> <a href="#ref-for-dfn-role-77" title="Reference 48">(48)</a> <a href="#ref-for-dfn-role-78" title="Reference 49">(49)</a> <a href="#ref-for-dfn-role-79" title="Reference 50">(50)</a> <a href="#ref-for-dfn-role-80" title="Reference 51">(51)</a> <a href="#ref-for-dfn-role-81" title="Reference 52">(52)</a> <a href="#ref-for-dfn-role-82" title="Reference 53">(53)</a> <a href="#ref-for-dfn-role-83" title="Reference 54">(54)</a> <a href="#ref-for-dfn-role-84" title="Reference 55">(55)</a> </li><li> <a href="#ref-for-dfn-role-85" title="§ 6.1 Clarification of States versus Properties">§ 6.1 Clarification of States versus Properties</a> </li><li> <a href="#ref-for-dfn-role-86" title="§ 6.5 Global States and Properties">§ 6.5 Global States and Properties</a> </li><li> <a href="#ref-for-dfn-role-87" title="§ 6.6.2 Live Region Attributes">§ 6.6.2 Live Region Attributes</a> </li><li> <a href="#ref-for-dfn-role-88" title="§ 6.8 Definitions of States and Properties (all aria-* attributes)">§ 6.8 Definitions of States and Properties (all aria-* attributes)</a> <a href="#ref-for-dfn-role-89" title="Reference 2">(2)</a> <a href="#ref-for-dfn-role-90" title="Reference 3">(3)</a> <a href="#ref-for-dfn-role-91" title="Reference 4">(4)</a> </li><li> <a href="#ref-for-dfn-role-92" title="§ 8. Implementation in Host Languages">§ 8. Implementation in Host Languages</a> </li><li> <a href="#ref-for-dfn-role-93" title="§ 8.1 Role Attribute">§ 8.1 Role Attribute</a> <a href="#ref-for-dfn-role-94" title="Reference 2">(2)</a> </li><li> <a href="#ref-for-dfn-role-95" title="§ 9.1 Roles">§ 9.1 Roles</a> <a href="#ref-for-dfn-role-96" title="Reference 2">(2)</a> <a href="#ref-for-dfn-role-97" title="Reference 3">(3)</a> </li><li> <a href="#ref-for-dfn-role-98" title="§ 9.2 States and Properties">§ 9.2 States and Properties</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-semantics" aria-label="Links in this document to definition: Semantics"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-semantics" aria-label="Permalink for definition: Semantics. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-semantics-1" title="§ 1.1 Rich Internet Application Accessibility">§ 1.1 Rich Internet Application Accessibility</a> </li><li> <a href="#ref-for-dfn-semantics-2" title="§ 2. Important Terms">§ 2. Important Terms</a> </li><li> <a href="#ref-for-dfn-semantics-3" title="§ 4. Using WAI-ARIA">§ 4. Using WAI-ARIA</a> </li><li> <a href="#ref-for-dfn-semantics-4" title="§ 4.3.1 Information for Authors">§ 4.3.1 Information for Authors</a> </li><li> <a href="#ref-for-dfn-semantics-5" title="§ 5.4 Definition of Roles">§ 5.4 Definition of Roles</a> </li><li> <a href="#ref-for-dfn-semantics-6" title="§ 6.8 Definitions of States and Properties (all aria-* attributes)">§ 6.8 Definitions of States and Properties (all aria-* attributes)</a> </li><li> <a href="#ref-for-dfn-semantics-7" title="§ 8.4 Implicit WAI-ARIA Semantics">§ 8.4 Implicit WAI-ARIA Semantics</a> </li><li> <a href="#ref-for-dfn-semantics-8" title="§ 8.5 Conflicts with Host Language Semantics">§ 8.5 Conflicts with Host Language Semantics</a> </li><li> <a href="#ref-for-dfn-semantics-9" title="§ 8.6 State and Property Attribute Processing">§ 8.6 State and Property Attribute Processing</a> </li><li> <a href="#ref-for-dfn-semantics-10" title="§ 8.7 CSS Selectors">§ 8.7 CSS Selectors</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-state" aria-label="Links in this document to definition: State"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-state" aria-label="Permalink for definition: State. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-state-1" title="§ 1.1 Rich Internet Application Accessibility">§ 1.1 Rich Internet Application Accessibility</a> </li><li> <a href="#ref-for-dfn-state-2" title="§ 1.5.1 Authoring Tools">§ 1.5.1 Authoring Tools</a> </li><li> <a href="#ref-for-dfn-state-3" title="§ 2. Important Terms">§ 2. Important Terms</a> <a href="#ref-for-dfn-state-4" title="Reference 2">(2)</a> <a href="#ref-for-dfn-state-5" title="Reference 3">(3)</a> <a href="#ref-for-dfn-state-6" title="Reference 4">(4)</a> <a href="#ref-for-dfn-state-7" title="Reference 5">(5)</a> </li><li> <a href="#ref-for-dfn-state-8" title="§ 3.3 Assistive Technology Notifications Communicated to Web Applications">§ 3.3 Assistive Technology Notifications Communicated to Web Applications</a> </li><li> <a href="#ref-for-dfn-state-9" title="§ 4. Using WAI-ARIA">§ 4. Using WAI-ARIA</a> </li><li> <a href="#ref-for-dfn-state-10" title="§ 4.1 WAI-ARIA Roles">§ 4.1 WAI-ARIA Roles</a> </li><li> <a href="#ref-for-dfn-state-11" title="§ 4.2 WAI-ARIA States and Properties">§ 4.2 WAI-ARIA States and Properties</a> </li><li> <a href="#ref-for-dfn-state-12" title="§ 5.2.2 Required States and Properties">§ 5.2.2 Required States and Properties</a> </li><li> <a href="#ref-for-dfn-state-13" title="§ 5.2.3 Supported States and Properties">§ 5.2.3 Supported States and Properties</a> </li><li> <a href="#ref-for-dfn-state-14" title="§ 5.2.4 Inherited States and Properties">§ 5.2.4 Inherited States and Properties</a> </li><li> <a href="#ref-for-dfn-state-15" title="§ 5.4 Definition of Roles">§ 5.4 Definition of Roles</a> </li><li> <a href="#ref-for-dfn-state-16" title="§ 6.1 Clarification of States versus Properties">§ 6.1 Clarification of States versus Properties</a> </li><li> <a href="#ref-for-dfn-state-17" title="§ 6.2.1 Related Concepts">§ 6.2.1 Related Concepts</a> </li><li> <a href="#ref-for-dfn-state-18" title="§ 6.2.2 Used in Roles">§ 6.2.2 Used in Roles</a> </li><li> <a href="#ref-for-dfn-state-19" title="§ 6.2.3 Inherits into Roles">§ 6.2.3 Inherits into Roles</a> </li><li> <a href="#ref-for-dfn-state-20" title="§ 6.2.4 Value">§ 6.2.4 Value</a> </li><li> <a href="#ref-for-dfn-state-21" title="§ 6.4 Translatable Attributes">§ 6.4 Translatable Attributes</a> </li><li> <a href="#ref-for-dfn-state-22" title="§ 6.5 Global States and Properties">§ 6.5 Global States and Properties</a> </li><li> <a href="#ref-for-dfn-state-23" title="§ 6.6.1 Widget Attributes">§ 6.6.1 Widget Attributes</a> </li><li> <a href="#ref-for-dfn-state-24" title="§ 6.8 Definitions of States and Properties (all aria-* attributes)">§ 6.8 Definitions of States and Properties (all aria-* attributes)</a> <a href="#ref-for-dfn-state-25" title="Reference 2">(2)</a> <a href="#ref-for-dfn-state-26" title="Reference 3">(3)</a> <a href="#ref-for-dfn-state-27" title="Reference 4">(4)</a> <a href="#ref-for-dfn-state-28" title="Reference 5">(5)</a> <a href="#ref-for-dfn-state-29" title="Reference 6">(6)</a> <a href="#ref-for-dfn-state-30" title="Reference 7">(7)</a> </li><li> <a href="#ref-for-dfn-state-31" title="§ 8. Implementation in Host Languages">§ 8. Implementation in Host Languages</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-target-element" aria-label="Links in this document to definition: Target Element"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-target-element" aria-label="Permalink for definition: Target Element. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li>Not referenced in this document.</li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-unicode-braille" aria-label="Links in this document to definition: Unicode Braille Patterns"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-unicode-braille" aria-label="Permalink for definition: Unicode Braille Patterns. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-unicode-braille-1" title="§ 6.8 Definitions of States and Properties (all aria-* attributes)">§ 6.8 Definitions of States and Properties (all aria-* attributes)</a> <a href="#ref-for-dfn-unicode-braille-2" title="Reference 2">(2)</a> <a href="#ref-for-dfn-unicode-braille-3" title="Reference 3">(3)</a> <a href="#ref-for-dfn-unicode-braille-4" title="Reference 4">(4)</a> <a href="#ref-for-dfn-unicode-braille-5" title="Reference 5">(5)</a> <a href="#ref-for-dfn-unicode-braille-6" title="Reference 6">(6)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-widget" aria-label="Links in this document to definition: Widget"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-widget" aria-label="Permalink for definition: Widget. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-widget-1" title="§ 1.1 Rich Internet Application Accessibility">§ 1.1 Rich Internet Application Accessibility</a> <a href="#ref-for-dfn-widget-2" title="Reference 2">(2)</a> <a href="#ref-for-dfn-widget-3" title="Reference 3">(3)</a> </li><li> <a href="#ref-for-dfn-widget-4" title="§ 1.5.2 Testing Practices and Tools">§ 1.5.2 Testing Practices and Tools</a> </li><li> <a href="#ref-for-dfn-widget-5" title="§ 2. Important Terms">§ 2. Important Terms</a> </li><li> <a href="#ref-for-dfn-widget-6" title="§ 4.2 WAI-ARIA States and Properties">§ 4.2 WAI-ARIA States and Properties</a> </li><li> <a href="#ref-for-dfn-widget-7" title="§ 4.3 Managing Focus and Supporting Keyboard Navigation">§ 4.3 Managing Focus and Supporting Keyboard Navigation</a> <a href="#ref-for-dfn-widget-8" title="Reference 2">(2)</a> </li><li> <a href="#ref-for-dfn-widget-9" title="§ 5.1.3 Related Concepts">§ 5.1.3 Related Concepts</a> </li><li> <a href="#ref-for-dfn-widget-10" title="§ 5.2 Characteristics of Roles">§ 5.2 Characteristics of Roles</a> </li><li> <a href="#ref-for-dfn-widget-11" title="§ 5.3 Categorization of Roles">§ 5.3 Categorization of Roles</a> </li><li> <a href="#ref-for-dfn-widget-12" title="§ 5.4 Definition of Roles">§ 5.4 Definition of Roles</a> <a href="#ref-for-dfn-widget-13" title="Reference 2">(2)</a> <a href="#ref-for-dfn-widget-14" title="Reference 3">(3)</a> <a href="#ref-for-dfn-widget-15" title="Reference 4">(4)</a> <a href="#ref-for-dfn-widget-16" title="Reference 5">(5)</a> <a href="#ref-for-dfn-widget-17" title="Reference 6">(6)</a> <a href="#ref-for-dfn-widget-18" title="Reference 7">(7)</a> <a href="#ref-for-dfn-widget-19" title="Reference 8">(8)</a> <a href="#ref-for-dfn-widget-20" title="Reference 9">(9)</a> <a href="#ref-for-dfn-widget-21" title="Reference 10">(10)</a> <a href="#ref-for-dfn-widget-22" title="Reference 11">(11)</a> <a href="#ref-for-dfn-widget-23" title="Reference 12">(12)</a> </li><li> <a href="#ref-for-dfn-widget-24" title="§ 6.8 Definitions of States and Properties (all aria-* attributes)">§ 6.8 Definitions of States and Properties (all aria-* attributes)</a> <a href="#ref-for-dfn-widget-25" title="Reference 2">(2)</a> <a href="#ref-for-dfn-widget-26" title="Reference 3">(3)</a> <a href="#ref-for-dfn-widget-27" title="Reference 4">(4)</a> <a href="#ref-for-dfn-widget-28" title="Reference 5">(5)</a> <a href="#ref-for-dfn-widget-29" title="Reference 6">(6)</a> <a href="#ref-for-dfn-widget-30" title="Reference 7">(7)</a> <a href="#ref-for-dfn-widget-31" title="Reference 8">(8)</a> <a href="#ref-for-dfn-widget-32" title="Reference 9">(9)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-prohibited" aria-label="Links in this document to definition: Prohibited"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-prohibited" aria-label="Permalink for definition: Prohibited. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-prohibited-1" title="§ 9.3 Presentational Roles Conflict Resolution">§ 9.3 Presentational Roles Conflict Resolution</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-token-list" aria-label="Links in this document to definition: token list"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-token-list" aria-label="Permalink for definition: token list. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-token-list-1" title="§ 8.1 Role Attribute">§ 8.1 Role Attribute</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-global" aria-label="Links in this document to definition: Global"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-global" aria-label="Permalink for definition: Global. Activate to close this dialog.">Permalink</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-global-1" title="§ 9.3 Presentational Roles Conflict Resolution">§ 9.3 Presentational Roles Conflict Resolution</a> <a href="#ref-for-dfn-global-2" title="Reference 2">(2)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-accessibility-tree" aria-label="Links in this document to definition: Accessibility Tree"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-accessibility-tree" aria-label="Permalink for definition: Accessibility Tree. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-accessibility-tree-1" title="§ 2. Important Terms">§ 2. Important Terms</a> </li><li> <a href="#ref-for-dfn-accessibility-tree-2" title="§ 4.1 WAI-ARIA Roles">§ 4.1 WAI-ARIA Roles</a> </li><li> <a href="#ref-for-dfn-accessibility-tree-3" title="§ 5.4 Definition of Roles">§ 5.4 Definition of Roles</a> </li><li> <a href="#ref-for-dfn-accessibility-tree-4" title="§ 6.8 Definitions of States and Properties (all aria-* attributes)">§ 6.8 Definitions of States and Properties (all aria-* attributes)</a> <a href="#ref-for-dfn-accessibility-tree-5" title="Reference 2">(2)</a> <a href="#ref-for-dfn-accessibility-tree-6" title="Reference 3">(3)</a> <a href="#ref-for-dfn-accessibility-tree-7" title="Reference 4">(4)</a> </li><li> <a href="#ref-for-dfn-accessibility-tree-8" title="§ 7. Accessibility Tree">§ 7. Accessibility Tree</a> <a href="#ref-for-dfn-accessibility-tree-9" title="Reference 2">(2)</a> </li><li> <a href="#ref-for-dfn-accessibility-tree-10" title="§ 7.1 Excluding Elements from the Accessibility Tree">§ 7.1 Excluding Elements from the Accessibility Tree</a> </li><li> <a href="#ref-for-dfn-accessibility-tree-11" title="§ 7.2 Including Elements in the Accessibility Tree">§ 7.2 Including Elements in the Accessibility Tree</a> </li><li> <a href="#ref-for-dfn-accessibility-tree-12" title="§ 7.3 Relationships in the Accessibility Tree">§ 7.3 Relationships in the Accessibility Tree</a> <a href="#ref-for-dfn-accessibility-tree-13" title="Reference 2">(2)</a> <a href="#ref-for-dfn-accessibility-tree-14" title="Reference 3">(3)</a> <a href="#ref-for-dfn-accessibility-tree-15" title="Reference 4">(4)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-accessibility-child" aria-label="Links in this document to definition: accessibility children"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-accessibility-child" aria-label="Permalink for definition: accessibility children. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-accessibility-child-1" title="§ 5.2.6 Allowed Accessibility Child Roles">§ 5.2.6 Allowed Accessibility Child Roles</a> <a href="#ref-for-dfn-accessibility-child-2" title="Reference 2">(2)</a> </li><li> <a href="#ref-for-dfn-accessibility-child-3" title="§ 5.2.7 Required Accessibility Parent Role">§ 5.2.7 Required Accessibility Parent Role</a> </li><li> <a href="#ref-for-dfn-accessibility-child-4" title="§ 5.4 Definition of Roles">§ 5.4 Definition of Roles</a> <a href="#ref-for-dfn-accessibility-child-5" title="Reference 2">(2)</a> <a href="#ref-for-dfn-accessibility-child-6" title="Reference 3">(3)</a> <a href="#ref-for-dfn-accessibility-child-7" title="Reference 4">(4)</a> <a href="#ref-for-dfn-accessibility-child-8" title="Reference 5">(5)</a> <a href="#ref-for-dfn-accessibility-child-9" title="Reference 6">(6)</a> <a href="#ref-for-dfn-accessibility-child-10" title="Reference 7">(7)</a> <a href="#ref-for-dfn-accessibility-child-11" title="Reference 8">(8)</a> <a href="#ref-for-dfn-accessibility-child-12" title="Reference 9">(9)</a> <a href="#ref-for-dfn-accessibility-child-13" title="Reference 10">(10)</a> <a href="#ref-for-dfn-accessibility-child-14" title="Reference 11">(11)</a> <a href="#ref-for-dfn-accessibility-child-15" title="Reference 12">(12)</a> <a href="#ref-for-dfn-accessibility-child-16" title="Reference 13">(13)</a> <a href="#ref-for-dfn-accessibility-child-17" title="Reference 14">(14)</a> <a href="#ref-for-dfn-accessibility-child-18" title="Reference 15">(15)</a> <a href="#ref-for-dfn-accessibility-child-19" title="Reference 16">(16)</a> <a href="#ref-for-dfn-accessibility-child-20" title="Reference 17">(17)</a> <a href="#ref-for-dfn-accessibility-child-21" title="Reference 18">(18)</a> <a href="#ref-for-dfn-accessibility-child-22" title="Reference 19">(19)</a> <a href="#ref-for-dfn-accessibility-child-23" title="Reference 20">(20)</a> <a href="#ref-for-dfn-accessibility-child-24" title="Reference 21">(21)</a> <a href="#ref-for-dfn-accessibility-child-25" title="Reference 22">(22)</a> <a href="#ref-for-dfn-accessibility-child-26" title="Reference 23">(23)</a> <a href="#ref-for-dfn-accessibility-child-27" title="Reference 24">(24)</a> <a href="#ref-for-dfn-accessibility-child-28" title="Reference 25">(25)</a> <a href="#ref-for-dfn-accessibility-child-29" title="Reference 26">(26)</a> <a href="#ref-for-dfn-accessibility-child-30" title="Reference 27">(27)</a> <a href="#ref-for-dfn-accessibility-child-31" title="Reference 28">(28)</a> <a href="#ref-for-dfn-accessibility-child-32" title="Reference 29">(29)</a> <a href="#ref-for-dfn-accessibility-child-33" title="Reference 30">(30)</a> <a href="#ref-for-dfn-accessibility-child-34" title="Reference 31">(31)</a> <a href="#ref-for-dfn-accessibility-child-35" title="Reference 32">(32)</a> <a href="#ref-for-dfn-accessibility-child-36" title="Reference 33">(33)</a> <a href="#ref-for-dfn-accessibility-child-37" title="Reference 34">(34)</a> </li><li> <a href="#ref-for-dfn-accessibility-child-38" title="§ 6.8 Definitions of States and Properties (all aria-* attributes)">§ 6.8 Definitions of States and Properties (all aria-* attributes)</a> <a href="#ref-for-dfn-accessibility-child-39" title="Reference 2">(2)</a> <a href="#ref-for-dfn-accessibility-child-40" title="Reference 3">(3)</a> <a href="#ref-for-dfn-accessibility-child-41" title="Reference 4">(4)</a> <a href="#ref-for-dfn-accessibility-child-42" title="Reference 5">(5)</a> <a href="#ref-for-dfn-accessibility-child-43" title="Reference 6">(6)</a> <a href="#ref-for-dfn-accessibility-child-44" title="Reference 7">(7)</a> <a href="#ref-for-dfn-accessibility-child-45" title="Reference 8">(8)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-accessibility-descendant" aria-label="Links in this document to definition: accessibility descendants"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-accessibility-descendant" aria-label="Permalink for definition: accessibility descendants. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-accessibility-descendant-1" title="§ 4.3.2 Information for User Agents">§ 4.3.2 Information for User Agents</a> <a href="#ref-for-dfn-accessibility-descendant-2" title="Reference 2">(2)</a> <a href="#ref-for-dfn-accessibility-descendant-3" title="Reference 3">(3)</a> <a href="#ref-for-dfn-accessibility-descendant-4" title="Reference 4">(4)</a> </li><li> <a href="#ref-for-dfn-accessibility-descendant-5" title="§ 5.4 Definition of Roles">§ 5.4 Definition of Roles</a> <a href="#ref-for-dfn-accessibility-descendant-6" title="Reference 2">(2)</a> <a href="#ref-for-dfn-accessibility-descendant-7" title="Reference 3">(3)</a> <a href="#ref-for-dfn-accessibility-descendant-8" title="Reference 4">(4)</a> <a href="#ref-for-dfn-accessibility-descendant-9" title="Reference 5">(5)</a> <a href="#ref-for-dfn-accessibility-descendant-10" title="Reference 6">(6)</a> <a href="#ref-for-dfn-accessibility-descendant-11" title="Reference 7">(7)</a> <a href="#ref-for-dfn-accessibility-descendant-12" title="Reference 8">(8)</a> <a href="#ref-for-dfn-accessibility-descendant-13" title="Reference 9">(9)</a> </li><li> <a href="#ref-for-dfn-accessibility-descendant-14" title="§ 6.8 Definitions of States and Properties (all aria-* attributes)">§ 6.8 Definitions of States and Properties (all aria-* attributes)</a> <a href="#ref-for-dfn-accessibility-descendant-15" title="Reference 2">(2)</a> <a href="#ref-for-dfn-accessibility-descendant-16" title="Reference 3">(3)</a> <a href="#ref-for-dfn-accessibility-descendant-17" title="Reference 4">(4)</a> </li><li> <a href="#ref-for-dfn-accessibility-descendant-18" title="§ 9.2 States and Properties">§ 9.2 States and Properties</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-accessibility-parent" aria-label="Links in this document to definition: accessibility parent"> <span class="caret"></span> <div> <a class="self-link" href="#dfn-accessibility-parent" aria-label="Permalink for definition: accessibility parent. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dfn-accessibility-parent-1" title="§ 5.2.7 Required Accessibility Parent Role">§ 5.2.7 Required Accessibility Parent Role</a> </li><li> <a href="#ref-for-dfn-accessibility-parent-2" title="§ 5.4 Definition of Roles">§ 5.4 Definition of Roles</a> <a href="#ref-for-dfn-accessibility-parent-3" title="Reference 2">(2)</a> <a href="#ref-for-dfn-accessibility-parent-4" title="Reference 3">(3)</a> <a href="#ref-for-dfn-accessibility-parent-5" title="Reference 4">(4)</a> <a href="#ref-for-dfn-accessibility-parent-6" title="Reference 5">(5)</a> <a href="#ref-for-dfn-accessibility-parent-7" title="Reference 6">(6)</a> <a href="#ref-for-dfn-accessibility-parent-8" title="Reference 7">(7)</a> <a href="#ref-for-dfn-accessibility-parent-9" title="Reference 8">(8)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin" aria-label="Links in this document to definition: ARIAMixin"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin" aria-label="Permalink for definition: ARIAMixin. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> <a href="#ref-for-dom-ariamixin-2" title="Reference 2">(2)</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-role" aria-label="Links in this document to definition: role"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-role" aria-label="Permalink for definition: role. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> </div> <p><b>Referenced in:</b></p> <ul> <li>Not referenced in this document.</li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariaactivedescendantelement" aria-label="Links in this document to definition: ariaActiveDescendantElement"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariaactivedescendantelement" aria-label="Permalink for definition: ariaActiveDescendantElement. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariaactivedescendantelement-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariaatomic" aria-label="Links in this document to definition: ariaAtomic"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariaatomic" aria-label="Permalink for definition: ariaAtomic. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariaatomic-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariaautocomplete" aria-label="Links in this document to definition: ariaAutoComplete"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariaautocomplete" aria-label="Permalink for definition: ariaAutoComplete. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariaautocomplete-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariabraillelabel" aria-label="Links in this document to definition: ariaBrailleLabel"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariabraillelabel" aria-label="Permalink for definition: ariaBrailleLabel. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariabraillelabel-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariabrailleroledescription" aria-label="Links in this document to definition: ariaBrailleRoleDescription"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariabrailleroledescription" aria-label="Permalink for definition: ariaBrailleRoleDescription. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariabrailleroledescription-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariabusy" aria-label="Links in this document to definition: ariaBusy"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariabusy" aria-label="Permalink for definition: ariaBusy. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariabusy-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariachecked" aria-label="Links in this document to definition: ariaChecked"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariachecked" aria-label="Permalink for definition: ariaChecked. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariachecked-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariacolcount" aria-label="Links in this document to definition: ariaColCount"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariacolcount" aria-label="Permalink for definition: ariaColCount. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariacolcount-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariacolindex" aria-label="Links in this document to definition: ariaColIndex"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariacolindex" aria-label="Permalink for definition: ariaColIndex. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariacolindex-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariacolindextext" aria-label="Links in this document to definition: ariaColIndexText"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariacolindextext" aria-label="Permalink for definition: ariaColIndexText. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariacolindextext-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariacolspan" aria-label="Links in this document to definition: ariaColSpan"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariacolspan" aria-label="Permalink for definition: ariaColSpan. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariacolspan-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariacontrolselements" aria-label="Links in this document to definition: ariaControlsElements"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariacontrolselements" aria-label="Permalink for definition: ariaControlsElements. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariacontrolselements-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariacurrent" aria-label="Links in this document to definition: ariaCurrent"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariacurrent" aria-label="Permalink for definition: ariaCurrent. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariacurrent-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariadescribedbyelements" aria-label="Links in this document to definition: ariaDescribedByElements"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariadescribedbyelements" aria-label="Permalink for definition: ariaDescribedByElements. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariadescribedbyelements-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariadescription" aria-label="Links in this document to definition: ariaDescription"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariadescription" aria-label="Permalink for definition: ariaDescription. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariadescription-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariadetailselements" aria-label="Links in this document to definition: ariaDetailsElements"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariadetailselements" aria-label="Permalink for definition: ariaDetailsElements. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariadetailselements-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariadisabled" aria-label="Links in this document to definition: ariaDisabled"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariadisabled" aria-label="Permalink for definition: ariaDisabled. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariadisabled-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariaerrormessageelements" aria-label="Links in this document to definition: ariaErrorMessageElements"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariaerrormessageelements" aria-label="Permalink for definition: ariaErrorMessageElements. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariaerrormessageelements-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariaexpanded" aria-label="Links in this document to definition: ariaExpanded"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariaexpanded" aria-label="Permalink for definition: ariaExpanded. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariaexpanded-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariaflowtoelements" aria-label="Links in this document to definition: ariaFlowToElements"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariaflowtoelements" aria-label="Permalink for definition: ariaFlowToElements. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariaflowtoelements-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariahaspopup" aria-label="Links in this document to definition: ariaHasPopup"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariahaspopup" aria-label="Permalink for definition: ariaHasPopup. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariahaspopup-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariahidden" aria-label="Links in this document to definition: ariaHidden"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariahidden" aria-label="Permalink for definition: ariaHidden. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariahidden-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariainvalid" aria-label="Links in this document to definition: ariaInvalid"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariainvalid" aria-label="Permalink for definition: ariaInvalid. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariainvalid-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariakeyshortcuts" aria-label="Links in this document to definition: ariaKeyShortcuts"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariakeyshortcuts" aria-label="Permalink for definition: ariaKeyShortcuts. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariakeyshortcuts-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-arialabel" aria-label="Links in this document to definition: ariaLabel"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-arialabel" aria-label="Permalink for definition: ariaLabel. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-arialabel-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-arialabelledbyelements" aria-label="Links in this document to definition: ariaLabelledByElements"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-arialabelledbyelements" aria-label="Permalink for definition: ariaLabelledByElements. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-arialabelledbyelements-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-arialevel" aria-label="Links in this document to definition: ariaLevel"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-arialevel" aria-label="Permalink for definition: ariaLevel. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-arialevel-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-arialive" aria-label="Links in this document to definition: ariaLive"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-arialive" aria-label="Permalink for definition: ariaLive. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-arialive-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariamodal" aria-label="Links in this document to definition: ariaModal"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariamodal" aria-label="Permalink for definition: ariaModal. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariamodal-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariamultiline" aria-label="Links in this document to definition: ariaMultiLine"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariamultiline" aria-label="Permalink for definition: ariaMultiLine. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariamultiline-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariamultiselectable" aria-label="Links in this document to definition: ariaMultiSelectable"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariamultiselectable" aria-label="Permalink for definition: ariaMultiSelectable. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariamultiselectable-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariaorientation" aria-label="Links in this document to definition: ariaOrientation"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariaorientation" aria-label="Permalink for definition: ariaOrientation. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariaorientation-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariaownselements" aria-label="Links in this document to definition: ariaOwnsElements"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariaownselements" aria-label="Permalink for definition: ariaOwnsElements. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariaownselements-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariaplaceholder" aria-label="Links in this document to definition: ariaPlaceholder"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariaplaceholder" aria-label="Permalink for definition: ariaPlaceholder. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariaplaceholder-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariaposinset" aria-label="Links in this document to definition: ariaPosInSet"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariaposinset" aria-label="Permalink for definition: ariaPosInSet. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariaposinset-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariapressed" aria-label="Links in this document to definition: ariaPressed"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariapressed" aria-label="Permalink for definition: ariaPressed. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariapressed-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariareadonly" aria-label="Links in this document to definition: ariaReadOnly"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariareadonly" aria-label="Permalink for definition: ariaReadOnly. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariareadonly-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariarelevant" aria-label="Links in this document to definition: ariaRelevant"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariarelevant" aria-label="Permalink for definition: ariaRelevant. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariarelevant-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariarequired" aria-label="Links in this document to definition: ariaRequired"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariarequired" aria-label="Permalink for definition: ariaRequired. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariarequired-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariaroledescription" aria-label="Links in this document to definition: ariaRoleDescription"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariaroledescription" aria-label="Permalink for definition: ariaRoleDescription. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariaroledescription-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariarowcount" aria-label="Links in this document to definition: ariaRowCount"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariarowcount" aria-label="Permalink for definition: ariaRowCount. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariarowcount-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariarowindex" aria-label="Links in this document to definition: ariaRowIndex"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariarowindex" aria-label="Permalink for definition: ariaRowIndex. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariarowindex-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariarowindextext" aria-label="Links in this document to definition: ariaRowIndexText"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariarowindextext" aria-label="Permalink for definition: ariaRowIndexText. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariarowindextext-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariarowspan" aria-label="Links in this document to definition: ariaRowSpan"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariarowspan" aria-label="Permalink for definition: ariaRowSpan. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariarowspan-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariaselected" aria-label="Links in this document to definition: ariaSelected"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariaselected" aria-label="Permalink for definition: ariaSelected. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariaselected-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariasetsize" aria-label="Links in this document to definition: ariaSetSize"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariasetsize" aria-label="Permalink for definition: ariaSetSize. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariasetsize-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariasort" aria-label="Links in this document to definition: ariaSort"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariasort" aria-label="Permalink for definition: ariaSort. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariasort-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariavaluemax" aria-label="Links in this document to definition: ariaValueMax"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariavaluemax" aria-label="Permalink for definition: ariaValueMax. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariavaluemax-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariavaluemin" aria-label="Links in this document to definition: ariaValueMin"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariavaluemin" aria-label="Permalink for definition: ariaValueMin. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariavaluemin-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariavaluenow" aria-label="Links in this document to definition: ariaValueNow"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariavaluenow" aria-label="Permalink for definition: ariaValueNow. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariavaluenow-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</a> </li> </ul> </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dom-ariamixin-ariavaluetext" aria-label="Links in this document to definition: ariaValueText"> <span class="caret"></span> <div> <a class="self-link" href="#dom-ariamixin-ariavaluetext" aria-label="Permalink for definition: ariaValueText. Activate to close this dialog.">Permalink</a> <span class="marker dfn-exported" title="Definition can be referenced by other specifications">exported</span> <a class="marker idl-block" title="Jump to IDL declaration" href="#webidl-622806144">IDL</a> </div> <p><b>Referenced in:</b></p> <ul> <li> <a href="#ref-for-dom-ariamixin-ariavaluetext-1" title="§ 10.1 Interface Mixin ARIAMixin">§ 10.1 Interface Mixin ARIAMixin</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>