Text - Introducing HTML5 - page 36

(because the browser “knows” what level a heading is from the
outlining algorithm) and which would simplify styling:
*:heading(1) {font-size: 2.5em;} /* a logical <h1> */
*:heading(2) {font-size: 2em;} /* a logical <h2> */
However, at time of writing, this is but a wonderful dream.
As a stop-gap, Mozilla is experimenting with a new
selector grouping mechanism to Firefox nightlies called
:-moz-any() that allows a form of CSS shorthand—see
hacks.mozilla.org/2010/05/moz-any-selector-grouping/ .
Perhaps, for this reason, you would be tempted to use only <h1>
elements to simplify styling, and let the outlining algorithm do the
rest. After all, the spec says “Sections may contain headings of any
rank, but authors are strongly encouraged to either use only h1 ele-
ments, or to use elements of the appropriate rank for the section's
nesting level.” But you shouldn't (yet) as it harms accessibility.

The outlining algorithm and accessibility
A recent survey by WebAim showed that 76 percent of screen
reader users “always or often” navigate by headings (see the
full survey for more vital information ( www.webaim.org/projects/
screenreadersurvey2/ ). These people use the hierarchy of
headings both to give themselves a mental overview (an out-
line!) of the document they're in and also to navigate through
that content. Most screen readers have keyboard shortcuts that
allow users to jump from heading to heading. For example, the
JAWS screen reader uses the H key to jump from heading to
heading, the 1 key to jump to the next <h1> , the 2 key to go to
the next <h2> , and so on.
Currently, no browser builds an internal model of the page struc-
ture based on all the complex rules previously mentioned and
therefore can't expose this model to any screen reader or assis-
tive technology. So, using only <h1> wrecks the navigability and
therefore hinders the accessibility of your page.
Our advice is again, follow the spec: “Use elements of the
appropriate rank for the section's nesting level.” That is, ensure
that, in your pages, the hierarchy of headings is correct even
without factoring in new HTML5 elements. It will also make writ-
ing CSS much easier.
In cases when articles are syndicated from one site to the
other and the levels might be out of logical order, a completely

NOTE Watch the excellent
video entitled “Importance
of HTML Headings for Accessi-
bility,” available at www.youtube.
com/watch?v=AmUPhEVWu_E .
The video shows how a blind
accessibility consultant navi-
gates a page with JAWS. In an
ideal world, it would be compul-
sory to watch and understand
this video before you're allowed
to call yourself a professional
designer or developer. Sadly, it's
not an ideal world.