University of Auckland logo

Stay informed

Receive updates on teaching and learning initiatives and events.

  1. Home
  2.  — 
  3. Resources for teaching
  4.  — 
  5. Design for accessibility
  6.  — 1. Headings

Photo by Ben Kolde on Unsplash

1. Headings

Heading styles are pre-formatted heading types/formats that structure content in logical order, making it easy to view and navigate. Heading styles are also essential for screen reading software as the software communicates levels of hierarchy to users.


Use inbuilt headings to create hierarchy



Rely on text size alone

28pt font, bold
18pt font, bold
14pt font

Fixing issues with UDOIT

Problem 1: Heading levels should not be skipped


Don’t rely on text size and font alone for headings. Use the built-in heading function and follow the hierarchy laid out, e.g., h1 – canvas page header (done automatically by Canvas), h2 – section header, h3 – subsection header, etc.

How to fix it

This problem cannot be resolved in the UDOIT tool. Edit the page with the issue in Canvas and ensure heading styles aren’t skipped.

Hierarchical heading styles

Canvas’ rich content editor showing the hierarchical heading styles in a drop-down menu.

Problem 2: Headings should contain text


This typically refers to an issue where a heading element (like <h1>, <h2>, etc.) is empty or does not contain any text content.  An empty heading does not provide any information or structure, diminishing the user experience for those relying on assistive technologies such as screen readers.

How to fix it

In UDOIT Advantage, click the Review button for more information. Type your new heading into the text field and click Save, or use the checkbox to delete the heading if it is no longer required.

UODOIT Heading text

UDOIT prompts you to fix a heading that has no text by entering new heading text or deleting the heading instead.

Getting it right in Canvas

In Canvas, make sure page content is chunked via headings that follow a hierarchy, starting with the page title as h1 (heading 1).

Heading 2 as a section title

[Some content]

Heading 3 as a subsection title

[Some content]


Hierarchical heading styles

Canvas’ rich content editor showing the hierarchical heading styles in a drop-down menu.

Page added 24/04/2024

Send us your feedback

What do you think about this page? Is there something missing? For enquiries unrelated to this content, please visit the Staff Service Centre

This form is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.