WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Multiple H1 tags in an HTML5 web page

for

From: Chagnon | PubCom
Date: Mar 10, 2014 4:07PM

The HTML <TITLE> tag was a nice thought, but wasn't implemented well circa
1990 and still isn't today.

From my experience, the only people who "see" it are those using screen
readers because it's voiced to them automatically.

For sighted users, the title tag appears in the browser bar, the colored bar
or thumb tab above the actual webpage which is totally overlooked and
ignored by sighted users. In other words, it's there but sighted users never
look at it. Instead their eyes are focused below all the top visual clutter
and are looking at the main web content on the page.

The <TITLE> tag is also used by search engines and is what appears in a
search engine results page (SERP), where everyone, sighted or not, sees it.

I have to go back and remember that in the 1990s, I was (and still am) a
technology specialist for publishing. It was traditional publishing then,
books, journals, newspapers and magazines, because the World Wide Web hadn't
yet been developed.

My kudos to Tim Berners Lee & Company who developed what we now know as the
Internet and the beginnings of HTML. But I often wonder if they had any
knowledge of publishing and communication protocols and requirements, or
were they just imaginative code jockeys and theoreticians who put this
together by the seat of their pants.

Every single piece of published information has a title. Or should have a
title. But it's not the <TITLE> tag they invented for HTML. Instead I have
to shoehorn my content into heading tags that often don't do the job well
enough, especially for people who are blind.

Example right now, this minute, from the website www.washingtonpost.com. How
would you tag this story? Note to those using screen readers, there are 5
pieces in this series of headings and teasers.

Opinions
Is this the proof Obama’s health-care law is working?
Greg Sargent
A new Gallup survey shows the number of uninsured falling again.
Samuelson: Obama’s new gamble

If I was designing the printed version of this in the newspaper, not the
website, the labels on these 5 pieces would be as follows:

Opinions (kicker heading or department heading)

Is this the proof Obama's health-care law is working? (Title of the first
story)

Greg Sargent (by-line)

A new Gallup survey shows the number of uninsured falling again. (Deck head,
which is a little summary or teaser between the main story title and the
actual narration of the story)

Samuelson: Obama's new gamble (another author by-line and another story
title, both on one line)

In print design, I have a bazillion ways to make each piece of information
distinctive and convey its hierarchy and purpose. My sighted readers will
understand all this in less than a second, point 8 seconds according to user
research.

But in HTML and accessibility, I have only <H1>, <H2> through <H6> heading
tags plus <P> tag to work with. How do I convey the meaning, purpose, and
hierarchy of these 5 pieces of information with such a limited tag set?

And right now, on the Washington Post homepage, there are dozens of
individual stories. What gets an <H1> tag?

And what do I do when I have a complex, compound title for a story, a main
title and a sub-title? What tags do I use?

It was a shame that the originators of HTML and the WWW didn't look use the
hundreds of years of publishing as their model for Internet information.
They went about an created a new wheel. To me, they invented a dysfunctional
half-assed wheel rather than taking the existing, functional wheel and
making it better.

We have a very long way to go before we can begin to provide equal access to
information for disabled users. This discussion about tags is just the tip
of the iceberg!

—Bevi Chagnon
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - -
www.PubCom.com — Trainers, Consultants, Designers, Developers.
Print, Web, Acrobat, XML, eBooks, and U.S. Federal Section 508
Accessibility.
New Sec. 508 Workshop & EPUBs Tour in 2014 — www.Workshop.Pubcom.com