Ideas

Accessibility Improvement for CMS Block Titles

Accessibility Improvement for CMS Block Titles

CMS

Allow CMS blocks to support configurable heading tags for panel titles. Possible approaches:

  • Add a block setting to select the heading tag (h2–h6)
  • Add an option to hide the panel heading entirely
  • Default panel titles to <h2> instead of <h1>


Current State

Many CMS blocks currently render their panel titles using an <h1> tag by default. Examples:

<h1 class="panel-title"><i class="ti ti-users"></i> Directory</h1>
<h1 class="panel-title"><i class="ti ti-pray"></i> Add Prayer Request</h1>


Why This Matters
Since these blocks are commonly placed within pages that already contain a page-level heading, this can result in multiple <h1> tags throughout the page. This can creates challenges for:

  • Screen reader users
  • Search engine understanding of content hierarchy
  • Theme developers attempting to maintain consistent heading order

WCAG 2.2 Success Criterion 2.4.6, Headings and Labels, emphasizes that headings should clearly describe content organization. Screen reader users often navigate pages by heading structure, and forcing all block titles to render as <h1> can create a confusing or flattened hierarchy.

From a design system perspective, defaulting block titles to <h2> also aligns better with modern component-based layouts where the page-level <h1> is intentionally reserved for the primary page title. This allows themes to maintain stronger visual hierarchy and more consistent typography rules across templates and reusable CMS components.

Photo of Jessica GorbettSubmitted by Jessica Gorbett, 9 Embers  ·   ·  CMS
Login to add a comment...

Submission Success Tips

Cultivate your ideas for maximum impact with these helpful submission tips that will increase the chances of your brilliant concepts becoming reality.

  • Clear Title: Craft a straightforward and descriptive title that instantly conveys the essence of your idea.
  • Concise Description: Provide an idea description that is succinct, ensuring it effectively communicates the concept without unnecessary verbosity.
  • Provide Additional Details: With a concise description complete, now provide any other details that are needed to better understand the requirements.
  • Thorough Ministry Need Review: Provide a comprehensive overview of the ministry need your idea addresses, emphasizing its significance.
  • Cover the WHY: Clearly articulate the rationale behind your idea, explaining why it's essential and how it aligns with the organization's goals and mission. Oftentimes a clear "why" sheds light into other possible options.