CINXE.COM

<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><style data-href="/styles.fc3baab3d7de67a53bc0.css" id="gatsby-global-css">.page-glossary{margin:2rem 0;padding:0 3rem;width:100%}.page-glossary h1{border-bottom:1px solid #f3f4f6;padding:2rem 0;margin:0;text-decoration:none}.page-glossary h1>p{margin:0}.page-glossary h2:hover,.page-glossary h3:hover,.page-glossary h4:hover,.page-glossary h5:hover,.page-glossary h6:hover{text-decoration:underline}.page-glossary .listing>article{padding:1rem;position:relative;background-color:rgba(243,244,246,.5);box-shadow:0 0 12px rgba(0,0,0,.2);margin-bottom:1.5rem;display:flex}.page-glossary .listing>article:hover{outline:2px solid #2aabff}.page-glossary .listing>article h2,.page-glossary .listing>article h3{margin:0}.page-glossary .listing>article i{font-family:Courier New,Courier,monospace}.page-glossary .listing>article>section{flex:1 1;padding-right:.5rem}.page-glossary .listing>article>div.used-rules{padding:1.5rem 1.5rem 1.5rem 0;width:30%}.page-glossary .listing>article>div.used-rules ul{margin:0;padding:0;list-style:none}.page-glossary .listing>article>div.used-rules a{display:block;text-transform:capitalize}.page-glossary .listing>article>div.used-rules a p{margin:.25rem}.page-glossary .listing.md>article,.page-glossary .listing.sm>article{flex-direction:column}.page-glossary .listing.md>article>aside,.page-glossary .listing.md>article>div.used-rules,.page-glossary .listing.sm>article>aside,.page-glossary .listing.sm>article>div.used-rules{width:100%!important}.appLogo>a{color:#2aabff;text-decoration:none}.appLogo>a>h1{padding:3rem 1rem;margin:0;color:#2aabff;font-weight:bolder}aside.navigation{height:100%;display:flex;flex-direction:column;flex-grow:1;overflow-y:auto;flex-shrink:0;background-color:#091832;color:#fefefe;width:225px;position:relative;left:0;box-shadow:2px 0 5px 2px rgba(0,0,0,.25)}aside.navigation.hide{left:-225px;position:absolute}aside.navigation>div.logo{flex-shrink:0}aside.navigation>nav>ul{margin:0;list-style:none;padding:0 0 0 1rem}aside.navigation>nav>ul>li{transition:all ease}aside.navigation>nav>ul>li a,aside.navigation>nav>ul>li p{font-family:Roboto,sans-serif;color:#fefefe;text-decoration:none;margin:1rem 0;display:block;text-transform:capitalize;font-size:.83em;position:relative}aside.navigation>nav>ul>li a.active,aside.navigation>nav>ul>li a:hover,aside.navigation>nav>ul>li p.active,aside.navigation>nav>ul>li p:hover{color:#2aabff}aside.navigation>nav>ul>li a.active:after,aside.navigation>nav>ul>li p.active:after{opacity:1}aside.navigation>nav>ul>li a.parent-item,aside.navigation>nav>ul>li p.parent-item{color:currentColor}aside.navigation>nav>ul>li a:after,aside.navigation>nav>ul>li p:after{content:"";right:0;top:-10px;height:30px;position:absolute;width:7px;background-color:#2aabff;opacity:0}aside.navigation>nav>ul>li>ul{margin:0;padding:0;list-style:none;-webkit-padding-start:1rem;padding-inline-start:1rem;-webkit-padding-end:0;padding-inline-end:0}aside.navigation>nav>ul>li>ul>li>a{text-transform:capitalize;padding-right:1rem}header.appHeader{color:#091832;width:auto;box-shadow:1px 1px 5px rgba(0,0,0,.25);display:flex;align-items:center;z-index:1}header.appHeader div.name{margin:0 1rem;flex:1 1}header.appHeader div.logos{padding:0 1rem;display:flex;flex-direction:row;justify-content:center}header.appHeader div.logos a.logo-github svg{color:inherit;vertical-align:middle}header.appHeader div.logos a.logo-github svg path{fill:#091832}header.appHeader div.logos a.logo-github:hover svg path{fill:#005790}footer.appFooter{color:#091832;width:auto;box-shadow:1px 1px 5px rgba(0,0,0,.25);display:flex;font-size:85%;align-items:center;z-index:1}footer.appFooter a{color:#2aabff}footer.appFooter h2{padding:.75rem 0;margin:0;color:#2aabff;font-weight:bolder;width:150px}footer.appFooter div.tags{padding:0 1rem;flex:1 1}footer.appFooter div.tags p.tag{font-size:75%;font-style:italic;opacity:.9}footer.appFooter div.tags p.tag a{color:#005790}footer.appFooter div.logos{padding:0 1rem;display:flex;flex-direction:row;justify-content:center}footer.appFooter div.logos a.logo-w3c{margin-top:.25rem;margin-right:1rem}footer.appFooter div.logos a.logo-w3c svg{color:inherit;vertical-align:middle}footer.appFooter div.logos a.logo-w3c svg path{fill:#091832}footer.appFooter div.logos a.logo-w3c:hover svg path{fill:#005790}footer.appFooter div.logos a.logo-wai{color:#005790;color:#091832;margin-right:1rem;text-decoration:none}footer.appFooter div.logos a.logo-wai:hover span{color:#005790}footer.appFooter div.logos a.logo-wai span.wai{font-size:.75rem;display:flex;justify-content:center;flex-direction:column}footer.appFooter div.logos a.logo-wai span.wai span.wa{padding-bottom:2px}footer.appFooter div.logos a.logo-wai span.wai span.i{border-top:1px solid #eed009;padding-top:2px;display:flex;justify-content:space-between}footer.appFooter div.logos a.logo-github svg{color:inherit;vertical-align:middle}footer.appFooter div.logos a.logo-github svg path{fill:#091832}footer.appFooter div.logos a.logo-github:hover svg path{fill:#005790} /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}body{font-family:Lora,serif}h1,h2,h3,h4,h5,h6{font-family:Roboto,sans-serif;color:#036;text-decoration:none;margin:1rem 0;display:block}ul{margin:0}hr{opacity:.1}a{color:#0067aa;font-weight:500}a:hover{opacity:.9}table{border-collapse:collapse;width:100%;table-layout:fixed}table thead{border-bottom:1px solid #2aabff}table thead th{font-family:Roboto,sans-serif;color:#036;text-decoration:none;margin:1rem 0;display:block;font-weight:300;font-style:italic;text-align:left;font-size:85%;display:table-cell;background-color:#f3f4f6;padding:.2rem 0;text-overflow:ellipsis;overflow:hidden}table tbody tr{border-bottom:1px solid #f3f4f6}table tbody tr td{padding:.2rem 0;text-overflow:ellipsis;overflow:hidden}table tbody tr td.capitalize{text-transform:capitalize}table tbody tr td a{text-decoration:none;display:inline-block;margin:0 .5em 0 0;text-overflow:ellipsis;overflow:hidden}table tbody tr td a svg{fill:currentColor}table tbody tr td a:active,table tbody tr td a:focus,table tbody tr td a:hover{color:#001a33;border:none}table.compact tbody tr{border-bottom:none}table.compact tbody tr td{padding:none}.btn,button{padding:1em;text-decoration:none;line-height:1em;display:inline-block;letter-spacing:.1em;transition:border-color .2s ease-in-out,background .2s ease-in-out,color .2s ease-in-out;border:3px solid #2aabff;color:#fefefe;background:#091832;cursor:pointer}.btn:active,.btn:focus,.btn:hover,button:active,button:focus,button:hover{color:#091832;background:#fefefe;border-color:#091832}.btn.btn-secondary,button.btn-secondary{border:3px solid transparent;color:#fefefe;background:#091832}.btn.btn-secondary:active,.btn.btn-secondary:focus,.btn.btn-secondary:hover,button.btn-secondary:active,button.btn-secondary:focus,button.btn-secondary:hover{color:#2aabff}.btn.btn-secondary:active,button.btn-secondary:active{transform:translate(1px,1px)}blockquote{margin:2rem 0;background-color:#f6fbff;border:1px solid #2aabff;padding:1rem}figure{background:#ffe;margin:0 1em;padding:.5em 1em;border:1px solid #880;border-radius:4px;display:inline-block}figure>figcaption{margin-bottom:.5em}figure>img{display:block;margin:0 auto}.hide{display:none!important}code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;text-align:left;white-space:pre-wrap;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:0}:not(pre)>code[class*=language-],pre[class*=language-]{background:#091832}:not(pre)>code[class*=language-]{padding:.1em;border-radius:0;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#d4d0ab}.token.punctuation{color:#fefefe}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#ffa07a}.token.boolean,.token.number{color:#00e0e0}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#abe338}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#00e0e0}.token.atrule,.token.attr-value,.token.function{color:gold}.token.keyword{color:#00e0e0}.token.important,.token.regex{color:gold}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}@media screen and (-ms-high-contrast:active){code[class*=language-],pre[class*=language-]{color:windowText;background:window}:not(pre)>code[class*=language-],pre[class*=language-]{background:window}.token.important{background:highlight;color:window;font-weight:400}.token.atrule,.token.attr-value,.token.function,.token.keyword,.token.operator,.token.selector{font-weight:700}.token.attr-value,.token.comment,.token.doctype,.token.function,.token.keyword,.token.operator,.token.property,.token.string{color:highlight}.token.attr-value,.token.url{font-weight:400}}.language-text{background:#fff!important;color:#036!important;font-weight:700;padding:.1em;border-radius:0;white-space:normal}.language-text,code{line-height:1.5;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace}section.layoutContainer{position:fixed;left:0;right:0;top:0;bottom:0;overflow:hidden;display:flex}section.layoutContainer>main{height:100%;display:flex;flex-direction:column;width:100%;background-color:#fff}section.layoutContainer>main>section{width:auto;display:flex;flex-direction:row;flex-grow:1;overflow-y:auto;color:#000;line-height:1.5}section.layoutContainer.hasMenu>main{width:calc(100% - 225px)}div.note{padding:.5rem 1rem;border:1px solid #2aabff;border-left-width:4px;background-color:rgba(42,171,255,.4)}div.note>b{padding:.25rem 0;text-transform:uppercase;display:block;margin:0}div.note>p{margin:0}div.note.valid{border-color:#00a4b8;background-color:rgba(0,164,184,.4)}div.note.invalid{border-color:#ffa181;background-color:rgba(255,161,129,.4)}div.ruleHeader{display:flex;justify-content:space-between;align-items:center}div.ruleHeader>div.childContainer{display:flex;justify-content:flex-end}div.badge{display:inline-flex;align-items:center;font-size:85%;font-weight:700;margin-right:1rem}div.badge>span.title{font-style:italic;font-weight:400;padding-right:.15rem;margin-right:.15rem;text-transform:capitalize;text-align:right}.page-implementer{margin:2rem 0;padding:0 3rem;width:100%;counter-reset:item 0}.page-implementer h1{border-bottom:1px solid #f3f4f6;padding:2rem 0;margin:0;text-decoration:none}.page-implementer h1>p{margin:0}.page-implementer h2:hover,.page-implementer h3:hover,.page-implementer h4:hover,.page-implementer h5:hover,.page-implementer h6:hover{text-decoration:underline}.page-implementer .cardItem{padding:1rem;margin-bottom:1.5rem;background-color:rgba(243,244,246,.5);box-shadow:0 0 12px rgba(0,0,0,.2);position:relative}.page-implementer .cardItem:hover{outline:2px solid #2aabff}.page-implementer .cardItem h2,.page-implementer .cardItem p{margin:0}.page-implementer .cardItem:before{opacity:0;counter-increment:item;content:counter(item);position:absolute;left:-20px}article.ruleCard{padding:1rem;margin-bottom:1.5rem;display:flex;flex-direction:column;background-color:rgba(243,244,246,.5);box-shadow:0 0 12px rgba(0,0,0,.2)}article.ruleCard:hover{outline:2px solid #2aabff}article.ruleCard div.meta h3.heading,article.ruleCard div.meta span.heading{padding:.25rem .5rem;background-color:#f3f4f6;border:1px solid transparent;text-transform:capitalize;display:inline-block;font-weight:700;margin-top:1em;font-size:90%;color:inherit;cursor:auto}article.ruleCard div.meta h3.heading:hover,article.ruleCard div.meta span.heading:hover{text-decoration:none}article.ruleCard div.meta a.sc-item{cursor:pointer;text-transform:capitalize}article.ruleCard div.meta a.sc-item:hover{opacity:.9}article.ruleCard div.meta a.sc-item p{margin:0;padding:0}article.ruleCard>section{flex:1 1}article.ruleCard>section>a{text-decoration:none}article.ruleCard>section h2{margin:0 0 .5rem}article.ruleCard>section h2>p{margin:0}article.ruleCard>section:last-child{border-bottom:none}form.rulesFilter{padding:2rem 0}form.rulesFilter div.filterTextInputGroup>label{display:block;margin-bottom:.25rem}form.rulesFilter div.filterTextInputGroup>input{padding:.5rem .2rem;min-width:240px;background-color:#f3f4f6}form.rulesFilter div.filterTextInputGroup>small{font-size:80%;font-style:italic;display:block;text-align:right}.page-rules{padding:0 3rem;display:flex;flex-direction:column;margin:0;height:100%;width:100%}.page-rules h1{border-bottom:1px solid #f3f4f6;padding:2rem 0;margin:0;text-decoration:none}.page-rules h1>p{margin:0}.page-rules h2:hover,.page-rules h3:hover,.page-rules h4:hover,.page-rules h5:hover,.page-rules h6:hover{text-decoration:underline}.page-rules h1{border:none;padding:.5rem 0;margin-bottom:0}.page-rules>header.titleAndFilter{display:flex;align-items:center}.page-rules>header.titleAndFilter>h1{flex:1 1}.page-rules>section.content{padding:1rem 0}.page-rules.sm>header.titleAndFilter{display:block}.page-rules.sm>header.titleAndFilter>form{padding:1rem 0}.page-rules.sm>header.titleAndFilter>form input{width:100%}.page-changelog{margin:2rem 0;padding:0 3rem;width:100%}.page-changelog h1{border-bottom:1px solid #f3f4f6;padding:2rem 0;margin:0;text-decoration:none}.page-changelog h1>p{margin:0}.page-changelog h2:hover,.page-changelog h3:hover,.page-changelog h4:hover,.page-changelog h5:hover,.page-changelog h6:hover{text-decoration:underline}.page-default{margin:2rem 0;padding:0 3rem;width:100%}.page-default h1{border-bottom:1px solid #f3f4f6;padding:2rem 0;margin:0;text-decoration:none}.page-default h1>p{margin:0}.page-default h2:hover,.page-default h3:hover,.page-default h4:hover,.page-default h5:hover,.page-default h6:hover{text-decoration:underline}.page-implementations{margin:2rem 0;padding:0 3rem;width:100%}.page-implementations h1{border-bottom:1px solid #f3f4f6;padding:2rem 0;margin:0;text-decoration:none}.page-implementations h1>p{margin:0}.page-implementations h2:hover,.page-implementations h3:hover,.page-implementations h4:hover,.page-implementations h5:hover,.page-implementations h6:hover{text-decoration:underline}.page-implementer-incomplete{margin:2rem 0;padding:0 3rem;width:100%;counter-reset:item 0}.page-implementer-incomplete h1{border-bottom:1px solid #f3f4f6;padding:2rem 0;margin:0;text-decoration:none}.page-implementer-incomplete h1>p{margin:0}.page-implementer-incomplete h2:hover,.page-implementer-incomplete h3:hover,.page-implementer-incomplete h4:hover,.page-implementer-incomplete h5:hover,.page-implementer-incomplete h6:hover{text-decoration:underline}.page-implementer-incomplete .cardItem{padding:1rem;margin-bottom:1.5rem;background-color:rgba(243,244,246,.5);box-shadow:0 0 12px rgba(0,0,0,.2);position:relative}.page-implementer-incomplete .cardItem:hover{outline:2px solid #2aabff}.page-implementer-incomplete .cardItem h2,.page-implementer-incomplete .cardItem p{margin:0}.page-implementer-incomplete .cardItem:before{opacity:0;counter-increment:item;content:counter(item);position:absolute;left:-20px}section.tableOfContents{background-color:#f3f4f6;min-width:225px;max-width:300px;overflow:auto;font-size:85%;padding-bottom:3rem}section.tableOfContents span.heading{padding:.25rem .5rem;font-family:Roboto,sans-serif;color:#036;text-decoration:none;display:block;text-transform:capitalize;margin:1rem .5rem .5rem 0;display:inline-block}section.tableOfContents span.heading:first-child{margin-top:6rem}section.tableOfContents ul{padding:0;list-style:none;margin:.5rem 0}section.tableOfContents ul li a,section.tableOfContents ul li span{display:inline-block}section.tableOfContents ul li a{cursor:pointer;text-decoration:none;padding:0 1rem;display:block}section.tableOfContents ul li a:hover{color:#2aabff}section.tableOfContents ul ul{margin-left:1rem}.page-rule{width:100%;margin:0;padding:3rem;overflow-y:auto}.page-rule h1{border-bottom:1px solid #f3f4f6;padding:2rem 0;margin:0;text-decoration:none}.page-rule h1>p{margin:0}.page-rule h2:hover,.page-rule h3:hover,.page-rule h4:hover,.page-rule h5:hover,.page-rule h6:hover{text-decoration:underline}.page-rule div.open-ex-new-tab-wrapper{display:flex;justify-content:space-between;align-items:baseline}.page-rule div.open-ex-new-tab-wrapper>h4{margin-bottom:0}.page-rule div.meta,.page-rule ul.meta{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;justify-content:space-between}.page-rule div.meta h3.heading,.page-rule div.meta span.heading,.page-rule ul.meta h3.heading,.page-rule ul.meta span.heading{padding:.25rem .5rem;background-color:#f3f4f6;border:1px solid transparent;text-transform:capitalize;display:inline-flex;font-weight:700;margin-top:1em;font-size:90%;color:#036;cursor:auto}.page-rule div.meta h3.heading:hover,.page-rule div.meta span.heading:hover,.page-rule ul.meta h3.heading:hover,.page-rule ul.meta span.heading:hover{text-decoration:none}.page-rule div.meta p,.page-rule ul.meta p{margin:0;display:block;padding:.25rem .5rem;text-transform:capitalize}.page-rule div.meta a.sc-item,.page-rule ul.meta a.sc-item{cursor:pointer;text-transform:capitalize}.page-rule div.meta a.sc-item:hover,.page-rule ul.meta a.sc-item:hover{opacity:.9}.page-rule div.meta a.sc-item.block,.page-rule ul.meta a.sc-item.block{display:block}.page-rule div.meta a.sc-item.block p,.page-rule ul.meta a.sc-item.block p{margin:0;padding:0}</style><meta name="generator" content="Gatsby 2.32.13"/><title data-react-helmet="true">Rule | Video element visual-only content has accessible alternative | ACT-Rules Community</title><meta data-react-helmet="true" http-equiv="Cache-Control" content="public, max-age=0, must-revalidate"/><meta data-react-helmet="true" http-equiv="Pragma" content="no-cache"/><meta data-react-helmet="true" http-equiv="Expires" content="0"/><link rel="icon" href="/favicon-32x32.png?v=6fe933b597bc422f15f1d811c829b29e" type="image/png"/><link rel="manifest" href="/manifest.webmanifest" crossorigin="anonymous"/><link rel="apple-touch-icon" sizes="48x48" href="/icons/icon-48x48.png?v=6fe933b597bc422f15f1d811c829b29e"/><link rel="apple-touch-icon" sizes="72x72" href="/icons/icon-72x72.png?v=6fe933b597bc422f15f1d811c829b29e"/><link rel="apple-touch-icon" sizes="96x96" href="/icons/icon-96x96.png?v=6fe933b597bc422f15f1d811c829b29e"/><link rel="apple-touch-icon" sizes="144x144" href="/icons/icon-144x144.png?v=6fe933b597bc422f15f1d811c829b29e"/><link rel="apple-touch-icon" sizes="192x192" href="/icons/icon-192x192.png?v=6fe933b597bc422f15f1d811c829b29e"/><link rel="apple-touch-icon" sizes="256x256" href="/icons/icon-256x256.png?v=6fe933b597bc422f15f1d811c829b29e"/><link rel="apple-touch-icon" sizes="384x384" href="/icons/icon-384x384.png?v=6fe933b597bc422f15f1d811c829b29e"/><link rel="apple-touch-icon" sizes="512x512" href="/icons/icon-512x512.png?v=6fe933b597bc422f15f1d811c829b29e"/><link rel="preload" as="font" type="font/woff2" crossorigin="anonymous" href="/static/webfonts/s/lora/v24/0QI6MX1D_JOuGQbT0gvTJPa787weuxJBkq0.woff2"/><link rel="preload" as="font" type="font/woff2" crossorigin="anonymous" href="/static/webfonts/s/lora/v24/0QI6MX1D_JOuGQbT0gvTJPa787z5vBJBkq0.woff2"/><link rel="preload" as="font" type="font/woff2" crossorigin="anonymous" href="/static/webfonts/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2"/><link rel="preload" as="font" type="font/woff2" crossorigin="anonymous" href="/static/webfonts/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfBBc4.woff2"/><style>@font-face{font-family:Lora;font-style:normal;font-weight:400;src:url(/static/webfonts/s/lora/v24/0QI6MX1D_JOuGQbT0gvTJPa787weuxJBkq0.woff2) format("woff2");font-display:swap}@font-face{font-family:Lora;font-style:normal;font-weight:700;src:url(/static/webfonts/s/lora/v24/0QI6MX1D_JOuGQbT0gvTJPa787z5vBJBkq0.woff2) format("woff2");font-display:swap}@font-face{font-family:Lora;font-style:normal;font-weight:400;src:url(/static/webfonts/s/lora/v24/0QI6MX1D_JOuGQbT0gvTJPa787weuxJBkqs.woff) format("woff");font-display:swap}@font-face{font-family:Lora;font-style:normal;font-weight:700;src:url(/static/webfonts/s/lora/v24/0QI6MX1D_JOuGQbT0gvTJPa787z5vBJBkqs.woff) format("woff");font-display:swap}@font-face{font-family:Roboto;font-style:normal;font-weight:400;src:url(/static/webfonts/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2) format("woff2");font-display:swap}@font-face{font-family:Roboto;font-style:normal;font-weight:700;src:url(/static/webfonts/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format("woff2");font-display:swap}@font-face{font-family:Roboto;font-style:normal;font-weight:400;src:url(/static/webfonts/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxM.woff) format("woff");font-display:swap}@font-face{font-family:Roboto;font-style:normal;font-weight:700;src:url(/static/webfonts/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfBBc-.woff) format("woff");font-display:swap}</style><style type="text/css"> .anchor.before { position: absolute; top: 0; left: 0; transform: translateX(-100%); padding-right: 4px; } .anchor.after { display: inline-block; padding-left: 4px; } h1 .anchor svg, h2 .anchor svg, h3 .anchor svg, h4 .anchor svg, h5 .anchor svg, h6 .anchor svg { visibility: hidden; } h1:hover .anchor svg, h2:hover .anchor svg, h3:hover .anchor svg, h4:hover .anchor svg, h5:hover .anchor svg, h6:hover .anchor svg, h1 .anchor:focus svg, h2 .anchor:focus svg, h3 .anchor:focus svg, h4 .anchor:focus svg, h5 .anchor:focus svg, h6 .anchor:focus svg { visibility: visible; } </style><script> document.addEventListener("DOMContentLoaded", function(event) { var hash = window.decodeURI(location.hash.replace('#', '')) if (hash !== '') { var element = document.getElementById(hash) if (element) { var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop var clientTop = document.documentElement.clientTop || document.body.clientTop || 0 var offset = element.getBoundingClientRect().top + scrollTop - clientTop // Wait for the browser to finish rendering before scrolling. setTimeout((function() { window.scrollTo(0, offset - 0) }), 0) } } }) </script><link as="script" rel="preload" href="/webpack-runtime-90b402f85379a04cefbd.js"/><link as="script" rel="preload" href="/framework-caaca52af16d464f8089.js"/><link as="script" rel="preload" href="/app-ab0b2e166b078cba7648.js"/><link as="script" rel="preload" href="/styles-e9d24b1846c7d6eb9685.js"/><link as="script" rel="preload" href="/a22cbe4e-92f083a6844fe7b7be81.js"/><link as="script" rel="preload" href="/25d64555e9a78814a90948d55d62de27c0529341-6117050f40ac8932cee9.js"/><link as="script" rel="preload" href="/d874871c30ab579c69a585def3286e922215136b-c5b2582de7c8f4cba173.js"/><link as="script" rel="preload" href="/4ee076053fe1c079733a6777ac066aca886a0afb-15afc97ac40468318f4a.js"/><link as="script" rel="preload" href="/0e82c9e79d3e37a1861981d3afb47bd8566469d6-1434d6e04bf911273ff6.js"/><link as="script" rel="preload" href="/component---src-templates-rule-js-4898566e69f7edfbf9e6.js"/><link as="fetch" rel="preload" href="/page-data/rules/c3232f/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/page-data/sq/d/2135569447.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/page-data/sq/d/3230152527.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/page-data/sq/d/811143740.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><section class="layoutContainer hasMenu"><aside class="navigation"><div class="appLogo"><a href="/pages/about"><h1>ACT-Rules Community</h1></a></div><nav class="navigation"><ul><li><a href="/pages/about/">About Us</a></li><li><a href="/pages/contribute/">Contributing</a></li><li><a href="/pages/joining/">Joining</a></li><li><a href="/pages/communication/">Communication</a></li><li><a href="/pages/license/">License</a></li><li><hr/></li><li><a href="/rules/">Rules</a></li><li><a href="/glossary/">Glossary</a></li><li><hr/></li><li><p class="parent-item">documentation</p><ul><li><a href="/pages/structure/accessibility-support/">Accessibility Support</a></li><li><a href="/pages/design/definition-of-done/">Definition of Done</a></li><li><a href="/pages/design/process/">Process</a></li><li><a href="/pages/design/rule-design/">Rule Design</a></li><li><a href="/pages/design/rule-template/">Rule Template</a></li><li><a href="/pages/structure/terminology/">Terminology</a></li></ul><hr/></li><li><p class="parent-item">implementations</p><ul><li><a href="/pages/implementations/overview/">ACT Implementations</a></li><li><a href="/pages/implementations/mapping/">Mapping To Rule</a></li><li><a href="/pages/implementations/earl-reports/">Reporting Format</a></li><li><a href="/pages/implementations/reporting/">Submit an Implementation</a></li><li><a href="/pages/implementations/testcases/">Test Cases</a></li><li><a href="/pages/implementations/tools/">Testing Tools</a></li></ul><hr/></li></ul></nav></aside><main><header class="appHeader"><button type="button" class="btn-secondary menuBtn" aria-label="Toggle navigation menu">☰</button><div class="name"><a class="hide" href="/pages/about"><p>ACT-Rules Community</p></a></div><div class="logos"><a href="https://github.com/act-rules/act-rules.github.io" target="_blank" rel="noopener noreferrer" class="logo-github" aria-label="link to github repository"><svg enable-background="new 0 0 512 512" id="Layer_1" version="1.1" width="25" height="25" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><g><path d="M296.133,354.174c49.885-5.891,102.942-24.029,102.942-110.192 c0-24.49-8.624-44.448-22.67-59.869c2.266-5.89,9.515-28.114-2.734-58.947c0,0-18.139-5.898-60.759,22.669 c-18.139-4.983-38.09-8.163-56.682-8.163c-19.053,0-39.011,3.18-56.697,8.163c-43.082-28.567-61.22-22.669-61.22-22.669 c-12.241,30.833-4.983,53.057-2.718,58.947c-14.061,15.42-22.677,35.379-22.677,59.869c0,86.163,53.057,104.301,102.942,110.192 c-6.344,5.452-12.241,15.873-14.507,30.387c-12.702,5.438-45.808,15.873-65.758-18.592c0,0-11.795-21.31-34.012-22.669 c0,0-22.224-0.453-1.813,13.592c0,0,14.96,6.812,24.943,32.653c0,0,13.6,43.089,76.179,29.48v38.543 c0,5.906-4.53,12.702-15.865,10.89C96.139,438.977,32.2,354.626,32.2,255.77c0-123.807,100.216-224.022,224.03-224.022 c123.347,0,224.023,100.216,223.57,224.022c0,98.856-63.946,182.754-152.828,212.688c-11.342,2.266-15.873-4.53-15.873-10.89 V395.45C311.1,374.577,304.288,360.985,296.133,354.174L296.133,354.174z M512,256.23C512,114.73,397.263,0,256.23,0 C114.73,0,0,114.73,0,256.23C0,397.263,114.73,512,256.23,512C397.263,512,512,397.263,512,256.23L512,256.23z"></path></g></svg></a></div></header><section><section class="page-rule"><header><h1><p>Video element visual-only content has accessible alternative</p></h1></header><ul class="meta"><li><span class="heading">Rule Type:</span><span>composite</span></li><li><span class="heading">Rule Id:</span><span> c3232f</span></li><li><span class="heading">Last modified:</span><span> Mar 21, 2022</span></li><li><div class="meta"><span class="heading">Accessibility Requirements Mapping:</span><ul><li><details><summary>1.2.1 Audio-only and Video-only (Prerecorded) (Level A)</summary><ul><li><a href="https://www.w3.org/TR/WCAG21/#audio-only-and-video-only-prerecorded" class="sc-item" target="_blank" rel="noopener noreferrer">Learn More about 1.2.1 Audio-only and Video-only (Prerecorded)</a></li><li><strong>Required for conformance</strong> to WCAG 2.0 and later on level A and higher.</li><li>Outcome mapping:<ul><li>Any <code>failed</code> outcomes: success criterion is not satisfied.</li><li>All <code>passed</code> outcomes: success criterion needs further testing.</li><li>An <code>inapplicable</code> outcome: success criterion needs further testing.</li></ul></li></ul></details></li><li><details><summary>G159: Providing an alternative for time-based media for video-only content</summary><ul><li><a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G159" class="sc-item" target="_blank" rel="noopener noreferrer">Learn More about technique G159</a></li><li>Not required to conformance to any W3C accessibility recommendation.</li><li>Outcome mapping:<ul><li>Any <code>failed</code> outcomes: technique is not satisfied.</li><li>All <code>passed</code> outcomes: technique needs further testing.</li><li>An <code>inapplicable</code> outcome: technique needs further testing.</li></ul></li></ul></details></li><li><details><summary>G166: Providing audio that describes the important video content and describing it as such</summary><ul><li><a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G166" class="sc-item" target="_blank" rel="noopener noreferrer">Learn More about technique G166</a></li><li>Not required to conformance to any W3C accessibility recommendation.</li><li>Outcome mapping:<ul><li>Any <code>failed</code> outcomes: technique is not satisfied.</li><li>All <code>passed</code> outcomes: technique needs further testing.</li><li>An <code>inapplicable</code> outcome: technique needs further testing.</li></ul></li></ul></details></li></ul></div></li><li><div class="side-notes"><span class="heading">Input Rules:</span><ul><li><a class="sc-item block" href="fd26cf"><p>Video element visual-only content is media alternative for text</p></a></li><li><a class="sc-item block" href="ee13b5"><p>Video element visual-only content has transcript</p></a></li><li><a class="sc-item block" href="d7ba54"><p>Video element visual-only content has audio track alternative</p></a></li></ul></div></li></ul><hr/><h2 id="description"><a href="#description" aria-label="description permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Description</h2><div><p>This rule checks that <code>video</code> elements without audio have an alternative available.</p></div><div><h2 id="applicability" style="position:relative;"><a href="#applicability" aria-label="applicability permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Applicability</h2> <p>This rule applies to any <a href="#non-streaming-media-element">non-streaming</a> <code class="language-text">video</code> element that is <a href="#visible" title="Definition of visible">visible</a> where the video does not contain audio.</p> <h2 id="expectation" style="position:relative;"><a href="#expectation" aria-label="expectation permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Expectation</h2> <p>For each test target, the <a href="#outcome">outcome</a> of at least one of the following rules is passed:</p> <ul> <li><a href="https://act-rules.github.io/rules/fd26cf"><code class="language-text">Video</code> Element Visual-Only Content Is Media Alternative For Text</a></li> <li><a href="https://act-rules.github.io/rules/ee13b5"><code class="language-text">Video</code> Element Visual-Only Content Has Transcript</a></li> <li><a href="https://act-rules.github.io/rules/d7ba54"><code class="language-text">Video</code> Element Visual-Only Content Has Audio Track Alternative</a></li> </ul> <h2 id="assumptions" style="position:relative;"><a href="#assumptions" aria-label="assumptions permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Assumptions</h2> <ul> <li>A mechanism is available to start the video and the video element is not simply used to display the <a href="https://html.spec.whatwg.org/multipage/media.html#attr-video-poster">poster</a>.</li> <li>The language of each test target can be correctly determined (either programmatically or by analyzing the content), and sufficiently understood.</li> </ul> <h2 id="accessibility-support" style="position:relative;"><a href="#accessibility-support" aria-label="accessibility support permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Accessibility Support</h2> <p>The HTML <code class="language-text">video</code> element can also have a <code class="language-text">track</code> element that provides an audio description. This should provide assistive technologies with a timed text description of visual information in a video. However, there is no native support in any major browser for this technique. Technique <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H96">H96: Using the track element to provide audio descriptions</a> can not be relied upon to conform to <a href="https://www.w3.org/TR/WCAG21/#audio-only-and-video-only-prerecorded">1.2.1: Audio-only and Video-only (Prerecorded)</a>.</p> <h2 id="background" style="position:relative;"><a href="#background" aria-label="background permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Background</h2> <h3 id="bibliography" style="position:relative;"><a href="#bibliography" aria-label="bibliography permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Bibliography</h3> <ul> <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/audio-only-and-video-only-prerecorded">Understanding Success Criterion 1.2.1: Audio-only and Video-only (Prerecorded)</a></li> <li><a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G159.html">G159: Providing an alternative for time-based media for video-only content</a></li> <li><a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G166.html">G166: Providing audio that describes the important video content and describing it as such</a></li> </ul> <h2 id="test-cases" style="position:relative;"><a href="#test-cases" aria-label="test cases permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Test Cases</h2> <h3 id="passed" style="position:relative;"><a href="#passed" aria-label="passed permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Passed</h3> <div class="open-ex-new-tab-wrapper"> <h4 id="passed-example-1" style="position:relative;"> <a href="#passed-example-1" aria-label="Passed Example 1 permalink" class="anchor before"> <svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"> <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"> </path> </svg> </a> Passed Example 1 </h4> <a target="_blank" rel="noopener noreferrer" href="https://act-rules.github.io/testcases/c3232f/90b7864f21830a00f59c2a52b3d9a2359d2c2867.html" aria-label="Open Passed Example 1 in a new tab"> Open in a new tab </a> </div> <p>This <code class="language-text">video</code> element, which has no audio, has a text transcript available on the same page. Thus, it passes rule <a href="https://act-rules.github.io/rules/ee13b5"><code class="language-text">Video</code> Element Visual-Only Content Has Transcript</a>.</p> <div class="gatsby-highlight" data-language="html"><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video</span> <span class="token attr-name">controls</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/test-assets/rabbit-video/silent.mp4<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video/mp4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>source</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/test-assets/rabbit-video/silent.webm<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video/webm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>source</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>The above video shows a giant fat rabbit climbing out of a hole in the ground. He stretches, yawns, and then starts walking. Then he stops to scratch his bottom.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre></div> <div class="open-ex-new-tab-wrapper"> <h4 id="passed-example-2" style="position:relative;"> <a href="#passed-example-2" aria-label="Passed Example 2 permalink" class="anchor before"> <svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"> <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"> </path> </svg> </a> Passed Example 2 </h4> <a target="_blank" rel="noopener noreferrer" href="https://act-rules.github.io/testcases/c3232f/85b0303b527a3d2836b4256a73cb438081bbc224.html" aria-label="Open Passed Example 2 in a new tab"> Open in a new tab </a> </div> <p>This <code class="language-text">video</code> element, which has no audio, has a separate audio track that describes the visual information. Thus, it passes rule <a href="https://act-rules.github.io/rules/d7ba54"><code class="language-text">Video</code> Element Visual-Only Content Has Audio Track Alternative</a>.</p> <div class="gatsby-highlight" data-language="html"><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video</span> <span class="token attr-name">controls</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/test-assets/rabbit-video/silent.mp4<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video/mp4<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/test-assets/rabbit-video/silent.webm<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video/webm<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>audio</span> <span class="token attr-name">controls</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/test-assets/rabbit-video/audio-description.mp3<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>audio/mpeg<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>audio</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre></div> <div class="open-ex-new-tab-wrapper"> <h4 id="passed-example-3" style="position:relative;"> <a href="#passed-example-3" aria-label="Passed Example 3 permalink" class="anchor before"> <svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"> <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"> </path> </svg> </a> Passed Example 3 </h4> <a target="_blank" rel="noopener noreferrer" href="https://act-rules.github.io/testcases/c3232f/7d7a94d0ae749de98095b3af35f0adf65cb01bd1.html" aria-label="Open Passed Example 3 in a new tab"> Open in a new tab </a> </div> <p>This <code class="language-text">video</code> element, which has no audio, is a media alternative for the text in the page and labeled as such. Thus, it passes rule <a href="https://act-rules.github.io/rules/fd26cf"><code class="language-text">Video</code> Element Visual-Only Content Is Media Alternative For Text</a>.</p> <div class="gatsby-highlight" data-language="html"><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> Not being able to use your computer because your mouse doesn't work, is frustrating. Many people use only the keyboard to navigate websites. Either through preference or circumstance. This is solved by keyboard compatibility. Keyboard compatibility is described in WCAG. See the video below to watch the same information again in video form. <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/test-assets/perspective-video/perspective-video-with-captions-silent.mp4<span class="token punctuation">"</span></span> <span class="token attr-name">controls</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre></div> <h3 id="failed" style="position:relative;"><a href="#failed" aria-label="failed permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Failed</h3> <div class="open-ex-new-tab-wrapper"> <h4 id="failed-example-1" style="position:relative;"> <a href="#failed-example-1" aria-label="Failed Example 1 permalink" class="anchor before"> <svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"> <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"> </path> </svg> </a> Failed Example 1 </h4> <a target="_blank" rel="noopener noreferrer" href="https://act-rules.github.io/testcases/c3232f/28ec159184ae06f3854db2cce0dbb80f29d73f66.html" aria-label="Open Failed Example 1 in a new tab"> Open in a new tab </a> </div> <p>This <code class="language-text">video</code> element, which has no audio, has a transcript which does not convey the information included in the video-only content. The transcript is available through a link on the same page.</p> <div class="gatsby-highlight" data-language="html"><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video</span> <span class="token attr-name">controls</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/test-assets/rabbit-video/silent.mp4<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video/mp4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>source</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/test-assets/rabbit-video/silent.webm<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video/webm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>source</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/test-assets/rabbit-video/incorrect-transcript.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Transcript<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre></div> <div class="open-ex-new-tab-wrapper"> <h4 id="failed-example-2" style="position:relative;"> <a href="#failed-example-2" aria-label="Failed Example 2 permalink" class="anchor before"> <svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"> <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"> </path> </svg> </a> Failed Example 2 </h4> <a target="_blank" rel="noopener noreferrer" href="https://act-rules.github.io/testcases/c3232f/f600a7ad3e0d61dd5ef28703702918ae54226aea.html" aria-label="Open Failed Example 2 in a new tab"> Open in a new tab </a> </div> <p>This <code class="language-text">video</code> element, which has no audio, has a separate audio track that incorrectly describes the visual information.</p> <div class="gatsby-highlight" data-language="html"><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video</span> <span class="token attr-name">controls</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/test-assets/rabbit-video/silent.mp4<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video/mp4<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/test-assets/rabbit-video/silent.webm<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video/webm<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>audio</span> <span class="token attr-name">controls</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/test-assets/rabbit-video/incorrect-audio-description.mp3<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>audio/mpeg<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>audio</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre></div> <div class="open-ex-new-tab-wrapper"> <h4 id="failed-example-3" style="position:relative;"> <a href="#failed-example-3" aria-label="Failed Example 3 permalink" class="anchor before"> <svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"> <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"> </path> </svg> </a> Failed Example 3 </h4> <a target="_blank" rel="noopener noreferrer" href="https://act-rules.github.io/testcases/c3232f/f0a60f2924c927d3dc97676d02c83ab38025955f.html" aria-label="Open Failed Example 3 in a new tab"> Open in a new tab </a> </div> <p>This <code class="language-text">video</code> element, which has no audio, is a media alternative for the text in the page but it is not labeled as such.</p> <div class="gatsby-highlight" data-language="html"><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> Not being able to use your computer because your mouse doesn't work, is frustrating. Many people use only the keyboard to navigate websites. Either through preference or circumstance. This is solved by keyboard compatibility. Keyboard compatibility is described in WCAG. <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/test-assets/perspective-video/perspective-video-with-captions-silent.mp4<span class="token punctuation">"</span></span> <span class="token attr-name">controls</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre></div> <div class="open-ex-new-tab-wrapper"> <h4 id="failed-example-4" style="position:relative;"> <a href="#failed-example-4" aria-label="Failed Example 4 permalink" class="anchor before"> <svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"> <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"> </path> </svg> </a> Failed Example 4 </h4> <a target="_blank" rel="noopener noreferrer" href="https://act-rules.github.io/testcases/c3232f/17189684688eb0b0fb6cbb3109527bf1558756b3.html" aria-label="Open Failed Example 4 in a new tab"> Open in a new tab </a> </div> <p>This <code class="language-text">video</code> element, which has no audio, has a <code class="language-text">track</code> element with descriptions. The description track is not supported.</p> <div class="gatsby-highlight" data-language="html"><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video</span> <span class="token attr-name">controls</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/test-assets/rabbit-video/silent.mp4<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video/mp4<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/test-assets/rabbit-video/silent.webm<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video/webm<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>track</span> <span class="token attr-name">kind</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>descriptions<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/test-assets/rabbit-video/descriptions.vtt<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre></div> <h3 id="inapplicable" style="position:relative;"><a href="#inapplicable" aria-label="inapplicable permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Inapplicable</h3> <div class="open-ex-new-tab-wrapper"> <h4 id="inapplicable-example-1" style="position:relative;"> <a href="#inapplicable-example-1" aria-label="Inapplicable Example 1 permalink" class="anchor before"> <svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"> <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"> </path> </svg> </a> Inapplicable Example 1 </h4> <a target="_blank" rel="noopener noreferrer" href="https://act-rules.github.io/testcases/c3232f/59c0ee3628444964ca1313430417bfbbce9322b7.html" aria-label="Open Inapplicable Example 1 in a new tab"> Open in a new tab </a> </div> <p>This <code class="language-text">video</code> element has audio.</p> <div class="gatsby-highlight" data-language="html"><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> Not being able to use your computer because your mouse doesn't work, is frustrating. Many people use only the keyboard to navigate websites. Either through preference or circumstance. This is solved by keyboard compatibility. Keyboard compatibility is described in WCAG. See the video below to watch the same information again in video form. <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/test-assets/perspective-video/perspective-video.mp4<span class="token punctuation">"</span></span> <span class="token attr-name">controls</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre></div> <div class="open-ex-new-tab-wrapper"> <h4 id="inapplicable-example-2" style="position:relative;"> <a href="#inapplicable-example-2" aria-label="Inapplicable Example 2 permalink" class="anchor before"> <svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"> <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"> </path> </svg> </a> Inapplicable Example 2 </h4> <a target="_blank" rel="noopener noreferrer" href="https://act-rules.github.io/testcases/c3232f/2a4472d9d5765846750d18be872821b1e6eaed08.html" aria-label="Open Inapplicable Example 2 in a new tab"> Open in a new tab </a> </div> <p>This <code class="language-text">video</code> element is not <a href="#visible" title="Definition of visible">visible</a>.</p> <div class="gatsby-highlight" data-language="html"><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video</span> <span class="token attr-name">controls</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/test-assets/rabbit-video/silent.mp4<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video/mp4<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/test-assets/rabbit-video/silent.webm<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video/webm<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>track</span> <span class="token attr-name">kind</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>descriptions<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/test-assets/rabbit-video/descriptions.vtt<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre></div></div><hr/><a id="glossary-listing" href="#glossary-listing"><h2>Glossary</h2></a><article><a id="non-streaming-media-element" href="#non-streaming-media-element"><h3>Non-streaming media element</h3></a><div><p>A <em>non-streaming media element</em> is an <a href="https://html.spec.whatwg.org/multipage/media.html#htmlmediaelement">HTML Media Element</a> for which the <code class="language-text">duration</code> property is not 0.</p></div></article><article><a id="outcome" href="#outcome"><h3>Outcome</h3></a><div><p>An <em>outcome</em> is a conclusion that comes from evaluating an ACT Rule on a <a href="https://www.w3.org/TR/act-rules-format/#test-subject">test subject</a> or one of its constituent <a href="https://www.w3.org/TR/act-rules-format/#test-target">test target</a>. An outcome can be one of the three following types:</p> <ul> <li><strong>Inapplicable:</strong> No part of the test subject matches the applicability</li> <li><strong>Passed:</strong> A <a href="https://www.w3.org/TR/act-rules-format/#test-target">test target</a> meets all expectations</li> <li><strong>Failed:</strong> A <a href="https://www.w3.org/TR/act-rules-format/#test-target">test target</a> does not meet all expectations</li> </ul> <p><strong>Note:</strong> A rule has one <code class="language-text">passed</code> or <code class="language-text">failed</code> outcome for every <a href="https://www.w3.org/TR/act-rules-format/#test-target">test target</a>. When there are no test targets the rule has one <code class="language-text">inapplicable</code> outcome. This means that each <a href="https://www.w3.org/TR/act-rules-format/#test-subject">test subject</a> will have one or more outcomes.</p> <p><strong>Note:</strong> Implementations using the <a href="https://www.w3.org/TR/EARL10-Schema/">EARL10-Schema</a> can express the outcome with the <a href="https://www.w3.org/TR/EARL10-Schema/#outcome">outcome property</a>. In addition to <code class="language-text">passed</code>, <code class="language-text">failed</code> and <code class="language-text">inapplicable</code>, EARL 1.0 also defined an <code class="language-text">incomplete</code> outcome. While this cannot be the outcome of an ACT Rule when applied in its entirety, it often happens that rules are only partially evaluated. For example, when applicability was automated, but the expectations have to be evaluated manually. Such "interim" results can be expressed with the <code class="language-text">incomplete</code> outcome.</p></div></article><article><a id="visible" href="#visible"><h3>Visible</h3></a><div><p>Content perceivable through sight.</p> <p>Content is considered <em>visible</em> if making it fully transparent would result in a difference in the pixels rendered for any part of the document that is currently within the viewport or can be brought into the viewport via scrolling.</p> <p><a href="https://www.w3.org/TR/WCAG21/#dfn-content">Content is defined in WCAG</a>.</p> <p>For more details, see <a href="https://act-rules.github.io/pages/examples/visible/">examples of visible</a>.</p></div></article><hr/><a href="#useful-links" id="useful-links"><h2>Useful Links</h2></a><ul><li><a target="_blank" rel="noopener noreferrer" href="https://github.com/act-rules/act-rules.github.io/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+c3232f+">Github issues related to this rule</a></li><li><a rel="noopener noreferrer" href="/rules/c3232f/changelog">Changelog</a></li><li><a target="_blank" rel="noopener noreferrer" href="https://github.com/act-rules/act-rules.github.io/edit/develop/_rules/video-only-alternative-for-visual-c3232f.md">Propose a change to the rule</a></li><li><a target="_blank" rel="noopener noreferrer" href="/testcases/c3232f/rule-c3232f-testcases-for-em-report-tool.json">Test case file for use in the WCAG-EM Report Tool</a></li></ul><hr/><a id="implementation-metrics" href="#implementation-metrics"><h2>Implementations</h2></a><p>This section is not part of the official rule. It is populated dynamically and not accounted for in the change history or the last modified date. This section will not be included in the rule when it is published on the W3C website.</p><table class=""><thead><tr><th>Tool</th><th>Consistency</th><th>Complete</th><th>Report</th></tr></thead><tbody><tr><td>QualWeb</td><td class="capitalize">consistent</td><td>Yes</td><td><a href="/implementation/qualweb#id-c3232f">View Report</a></td></tr><tr><td>axe-core</td><td class="capitalize">partially-consistent</td><td>Yes</td><td><a href="/implementation/axe-core#id-c3232f">View Report</a></td></tr></tbody></table><a id="acknowledgments" href="#acknowledgments"><h2>Acknowledgments</h2></a><div class="meta"><h3 class="heading">Authors</h3><ul><li><a class="sc-item block" target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/in/brianbors/">Brian Bors</a></li><li><a class="sc-item block" target="_blank" rel="noopener noreferrer" href="https://github.com/john-urbilog">John Hicks</a></li><li><a class="sc-item block" target="_blank" rel="noopener noreferrer" href="https://github.com/Rafalchar">Rafal Charlampowicz</a></li><li><a class="sc-item block" target="_blank" rel="noopener noreferrer" href="https://github.com/wilcofiers">Wilco Fiers</a></li></ul></div><div class="meta"><h3 class="heading">Funding</h3><ul><li>WAI-Tools</li></ul></div><div class="meta"><h3 class="heading">Assets</h3><ul><li>Rabbit video is © copyright 2008, Blender Foundation / [www.bigbuckbunny.org](https://www.bigbuckbunny.org)</li><li>Web Accessibility Perspective videos by W3C WAI.</li></ul></div></section><section class="tableOfContents"><span role="heading" aria-level="1" class="heading">Table of Contents</span><div><ul> <li><a href="/rules/c3232f/#applicability">Applicability</a></li> <li><a href="/rules/c3232f/#expectation">Expectation</a></li> <li><a href="/rules/c3232f/#assumptions">Assumptions</a></li> <li><a href="/rules/c3232f/#accessibility-support">Accessibility Support</a></li> <li> <p><a href="/rules/c3232f/#background">Background</a></p> <ul> <li><a href="/rules/c3232f/#bibliography">Bibliography</a></li> </ul> </li> <li> <p><a href="/rules/c3232f/#test-cases">Test Cases</a></p> <ul> <li><a href="/rules/c3232f/#passed">Passed</a></li> <li><a href="/rules/c3232f/#failed">Failed</a></li> <li><a href="/rules/c3232f/#inapplicable">Inapplicable</a></li> </ul> </li> </ul></div><ul><li><a href="#glossary-listing">Glossary</a></li><li><a href="#useful-links">Useful Links</a></li><li><a href="#implementation-metrics">Implementations</a></li><li><a href="#acknowledgments">Acknowledgments</a></li></ul></section></section></main></section></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/rules/c3232f";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-4245afbccd88fd6f0b01.js"],"app":["/app-ab0b2e166b078cba7648.js"],"component---src-pages-404-js":["/component---src-pages-404-js-2f5d668d6cf2b4e546e9.js"],"component---src-pages-glossary-js":["/component---src-pages-glossary-js-19f84ff6b1138d25b596.js"],"component---src-pages-index-js":["/component---src-pages-index-js-1c6294bb8b36f45fa835.js"],"component---src-pages-rules-js":["/component---src-pages-rules-js-73ebb55bca0ff38fa352.js"],"component---src-templates-changelog-js":["/component---src-templates-changelog-js-200eee19b1ca69eac2ba.js"],"component---src-templates-default-js":["/component---src-templates-default-js-8de82b13c3c509662894.js"],"component---src-templates-implementations-js":["/component---src-templates-implementations-js-03cfd879b7b95b617a19.js"],"component---src-templates-implementer-incomplete-js":["/component---src-templates-implementer-incomplete-js-d050df4183f131db7a18.js"],"component---src-templates-implementer-js":["/component---src-templates-implementer-js-277643159836f6ec1be7.js"],"component---src-templates-rule-js":["/component---src-templates-rule-js-4898566e69f7edfbf9e6.js"]};/*]]>*/</script><script src="/polyfill-4245afbccd88fd6f0b01.js" nomodule=""></script><script src="/component---src-templates-rule-js-4898566e69f7edfbf9e6.js" async=""></script><script src="/0e82c9e79d3e37a1861981d3afb47bd8566469d6-1434d6e04bf911273ff6.js" async=""></script><script src="/4ee076053fe1c079733a6777ac066aca886a0afb-15afc97ac40468318f4a.js" async=""></script><script src="/d874871c30ab579c69a585def3286e922215136b-c5b2582de7c8f4cba173.js" async=""></script><script src="/25d64555e9a78814a90948d55d62de27c0529341-6117050f40ac8932cee9.js" async=""></script><script src="/a22cbe4e-92f083a6844fe7b7be81.js" async=""></script><script src="/styles-e9d24b1846c7d6eb9685.js" async=""></script><script src="/app-ab0b2e166b078cba7648.js" async=""></script><script src="/framework-caaca52af16d464f8089.js" async=""></script><script src="/webpack-runtime-90b402f85379a04cefbd.js" async=""></script></body></html>