Skip links and keyboard navigation

CUE template: Conformance—Markup

The elements specified below must appear in the order below. Elements to be nested are indicated by nested list items.

Head

  1. Must have HTML4.01 or XHTML1.0 doctype
  2. Must have @lang (and @xml:lang for XHTML) specified in html tag

Body

  1. All navigation must be marked up as ul or ol elements and have a preceding heading (h2 or below) to define the purpose of the menu.
  2. body@id="qld-gov-au" (CSS signature)

Header

  1. 1st element: #access (container for skip link navigation menu)
    1. H2 'Skip links and keyboard navigation'
    2. Link to #content 'Skip to content'
    3. Link to #nav-site 'Skip to navigation' (optional)
    4. Link to #footer 'Skip to footer' (optional) (note: fat footer element should be nested inside footer element if present)
    5. Link to accessibility statement with text: "Use tab and cursor keys to move around the page (more information)"
  2. header and banner elements must be contained in #header element, in this order:
    1. H2 'Site header' (can be visually hidden)
    2. #qg-logo must link to www.qld.gov.au and contain Queensland Government logo (QG logo) with @alt="Queensland Government"
    3. #tools element must contain the tool navigation menu including #search-form
    4. Search input must be called #search-query and have size attribute of 27
    5. #site-name must link to website homepage

Navigation

  1. Site navigation must be contained in #nav-site element, in this order:
    1. H2 'Site navigation' (can be visually hidden)
    2. List of links
  2. Section navigation must be contained in #nav-section element, in this order:
    1. H2 heading for the current site section
    2. List of links
  3. Page breadcrumbs must be contained in a #breadcrumbs element, in this order:
    1. H2 'You are here:' (can be visually hidden)
    2. List of links (ol)

Content

  1. Main page content must be contained in #content element, in this order:
    1. H1 Page title
    2. Other content
  2. Asides (content tangentially related to main content) must be contained in .aside elements (can be multiple asides), each containing in this order:
    1. H2 heading stating purpose of the aside (can be visually hidden)
    2. Aside content
  3. Page last updated date must be contained in #document-properties

Footer

  1. Footer content must be contained in #footer, in this order:
    1. Fat footer content must be contained in #fat-footer
      1. H2 Explaining purpose of section (e.g: 'Explore [site name]', 'Our site', 'Site map', 'Haven't found what you were looking for?') (can be visually hidden)
    2. H2 'Site footer' (can be visually hidden)
    3. List of links
      1. Copyright
      2. Disclaimer
      3. Privacy
      4. Right to information (agency websites only)
      5. Accessibility
      6. Jobs in Queensland (must link to http://www.smartjobs.qld.gov.au/)
      7. Other languages (should display language names)
    4. Paragraph containing '© The State of Queensland (your agency name) YYYY–YYYY'
    5. Paragraph containing link to 'Queensland Government' (must have @accesskey="1")

Supporting information

CUE template conformance requirements (RTF, 270.4 KB) are also available to download.

The CUE template is available for use, including:

  • files, assets and resources required
  • implementation advice and notes on customisation
  • HTML examples.