About structural labels

Some history

A few years ago, when Roger Hudson and I were testing our first full-CSS site, we noticed that blind users found the different content areas of the page hard to define and sometimes confusing.

However, when descriptive headings were added to the page the problem disappeared. We decided to call these headings “structural labels”.

What is a structural label?

Structural labels are descriptive headings used to indicate the main components of a web page, such as global site navigation, sub-site (local) navigation and footer information.

Are structural labels beneficial to screen reader users?

“The inclusion of structural labels seems to be an effective and relatively simple solution to the significant problem some screen reader users have in identifying the different elements on a page.”

Source order, skip links and structural labels article

Are structural labels displayed on-screen?

CSS can be used to prevent structural labels from being displayed on-screen in modern browsers. However, these labels will be presented to screen readers and devices that do not support CSS.

How does a structural label work?

Some sample markup:


<h2 class="structurelabel">
	Site navigation
</h2>
<ul id="sitenav">
	<li><a href="index.htm">Home</a></li>
	<li><a href="water.htm">Water birds</a></li>
	<li><a href="land.htm">Land birds</a></li>
	<li><a href="urban.htm">Urban birds</a></li>
</ul>
<h2 class="structurelabel">
	Water birds navigation
</h2>
<ul id="secondarynav">
	<li><a href="birds01.htm">Australian Pelican</a></li>
	<li><a href="birds02.htm">Black Swan</a></li>
	<li><a href="birds03.htm">Little Pied Cormorant</a></li>
	<li><a href="birds04.htm">Purple Swamphen</a></li>
	<li><a href="birds05.htm">Musk Duck</a></li>
</ul>

Some sample CSS that can be used to hide a structural label:

.structurelabel
{
	position: absolute;
	left: -5000px;
	width: 4000px;
	overflow: hidden;
}

Date: 17 January 2006
Author: Russ Weakley
Category: Accessibility, Articles, CSS
Tags: , , , , ,

Comments so far

  1. [...] More: Further information on structural labels at Russ’ site [...]

  2. Raanan Avidor says:

    Never understood why search engines don’t consider this technique as SPAM, and even if they don’t today, they will tomorrow.

  3. Useful technique, Russ.

    I also use negative postioning as an image replacement technique, but lately I have been worried that Google may perceiving this as spam.

    Is there any proof that this is or isn’t the case? I did find this article on Matt Cutt’s blog, which, I must admit, makes me worry a little more.

    Also, what is the purpose behind the ‘width:4000px;’ line?

    I’m enjoying reading your blog, Russ. Nice work!

  4. Russ says:

    @ Raanan, this method, like many methods could be abused by developers wanting to hide content and trick Google. However, if Google decided to punish everyone who used any form of CSS hiding for legitimate reasons, how many sites would this affect? My feeling is that a lot of sites who are using these methods for various reasons, including image replacement, would suddenly suffer.

    @david, the width is a backup. Some would consider it unnecessary, but it is used to make sure the content that is moved off the side of the screen will not reappear if the font size is radically increased. Thanks :)

  5. “david, the width is a backup. Some would consider it unnecessary, but it is used to make sure the content that is moved off the side of the screen will not reappear if the font size is radically increased.”

    Then why not

    .structurelabel {
    position: absolute
    left: -500em;
    }

    The offset will, then, definitely rescale with the text-size.

    Specifying a width can screw up if the element inherits a background colour (for instance).

  6. Russ says:

    @jacques – a good point. Ems would be a better option for setting width, though in some weird circumstances content may still pop back on the screen. Like if you had an 800 character long strucutural heading… c’mon, its bound to happen! ;)

    A small note to those who like Jacques improved option, don’t forget the semi-colon:

    .structurelabel
    {
    position: absolute;
    left: -500em;
    }

  7. “A small note to those who like Jacques improved option, don’t forget the semi-colon:”

    #%@* lack of a “Preview” button :-)

    As to David McDonald’s concerns, the day the Googlebot first downloads an external CSS file is the day I start to be worried.