Header tags for identifying layout structure elements?

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.

From stackoverflow

• 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.

• 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;
  

• 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.