WebAIM - Web Accessibility In Mind

E-mail List Archives

RE: Header tag

for

From: John Foliot - bytown internet
Date: May 1, 2003 8:13AM

Simon,

IMHO, you are partially right but mostly wrong here.

Yes, a structure of document headings can be interpreted as a list (similar
to what I originally illustrated)... think Table of Contents. But then, as
you proceed through the "book" you are presented with chapters <h1> which
may have subheadings <h2> and even tertiary headings <h3> under some of the
sub headings <h2> within any given chapter. But then, boom, you are into
the next chapter <h1>, and a similar (or different) semantic structure takes
place for that chapter. Chapters, when presented in a Table of Contents,
may be seen as a list, but when they are then presented as "the work", are
they still list items, or do they take on a different persona, a different
semantic "occupation"?

Lists, are intended to be brief, point form style information. It doesn't
have to be just a couple of words, it can be a paragraph or two, but
generally they are short, complete thoughts; and multiple ones at that,
ordered out in either a random order (<UL>) or chronological order (<OL>),
or occasionally as a "Question and Answer, Call and Response" style listing
(<DL>)

Heading tags on the other hand can contain 10 - 20 or more paragraphs before
the next logical header appears, and it can either be a subset of the
current idea (<h3> following an <h2>), equal to the previous idea (<h2>
followed by another <h2>), or followed by a whole new concept (transition
back to <h1> for example). Each of these functions offer semantic
information beyond the fact that they are groupings of ideas, which
unfortunately is all that list mark-up can do.

Simon, "information" within a web-site can assume different roles, depending
on how and when it's being conveyed. I invite you to visit
www.dougthompson.ca On this site, each week the Councillor writes a weekly
newsletter to keep his local constituents informed of what's going on.
Pretty basic stuff. On the main page, there is a list of the three most
recent articles, actually coded as a definition list, with the "headline"
(<dt>) and then the first paragraph(<dl>) of that week's column. In the
context of what is being presented here, it *is* a list of the last three
columns. "Clicking" onto the headline however takes you to the week in
question, and there, while the "text" or "information" remains the same, the
semantic structure of that document and it's contents has changed; there are
now a series of <h3> headlines grouped under two larger <h2> headings.
Perfectly logical and, semantically correct... these aren't really list
items now are they?

Now for an added bonus... while I always extol working towards software
agnostic development, the most common screen reader in the marketplace
(JAWs) takes advantage of the <h> tags whenever a page is loaded. When a
non-sited user loads a web page into their browser, JAWs tells them 3 things
before even starting to read the page: The <title> of the document, how
many links there are on the page, and how many headers there are. Should a
document load up with numerous headers, the JAWs user has the ability to
bring up a list of all of the Headers in the document, and effectively
"scan" them to see if the information they are seeking is present, (perhaps
as a subheading in Chapter 3?). Should the information be present (or
appear close enough) the Jaws user can select that header, and the software
treats the <h> tag almost like a named anchor, taking the "reading focus" to
that point in the document, allowing them to skip over all the other stuff.
Lists alone do not provide that functionality.

And so fianlly, back to the original question. If a validation tool fails a
listing as I originaly illustrated, the tool is flawed:

> <h1>Main Title</h1>
>
> <h2>Section 1 - Here</h2>
> <h3>This</h3>
> <h3>That</h3>
> <h3>The Other</h3>
>
> <h2>Section 2 - There</h2>
> <h3>This</h3>
> <h3>That</h3>
> <h3>The Other</h3>
> <h4>An Alternative Other</h4>
>
> <h2>Section 3 - Anywhere</h2>
> <h3>This</h3>
> <h3>That</h3>
> <h3>The Other</h3>



JF

*********************


>