<section class="default-grid info" tabindex="0">
<p class="inner"><svg aria-hidden="true" class="icon-info "><use xlink:href="../../assets/images/icons.svg#icon-info"></use></svg> infoThis is an unpublished draft preview. Please refer to our published website at <a href="https://www.w3.org/WAI/">w3.org/WAI/</a>.
</p>
</section>
<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>
<h1 class="visuallyhidden">Web Accessibility Initiative Home</h1>
<section class="default-grid teaser making-web-accessible" aria-labelledby="mwa-title">
<header class="inner teaser-h">
<h2 id="mwa-title">
<span class="title">Making the Web Accessible</span>
</h2>
<p class="subtitle">Strategies, guidelines, and resources to make the web accessible to people with disabilities.</p>
</header>
<div class="inner grid-3 nogap">
<div class="col1 making-web-accessible-box"><svg aria-hidden="true" class="icon-hp-book mwa-icon"><use xlink:href="../../assets/images/icons.svg#icon-hp-book"></use></svg> hp-book
<h3>W3C</h3>
<p>The World Wide Web Consortium (W3C) develops international standards for the Web: HTML, CSS, and many more.</p>
</div>
<div class="col2 making-web-accessible-box"><svg aria-hidden="true" class="icon-hp-tools mwa-icon"><use xlink:href="../../assets/images/icons.svg#icon-hp-tools"></use></svg> hp-tools
<h3>WAI</h3>
<p>The W3C Web Accessibility Initiative (WAI) develops standards and support materials to help you understand and implement accessibility.</p>
</div>
<div class="col3 making-web-accessible-box"><svg aria-hidden="true" class="icon-hp-computer mwa-icon"><use xlink:href="../../assets/images/icons.svg#icon-hp-computer"></use></svg> hp-computer
<h3>You</h3>
<p>You can use W3C WAI resources to make your websites, applications, and other digital creations more accessible and usable to everyone.</p>
</div>
</div>
<div class="inner hidesection">
<button class="showhidebutton" data-target=".making-web-accessible .inner:not(.hidesection)" aria-expanded="true" data-showhidebuttonid="homepage-making-web-accessible" data-showtext="Show information about W3C, WAI, You" data-hidetext="Hide Section">Hide Section</button>
</div>
</section>
<div class="white-bg grid-five-three">
<div class="col1 grid-line-right">
<section class="teaser news-teaser">
<header class="teaser-h">
<h2>
<span class="subtitle"></span>
<span class="title">News</span>
</h2>
</header>
<article class="news-teaser">
<h4>Updated: Tutorials on Web Accessibility</h4>
<p><a href="http://w3.org/WAI/tutorials">Web Accessibility Tutorials</a> on Menus, Page Structure, Forms, Images, Tables, and Carousels have been updated. These tutorials show you how to create web content that is accessible to people with
disabilities and that improves the user experience for all users. They include general guidance, and specific examples for HTML5 and WAI-ARIA. (<a href="#">2017-Apr-18</a>)</p>
</article>
<article class="news-teaser">
<h4>Updated: Tutorials on Web Accessibility</h4>
<p><a href="http://w3.org/WAI/tutorials">Web Accessibility Tutorials</a> on Menus, Page Structure, Forms, Images, Tables, and Carousels have been updated. These tutorials show you how to create web content that is accessible to people with
disabilities and that improves the user experience for all users. They include general guidance, and specific examples for HTML5 and WAI-ARIA. (<a href="#">2017-Apr-18</a>)</p>
</article>
<article class="news-teaser">
<h4>Updated: Tutorials on Web Accessibility</h4>
<p><a href="http://w3.org/WAI/tutorials">Web Accessibility Tutorials</a> on Menus, Page Structure, Forms, Images, Tables, and Carousels have been updated. These tutorials show you how to create web content that is accessible to people with
disabilities and that improves the user experience for all users. They include general guidance, and specific examples for HTML5 and WAI-ARIA. (<a href="#">2017-Apr-18</a>)</p>
</article>
<article class="news-teaser">
<h4>Updated: Tutorials on Web Accessibility</h4>
<p><a href="http://w3.org/WAI/tutorials">Web Accessibility Tutorials</a> on Menus, Page Structure, Forms, Images, Tables, and Carousels have been updated. These tutorials show you how to create web content that is accessible to people with
disabilities and that improves the user experience for all users. They include general guidance, and specific examples for HTML5 and WAI-ARIA. (<a href="#">2017-Apr-18</a>)</p>
</article>
<article class="news-teaser">
<h4>Updated: Tutorials on Web Accessibility</h4>
<p><a href="http://w3.org/WAI/tutorials">Web Accessibility Tutorials</a> on Menus, Page Structure, Forms, Images, Tables, and Carousels have been updated. These tutorials show you how to create web content that is accessible to people with
disabilities and that improves the user experience for all users. They include general guidance, and specific examples for HTML5 and WAI-ARIA. (<a href="#">2017-Apr-18</a>)</p>
</article>
<button class="button button-more"><span>See All News and Announcements</span></button>
</section>
</div>
<div class="col2">
<section class="teaser audiences-inline">
<header class="teaser-h">
<h2>
<span class="subtitle">See what we have for you!</span>
<span class="title">Get Resources for…</span>
</h2>
</header>
<ul class="two columns">
<li><a href="…">Developers</a></li>
<li><a href="…">Designers</a></li>
<li><a href="…">Managers</a></li>
<li><a href="…">Policy Makers</a></li>
<li><a href="…">Testers</a></li>
<li><a href="…">Advocates</a></li>
</ul>
</section>
<section class="teaser media-inline">
<header class="teaser-h">
<h2>
<span class="subtitle">Web Accessibility Perspectives</span>
<span class="title">Keyboard Compatibility</span>
</h2>
</header>
<div class="media-wrapper">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/93UgG72os8M" frameborder="0" allowfullscreen></iframe>
</div>
<p>[Short description for Keyboard Compatibility] All functionality must be usable with the keyboard. That is, users can access and move between links, buttons, forms, and other controls using the Tab key and other keystrokes. Websites should
not require a mouse;…</p>
<div class="button-group">
<button class="button button-more"><span>More About Keyboard Compatibility</span></button>
<button class="button button-more button-secondary"><span>See All Perspectives Videos</span></button>
</div>
</section>
<section class="teaser resource-inline">
<a class="teaser-c stealthy-link col1" href="#">
<header class="teaser-h">
<h2>
<span class="subtitle">Featured Resource</span>
<span class="title">Easy Checks</span>
</h2>
</header>
<p>
Is accessibility addressed in even the most basic way on your site?
</p>
<div>
<span class="button">Read More</span>
</div>
</a>
</section>
</div>
</div>
<div class="default-grid teaser teaser-sponsors">
<div class="inner">
<header class="teaser-h">
<h2 class="title">Sponsors and Funders</h2>
</header>
<p>WAI is supported in part by the following organizations. Thank you!</p>
<ul class="">
<li><a href="#">Adobe Systems</a></li>
<li><a href="#">Deque Systems</a></li>
<li><a href="#">ETS</a></li>
<li><a href="#">HP Enterprise</a></li>
<li><a href="#">HP Inc.</a></li>
<li><a href="#">IBM Corporation</a></li>
<li>US Department of Health and Human Services, <a href="#">National Institute for Disability</a>, Independent Living and Rehabilitation Research, contract HHSP23301500054 (<a href="#">WAI-Core 2015 Project</a>)</li>
<li>US Access Board (<a href="#">WCAG TA Project</a>)</li>
</ul>
<p>WAI welcomes <a href="#">additional sponsors and contributors</a>.</p>
</div>
</div>
<footer class="site-footer grid-4q" aria-label="Site">
<div class="q1-start q3-end about">
<div>
<p><a class="largelink" href="https://www.w3.org/WAI/" lang="en" dir="auto" translate="no">W3C Web Accessibility Initiative (WAI)</a></p>
<p>Strategies, standards, and supporting resources to make the Web accessible to people with disabilities.</p>
</div>
<div class="social" lang="en" dir="auto" translate="no">
<ul>
<li><a href="https://twitter.com/w3c_wai"><svg aria-hidden="true" class="icon-twitter "><use xlink:href="/assets/images/icons.svg#icon-twitter"></use></svg> Twitter</a></li>
<li><a href="https://www.w3.org/WAI/feed.xml"><svg aria-hidden="true" class="icon-rss "><use xlink:href="/assets/images/icons.svg#icon-rss"></use></svg> Feed</a></li>
<li><a href="https://www.youtube.com/channel/UCU6ljj3m1fglIPjSjs2DpRA/playlistsv"><svg aria-hidden="true" class="icon-youtube"><use xlink:href="/assets/images/icons.svg#icon-youtube"></use></svg> YouTube</a></li>
<li><a href="https://www.w3.org/WAI/news/subscribe/" class="button">Get News in Email</a></li>
</ul>
</div>
<div lang="en" dir="auto" translate="no">
<p>Copyright © 2019 W3C <sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
<a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn">Beihang</a>) <a href="/WAI/about/using-wai-material/">Permission to Use WAI Material</a>.</p>
</div>
</div>
<div class="q4-start q4-end">
<ul style="margin-bottom:0">
<li><a href="/WAI/about/contacting/">Contact WAI</a></li>
<li><a href="/WAI/sitemap/">Site Map</a></li>
<li><a href="/WAI/news/">News</a></li>
<li><a href="/WAI/sitemap/#archive">Archive</a></li>
<li><a href="/WAI/about/accessibility-statement/">Accessibility Statement</a></li>
<li><a href="/WAI/translations/"> Translations</a></li>
<li><a href="/WAI/roles/">Resources for Roles</a></li>
</ul>
</div>
</footer>
{% render '@warning' %}
{% render '@header' %}
{% render '@teaser-making-web-accessible' %}
{% render '@teaser-news' %}
{#
{% render '@teaser-featured-w-background-img' %}
{% render '@teaser-callout-and-tip-of-day' %}
{% render '@teaser-media' %}
{% render '@teaser-four-teasers' %}
{% render '@news-overview' %}
#}
{% render '@teaser-sponsors' %}
{% render '@footer-site' %}
/* No context defined for this component. */
There are no notes for this item.