Creating Accessible HTML: A Crash Course in ARIA Landmark Regions

The C2 Group
Mar 26, 2018 · 4 min read

By Genevieve Nelson | Originally published at www.c2experience.com

Editor’s Note: Since this article was published, The C2 Group has created role-specific checklists for content creators, graphic designers, and web developers. You can download all three checklists here.

What if I told you there are a set of roles, states, and properties that enhance HTML for the purpose of accessibility?

What if I told you you’re probably already implementing some of them?

This set of features is called ARIA (Accessible Rich Internet Applications), and there is a lot of long documentation written by the W3C (World Wide Web Consortium) on the subject. The lengthiness and verbosity of these documents alone can be intimidating. Let’s take it one step at a time. This article is meant to highlight a part of one document.

The core of the ARIA Practices document lies in the Design Patterns and Widgets section, which provides design patterns for building things like inclusive menus, tabs, and dialog boxes by using ARIA and keyboard commands. Immediately following that is the less sexy Landmark Regions section, which we’re going to look at now.


HTML Sectioning Elements

Landmark regions communicate visual structural information to screen reader users. They can also be targeted by skip links (links used to skip redundant parts of web pages). You are probably already creating landmark regions without knowing it. When you use an HTML5 sectioning element, it auto-magically creates a landmark region. There are additional landmark roles that can be added to other elements; that’s coming up.

For your review, the HTML5 sectioning elements are:

Do not add the default landmark role to the HTML5 element. The default landmark role is already implied:


Labeling Areas

If a landmark role is used more than once on a page, each element should have a unique label. For example, if you have two navigational elements on your page, you will want to use “aria-label” to differentiate them:

Screen readers will read “label” + “landmark role”. Therefore, don’t include the word “Navigation” in your label, because the screen reader would read out “Site Navigation Navigation”.

If the area has a heading (h1-h6), you can use “aria-labelledby” to refer to the ID of the heading:

Check out this list of elements and their roles.


Landmark Roles

Banner

  • Usually refers to: HEADER element (usually includes logo and search)

Complementary

  • Usually refers to: ASIDE element

Contentinfo

  • Usually refers to: FOOTER element (usually includes copyright info, privacy links, etc)

Form

  • Usually refers to: FORM element

Main

  • Usually refers to: MAIN element (main content of the page)

Navigation

  • Usually refers to: NAV element (group of links used for navigating the site or page)

Region

  • Usually refers to: SECTION element

Search

  • Usually refers to: Doesn’t correlate to an HTML element

Congratulations! You just read through the CliffsNotes for some hefty documentation. After reading through this documentation, I realized that I needed to go straight to the site that I was working on and implement these principles. I challenge you to do the same.

“The great aim of education is not knowledge but action.”

— Herbert Spencer


Genevieve Nelson is a front-end developer and web accessibility champion at The C2 Group.

The C2 Group

Enterprise Design + Technology

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade