HTML and CSS Reference
have keyboard shortcuts that allow users to jump from heading
to heading. For example, the JAWS screen reader (by far the
most used package, according to the survey) 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 unsci-
entific Twitter poll of screen reader users suggested that badly
nested section headers are better than all headings being at the
same level (which is still better than no headings at all).
And, having done your best, wait for the browsers and the
screen readers that sit on top of them to implement the outlining
algorithm. As I said, it's not an ideal world.
NoTE Watch the excellent
video entitled “Importance
of HTML Headings for Accessi-
watch?v=AmUPhEVWu_E) . The
video shows how a blind acces-
sibility consultant navigates a
page with JAWS. In an ideal
world, it would be compulsory to
watch and understand this video
before you're allowed to call
yourself a professional designer
or developer. Sadly, it's not an
What's the difference between
<article> and <section>?
This is a question that is regularly asked of us at html5doctor.com .
An article is an independent, stand-alone piece of discrete con-
tent. Think of a blog post, or a news item in a document-based
site. In a web application, an <article> could be individual
emails within an email application or stories in a web-based
feed reader, as each email or story is a component of the appli-
cation and can be independently reused. Think of <article> not
as a newspaper or magazine article, but as a discrete entity like
an article of clothing.