<title>Setting the Stage with ARIA Landmarks, U.S. Web Design Standards, Losing Sight and More</title>
<link href="https://a11yweekly.com/issue/2/"/>
<updated>2015-10-06T03:47:14Z</updated>
<id>https://a11yweekly.com/issue/2/</id>
<content type="html"><h2>Setting the stage with ARIA landmark roles</h2>
<p>You’ve probably seen code like this in your web pages or web applications before:</p>
<p><code><header role="banner"></code></p>
<p>And maybe you wondered exactly what that did? Maybe you added it because you knew it benefits accessibility, but didn’t know why. Let’s take a closer look at ARIA landmark roles.</p>
<p>You may see landmark roles with this acronym before them: WAI-ARIA. That stands for Web Accessibility Initiative – Accessible Rich Internet Applications. WAI is a group within the World Wide Web Consortium (the community group that develops open standards for the Web) that brings together individuals and organizations from around the world to help make the Web accessible to people with disabilities. ARIA is a technical specification published by the W3C that specifies how to increase the accessibility of web pages, in particular, dynamic content developed with JavaScript.</p>
<p>Landmark roles help users with assistive technology scan a page and get an idea of its structure. Just like you’d scan sections of a page visually looking for the “meat” of it section by section, landmark roles help users do that in a different way. Adding them to your markup is an easy way to provide a more user-friendly experience for everyone. However, today in most modern browsers and assistive technology, you don’t have to explicitly assign landmarks. Good browsers map ARIA landmark roles to newer HTML element semantics. The official HTML validator even throws a warning now if you do explicitly assign landmarks to elements that already carry the same semantics.</p>
<p>So do you need them or not? Whoa, accessibility can be a bit confusing at times, I know. But just like the rest of the Web world, things constantly change and evolve. So if you’re not concerned about older browsers and assistive technology, you don’t need to add ARIA landmarks. If you want to support the widest possible range of users, add them, and don’t worry about the warning in the validator.</p>
<p>The Paciello Group’s blog has a few excellent posts about the ins and outs of landmark roles:</p>
<ul>
<li><a href="https://www.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/">Using WAI-ARIA Landmarks – 2013</a></li>
<li><a href="https://www.paciellogroup.com/blog/2015/09/easy-content-organisation-with-html5/">Easy content organisation with HTML5</a></li>
</ul>
<p>Tools that help you test for ARIA landmarks:</p>
<ul>
<li><a href="http://accessibility.oit.ncsu.edu/tools/aria-landmark-inspector/">ARIA Landmark Inspector Bookmarklet</a></li>
<li><a href="http://whatsock.com/training/matrices/visual-aria.htm">Visual ARIA Bookmarklet</a></li>
</ul>
<h2>News and links</h2>
<p><a href="http://www.theguardian.com/society/2015/sep/30/ad-blocking-software-revolutionise-disabled-lives">How ad-blocking software could revolutionise disabled people’s lives</a>: A lot of the time in the accessibility world, what’s good for users with with disabilities is good for everyone. From this piece in the Guardian: “So this month’s launch of Apple’s operating system iOS 9 could revolutionise the lives of disabled iPhone and iPad users, because it will allow ad-blocking software to work on its mobile browsers for the first time. It won’t stop intrusive or auto-playing content on apps, but will filter it out from any web page accessed via a mobile browser.”</p>
<p><a href="http://discourse.wicg.io/t/a-proposed-new-language-as-an-alternative-to-html-css-and-javascript/1115">A proposed new language as an alternative to HTML, CSS, and JavaScript</a>: Could we really build an alternative to the Web stack? A few in the Web community debate it. From one of the responses: “Replacements to the HTML/CSS/JS trinity aren’t realistic. HCJ is used on over a trillion web pages; a majority of the world’s text is written in it. It’s not great, but it’s sufficient, and combined with its terrific momentum, that’s good enough to prevent anything new from cropping up.”</p>
<p><a href="http://blogs.windows.com/msedgedev/2015/09/25/accessibility-towards-a-more-inclusive-web-with-microsoft-edge-and-windows-10/">Towards a more inclusive web with Microsoft Edge and Windows 10</a>: Microsoft continues its more open way of developing with its latest changes in Edge, and its future plans for the new browser. From the blog post: “Inclusive development is a journey, not merely a destination, and we are committed to continuing to evolve Microsoft Edge to be the best place for accessible browsing on Windows. We’ve made a major step forward with architectural changes in Microsoft Edge, some of which regress experiences compared to Internet Explorer in the short term, but which are in the interest of creating a more inclusive experience for everyone in the long term.”</p>
<h2>Resources, tools and tutorials</h2>
<ul>
<li><a href="https://18f.gsa.gov/2015/09/28/web-design-standards/">Introducing the U.S. Web Design Standards</a> <em>(blog post)</em></li>
<li><a href="http://www.lireo.com/10-short-videos-improve-document-accessibility/">Improve document accessibility</a> <em>(video series)</em></li>
<li><a href="http://www.ssbbartgroup.com/blog/ada-and-the-web-for-retailers-technical-requirements/">ADA and the Web for retailers – technical requirements</a> <em>(blog post)</em></li>
<li><a href="http://bitsofco.de/2015/sectioning-content-in-html5/">Sectioning content in HTML5</a> <em>(blog post)</em></li>
<li><a href="https://www.linkedin.com/pulse/business-case-issue-prevention-extreme-accessibility-karl-groves">The business case for issue prevention: extreme accessibility</a> <em>(blog post)</em></li>
<li><a href="http://www.w3.org/WAI/gettingstarted/tips/">Tips for getting started with web accessibility</a> <em>(resource)</em></li>
<li><a href="https://insight.cryptzone.com/accessibility/top-10-most-common-web-accessibility-mistakes/">Top 10 most common web accessibility mistakes</a> <em>(blog post)</em></li>
<li><a href="https://www.youtube.com/watch?v=baR9OvL4g7w">Everything you need to know about JavaScript accessibility</a> <em>(talk)</em></li>
<li><a href="http://uxmovement.com/buttons/making-selected-button-states-clear-for-color-blind-users/">Making selected button states clear for color blind users</a></li>
<li><a href="http://tink.uk/losing-sight/">Losing sight</a> <em>(blog post)</em></li>
<li><a href="https://github.com/accdc/w3c-alternative-text-computation">A study of browser and assistive technology support for the W3C alternative text computation</a> <em>(research)</em></li>
</ul>
<h2>New to A11y?</h2>
<p>Headings might seem too basic to need extra attention, but they matter in more ways than you think. <a href="http://ifamily.co.uk/accessible-headings-ftw">Accessible headings, FTW</a> explains why.</p>
</content>