The results were presented at Ozewai in December 2005, and the Ozewai podcast was then made available in the WSG site.

Now, the full report has just been released – Source Order, Skip links and Structural labels.

On Source order:

“There appears to be little evidence to support the view that screen reader users would prefer to have the content presented first, or find sites easier to use when this occurs.”

On Skip links:

“The wide range of screen reader options for accessing page content means that many experienced users of these technologies do not need to use skip links. But for less experienced screen reader users, it seems clear that many are likely to find skip links a useful device for moving directly to specific sections of the page.”

On Structural labels:

“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.”

More:

• Full article
• Further observations on the testing at Lisa’s site

Tags: source-order, skip-link, structural-label, accessibility

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