maxdesign.com.au

Published:

Slides from a presentation by Roger Hudson and Russ Weakley at OZeWAI 2005.

Part 1: Page source order and accessibility

Question 1

Is source order important for screen reader users?

Question 2:

Are skip links a waste of time?

Question 3:

What are structural labels and do they help?

What did we do?

We visit a site with preconceived notions about how it is likely to work

Preconceived notions

Our preconceived notions are either confirmed, refined or replaced as we learn to use the site

Over the last four years we have noticed:

Who says?

"Providing page content before navigation is good for screen reader users."

Assumptions are assumptions

Endless repetition does not make them true

Three stage process to test the assumption "screen reader users want content first"

Stage 1: Source order expectations (survey)

Survey of expectations

Process

Each participant sent an email survey on their expectation about how three components of web pages will be ordered;

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).

  1. I would expect the site navigation to the main site areas to be presented first:
  2. I would expect the information content of the page to be presented first:
  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. 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:
  5. I would expect the site navigation to be presented first, followed by the information content and then the local navigation:
  6. I would expect the information content to be presented first, followed by the site navigation and then the local navigation:
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

Expectation Survey results:

Stage 2: Task-based user testing (observation)

Task-based user testing

Four test sites:

What is the difference between version 1 and version 2?

Four test participants

Participants were observed using the sites for the test tasks

Only the beginner JAWS user had problems doing the tasks.

Which sites did the participants find the easiest to use:

Skill with the technology determined how well a participant was able to do the tasks

Beginner JAWS user found the presentation of navigation after content (frogs) made the site much more confusing and difficult to use.

Different strokes for different folks

Skip Links

Structural labels for different levels of navigation

All participants said these were very useful
(but two most experienced testers did not appear to use them)

Stage 3: Source order preference (survey)

Follow up email survey to determine:

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.

Site 1: Birds. http://www.maxdesign.com.au/jobs/source-order/birds2/index.htm

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?

Site 2: Frogs. http://www.maxdesign.com.au/jobs/source-order/frogs2/index.htm

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.

Questions:

  • 1. Were you able to complete the tasks on both sites: Yes or No: If no, on which sites were you not able to complete the task.
  • 2. Which site did you find the easiest to use. Frogs, Birds or both the same:
  • 3. Did you use the skip to content or skip to navigation links: Yes or No
  • 4. Did you find the headings identifying the different levels of navigation on the sites useful: Yes or No

Eight people responded to the survey

All respondents were able to complete the test tasks.

Which site did you find easiest to use?

Did you use the skip links?

Participant comments:

Did you find the headings identifying the different levels of navigation useful?

Participant comments:

Research observations and outcomes

The majority of screen reader users EXPECT navigation to be presented before the content.

Outcomes?

Our research showed no clear overall preference of source order

Inexperienced users

These users may find presentation of content before navigation disorientating

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.

Experiences users

These users source order seems to be irrelevant

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:

Screen reader users and skip links

Some screen reader users are likely to find skip links useful

50% of test-site research participants said they were useful.

Structural labels

Structural labels will benefit most screen reader users

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.

Recommendations

Thank you

Roger Hudson


Part 2: Marking up and styling an HTML document

What's this about?

This presentation will demonstrate various methods for marking up and styling a document.

The content

For this exercise we will make the assumption that an average page could include:

Logo options

Option a: inline image

<h1><img src="logo.gif" alt="">Australian Birds</h1>

Option b: background image

<h1> Australian Birds</h1>
#header { background: url(logo.gif) no-repeat 10px 1.5em; }

For this exercise the option b has been chosen.

Skip link choices

Option a: single skip link

<a href="#content">Skip to content</a>

Option b: two skip links

<a href="#content">Skip to content</a>
<a href="#sitenav">Skip to navigation</a>

Option c: three skip links

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

Skip link placement within the markup

Option a: skip link before main heading

<a href="#content">Skip to content</a>
<h1>Australian Birds</h1>

Option b: skip link after main heading

<h1>Australian Birds</h1>
<a href="#content">Skip to content</a>

For this exercise the option b has been chosen.

Visible or invisible skip link

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

Juicystudios

For this exercise visible skip links will be used.

On-screen skip link positioning

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.

Skip links pointing to "name" or "id"

Option a: floating named element

<a name="content"></a>

Option b: named element inside heading

<h2><a name="content">Common name: Australian Pelican</a></h2>

Option c: content area

<div id="content">

For this exercise the option c has been chosen.

Structural labels

Structural labels – 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>

Structural labels – CSS

Option a:

display: none;

Option b:

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

For this exercise the option b has been chosen. More details on the off-left method.

Navigation markup options

Option a: Standard nested list

Option b: Two separate lists

Option c: Two separate lists with structural labels

For this exercise the option c has been chosen.

Navigation 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>

Adding semantic divisions

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

Thank you!

Russ Weakley