Structuring pages for accessibility with HTML headings

Misty Flowers

June 09, 2017 18:03

Logical page structure is a core requirement for both Search Engine Optimization (SEO) and ADA accessibility compliance. Using HTML heading tags (H1 through H6) correctly ensures that your pages communicate content in an organized way that assistive technologies can interpret.

🚨2026 Compliance Update: ADA Title II

Under the newest U.S. Department of Justice (DOJ) ruling, all school district web content, including PDFs and electronic documents, must meet WCAG 2.1 Level AA standards.

Districts 50,000+: Must be compliant by April 24, 2026.
Districts < 50,000: Must be compliant by April 26, 2027.

To learn more about how Finalsite is helping our users reach compliance, check out the article, "2026 ADA WCAG 2.1 Accessibility at Finalsite."

Why headings are vital for accessibility

For many users, headings are not just titles; they are a navigation menu. When a user visits your site using a screen reader (like VoiceOver or NVDA), they often use a "Web Rotor" or shortcut keys to list every heading on a page.

This acts as a digital Table of Contents, allowing them to jump directly to the section they need without having to listen to the entire page from top to bottom.

⚠️ Important Note

Skipping heading levels or using "visual headings" (like bold or underlined text) creates a broken navigational map. This failure directly violates WCAG 2.1 Level AA standards. Under ADA Title II, providing a non-compliant digital structure is considered a barrier to access, exposing your district to significant legal and regulatory risk.

Maintaining a logical heading hierarchy

Think of headings as an outline. You should never choose a heading based on how large or small the font looks; you should choose it based on where it fits in the hierarchy of the information.

H1 (Page Title): There should only be one H1 per page. It represents the main topic.
H2 (Major Sections): Use H2 for the primary sub-sections of your page.
H3 - H6 (Sub-sections): Use these for further nesting within an H2 or H3.

The Golden Rule: Never skip a rank!

Do not jump from an H1 to an H3 just because you prefer the visual style of the H3. This confuses screen readers and breaks the logical flow of the page.

Apply headings in Composer

The page name (H1)

In Page Settings, the Page Name field automatically generates your H1 tag. This ensures your navigation title and your page title match perfectly for clarity and accessibility.

Element titles (H1-H6)

The Title field of any Composer element (Content, Calendar, Post) provides a structural landmark for that section of your page. By toggling the element title to On, you are instantly creating an accessible landmark for that section of your page.

Default behavior: By default, element titles are wrapped in an H2 tag.
Heading selection dropdown: You can customize the heading level directly next to the title field in the element settings. This dropdown allows you to select from H1 through H6 to ensure a logical heading hierarchy.

⚠️ Accessibility Warning

The ability to change the heading level with the heading dropdown is intended for structural correction, not design. You should only change the default H2 if the element is nested within another section and requires a lower-level tag (like an H3) to maintain the correct heading order.

Never change a heading level just to achieve a specific font size.

Acceptable structural correction scenarios

The ability to change a heading level is designed to help you maintain a logical outline for your page. Here are four common scenarios where you would use the heading dropdown to ensure structural integrity:

Scenario: Nested sub-content
You have a main Content Element followed by a Resource Element that contains downloads specifically for the content in the section above it. In this case, the Resource Element functions as a sub-topic of the main article rather than a new major section.
Scenario: Container nesting
You place multiple elements inside a Layout Element, Tab, or Accordion that already has its own H2 title. Because the internal elements now reside within a parent section, they should be ranked as sub-sections of that container.
Scenario: Resolving H1 conflicts
A custom template or a previous editor accidentally set a standard element title to an H1. Since a page should only ever have one "primary" title, this second title must be demoted to an H2 or H3 to maintain a single, clear page topic for search engines and screen readers.
Scenario: Long-form landing pages
You are building a long "About Us" or "Admissions" page using several separate elements to tell a continuous story. While the first element represents the main section, the following elements (such as "Our Mission" or "Our Values") function as sub-points of that first section.

Content element: The editing toolbar (H1 - H6)

To create deeper sub-sections within a single Content Element, use the heading function in the editing toolbar:

Highlight your text.
Click the Formatting icon (the Pilcrow symbol ¶) in the toolbar.
Select the appropriate heading level from the dropdown.

Compliance checklist

Be concise: Headings should be short and descriptive.
Avoid "visual" headings: Do not use bold or underline to denote a new section. Screen readers do not recognize these as navigational landmarks.
Reduce cognitive load: If a page requires more than an H4 level, consider breaking the content into separate sub-pages to make the information easier to process.
Utilize white space: Headings naturally create white space, which helps users with cognitive impairments or low vision focus on specific sections of information.