Semantic content structure

Processing large amounts of information is a challenge for everyone. Sighted users scan a page quickly looking for headings to get an impression of the content of the page. People that use assistive technology can navigate content by landmarks, headings, lists, and UI elements. Structuring the content correctly ensures that the experience is consistent and understandable.


The importance of proper content structure

The importance of proper content structure

People rely on visual cues for structure (eg. bulleted list) and visual hierarchy to understand what content means (semantics).

Assistive technology relies on the native attributes from semantic HTML or native app code to navigate and use digital content.

Use semantic elements - headings, buttons, links, lists, roles, and tables appropriately - must be visually discernible and programmatically understandable to Assistive Technology.

Structuring content also puts content in a logical order ensures TELUS customers have a clear and consistent experience. Assistive technology and screen readers follow the natural flow of a web page or screen. 

People rely on visual cues for structure (eg. bulleted list) and visual hierarchy to understand what content means (semantics).

Assistive technology relies on the native attributes from semantic HTML or native app code to navigate and use digital content.

Use semantic elements - headings, buttons, links, lists, roles, and tables appropriately - must be visually discernible and programmatically understandable to Assistive Technology.

Structuring content also puts content in a logical order ensures TELUS customers have a clear and consistent experience. Assistive technology and screen readers follow the natural flow of a web page or screen. 


How to structure content

How to structure content

The pages should flow in a way that makes sense to all readers and applications reviewing the page.

When structuring your content:

  • Put the most important information upfront
  • Create visually semantic content and proper content hierarchy with headers, sections, bullets, tables, and form fieldsets
    • Use tables for data that has rows and columns and/or has content that needs to be compared, eg. order summaries
  • Do not skip headings:
    • The first heading (H1) describes the pages main topic and should support the page <title>
    • Top level sections are H2
    • Subsequent sections are H3 and so on (rarely exceeding H4 and never H6)
    • The code semantics must be h1, h2, h3, and so on
    • You can visually style your headings with CSS, as long as the code is hierarchical. For example, you can use an H2 visual style on a semantic H4 to provide visual emphasis
  • Make sure your content blocks are concise and include all relevant user information
  • Work closely with your PO, content lead, and designer to make the content structure clear

The pages should flow in a way that makes sense to all readers and applications reviewing the page.

When structuring your content:

  • Put the most important information upfront
  • Create visually semantic content and proper content hierarchy with headers, sections, bullets, tables, and form fieldsets
    • Use tables for data that has rows and columns and/or has content that needs to be compared, eg. order summaries
  • Do not skip headings:
    • The first heading (H1) describes the pages main topic and should support the page <title>
    • Top level sections are H2
    • Subsequent sections are H3 and so on (rarely exceeding H4 and never H6)
    • The code semantics must be h1, h2, h3, and so on
    • You can visually style your headings with CSS, as long as the code is hierarchical. For example, you can use an H2 visual style on a semantic H4 to provide visual emphasis
  • Make sure your content blocks are concise and include all relevant user information
  • Work closely with your PO, content lead, and designer to make the content structure clear

Explore more

Explore more