Headings

Headings Structure

WCAG 2.0 and later versions emphasize the importance of proper heading structure and semantic markup in web development, particularly in line with web accessibility guidelines. These guidelines contribute to creating a more accessible and understandable web experience for all users, including those with disabilities.

Maintain Consistent Heading Structure

Maintain consistent heading structure throughout the website or application. Predictable heading structure (size, color, alignment, etc.) helps all users including those with cognitive disabilities or those using screen readers to easily locate content.

Every Page Should Have a First Level Heading <h1>

This is a fundamental principle. The <h1> tag is typically used for the main heading or title of the page, providing a clear indication of the content's purpose.

Webpages Should Contain Only One First Level Heading <h1>

Ensuring that each page has a single main heading helps maintain a clear hierarchy and prevents confusion for both users and assistive technologies.

Headings Must Be Used in Order; No Skipping Hierarchical Levels

Following the correct order of heading levels (e.g., <h1>, <h2>, <h3>) ensures a logical and structured presentation of content. Skipping levels can disrupt this hierarchy and potentially confuse users relying on assistive technologies..

Every Heading Must Have the Correct Semantic Markup Regardless of Visual Appearance

The semantic markup (<h1>, <h2>, <h3>, etc.) conveys the structure and importance of content to both browsers and assistive technologies. It's essential to use these tags accurately, regardless of the visual styling applied.

Do Not Use Heading Levels for Visual Purposes

Semantic markup should reflect the structural hierarchy of content, and visual styles should be applied separately. Using heading tags purely for visual effects can lead to semantic confusion and accessibility issues.

When text serves the role of a heading, either visually or structurally, it should be marked up using appropriate heading tags (<h1>, <h2>, etc.). This ensures that the document structure is semantically meaningful, making it accessible to both users and assistive technologies.

Headings Must Be Accurate and Informative Describing Content and Should Convey a Clear and Accurate Structural Outline

Each heading should be concise and relatively brief (best practice) and accurately represent the content of the section it introduces, aiding users in quickly grasping the main topics and structure of the page. Headings play a crucial role in outlining the structure of a page. Clear and informative headings help users navigate and understand the content more easily.

Standards and Best Practices

By following these guidelines, web developers and content creators can contribute to a more accessible and user-friendly web experience for all users, including those with disabilities. Additionally, adhering to WCAG recommendations not only improves accessibility but also enhances overall usability and SEO (Search Engine Optimization) of the website.

How to create Headings in Ektron

How you will create a heading depends on the smart form you are using.

Paragraph Header Fields

Smart Forms and Paragraph Header Fields

Many smart forms include a Paragraph Header field. The Paragraph Header field can be used to Specify heading text.

Heading Levels

  • In some smart forms, the Paragraph Header field results in a second-level heading by default.
  • For the Page or ADA Page smart form, the Paragraph Header field offers options for heading levels, including no heading, a second-level heading, or a third-level heading. Users can enter heading text into the field and choose the desired heading level by selecting the corresponding radio button.

This information provides guidance on how to manage and customize headings within smart forms, allowing users to control the appearance and structure of the generated content. It's essential for creating well-organized and accessible forms, aligning with best practices for web design and usability.

Paragraph Copy Fields (Rich Area text field)

In any Paragraph Copy or Description (Optional) field a heading can be created by selecting the text and choosing the heading level from the Paragraph Style drop-down menu.

Digital Accessibility Statement
Disability Awareness
What is an ADA Compliant Website?
Document Remediation Training
Website Content Accessibility
Website Developer Accessibility
ADA Training Request Form
Tools
Resources
Class Feedback Form