Skip to content
Customer Support Portal
  • There are no suggestions because the search field is empty.

Are Banner Titles accessible when using an H2?

Yes. DesignPLUS provides two options for Banner Titles, and both produce an accessible heading structure.

Why does DesignPLUS hide the Canvas page title?

Canvas automatically creates a page title, which is typically marked up as a Heading 1 (H1). When a Banner Title is added in DesignPLUS, it usually contains the same text as the Canvas page title.

If both headings were displayed, users would see the same title twice. To avoid this visual duplication, DesignPLUS hides the Canvas page title. The underlying heading structure remains accessible, depending on which Banner Title option is selected. While screen reader users can still encounter two nearly identical headings, we feel that it is important to keep the heading hierarchy intact.

Option 1: Banner Title as H1

When the Banner Title is configured as an H1, the Canvas page title is hidden visually and hidden from assistive technologies. The Banner Title becomes the page's single H1.

This provides a clean experience for both sighted users and screen reader users by eliminating duplicate page titles. However, this can cause issues with accessibility checkers that have been configured to flag H1 headings in the editor because they do not know DesignPLUS will use this to replace the existing H1.

Option 2: Banner Title as H2 (recommended)

When the Banner Title is configured as an H2, the Canvas page title is hidden visually but remains available to screen readers. The screen reader encounters:

  • H1: Canvas page title
  • H2: Banner Title

Although the text is similar, the heading hierarchy is preserved. The H2 does not skip heading levels because the H1 is still present in the document for assistive technologies. This was also the behavior of the legacy Design Tools, which only supported Banner Titles as H2 headings.

WCAG considerations

Using a Banner Title as an H2 does not violate WCAG.

 WCAG requires that the heading structure and relationships within the page are conveyed programmatically so assistive technologies can interpret them correctly (Success Criterion 1.3.1, Info and Relationships). 

When the Banner Title is configured as an H2, the Canvas H1 remains available to screen readers, so the heading hierarchy is preserved. When the Banner Title is configured as an H1, it replaces the Canvas page title as the page's single H1.

Addressing concerns about heading hierarchy

Some users have expressed concern that Banner Titles may create broken heading hierarchies or conflicting H1 headings.

This is not the case:

  • Using a Banner Title as H1 results in a single H1 that replaces the Canvas page title.
  • Using a Banner Title as H2 retains the Canvas H1 for assistive technologies, followed by the Banner Title as H2.
  • Heading levels are not skipped in either configuration.
  • The visual hiding of the Canvas page title does not remove the underlying document structure needed by screen readers.

As with any page, accessibility also depends on authors using subsequent headings (H2, H3, H4, etc.) in a logical order throughout the rest of the content.