Our Blog

Related Posts

Lawsuits for websites that do not comply with web accessibility standards are on the rise for e-retailers, content providers, and other private companies.

Pixo's new JavaScript bookmarklet highlights the ARIA landmarks on a page, making it easy to spot accessibility issues early in development.

Incorporate accessibility improvements early by empowering designers and developers with these tools and agile processes.

Popular Tags

Recent Comments

Landi Lark

In our previous accessibility post, The Cost of Waiting: Why to Fix Accessibility From Day 1, we discussed the importance of including the design and user experience (UX) teams in the accessible design process from Day 1. Accessibility is one important way of planning and mapping out your users’ experience. When we bring accessibility concerns to the entire team at the start of a project, we design with accessibility in mind. ARIA Landmarks are a key piece of the accessible experience that we design from Day 1.

What are ARIA Landmarks? (And why are they important?)

ARIA Landmarks are a relatively new tool to make your site accessible. They are an important HTML5 best practice. As soon as you start planning out a graphic design and writing HTML5 markup, your ARIA Landmarks should be designed and applied. Just like visual landmarks help sighted users navigate and adjust to their surroundings, ARIA Landmarks help users with disabilities navigate your site or application. Landmarks create semantically defined sections of a page to help users reach the information they are looking for quickly and efficiently — examples include navigation, search, and main content. Screen readers only experience one element of a site at a time. If a screen reader sees dozens of elements between the user and their desired information, it can be a painful process for the user. With the proper semantics, we can create “skip to” links for users to get to the content they’re seeking. Screen reader users can use a single key to instantly jump to each of these sections and know what the section’s function is. The great thing is that ARIA roles work really well with HTML5 and are not difficult to implement. Although they don’t map one-to-one, we realized that planning out the landmarks first would help identify what structure works best for what we are trying to achieve. And that brings us to the “how”. In order to help Design and User Experience (UX) staff choose the correct landmarks, Pixo has created some “decision charts” that help teams understand where a certain type of content should live:

ARIA Landmark Decision Chart
The above image illustrates some less obvious roles and how you would go about choosing them. This doesn’t include all of the possible roles out there. Roles like main, contentinfo, and banner, are pretty easy to define and locate on your own site. This is a guide to organizing your content from an accessibility viewpoint and mapping your site’s HTML5 to its appropriate ARIA counterparts.

  Ask your design and UX staff to help create blueprints to send to the developers to help them create an accessible structure from the start. Using this process, the developers aren’t solely tasked with getting rid of accessibility violations. They can use these blueprints to provide the best structure for any given part of a site or application from the beginning. This reduces the need to come up with creative ways to make an already almost-finished site accessible. This will also help make the user experience a consistently good one for all of your users! To learn more about using ARIA landmarks properly, check out the following resources: http://www.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/ (a blog post with a good comparison of how ARIA landmarks usually map to HTML5 elements) http://www.w3.org/TR/wai-aria/complete#landmark_roles (the ARIA specification itself)

Comments

One thought on “Choosing ARIA Landmarks: Get Your Semantics Right

  1. Pingback: Weekly Roundup of Web Design and Development Resources: July 17, 2015

Leave a reply

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> 

required

Related Posts

Lawsuits for websites that do not comply with web accessibility standards are on the rise for e-retailers, content providers, and other private companies.

Pixo's new JavaScript bookmarklet highlights the ARIA landmarks on a page, making it easy to spot accessibility issues early in development.

Incorporate accessibility improvements early by empowering designers and developers with these tools and agile processes.

Recent Comments

Interested in working with us?
CONTACT US