You are now in the main content area

Semantic Structure

Headings do not only act as visual cues, but also as an outline as to how a page is structured and how sections relate to one another. Proper heading structure can be especially useful for people who use screen readers, as they can be used as a navigational aids to jump from heading to heading.

Unique Page Title and Heading 1 for every page

In the responsive templates, the Page Title also becomes the Heading 1 as soon as you create a page. For both accessibiliy and SEO reasons, it's important to ensure your page title is unique and concise.

  • The Page Title orients users, and is also the first thing a screen reader user hears. The Page Title is also important for SEO. Learn more about SEO Tips and Tricks.
  • The Heading 1 is also the start of the main content area and is the most important heading in terms of rank or hierarchy. The Heading 1 can be used as a navigation aid for assistive technology users to indicate it's the start of the page content. 

Note: On the homepage of a site, the Heading 1 is the Site Title located in the banner. On all other pages, the Heading 1 is located in the main content area. You are able to edit the Heading 1 text after creating a page.

Learn how to Create Page Titles/H1 on responsive templates.

Structure content with headings

Use headings on every page. Headings should be meaningful, succinct and structured in a hierarchical manner. Use headings to:

  • Break up blocks of text. Make it easier for users to scan and find what they need. Headings do not only provide visual cues of structure, but also are used to convey structure to assistive technology users. 
  • Communicate content relationships and hierarchies. It is important to make sure headings are structured in a logical order that conveys hierarchy, ensuring that all headings have a proper parent/child relationship. Different levels of subheadings should be underneath main headings. For example a Heading 3 would be nested under a Heading 2.

Things to avoid

  • Don't use headings to achieve design aesthetics. For example, don't use a Heading 6 because it "looks better" - remember, headings are used to convey structure.
  • Bolding text does not make it a heading. Bolded text does not convey any semantic information, and should only be used to provide emphasis.
  • Excessively long headings. Provide meaningful and concise, not long and wordy.
  • Don't skip headings.
Example of good heading structure on a web page.

Example of a web page using headings correctly

The annotated box shows an outline of all the headings on the page, similar to the table of contents for a book. It gives you a visual idea of how each part is interconnected. Also make note that accordion panels can have a heading level format too!

 

Headings in Text Editor

You will notice that Headings 2 to Heading 6 are only available in the text editor. This is intentional, since the Heading 1 is the first heading on every page.

Headings can be found in the following components:

Headings in the footer

Use semantic headings in the footer instead of bolded text. The responsive template uses smaller heading styles in the footer area to promote good heading structure without visually distracting users from your main content. 

Preview of footer heading styles in responsive template.

Heading font size within footer section of inherited content

  • Heading 2 = 1.2em
  • Heading 3 = 1.1em

Use bullet and number formatting buttons to create lists

Make sure to use semantic lists by using the bullet or number formatting buttons instead. When using a semantic list, assistive technologies are able to convey information such as the total number of items and the relative position of each item in the list.

 Bad: Manually formatted list 

A person who is sighted can visually tell it's a list. However, someone who uses a screen reader will not know how long the list is, if any items have a sub bullet, and it will confusingly read out "dash" or "star" for each item!

- Student Learning Centre

- Kerr Hall

    * Kerr Hall North

    * Kerr Hall South

    * Kerr Hall East

    *Kerr Hall West 

- George Vari Engineering and Computing Centre

 Good: Structured list 

When navigating this list with a screen reader, it will announce it is a list of three items, and will identify the sublists as a nested list of four items. It also offers consistent visual formatting. 

  • Student Learning Centre
  • Kerr Hall
    • Kerr Hall North
    • Kerr Hall South
    • Kerr Hall East
    • Kerr Hall West 
  • George Vari Engineering and Computing Centre

Relevant WCAG 2.0 Success Criteria

Using heading structure in a meaningful way is a combination of various Level A and AA success criteria, which is required for conformance with WCAG 2.0 and the Accessibility for Ontarians with Disabilities Act (AODA).