Survey scenario: Imagine you are about to visit a site with five main areas and each of these areas has a number of sub-sections or pages. Each page of the site contains the site navigation to the five main areas, local navigation to the sub-sections or pages within that area, and the informational content of the page.
Now, based on you past experiences of the web please provide a Y (yes) or N (no) response to the following statements. (Please note, the statements do not relate to how you would prefer page components to be presented but to your expectations about what is likely to happen).
| 18 Screen reader users | 5 Text Browser users | |||
|---|---|---|---|---|
| YES | NO | YES | NO | |
| 1. I would expect the site navigation to the main site areas to be presented first: | 18 | 0 | 5 | 0 |
| 2. I would expect the information content of the page to be presented first: | 0 | 18 | 0 | 5 |
| 3. I would expect the site navigation to the main areas and the local navigation to pages within an area to be separate and easy to identify: | 4 | 14 | 3 | 2 |
| 4. I would expect the site navigation to the main areas to be presented first, followed by the local navigation within that area, and then the information content: | 15 | 3 | 5 | 0 |
| 5. I would expect the site navigation to be presented first, followed by the information content and then the local navigation: | 4 | 14 | 2 | 3 |
| 6. I would expect the information content to be presented first, followed by the site navigation and then the local navigation: | 1 | 17 | 0 | 5 |
What is the difference between version 1 and version 2?
Only the beginner JAWS user had problems doing the tasks.
Beginner JAWS user found the presentation of navigation after content (frogs) made the site much more confusing and difficult to use.
All participants said these were very useful
(but two most experienced testers did not appear to use them)
At this stage, we are asking people to consider two different sites and use each one for a simple task. Each site presents the navigation and content in a different order. Both sites contain skip links to either navigation or content and headings identifying the different levels of navigation.
After you have used both sites we would like you to answer four questions.
This site presents the navigation menus first followed by the information on the page.
Task: What similarity is there in the feeding habits of the Purple Swamphen and the Green Catbird?
This site presents the information on the page first followed by the navigation menus.
Task: What similarity is there in the habitat of the Cascade Tree frog and the Common Mist frog?
Please answer the following questions. We will be very grateful for any additional comments you might wish to make.
All respondents were able to complete the test tasks.
The screen reader user with the least experience relied heavily on expectations of the source order.
This tester found it difficult to use the site that presented the content before the navigation.
Assistive technology users have a variety of techniques they can use when navigating a site or locating information on a page.
The effectiveness of these techniques depends on:
50% of test-site research participants said they were useful.
77% of expectation survey participants indicated difficulty in differentiating between different navigation menus on web pages.
100% of test-site participants reported the labels identifying the different levels of navigation on the sites where useful.
This presentation will demonstrate various methods for marking up and styling a document.
For this exercise we will make the assumption that an average page could include:
<h1><img src="logo.gif" alt="">Australian Birds</h1><h1> Australian Birds</h1>
#header { background: url(logo.gif) no-repeat 10px 1.5em; }For this exercise the option b has been chosen.
<a href="#content">Skip to content</a><a href="#content">Skip to content</a>
<a href="#sitenav">Skip to navigation</a><a href="#content">Skip to content</a>
<a href="#sitenav">Skip to main navigation</a>
<a href="#secondarynav">Skip to page navigation</a>For this exercise the option b has been chosen.
<a href="#content">Skip to content</a>
<h1>Australian Birds</h1><h1>Australian Birds</h1>
<a href="#content">Skip to content</a>For this exercise the option b has been chosen.
"Skip links are beneficial to keyboards users, people with mobility problems, and possibly other groups too. The most usable means of implementing skip links is to leave them visible, so that people who require them are aware they exist."
For this exercise visible skip links will be used.
For low vision users who come to a site using magnification, positioning skip links in the top left corner means that they will be immediately accessible.
For this exercise left-aligned skip links will be used.
<a name="content"></a><h2><a name="content">Common name: Australian Pelican</a></h2><div id="content">For this exercise the option c has been chosen.
<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>display: none;.structurelabel
{
position: absolute;
left: -5000px;
width: 4000px;
}For this exercise the option b has been chosen. More details on the off-left method.
<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>For this exercise the option c has been chosen.
<div id="container">
<div id="header"></div>
<ul id="sitenav"></ul>
<ul id="secondarynav"></ul>
<div id="content"></div>
<div id="extras"></div>
<div id="footer"></div>
</div><body>
<div id="container">
<div id="header">
<h1>
Australian Birds
</h1>
<ul>
<li><a href="#content">Skip to content</a></li>
<li><a href="#sitenav">Skip to navigation</a></li>
</ul>
</div>
<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>
<div id="content">
<h2>
Common name: Australian Pelican
</h2>
</div>
<div id="extras">
<img src="pelican.jpg" alt="" width="160" height="160">
</div>
<div id="footer">
<h2 class="structurelabel">
Footer information
</h2>
</div>
</div>
</body>
</html>#header
{
position: relative;
padding: 30px 20px 20px;
border-bottom: 1px solid #fff;
color: #fff;
background: #333 url(logo.gif) no-repeat 10px 20px;
}#header h1
{
margin: 0;
padding: 0 0 0 70px;
font-size: 220%;
font-weight: normal;
}