Victorian
Government
Contact Centre
1300 366 356

Main Menu

Categories, RSS and More

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

Page structure

Page structure is important to people with vision impairments, such as those using a screen reader or a magnifier. Page structure is also important to people with cognitive disabilities and can assist those with physical disabilities.

Relationship to checkpoints:

Checkpoint 3.3 requires that style sheets are used to control layout and presentation
Checkpoint 3.5 requires that header elements are used to convey document structure
Checkpoint 6.1 requires that documents may be read without style sheets.
Checkpoint 9.4 requires that the page presents a logical tab order through links, form controls and objects
Checkpoint 12.3 requires that large blocks of information are divided into more manageable groups where natural and appropriate
Checkpoint 13.4 requires that navigation mechanisms are used in a consistent manner
Checkpoint 13.5 requires that navigation bars are used to highlight and give access to the navigation mechanism
Checkpoint 13.6 requires that related links are grouped, identified and can be bypassed
Checkpoint 13.8 requires that distinguishing information is presented at the beginning of headings, paragraphs, lists, etc
Checkpoint 14.3 requires that the style of presentation is consistent across pages

Ensuring correct page structure

There are a number of different elements that are required in order to create a correct page structure:

TITLE element
Skip links
Properly marked up headings
Structural labels
Breadcrumbs

It is also very important that your page source order is correct.

TITLE element

It is very important that every page has its own, unique TITLE element. The TITLE of every page appears in the header of the browser, for example:

Web page with the TITLE Live in Victoria - Sponsored Skilled Migration Visas

It is preferable to include the name of the web site in all TITLEs, as well as the name of the individual page: this ensures a user can identify the page as belonging to a particular site by the TITLE alone. In the example above, the title of the site: Live in Victoria , is included with the title of the page: “Sponsored Skilled Migration Visas”.

Skip links

Skip links are very important to both screen reader users and people using magnifiers. When moving through a site, people often only initially look at the navigation and then only refer to it when required. This is the same for people using screen readers and magnifiers: they only need to listen to the navigation once and from then on want to move straight to the content on the page. Most sites provide the navigation prior to the content, and because it is important to preserve the visual page source order and the HTML source order then sites should provide the ability to skip over the navigation via the use of skip links.

There has been some discussion as to whether skip links should be visible or not. Most people think skip links are used only by people who use screen readers, but people who use magnifiers to view a web site also find skip links useful. Often a person using a magnifier will only see a small part of the screen. Often it is not obvious where the content is from this small part of the screen; providing a visual skip link is an important feature for this group of users.

Magnifier view of the top right corner of the Film Vic web site showing a large "Skip to main content" link

In the example above, Film Victoria has provided a visible “Skip to main content” link. The term “Skip to content” should be avoided as screen readers read “content” as in “contentment”, instead of “text content”. To avoid this issue ensure the link is “Skip to the content” or “Skip to main content”. It is also useful if this link is in the top left hand corner so it is the first thing the magnifier user will see.

Sometimes it is also useful to provide a “Skip to navigation” or a “Skip to search” link.

Properly marked up headings

Properly marked up headings are important to screen reader users. Screen reader users scan a web page using a variety of features, such as links, form controls and headings. Most screen readers can pull out the headings, and present them to the screen reader user in hierarchical order. This can provide a great amount of information to users and help them navigate through the page effectively.

It is important that headings are nested properly in order to convey the structure and hierarchy of the page. It is important not to skip heading levels (eg. a H4 should not follow an H2).

Example – Department of Innovation, Industry and Regional Development (DIIRD)

DIIRD headings marked up

Structural labels

Recent research has suggested that people who use screen readers sometimes cannot identify the navigation of a web site. Without visual context, these users sometimes cannot differentiate between sub-navigation and navigation.

Example – DIIRD

The DIIRD web site was built prior to research that recommended the use of structural labels. The DIIRD site used the popular technique of nesting navigation and sub-navigation items. Later research indicated this method did not provide enough information to people using screen readers.

DIIRD web site show nesting navigation and sub-navigation items.

Providing hidden structural labels assists these users to identify these lists of links and access the information provided via the hierarchy.

Use hidden structural labels such as “Global menu” or “Site navigation”. When providing hidden structural labels for sub-navigation you should include as much information as possible. For example in a site of exotic birds use: “Navigation for sea-side birds”, or “Sea-side birds”.

Example – Department of Education

With style sheets disabled the two sets of navigation have two different navigation labels: "Overall menu" and "Main sections"

Include breadcrumbs

Breadcrumbs are an additional navigation tool that assists both the general public and people with disabilities to navigate through a large or complex site. It is especially important where other navigation mechanisms, such as the Back button, have been broken. It is also important that breadcrumbs also have hidden structural labels, however the term “breadcrumbs” is an industry term. A preferable term is “You are here:”.

Breadcrumbs should provide the hierarchical position not the chronological pathway in the site. For instance, even if a user came to a particular part of the site through inline links, the breadcrumbs should provide the navigational pathway to that page.

Example – YouthCentral breadcrumbs

Breadcrumbs: Home, Travel & Transport, See Australia