Anchor links
- Use anchor links for long pages.
Guidance
- Format anchor links using either a bullet or numbered list
- Split long pages into sections with headings and sub-headings and use anchor links to link to these from the top of the page
- Anchor links should only link to sections on the same page and not a different page.
- When creating the anchor, use a single lowercase word (no numbers or special characters) that relates to the location the page will jump to.
Examples
The Web standards for PDFs and other file types page is a good example of a page that uses anchor links.
Why we have this web standard
Anchor links make it easier for users to navigate longer pages.
Unordered lists (bullet point lists)
Bullet point lists are formatted using the bullet button on the Squiz editing toolbar.
Guidance
- Use bullet points to draw attention to key statements
- Bullet points should be used for anchor links of 5 items or less
Ordered lists (numbered lists)
Numbered lists are formatted using the numbered list button on the Squiz editing toolbar.
Guidance
- Use numbered lists for items that need to be placed in order of priority or sequence
- Use numbered lists for anchor links of over five items
- Don't use Roman numerals, letters or complicated numbering
Accordions
Accordions are formatted by creating a separate content container, selecting Block (div) under 'Presentation', and Accordion collection under 'CSS Class'.
Any H2 headings added to this container automatically create an accordion.
Guidance
- Reduces 'information overload' by hiding content beneath clear, specific headings
- Only to be used to organise collections of content that are on a need-to-know basis. Each heading should serve a distinct type of resident, and not be relevant to all. For example:
- FAQs, where residents may only need one question answering
- Multi-step processes, where residents don't need to read about the next step until they've completed the first
- Lists of potential, but distinct resident scenarios, where residents only need to read the part that applies to them
- If used for only one or two headings, the content should be substantial. A general rule is to check if the content would potentially add significant length, confusion or lack of clarity without accordions.
- Cannot be nested below an H3 or H4 subheading
- Headings must be clear and concise
- Consider your audience when using accordions. While fairly common online, some demographics may not be as familiar with this functionality
Why we have this web standard
Accordions make it easier for residents to find the answer to a specific need.
By staying consistent with the guidance, we avoid the functionality losing its value and becoming a tool for style only.
