Page source order and accessibility

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:

• Screen reader users often rely on a notion of ‘what a site is like' when developing a mental picture of the site they are using.
• Learning the structure of sites that don't fit this notion can be very difficult.

• CSS = accessibility
• CSS = Source order freedom
• Source order freedom = accessibility?

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)
• Stage 2: Task-based user testing (observation)
• Stage 3: Source order preference (survey)

Stage 1: Source order expectations (survey)

Survey of expectations

• 18 Screen reader users
• 5 Text browser users

Process

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

• Navigation to the main site areas
• Local navigation to pages within an area
• Informational content of the page.

Expectation Survey results:

• All participants believe main site navigation will be presented before the information content.
• Some screen reader users had problems differentiating between site and local navigation menus.
• Four of the screen reader users said they thought pages that presented the content first would be easier to use.

Stage 2: Task-based user testing (observation)

Task-based user testing

• Source order of content and navigation
• Use of skip links
• Use of structural labels

Four test sites:

• Navigation followed by informational content
  • Birds (version 1)
  • Birds (version 2)
• Informational content followed by navigation
  • Frogs (version 1)
  • Frogs (version 2)

What is the difference between version 1 and version 2?

Four test participants

• Very experienced Window Eyes user (audio)
• Very experienced JAWS user (Braille)
• Moderately experienced JAWS user (audio)
• Beginner JAWS user (audio)

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:

• 2 testers preferred Birds (navigation before content)
• 1 tester preferred Frogs (content before navigation)
• 1 tester had no preference

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

• The participants used various strategies to do the tasks.
• Most employed different screen reader techniques when using the sites.
• Only the beginner JAWS user relied on "reading” the content of the page.

Skip Links

• Very experienced screen reader users did not use them at all.
• Moderately experienced user used them extensively

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:

• Source order preference (navigation or content first)
• Usefulness of skip links
• Usefulness of structural labels for navigation menus

Eight people responded to the survey

All respondents were able to complete the test tasks.

Which site did you find easiest to use?

• Frogs: 3
• Birds: 2
• The same: 3

Did you use the skip links?

• Yes: 5
• No: 3

Participant comments:

• "Yes, I always read through a new site to get a feel for its' layout and then use any available navigation links"
• "Yes, after accessing the initial web pages of the sites"
• "I used them on the frogs site. Didn't find I needed to on the birds"

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

• Yes: 8
• No: 0

Participant comments:

• "Yes, headings are always useful"
• "Yes, extremely!"
• "Yes. I found these very useful"

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

• 4 testers prefered navigation before content
• 4 testers preferred content before navigation
• 4 testers had no preference

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:

• Valid page code
• Appropriate use of headings and links

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

• Place navigation before content to benefit some screen reader users
• Include skip links
• Use meaningful headings
• Use descriptive links
• Use structural labels to identify navigational components of web pages.
• Use semantically correct and valid page code.
• Adhere to the Web Content Accessibility Guidelines.

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
• Heading
• Main navigation
• Secondary navigation
• Content
• Additional content
• Footer information

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

• What are they
• Why are they beneficial

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