<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 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">
{%render "@button", name="link", label="More About Keyboard Compatibility", href="#", mods=['more'] %}
{%render "@button", name="link-secondary", label="See All Perspectives Videos", href="#", mods=['more', 'secondary'] %}
</div>
</section>
/* No context defined for this component. */
There are no notes for this item.