Digital and online content varies in structure and appearance. By implementing a few basic standards, we make sure that despite these variations our content can still be easily navigated by as many people as possible.
This section outlines the general principles we follow to achieve this.
Hierarchy
While digital content can take on many forms, the one thing that never changes is the need to use a hierarchal structure.
This means we:
- Put the most important information first.
- Start with a simple outline that states the key purpose of that page.
- Place similar information in the same paragraph
- Clearly separate topics with headings.
There are many reasons why we should do this:
- It helps people using assistive technology like screen readers. They can work out if a page is relevant to them without listening to an entire page.
- It makes content scannable.
- It improves search engine indexing.
Headings
Headings are a great way to help people navigate. Headers make the content easily scannable, and is of particular use for people using screen readers.
If headers are used correctly it means screen readers can list the headings sequentially at the start of the content. This means users can skip ahead as they need and "scan" the information provided on that page.
Formatting
The page title is the first thing a screen reader will read. Make sure you write a clear title that is relevant to the content.
When we structure our headings we follow a simple hierarchy.
We use:
- H1 for title.
- H2 for top level sections.
- Subsequent headings inside those are H3 and beyond. However, plan and structure your content before you start writing to avoid excessive nesting.
When we write headings and menu links we use title case.
Make sure you remember to use concise headings for the rows and columns in a table. This helps screen readers navigate tables and makes it easier to understand the information within the table.
Do not:
- Use a heading simply for stylistic purposes.
- Skip a heading simply for stylistic purposes.
Paragraph tags
Assistive technology like screen readers are able to skip between paragraphs if the user doesn't think the information is relevant.
Make sure you use paragraph tags (<p>) instead of inserting multiple breaks (<br>) between paragraphs.
Location
Make it easy for people to work out where they are or how to get to something.
There are a few ways this can be achieved:
- Use breadcrumbs to let people know where they currently are.
- For websites have a complete site map on a single page.
- If possible, include a search function to access all content.
- Do not allow automated changes like redirects happen without letting the user know beforehand.
- Keep your location functions consistent across your content.
Links and buttons
Often we can add value to our content by linking in external information but it can become confusing if it is not done correctly.
Avoid confusion by:
- Placing the link where people can easily find them.
- Let people know exactly where or what they are being linked to.
- Do not underline the link as this happens automatically.
Hyperlinking to another online resource
- Identify in the wording where the hyperlink will send the user.
- E.g. "Having trouble with contrast? Check out the Museum's Design Guide."
- For external links put the word 'website' in the link.
- E.g. "Discover cool events on the WA Museum's website."
- Avoid spelling out URLs. If you need to leave off the http://www.
- E.g. museum.wa.gov.au not http://www.museum.wa.gov.au
Linking to a file
When linking to files such as PDFs you must include the file type and size. If the file is audio or video-based make sure you include the duration as well.
An Example Report [300KB PDF]
An Example Audio File [5 mins 3.2MB mp3]
Buttons
If you are using a button:
- Make sure it has an action.
- Do not rely on the symbolism of the button to provide direction.
- E.g. If you are using a red button to indicate "stop" include the word "stop" on the button and in the button's alt text.
Forms
When creating a form make sure all the fields are labelled simply and succinctly.
Check that all the fields are necessary, especially for the ones that you have marked as required.