Setting the stage with ARIA landmark roles
You’ve probably seen code like this in your web pages or web applications before:
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.
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.
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.
The Paciello Group’s blog has a few excellent posts about the ins and outs of landmark roles:
Tools that help you test for ARIA landmarks:
News and links
How ad-blocking software could revolutionise disabled people’s lives: 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.”
Towards a more inclusive web with Microsoft Edge and Windows 10: 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.”
Resources, tools and tutorials
- Introducing the U.S. Web Design Standards (blog post)
- Improve document accessibility (video series)
- ADA and the Web for retailers – technical requirements (blog post)
- Sectioning content in HTML5 (blog post)
- The business case for issue prevention: extreme accessibility (blog post)
- Tips for getting started with web accessibility (resource)
- Top 10 most common web accessibility mistakes (blog post)
- Making selected button states clear for color blind users
- Losing sight (blog post)
- A study of browser and assistive technology support for the W3C alternative text computation (research)
New to A11y?
Headings might seem too basic to need extra attention, but they matter in more ways than you think. Accessible headings, FTW explains why.
Suggestions and corrections
Have a suggestion for something to be included in Accessibility Weekly? Did I make a mistake that doesn't belong on the Internet? You can either reply to this email or send a note to email@example.com.
Sponsorships and donations
You can sponsor Accessibility Weekly!. If you or your company is interested, send a note to firstname.lastname@example.org.
If you enjoy the newsletter, consider making a donation.