Information Technology Systems and Services.
ITSS home

Structure: Landmarks

Web pages typically have common areas or landmarks. Although not all web pages share the same layout, most web pages incorporate some basic components such as:

HTML4 Provides Only Pseudo Landmarks

With HTML4 it is typical to use a <div> only structure to divide a page into areas. Sometimes id attributes are used as such as:

Web page using HTML4 div elements and id attributes

The <div> element is generic and provides no accessibly functionality or accessibility support even if it has an id attribute.

HTML5 Landmarks are Not Fully Supported

HTML5 extends HTML4's repertoire of elements. For applying semantics to structural areas of a page we have <header>, <footer>, <nav>, <main>, <article>, <section>, <aside>, and <figure> to supplement the generic <div>. So HTML5 will be able to simplify <div> landmark structure with semantic elements such as:

Web page using HTML5 structrural elements

Although increasingly improving, support for <header>, <main>, <footer>, <nav>, and HTML5 features are not fully supported. They possess great potential but are not yet recognized by all browsers (notably Internet Explorer) and assistive technology devices. In the future when screen readers or other user agents want to offer the opportunity to jump straight to landmarks (or skip over them) the semantics exist in the page.

ARIA Provides Accessibility Supported, Programmatically Determinable Landmarks

The benefits of HTML5 structural elements aren't fully available yet. However, numerous assistive technologies can make use of a similar method to denote important structures with the Web Accessibility Initiative's (WAI) bridging specification ARIA. ARIA can provide missing semantics. One of ARIA's concepts is document landmarks to mark up important landmarks on a page. The ARIA landmark roles include: banner, main, navigation, and contentinfo.

Web page using ARIA landmark roles

Landmark role attributes help assistive technology users orientate themselves within a document, and provide a mechanism to navigate documents. The idea behind them is to mark up a page so that people with disabilities can know the purpose of the sections and find them easily. Landmarks provide what people are actually trying to find out, where is the main content? Where is the navigation? etcetera. These are the things that people really need to identify and interact with (and sighted people can identify at a glance and act upon at will). Landmarks are a great thing to add to a site. In JAWS if users press the semi-colon key they will go to the next landmark. SHIFT + semi-colon takes them to the previous landmark. Pressing CTRL + INS + semi-colon will list landmarks. In the following video Leonie Watson demonstrates how ARIA landmark roles help screen reader users. A transcript of how ARIA landmark roles help screen reader users is available.

Combining ARIA Landmarks with HTML5 Landmarks

ARIA role attributes will validate in HTML5 so they can be combined with semantic HTML5 structural elements such as:

Web page using HTML5 structrural elements and ARIA landmark roles

The necessity of explicitly assigning ARIA landmarks will disappear as browsers build in the functionality of them into their HTML5 counterparts. The First Rule of ARIA use is, "If you can use a native HTML element [HTML5] or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so."

Combining ARIA Landmarks with HTML4 Pseudo Landmarks

Because the HTML4x and XHTML1x /2x specifications are no longer being updated, these landmark roles do not currently validate. However, WAI ARIA landmark roles can be injected with JavaScript in order that HTML4 pages pass validation and provide much needed accessibility too. For instance for its site ITSS adapted a script (courtesy of Gez Lemon) that injects landmark roles.