Lack of text hierarchy

On your page every heading must be either the same level as the previous heading or one level lower than the previous heading.

Common hierarchy errors:

  • lack of headers
  • headers appearing out of sequence
  • text lower in the information hierarchy appearing higher

Feature News [H4]

New MOU on health signed with Siksika Nation [H3]

Alberta's government has signed a memorandum of understanding (MOU) with Siksika Nation that supports work to improve health outcomes and services for Nation members.

Feature News [H3]

New MOU on health signed with Siksika Nation [H4]

Alberta's government has signed a me morandum of understanding (MOU) with Siksika Nation that supports work to improve health outcomes and services for Nation members.

Lack of padding

Use a consistent amount of padding between web elements and around text.

Low contrast

Text should always meet the colour standards and accessibility guidelines related to contrast.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum tincidunt felis non tincidunt. Donec tempor tincidunt vestibulum. Cras ut sem auctor, pretium mauris et, placerat erat. Etiam magna orci, pretium a ultricies ac, consectetur sed sapien.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum tincidunt felis non tincidunt. Donec tempor tincidunt vestibulum. Cras ut sem auctor, pretium mauris et, placerat erat. Etiam magna orci, pretium a ultricies ac, consectetur sed sapien.

Unaligned elements

Text on Government of Alberta websites should be left-aligned outside of display text.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum tincidunt felis non tincidunt. Donec tempor tincidunt vestibulum. Cras ut sem auctor, placerat erat. Etiam magna orci, pretium a ultricies ac, consectetur sed sapien.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum tincidunt felis non tincidunt. Donec tempor tincidunt vestibulum. Cras ut sem auctor, placerat erat. Etiam magna orci, pretium a ultricies ac, consectetur sed sapien.

Inconsistent iconography

It is important to choose the right symbol that clearly communicates the element’s meaning, and to keep a consistent style for the icons throughout your website.

Was this page helpful?

All fields are required unless otherwise indicated.

You will not receive a reply. Do not enter any personal information such as telephone numbers, addresses, or emails.

Your submissions are monitored by our web team and are used to help improve the experience on Alberta.ca. If you require a response, please go to our Contact page.