"Ensuring that repeated components occur in the same order on each page of a site helps users become comfortable that they will able to predict where they can find things on each page. This helps users with cognitive limitations, users with low vision, users with intellectual disabilities, and also those who are blind". W3C - Understanding WCAG 2.0 - Understanding SC 3.2.3 - Consistent Navigation(Opens in new window)
The two following examples demonstrate consistency in design. Navigation and section title are in the same place on each step so the user can easily orient themselves with the sequence.
The highlighted 'Step' title in each example indicates which step a user is on within a resource.
The following indicates step one in a process.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo lectus, lacinia quis lacinia et, vulputate commodo dui. Sed in pharetra ante. Fusce at nisl et orci aliquam congue vitae ut risus. Maecenas vestibulum, quam nec pharetra porta, orci nibh egestas velit, ac accumsan sem dolor ut tellus. Pellentesque sed odio dui, et tempus metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin dignissim leo a orci placerat sit amet dapibus nisl porttitor.
Pellentesque non orci ac sapien elementum pulvinar vitae non orci. Curabitur quis metus et eros ornare malesuada. Praesent augue nibh, congue vitae porttitor egestas, gravida sed nisl. Vivamus volutpat venenatis vestibulum. Morbi sed mauris quis nisi pretium commodo. Curabitur sed enim diam, at posuere sem. Duis odio diam, scelerisque nec vehicula non, cursus sodales urna. Praesent pharetra dictum eros ut euismod. Nunc dictum viverra nulla in malesuada. Nulla et orci ante. Suspendisse pretium feugiat turpis, sed facilisis leo blandit tincidunt.
The following indicates step two in the same process - the information indicating the current step in the process predictably in exactly the same place.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo lectus, lacinia quis lacinia et, vulputate commodo dui. Sed in pharetra ante. Fusce at nisl et orci aliquam congue vitae ut risus. Maecenas vestibulum, quam nec pharetra porta, orci nibh egestas velit, ac accumsan sem dolor ut tellus. Pellentesque sed odio dui, et tempus metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin dignissim leo a orci placerat sit amet dapibus nisl porttitor.
Pellentesque non orci ac sapien elementum pulvinar vitae non orci. Curabitur quis metus et eros ornare malesuada. Praesent augue nibh, congue vitae porttitor egestas, gravida sed nisl. Vivamus volutpat venenatis vestibulum. Morbi sed mauris quis nisi pretium commodo. Curabitur sed enim diam, at posuere sem. Duis odio diam, scelerisque nec vehicula non, cursus sodales urna. Praesent pharetra dictum eros ut euismod. Nunc dictum viverra nulla in malesuada. Nulla et orci ante. Suspendisse pretium feugiat turpis, sed facilisis leo blandit tincidunt.
The two following examples demonstrates inconsistency in design.
The navigational element (an arrow icon link intended to indication navigation to the next step) in the examples below is in a different location in step two of the process (the second example).
This example shows the process' navigational element at the bottom right of the page.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo lectus, lacinia quis lacinia et, vulputate commodo dui. Sed in pharetra ante. Fusce at nisl et orci aliquam congue vitae ut risus. Maecenas vestibulum, quam nec pharetra porta, orci nibh egestas velit, ac accumsan sem dolor ut tellus. Pellentesque sed odio dui, et tempus metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin dignissim leo a orci placerat sit amet dapibus nisl porttitor.
Pellentesque non orci ac sapien elementum pulvinar vitae non orci. Curabitur quis metus et eros ornare malesuada. Praesent augue nibh, congue vitae porttitor egestas, gravida sed nisl. Vivamus volutpat venenatis vestibulum. Morbi sed mauris quis nisi pretium commodo. Curabitur sed enim diam, at posuere sem. Duis odio diam, scelerisque nec vehicula non, cursus sodales urna. Praesent pharetra dictum eros ut euismod. Nunc dictum viverra nulla in malesuada. Nulla et orci ante. Suspendisse pretium feugiat turpis, sed facilisis leo blandit tincidunt.
This example demonstrates that the navigational element has moved further up the page and is therefore unpredictably placed.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo lectus, lacinia quis lacinia et, vulputate commodo dui. Sed in pharetra ante. Fusce at nisl et orci aliquam congue vitae ut risus. Maecenas vestibulum, quam nec pharetra porta, orci nibh egestas velit, ac accumsan sem dolor ut tellus. Pellentesque sed odio dui, et tempus metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin dignissim leo a orci placerat sit amet dapibus nisl porttitor.
Pellentesque non orci ac sapien elementum pulvinar vitae non orci. Curabitur quis metus et eros ornare malesuada. Praesent augue nibh, congue vitae porttitor egestas, gravida sed nisl. Vivamus volutpat venenatis vestibulum. Morbi sed mauris quis nisi pretium commodo. Curabitur sed enim diam, at posuere sem. Duis odio diam, scelerisque nec vehicula non, cursus sodales urna. Praesent pharetra dictum eros ut euismod. Nunc dictum viverra nulla in malesuada. Nulla et orci ante. Suspendisse pretium feugiat turpis, sed facilisis leo blandit tincidunt.
Users expect to find consistent navigation within a set of web pages.
"Ensuring that repeated components occur in the same order on each page of a site helps users become comfortable that they will able to predict where they can find things on each page. This helps users with cognitive limitations, users with low vision, users with intellectual disabilities, and also those who are blind." W3C - Understanding WCAG 2.0 - Understanding SC 3.2.3 - Consistent Navigation (Opens in new window)
The following is a demonstration of consistent navigation with the link to a particular web page in the same location on different pages.
In this example the page is the 'Home' page of a site and is the highlighted link of the list and appears at the start of the list.
In this example the page is the resources page of the site. Navigation links are in the same position and the 'Resources' page is now highlighted to indicate the current location of the user.
In this example the page is the 'Home' page of a site and is the highlighted link of the list and appears at the start of the list.
In this example the page is the resources page of the site. The location of the Navigation links have been altered and the 'Resources' page is in the place of the Home link.
This assists users with visual disabilities and acts as a general warning to inform all users of the behaviour of the browser after clicking the link.
A warning that the link will open the destination file in a new browser window should be included in the text within the a tags and following the link text. This will assist any user listening to the site through a screen reader by stating the destination information first and then the warning.
Using the attribute target with a value of _blank - target="_blank" - instructs the link to open in a new browser window.
<a href="example-page.html" target="_blank">External site (opens in a new window)</a>This assists all users in locating the information they are searching for.
The following is an example of a search function for a whole site. This search function contains only an area to type the required information and a submit button to submit that search request.
The following is an example of a search function for only searching specified areas of a site. This search function contains check boxes to indicate the user selection of the site section to search, in addition to an area to type the required information and a submit button to submit that search request..
All users - it will assist in identifying the page the user is on.
"Descriptive titles help users find content, orient themselves within it, and navigate through it. A descriptive title allows a user to easily identify what Web page they are using and to tell when the Web page has changed. The title can be used to identify the Web page without requiring users to read or interpret page content. Users can more quickly identify the content they need when accurate, descriptive titles appear in site maps or lists of search results. When descriptive titles are used within link text, they help users navigate more precisely to the content they are interested in. "
W3C - Techniques for WCAG 2.0 - G88: Providing descriptive titles for Web pages (Opens in new window)
Titles are included in the head section of the web page XHTML as demonstrated below.
Page titles should reflect the page heading and content.
An example is provided by W3C, this example refers to a web page which is part of a “sub-site" within a larger site:
"The title is separated into three parts by dashes. The first part of the title identifies the organization. The second part identifies the sub-site to which the Web page belongs. The third part identifies the Web page itself."
W3C - Techniques for WCAG 2.0 - G88: Providing descriptive titles for Web pages (Opens in new window)
Applying the example to this web site would consist of the following XHTML:
<html>
<head>
<title>e-standards.flexiblelearning.net.au - Accessible e-learning: a guide for teachers - Navigation</title>
</head>
<body>
</body>
</html>