Web Accessibility eClass

1.3 Lecture on Structure Part 3: 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 Provides Landmarks that Lack Accessibility Support

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

Web page using HTML5 structrural elements

However, <header>, <footer>, <nav>, and most HTML5 features currently lack accessibility support. They merely possess potential for improvement and are not yet universally recognized by browsers and assistive technology devices. In the future if 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.

In addition a main element was recently proposed as a HTML5 extension specification. It may or may not be adopted and could change without notice.

ARIA Provides Accessibility Supported, Programmatically Determinable Landmarks

The benefits of HTML5 structural elements aren't available yet. But many assistive technologies can already 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 out 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 also 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

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.

What's Next?

Once you've finished this lecture, please complete the reading assignments.