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.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cras ut placerat erat.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cras ut placerat erat.
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.
