Accessible Headings

Page titles and section headings are often styled with larger, bold fonts to create visual hierarchy. However, this visual formatting alone doesn’t help screen readers, which rely on properly coded heading levels to navigate a page.

Using the text editor’s built-in heading styles (like Heading 1, Heading 2, etc.) is one of the most effective ways to create accessible content and ensure screen reader users can quickly understand and navigate the content.

Use Headings to Outline Content

Screen readers help visually impaired users understand how content is organized by announcing headings and their levels. This allows users to quickly grasp the main ideas of a page and navigate directly to the sections that interest them most. To support this, pages should follow a logical, hierarchical structure—much like an outline. Start with a single top-level heading (<h1>) to identify the main topic, followed by second-level headings (<h2>) for key sections. If needed, break those sections down further using third-level headings (<h3>) to organize subtopics clearly. This structure ensures a meaningful reading experience for all users.

Typical Outline Structure

Heading 1 (Document Title)

Heading 2 (Section)

Heading 3 (Sub-Section)

Heading 3 (Sub-Section)

Heading 1 (Document Title)

Heading 2 (Section)

Heading 3 (Sub-Section)

Heading 3 (Sub-Section)

To use Folio’s Accessibility Checker, access the HTML Editor and navigate to the Content Area.

1. 1. Click Edit/Edit HTML on the Format item on the toolbar.

2. 2. Select the correct header.

Last updated: 4/24/2025