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.