CUE template conformance requirements
 For CUE template version 3.0
These requirements for website markup, presentation and behaviour will be used to assess conformance with the template requirement from CUE Standard 3.0.
Agencies that do not wish to use the provided CUE template, or wish to alter it, please refer to the following checklist of conformance requirements and ensure that the modified/custom website adheres to them.
Table of contents
CUE template conformance requirements
Markup
Presentation
Behaviour
Definitions

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
3.	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.
4.	body@id="qld-gov-au" (CSS signature)
Header
5.	1st element: #access (container for skip link navigation menu) 
a.	H2 “Skip links and keyboard navigation”
b.	Link to #content “Skip to content”
c.	Link to #nav-site “Skip to navigation” (optional)
d.	Link to #footer “Skip to footer” (optional) (note: fat footer element should be nested inside footer element if present)
e.	Link to accessibility statement with text: "Use tab and cursor keys to move around the page (more information)"
6.	header and banner elements must be contained in #header element, in this order: 
a.	H2 “Site header” (can be visually hidden)
b.	#qg-logo must link to www.qld.gov.au and contain Queensland Government logo (QG logo) with @alt="Queensland Government"
c.	#tools element must contain the tool navigation menu including #search-form
d.	Search input must be called #search-query and have size attribute of 27
e.	#site-name must link to website homepage
Navigation
7.	Site navigation must be contained in #nav-site element, in this order: 
a.	H2 “Site navigation” (can be visually hidden)
b.	List of links
8.	Section navigation must be contained in #nav-section element, in this order: 
a.	H2 heading for the current site section
b.	List of links
9.	Page breadcrumbs must be contained in a #breadcrumbs element, in this order: 
a.	H2 “You are here:” (can be visually hidden)
b.	List of links (ol)
Content
10.	Main page content must be contained in #content element, in this order: 
a.	H1 Page title
b.	Other content
11.	Asides (content tangentially related to main content) must be contained in .aside elements (can be multiple asides), each containing in this order: 
a.	H2 heading stating purpose of the aside (can be visually hidden)
b.	Aside content
12.	Page last updated date must be contained in #document-properties
Footer
13.	Footer content must be contained in #footer, in this order: 
c.	Fat footer content must be contained in #fat-footer 
i.	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)
d.	H2 “Site footer” (can be visually hidden)
e.	List of links 
i.	Copyright
ii.	Disclaimer
iii.	Privacy
iv.	Right to information (agency websites only)
v.	Accessibility
vi.	Jobs in Queensland (must link to http://www.smartjobs.qld.gov.au/)
vii.	Other languages (should display language names)
f.	Paragraph containing “© The State of Queensland (your agency name) YYYY–YYYY”
g.	Paragraph containing link to “Queensland Government” (must have @accesskey=”1”)

Presentation
Chrome
1.	The favicon must be specified using the favicon packaged with the CUE template.
Skip links
2.	Text size must be the same as that chosen for utilities on the site.
3.	Must use high contrast colour combinations (i.e. stand out from the site)
4.	When visible, this element (the 'access bar') is a full page width bar with all links and content in a horizontal line (floated).
Page layout
5.	Max-width of 80em for all content elements, for comfortable reading length (design elements may extend beyond). Note: Applications that require more space may extend beyond (e.g: Large mapping applications, or fullscreen video).
6.	Once max-width is reached, the layout must appeared centred in the viewport.
7.	Consistent column widths (at 'standard desktop resolution') 
a.	Section navigation column should span 25% of the available width (gutters can be added within that space, i.e: padding/margin) and sits far left of screen
b.	Content (.article) should span 50% of the available width when there is an aside column (or 75% when there is no aside column) and sits in the centre of screen (i.e: directly to the right of the section navigation column).
c.	Aside column should span 25% of the available width and sits far right.
8.	Applications that don't have 'section navigation' should use the content column positioning above (i.e: centred). If extra horizontal space is required by the application (e.g: a full page mapping application) then up to 100% of the browser viewport width can be used.
Header
9.	The Queensland Government logo image (QG logo) (selected from choices packaged with the template) are 240px wide by 42px tall. The logo must be positioned 12px from the top and .7em+5px from the left of the top left corner of the viewport (when the viewport width is less than the layout max-width specified above).
10.	Site name must be left aligned in the header directly below the QG logo (with a 7px gap between QG logo and site name).
11.	The site name text must be the same height for all sites (28px for the image height and 17px for the text height within).
12.	Header has height of 105px (applies when viewed at 'standard desktop resolution' and 'default font size'). The header must be able to expand taller at lower resolutions (as the contents of the header wrap).
13.	The default size of the #search-query input must be based on the size attribute and utilities font-size and must not be overridden using other CSS.

Navigation
14.	Menu items must have a distinct visual state on keyboard focus
15.	Menu items must have a distinct visual state on mouse hover
16.	A menu item must have a distinct visual state when it represents the current page
Site navigation
17.	Site navigation must appear as a horizontal bar directly below the header
18.	Site navigation bar must have a height of 2.2em when all menu items fit on one row. Must increase in intervals of 2.2em when menu items wrap onto second and third rows.
19.	If drop-down menus are used: 
a.	only one level of drop-downs must be used.
b.	open parent menu items must have a distinct visual state.
Section navigation
20.	Section navigation must appear as a list of links, or as a nested list of links if more than one level of IA is available. If JavaScript is also available, section navigation must appear as an expandable/collapsible tree of menu items.
21.	The plus/minus icons distributed with the template must be used for the UI button (toggle) next to menu items with child items.
22.	The dimensions (clickable area) of each toggle must be 16px by 16px. (size based on icon).
23.	Child menu items should be indented based on inherited styles.
24.	Child menu items that don't themselves have children should appear as bulleted list items. 
Content
21.	Breadcrumbs 
a.	Must use separator icon between breadcrumb items (packaged with template).
Footer
22.	Fat footer 
a.	Must be visually distinct from the main content area (e.g: separator and/or background colour change).

Print
23.	 Print styles must optimise the page output for print by hiding the following elements: 
a.	Access links
b.	Utilities
c.	Site navigation
d.	Section navigation
e.	Page options
f.	Fat footer
24.	Content must expand to use 100% of the available width.
25.	Asides must be linearised to display after main content.
26.	Conditionally hidden content must be expanded with appropriate headings (e.g: tabbed content, progressively disclosed form sections).

Behaviour
Skip links
1.	At low resolutions (viewport width below 43em) the all skip links must be visible
2.	At higher resolutions: 
a.	The 'access bar' must be hidden on page load.
b.	When access links are focused, the access bar becomes visible.
c.	When focus leaves the access bar, the bar becomes hidden again.
Navigation
3.	ARIA style keyboard navigation must be used for menus and interfaces (tab between menus, cursor keys within).
Site navigation
4.	If using drop-down menus 
a.	When JavaScript is not available, only the top level menu items are available (All links must be present lower in the site IA via the section navigation menus on those pages). Otherwise…
b.	Hovering over menu links must display a drop-down menu — any other open drop-down menus must be closed (no more than one open at a time)
c.	As top level menu items gain focus, the child menu within must become visible.
d.	Pressing ‘Tab’ within the site navigation section must move focus through top level menu links and display a drop-down menu (ARIA style keyboard navigation treating each top level menu as a ‘widget’) — the right arrow key must function exactly the same way (the next menu link gains focus).
e.	Pressing ‘Left arrow’ or ‘Shift+Tab’ key must move focus through top level menu links in reverse direction (the previous menu link gains focus)
f.	Pressing ‘Enter’ must follow the currently focused link.
g.	Pressing  ‘Down arrow’ within a drop-down menu will cycle focus to the next link, or if pressed while focused on the last link, will return focus to the top level menu item.
h.	Pressing ‘Up arrow’ within the drop-down menu will cycle focus to the previous link, or if pressed on the top level menu item, will move focus to the last link within the drop-down menu.
i.	Pressing ‘Esc’ within the drop-down menu will close the menu and return focus to the parent menu link.
j.	Pressing ‘Right arrow’ within the drop-down menu will close the menu and place focus on the next item capable of receiving focus after the parent menu link (from a drop-down menu on the last menu link, this will move focus back to the first top level menu item).
k.	Pressing ‘Left arrow’ within the drop-down menu will close the menu and place focus on the previous item capable of receiving focus before the parent menu link (from a drop-down menu on the first menu link, this will move focus to the last top level menu item).

Section navigation
5.	When this menu contains a nested list of links and JavaScript is available: 
a.	Section navigation represents an expandable/collapsible tree menu.
b.	Section navigation menu starts with all nodes collapsed except for the path leading to the current page link, which must be exposed.
c.	There must be a way to specify which link is the current page if the URL or page title doesn't match the href or text/title of the link.
d.	At each submenu that collapses, add a toggle UI element (linked image) that becomes part of the tab order
e.	When a submenu is closed 
i.	The toggle UI element must be an image (plus icon distributed with the template).
ii.	The toggle element must contain alt and title attributes of “Open the x submenu” (where x is the link text from the submenu's parent link).
iii.	Activating the toggle (click/enter) must expand the submenu (CSS display: none).
a.	When a submenu is open 
i.	The toggle UI element image src must be updated to the minus icon distributed with the template.
ii.	The alt and title attributes must be updated to “Close the x submenu” (where x is the link text from the submenu's parent link).
iii.	Activating the toggle (click/enter) must collapse the submenu. (CSS display: [not none]).
Content
6.	Page options 
a.	May contain drop-down menus for multiple options. If JavaScript is not available all options must be available/visible.
7.	Page options (post content) 
a.	May contain pop-up elements (not a pop-up window) for complex options. If JavaScript is not available all options must be available/visible.

Definitions 
Contrast ratio 	As per WCAG 2.0 contrast ratio. 	
Standard desktop resolution 	As per WCAG 2.0 on a full-screen window:"on the most common sized desktop/laptop display with the viewport maximised Note: Since people generally keep their computers for several years, it is best not to rely on the latest desktop/laptop display resolutions but to consider the common desktop/laptop display resolutions over the course of several years when making this evaluation." 	
Toggle 	A user interface element used to toggle two different widget states. In the context of these requirements, the toggle refers to the plus/minus icon next to expandable/collapsible section navigation menu items. 	
Viewport 	The space available for a web page to display (i.e: inside a browser window, or a mobile device). 	
Visually distinct 	Visually able to be identified as a unique state or unique element. For example, a text colour change with contrast ratio of at least 3:1 or a background colour change with contrast ratio of at least 2:1 	
Widget 	As per WAI ARIA 1.0 widget:A collection of user interface elements for interacting with part of a web page or web application.