heading-structure

Enforce single H1 and nested H2/H3 headings for screen reader navigation.

3|Updated Mar 28, 2026
One-click install
npx skills add https://github.com/hulusi-tunc/unicorn-skills --skill heading-structure-hulusi-tunc
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: heading-structure
Source: https://github.com/hulusi-tunc/unicorn-skills/tree/main/.claude/skills/accessible-content--heading-structure
Command: npx skills add https://github.com/hulusi-tunc/unicorn-skills --skill heading-structure-hulusi-tunc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design headings that work for screen readers and cognitive signposts, providing a clear navigation structure for content-heavy interfaces.

Core Features & Use Cases

  • Enforce a single H1 per page to anchor the page purpose.
  • Maintain a strict heading hierarchy (H1 → H2 → H3) to create a predictable document outline.
  • Use descriptive, content-related headings rather than decorative ones to aid comprehension.
  • Apply to pages, articles, dashboards, and forms to improve accessibility and scan-ability.

Quick Start

Structure your page with a single H1 followed by properly nested H2 and H3 headings to guide screen readers.

Frequently Asked Questions about heading-structure

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure headings for screen reader navigation on a web page?

To structure headings for screen reader navigation, use a single H1 to anchor the page purpose, then maintain a strict H1 to H2 to H3 hierarchy to create a predictable document outline without skipping levels.

What is the correct heading hierarchy for an accessible document outline?

An accessible document outline requires exactly one H1 per page followed by properly nested H2 and H3 headings, ensuring no skipped levels so screen readers can navigate content predictably.

Why should a web page have only one H1 heading?

A web page should have only one H1 heading to anchor the page purpose and provide a clear entry point for screen reader users, preventing confusion when navigating the document outline.

How do I apply semantic heading markup to a content-heavy dashboard?

Apply semantic heading markup to a content-heavy dashboard by using descriptive, content-related headings rather than decorative ones, maintaining a strict hierarchy to improve accessibility and scan-ability for screen readers.

Can I skip heading levels when structuring a web article for accessibility?

You cannot skip heading levels when structuring a web article for accessibility. Maintain a strict hierarchy from H1 to H2 to H3 to ensure screen readers can navigate the document outline predictably.

What is the best way to create a document outline for accessible web forms?

The best way to create a document outline for accessible web forms is to use a single H1 followed by properly nested H2 and H3 headings that describe content sections, aiding screen reader navigation and comprehension.