Header tags for identifying layout structure elements?

Question

I am trying to apply better semantics and accessibility to my web pages.

I recently installed the Fangs add-on for Firefox to see what they look like in a screen reader. I am concerned with how all my sidebar and footer information appears crammed underneath my last content heading.

Problem #1

I would like to be able to break it up by using header tags (<h1>, <h2>, etc.) to designate "Sidebar" and "Footer" sections. I am not sure if this is a proper usage of header tags. While these sections are technically content, it feels a little odd to see them at the same hierarchy level as an article title.

Problem #2

I also would like to keep these header tags for identifying layout structure elements invisible but still available to those that need it. Using "visibility: hidden" leaves an undesired placeholder. Using "display: none" appears to produce the desired effect, but I have seen posts that suggest it may not work in actual screen readers. I am now tempted to use "position: absolute" and the negative "text-indent" trick to break the element out of the normal flow and push it off-screen.

Answer 1

I've seen many sites using the <h3> tag being used in sidebars and footers. So, you can also follow the same. The <h1> and <h2> tags are generally used only once in a web page. <h1> for the title and <h2> for the tagline.

Well.. for the second problem, you can use a JavaScript to toggle the display property.

Answer 2

These are my notes so far.

Some resources:

• The global structure of an HTML document | W3C
• Using h1-h6 to identify headings | WCAG 2.0
• Using CSS to hide a portion of the link text | WCAG 2.0
• Invisible Content Just for Screen Reader Users | WebAIM
• On being heard but not seen | Access Matters
• Screen Reader Visibility | CSS-Discuss
• Screen Reader Test Results | Access Matters

Some examples in the wild:

w3.org/WAI/ (h3.no-display)

position: absolute;
left: -999px;
width: 990px;

diveintoaccessibility.org (h2.invisibletitle)

display: none;

standards-schmandards.com (h1)

position: absolute;
left: -1000em;
margin-left: -1000em;
display: block;
height: 0;
overflow: hidden;

yahoo.com (h3.a11y)

position: absolute;
left: -5000px;
width: 100px;

my.yahoo.com (h3.a11y)

position: absolute;
height: 0;
overflow: hidden;

gmail.com (h2.u4w5cc)

position: absolute;
height: 9px;
left: 0;
top: -10000px;

target.com (h1.offscreen)

position: absolute;
left: -99em;
width: 90em;
overflow: hidden;

Answer 3

You could use the hr element to separate the sections, for example:

<div id="header"></div>
<hr />
<div id="content"></div>
<hr />
<div id="sidebar"></div>
<hr />
<div id="footer"></div>

Additionally you could use the title attribute on the hr elements to describe the following section. But I don’t know how this is supported.