<nav aria-label="Skip Link, Customization, and Language Selector" id="controls" class="default-grid">
<ul>
<li><a href="#main">Skip to Content</a></li>
<li class="opt"><a href="/wai-video-standards-and-benefits/meta/customize/">Change Text Size or Colors</a></li>
<li class="opt languagelist">
<strong>This page in:</strong>
<ul class="languagelistul">
<li><strong style="text-transform: capitalize;">English</strong></li>
<li><a style="text-transform: capitalize;" href="/wai-video-standards-and-benefits/videos/standards-and-benefits/el" lang="el">Ελληνικά</a></li>
<li><a style="text-transform: capitalize;" href="/wai-video-standards-and-benefits/videos/standards-and-benefits/es" lang="es">español</a></li>
<li><a style="text-transform: capitalize;" href="/wai-video-standards-and-benefits/videos/standards-and-benefits/fr" lang="fr">français</a></li>
<li><a style="text-transform: capitalize;" href="/wai-video-standards-and-benefits/videos/standards-and-benefits/nl" lang="nl">Nederlands</a></li>
<li><a style="text-transform: capitalize;" href="/wai-video-standards-and-benefits/videos/standards-and-benefits/zh-hans" lang="zh-hans">简体汉语</a></li>
</ul>
</li>
<li class="opt">
<a href="/wai-video-standards-and-benefits/translations/">All Translations <svg aria-hidden="true" class="icon-languages "><use xlink:href="../../assets/images/icons.svg#icon-languages"></use></svg> languages</a>
</li>
<li><button id="showoptions" class="showhidebutton button-inline" data-target="#controls .opt" aria-expanded="true" data-showtext='<svg aria-hidden="true" class="icon-languages "><use xlink:href="../../assets/images/icons.svg#icon-languages"></use></svg> languages Show Customization, Languages, Translations'
data-hidetext='Hide Options'><svg aria-hidden="true" class="icon-languages "><use xlink:href="../../assets/images/icons.svg#icon-languages"></use></svg> languages Show Customization, Languages, Translations</button></li>
</ul>
</nav>
<header id="site-header" class="default-grid with-gap">
<div class="logos">
<a href="https://www.w3.org/" class="home w3c">
<svg role="img" aria-label="W3C" viewBox="0 0 68 34" xmlns="http://www.w3.org/2000/svg"><g><path d="m16.117 1.006 5.759 19.58 5.759-19.58h4.17 11.444v1.946l-5.879 10.128c2.065.663 3.627 1.868 4.686 3.615 1.059 1.748 1.589 3.799 1.589 6.155 0 2.914-.775 5.363-2.324 7.348s-3.555 2.978-6.017 2.978c-1.854 0-3.469-.589-4.845-1.767-1.377-1.178-2.396-2.773-3.058-4.786l3.256-1.35c.477 1.218 1.106 2.178 1.887 2.879.781.702 1.701 1.052 2.76 1.052 1.112 0 2.052-.622 2.82-1.866.768-1.245 1.152-2.74 1.152-4.489 0-1.933-.411-3.429-1.231-4.488-.954-1.244-2.45-1.867-4.489-1.867h-1.588v-1.906l5.56-9.612h-6.712l-.382.65-8.163 27.548h-.397l-5.958-19.937-5.957 19.937h-.397l-9.53-32.168h4.17l5.759 19.58 3.892-13.185-1.906-6.395z"/><path d="m64.92 1.006c-.819 0-1.554.295-2.111.861-.591.6-.92 1.376-.92 2.178s.313 1.545.887 2.128c.583.591 1.334.912 2.145.912.793 0 1.562-.321 2.161-.903.574-.557.887-1.3.887-2.136 0-.811-.321-1.57-.878-2.136-.584-.592-1.344-.904-2.171-.904zm2.643 3.065c0 .701-.271 1.351-.768 1.832-.524.507-1.174.777-1.892.777-.675 0-1.342-.278-1.84-.785s-.777-1.157-.777-1.849.287-1.368.802-1.891c.481-.49 1.131-.751 1.84-.751.726 0 1.376.271 1.883.785.49.489.752 1.147.752 1.882zm-2.559-1.807h-1.3v3.445h.65v-1.469h.642l.701 1.469h.726l-.769-1.57c.498-.102.785-.439.785-.929 0-.625-.472-.946-1.435-.946zm-.118.422c.608 0 .886.169.886.591 0 .405-.278.549-.87.549h-.549v-1.14z"/><path d="m59.807.825.676 4.107-2.391 4.575s-.918-1.941-2.443-3.015c-1.285-.905-2.122-1.102-3.431-.832-1.681.347-3.587 2.357-4.419 4.835-.995 2.965-1.005 4.4-1.04 5.718-.056 2.113.277 3.362.277 3.362s-1.452-2.686-1.438-6.62c.009-2.808.451-5.354 1.75-7.867 1.143-2.209 2.842-3.535 4.35-3.691 1.559-.161 2.791.59 3.743 1.403 1 .854 2.01 2.721 2.01 2.721z"/><path d="m60.102 24.063s-1.057 1.889-1.715 2.617c-.659.728-1.837 2.01-3.292 2.651s-2.218.762-3.656.624c-1.437-.138-2.772-.97-3.24-1.317s-1.664-1.369-2.34-2.322-1.733-2.859-1.733-2.859.589 1.91.958 2.721c.212.467.864 1.894 1.789 3.136.863 1.159 2.539 3.154 5.086 3.604 2.547.451 4.297-.693 4.73-.97s1.346-1.042 1.924-1.66c.603-.645 1.174-1.468 1.49-1.962.231-.36.607-1.092.607-1.092z"/></g></svg>
</a>
<a href="https://www.w3.org/WAI/" class="home">
<span class="wai"><span class="wa">Web Accessibility</span> <span class="i"><span class="initieative">Initiative</span> <span>WAI</span></span></span>
</a>
<div class="claim">
<span>Strategies, standards, and resources to make<br>the web accessible to people with disabilities.</span>
</div>
<button class="button button-menu" id="openmenu"><span><svg aria-hidden="true" class="icon-menu "><use xlink:href="/assets/images/icons.svg#icon-menu"></use></svg> Menu</span></button>
</div>
<div class="navigations">
<nav class="metanav" label="Meta & Search">
<ul>
<li><a href="#">Get Involved</a></li>
<li><a href="#">About W3C WAI</a></li>
<li>
<form action="#" role="search">
<div>
<label for="header-search">
<input id="header-search" type="search" placeholder="Search" aria-label="Search">
</label>
<button class="button button-icon button-nobg button-noborder"><span><svg aria-hidden="true" class="icon-search "><use xlink:href="../../assets/images/icons.svg#icon-search"></use></svg> search</span></button>
</div>
</form>
</li>
</ul>
</nav>
</div>
</header>
<nav class="mainnav" aria-label="Main">
<ul class="default-grid with-gap">
<li>
<a href="/sitemap/#accessibility-fundamentals"><span>Accessibility Fundamentals</span></a>
</li>
<li>
<a href="/sitemap/#planning-policies"><span>Planning & Policies</span></a>
</li>
<li>
<a href="/sitemap/#design-develop"><span>Design & Develop</span></a>
</li>
<li>
<a href="/sitemap/#test-evaluate"><span>Test & Evaluate</span></a>
</li>
<li>
<a href="/sitemap/#teach-advocate"><span>Teach & Advocate</span></a>
</li>
<li>
<a href="/sitemap/#standards-guidelines"><span>Standards/<wbr>Guidelines</span></a>
</li>
</ul>
</nav>
{% render '@navigations-controls' %}
<header id="site-header" class="default-grid with-gap">
{% render '@logo-area' %}
{% render '@navigations-default' %}
</header>
{% render '@navigations-mainnav' %}
/* No context defined for this component. */
#site-header {
background-color: var(--w3c-classic);
color: var(--pure-white);
@media print {
background-color: var(--off-white);
color: #000;
}
padding-top: 3px;
@supports (display: grid) {
padding-inline-start: 8px;
padding-inline-end: 8px;
}
& a {
color: var(--pure-white);
@media print {
color: var(--w3c-classic);
}
@media print {
&:after {
content: '';
}
}
}
}
.wai {
line-height: 1.2;
@media (--medium) {
vertical-align: middle;
/*display: block;*/
font-size: 1.5625rem;
}
}
.logos {
grid-column-start: 2;
grid-column-end: 6;
grid-row-start: 1;
padding-block: 16px;
padding-inline: 0;
display: flex;
align-items: center;
width: 60%;
@supports (display: grid) {
width: auto;
}
& .claim {
font-size: .875rem;
font-style: italic;
&:lang(ar) {
font-style: normal;
}
margin-inline-start: 16px;
padding-inline-start: 16px;
border-inline-start: 1px solid var(--gold);
color: var(--pure-white);
@media print {
color: var(--w3c-classic);
}
flex:1 0 0;
display: none;
@media (--medium) {
display: flex;
align-items: center;
}
}
}
.home {
@media (--small) {
margin-inline-end: 32px;
}
text-decoration: none;
transition: color .25s ease-in .1s;
display: flex;
align-items: center;
@supports (display: grid) {
flex:0;
}
@media (--large) {
margin-inline-end: 8px;
}
& svg, & img {
vertical-align:middle;
color: inherit;
fill: currentColor;
height: 30px;
@media (--medium) {
height: 46px;
}
}
img {
padding-inline-end: 8px;
}
&.w3c {
border-block-end: 2px solid transparent;
&:hover {
border-bottom-color: currentColor;
}
}
& .wai {
display: flex;
flex-direction: column;
justify-content: center;
@media (--medium) {
font-size: 1.25rem;
}
& .wa {
padding-block-end: 2px;
}
& .i {
border-block-start: 1px solid var(--gold);
padding-top: 2px;
display: flex;
justify-content: space-between;
}
}
&:--hovcus {
text-decoration: underline;
color: var(--gold) !important;
}
}
There are no notes for this item.