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