Semantic Headers

Recently I stumbled upon an interesting article by Martin Labuschin, in which he describes how to create semantically correct web site headers. He suggests to make use of a h1 element and an arbitrary image replacement technique.

Well at a first glance this approach seems quite obvious and understandable, since the site’s title is a quite important part of the page. But wait. Isn’t there another HTML element designated to holding the site’s title? What about our good old friend the title element? Exactly, this element is definitely the best choice if you want your page’s title to appear on your site — especially because screenreaders tend to read out its content each time you open a HTML page.

Visual Browers

However this approach has one drawback. Visual browsers just display the title in the… well title bar of the browser window. But in most of the cases the title respectively the logo should be displayed prominently within the actual page. So how can we achieve a header displaying the site’s title, both visually appealing and semantically correct? After a short discussion Martin and me came up with a solution that both of us felt confident with. So here we go…

Markup

We both aggreed on the fact that our header should support users of screenreaders or PDAs in navigating the site. In both cases you have to read the site chronologically — so it is not possible to easily skip between the different sections. Hence we provided a set of links, leading the user directly to the most important areas of the page. In our case these areas are: the main and the secondary content (sidebar).

<div id="header">
  <ul id="quickskip">
    <li><a href="#maincontent">
      skip to primary content</a></li>
    <li><a href="#sidebar">
      skip to secondary content (Sidebar)</a></li>
  </ul>
</div>

Accesskey

Well this is quite practical, but we can further improve accessibility by assigning accesskeys to the respective links. Accesskeys are not just a convenient way for screenreader users to quickly access specific areas of elements on a site, but also for user of visual browsers. If you decide to use accesskeys on your site — and trust me, you should — make sure that you first read this excellent article on accesskey standards on Clagnut. In our case we exemplarily assigned “1” to skip to the main content and “2” for skipping to the secondary content (sidebar).

<div id="header">
  <ul id="quickskip">
    <li><a href="#maincontent" accesskey="1">
      skip to primary content</a></li>
    <li><a href="#sidebar" accesskey="2">
      skip to secondary content (Sidebar)</a></li>
  </ul>
</div>

Another common element that should be accessible via an accesskey is the search field. But in contrast to our “skip” links, the accesskey attribute should be defined directly on the search label.

<label for="search" accesskey="3">Search:</label>
<input type="text" id="search" name="search" />

Navigation

Of course we also want the header to hold our main navigation, so we have to add an additional list of menu items. Now that we have completed our markup, our HTML page looks like this.

<div id="header">
  <ul id="quickskip">
    <li><a href="#maincontent" accesskey="1">
      skip to primary content</a></li>
    <li><a href="#sidebar" accesskey="2">
      skip to secondary content (Sidebar)</a></li>
  </ul>
  <ul id="navigation">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>
</div>

CSS

Now it is time to turn this plain HTML into a visually appealing header using pure CSS. In a first step we apply some basic styling to our header element: a fixed height as well as a repeating background-image.

#header {
  background: #1e2b4d url(bg_header.gif) repeat-x 0px 100%;
  margin-bottom: 30px;
  height: 105px;
  overflow: hidden;
  position: relative;
}

Hide skip links

Afterwards we have to hide all “skip” links from visual browsers. Note that we don’t use “display: none”, because doing so would also hide the respective markup from screenreaders, which is definitely not intended. Now our page already looks like a header.

#quickskip li {
  position: absolute;
  visibility: hidden;
}

Styling the navigation

In a next step we will style our main navigation. First of all we remove the bullets using list-style: none — and since we don’t want our list items to appear below but next to each other, we float them.

#navigation,
#navigation li {
  float: left;
  list-style: none;
}

Now we positioned the whole navigation absolutely. Important note: don’t forget to assign position:relative to the header — otherwhise the property bottom: 0 would relate to the html element. Preview.

#navigation {
  position: absolute;
  bottom: 5px;
  left: 16px;
}
#navigation li a {
  color: #fff;
  display: block;
  font-weight: bold;
  height: 30px;
  line-height: 30px;
  padding: 0 1em;
  text-decoration: none;
}

Logo

And finally we just have to display the logo.  In order to accomplish this task we assign a background image to the ul element of our skip links. That’s it. Preview

#quickskip {
  background: transparent url(“logo.jpg”) no-repeat 0px 0px;
  height: 70px;
  width: 390px;
}

Finally we can further improve our HTML document by moving the styles to a separate CSS file. Perfect. Here is the final example. If you have any questions or suggestions concerning our approach, don’t hesitate to leave a comment.