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:
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:
The <div> element is generic and provides no
accessibly functionality or
accessibility support even if it has an id
attribute.
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:
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.
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.
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.
ARIA role attributes will validate in HTML5 so they can be combined with semantic HTML5 structural elements such as:
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.
Once you've finished this lecture, please complete the reading assignments.