eGovernment Resource Centre - Victoria, Australia

Victorian
Government
Contact Centre
1300 366 356

Main Menu

Categories, RSS and More

Main Categories

Shorten URL

Please enter the URL that you'd like to shorten or click here to shorten current:


What's this? loading...

Rate this Site

Thanks for visiting. To help us help you find what you need please take our 1 minute Visitor Survey.

Members Forum

The Forum is the place for members to post their opinions and exchange ideas.

Page source order

Page source order is important to people who have vision impairments and rely on a screen reader to navigate or interpret the site. It is also important to people with cognitive disabilities who use a screen reader to assist in reading the information on the site. A document where source order does not match the order of content with CSS on can be very confusing to these groups of users. In addition, source order is important to people with physical impairments who rely on a keyboard to navigate the site. People who rely on keyboards tab through the content and therefore can find it difficult to navigate the page if the source order does not match the order of the page with CSS on. Using TABINDEX does not address this problem as unless every single element is provided with a TABINDEX it can render the page unusable by screen reader users.

Relationship to checkpoints:

  • Checkpoint 6.1 requires that documents can be read without style sheets.
  • Checkpoint 13.4 requires that navigation mechanisms are presented in a consistent manner
  • Checkpoint 9.4 requires that the page presents a logical tab order through links, form controls and objects
  • Checkpoint 14.3 requires that the style of presentation is consistent across pages

Ensuring correct page source order when developing a site

When you have created your wireframes or graphical concepts label each element to indicate its source order. Source order should always read from left to right and down the page. This information can be provided to the developers to ensure they code elements in a particular order.

Example: YouthCentral site

Screen shot of the Youth Central Home Page


The source order of this page should be:

Youth Central Home Page with tab order highlighted 


Testing a site for correct page source order

  • There are three ways to test a site for correct page source order:
  • Tab through the page
  • Turn off CSS
  • Run a screen reader over the page

Tab through the page

Using your preferred browser, select the URL in the address bar and press the TAB key. In Firefox the first item highlighted goes to the Google search bar and the subsequent item is the relevant FireFox tab, but on the third tab you will reach the page. Only links, fields and form controls are items highlighted through tabbing. Ensure that the tab order mimics the visual page order onscreen, and is the equivalent to the desired tab order decided upon during the development of the wireframes or visual concept.

Turn off CSS

Using the FireFox Web Developer toolbar you can easily turn off style sheets. Ensure that with style sheets off, the order of elements mimics the visual page order with style sheets on.

Run a screen reader over the page

Screen reader testing should only be performed by people with vision impairments or people who use a screen reader to access information. However in this instance it is feasible for a non-vision impaired individual to use a screen reader to determine the order of a page and whether it mimics the visual page order onscreen.

Further Information

Information on page source order

Tools

Added: 6 July 2007 Page views: 1,906 Rating: 0 Votes: 0
Review and rate
Last updated: 6 July 2007