Accessibility Guide: Headings, Lists, Links, Color Contrast

Headings

• H1 Headings are typically added automatically when creating a Hero section. There is only one H1 element per page or view.
• Use headings in a clear, logical order to organize and introduce page content.
• Headings should follow a proper hierarchy (H2, H3, H4) without skipping levels, making content easier to understand and navigate.
  • Do not skip heading levels (for example, going H2 directly to H4), this can make content harder to navigate and understand.
    • Use H2 for main sections
    • Use H3 for subsections under H2, continuing sequentially as needed (H4, H5, etc).
• Heading formats should only be used to structure content and not for decorative or visual styling purposes. 

Lists

• Use list elements (bullet lists, numbered lists) for list content.
• Use list elements to break up and/or organize content when possible. 

Links

There are two different types of links:

• External: Links that navigate users to a different website or external resources.
• Internal: Links that navigate users to another page within the same website (linking Sections / Contents)

Use descriptive link text that clearly explains the destination or purpose of the link.

Avoid vague phrases such as “click here” or “here” as they may not provide enough context for screen reader users.

Links should be meaningful when read on their own and should clearly indicate if they open a document or download a file.

Do not change the link’s open behavior. Leave it as is.

Color Contrast

• Check the contrast for all normal-sized text and large-sized text.
• Check the contrast for all icons. 

Do not use color alone to convey information. Color may be used in combination with other formatting such as bold or italics to emphasize meaning.

Use a contrast checker to verify accessibility: webaim.org/resources/contrastchecker/