2.2.3 Examples

Example #1 - Using a link to bypass the menu system

Getting to the point! Here's a simple page mock-up...

A screen-shot of this page showing the exposed 'Skip to content' link with an arrow pointing to the start of the main content of the page, that is the target of the link.

A link is provided at the start of the page, which will be read by a screen-reading user before the main and secondary menu bars are read. This allows user to skip over the menu system and go directly to the main content on the web page.

Try it!: If you tab through the links on this page, or move your mouse pointer just over the left edge of the first white rectangle on the page, you will find the "Skip to Content" link that is on every page in this guide.

Example #2 - Using a <title> element to make web pages easier to find

Image 1: The HTML page title is 'Untitled' which does not mirror the page's primary heading, which is 'Countries of the World'
Image 2: The HTML title is 'Countries of the World' which exactly matches the primary heading in the content.

In this simple HTML example, the webpage author has neglected to put a meaningful page title in the <title> element. If you "bookmark" or add this page to your "Favourites" list, it will only be identified as "Untitled" — as shown on Image 1. Not very helpful to remind you what this page was and why you thought it worth saving! Unlike some word processors that guess that the first line in a file is the "title", most web browsers won't... they often have to be told!

Image 2 shows that the author has used the same text in the <title> element as in the level 1 heading or content title. Now when a user bookmarks this page it will be more easily identifiable.

Another good reason for proper use of the <title> element is that screen-reader users are usually presented with this code-level title first when they enter a page... the user can quickly determine if the link they followed took them to the destination they were expecting IF the title is meaningful. Otherwise the user might have to listen to a lot of the page's content before hearing any useful identifiers.

Example #3 - Use of headings to make web content more meaningful


A document's table of contents page.
  • A document's TITLE: "The World at a Glance" — becomes a HEADING 1 <h1>
    • Its SUBTITLE: "The Western Hemisphere" — becomes a HEADING 2 <h2>
    • A main SECTION or chapter: "North America" — becomes a HEADING 2 <h2>
      • A Sub-Section: "Canada" — becomes a HEADING 3 <h3>
        • A further subdivision: "Ontario" — becomes a HEADING 4 <h4>
      • Another Sub-Section: "USA" — becomes a HEADING 3 <h3>
    • Another main SECTION: "South America" — becomes a HEADING 2 <h2>

As long as an assistive device user can determine what "level" of header is associated with some text, it doesn't matter how you make that text "look" on your page. Remember that just because you make some text Larger or Bolder than other text, that is NOT sufficient to identify it as a header for someone who is using a screen-reader to access web content.

Visit the following links to access more specific information on coding techniques related to the creation of operable Web content including the support of alternate input devices, clear navigation strategies and user control for moving or time-sensitive input information:

WCAG 2.0 — Table of Contents [ http://www.w3.org/TR/WCAG20/ ]

WCAG 2.0 — Guidelines for Principle 2 — Operable [ http://www.w3.org/TR/WCAG20/#operable ]

Understanding and Implementing WCAG 2.0 [ http://www.w3.org/TR/UNDERSTANDING-WCAG20/ ]

Techniques and Failures for Web Content Accessibility Guidelines [ http://www.w3.org/TR/WCAG20/-TECHS/ ]

Customizable Quick Reference to WCAG 2.0 Success Criteria [ http://www.w3.org/WAI/WCAG20/quickref/ ]

Refer also to Section 6.0 — Resources.