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