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