News

<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>