heading-structure

Name: heading-structure
Author: Owl-Listener

82stars25forks

How to install heading-structure?

owl-listener/inclusive-design-skills/heading-structure

$npx -y skills add Owl-Listener/inclusive-design-skills --skill heading-structure

Installs into the current project.

Summary

Design heading hierarchies and content structure that work for screen readers and cognitive accessibility. Use when structuring pages, articles, dashboards, forms, or any content-heavy interface. Triggers on: headings, heading hierarchy, h1 h2 h3, content structure, page structur

Files · 1

View on GitHub

SKILL.md

1	# Heading Structure
2
3	Headings are navigation for screen reader users and cognitive signposts
4	for everyone. A clear heading structure is the difference between
5	content people can find and content people abandon.
6
7	## Why This Matters
8
9	Screen reader users navigate by headings — they press a key to jump
10	between headings the way sighted users scan a page visually. If your
11	heading structure is broken, screen reader users are lost in a wall
12	of undifferentiated text.
13
14	For people with cognitive disabilities, headings are the primary way
15	they understand what content a page contains and where to find what
16	they need.
17
18	## Rules
19
20	### One H1 Per Page
21	- The H1 is the page title — what this page is about
22	- It should match or closely relate to the page's title tag and
23	the link that brought the user here
24	- Never use more than one H1 on a page
25
26	### No Skipped Levels
27	- Go H1 → H2 → H3, never H1 → H3
28	- Skipping levels breaks screen reader navigation and confuses
29	the document outline
30	- You can go back up: H3 → H2 is fine (starting a new section)
31
32	### Headings Describe Content
33	- Headings are signposts, not decoration
34	- "Your Account Settings" not "Section 2"
35	- "Choose a Delivery Date" not "Step 3"
36	- A user should understand the page's content by reading only
37	the headings
38
39	### Headings Are Not Visual Styling
40	- Don't use a heading tag just to make text big or bold
41	- Don't skip heading tags and just style text to look like a heading
42	- The tag determines the structure; CSS determines the appearance
43	- If it looks like a heading but isn't one, screen reader users
44	can't find it
45
46	## Recommended Depth
47
48	- Most pages: H1 through H3 is sufficient
49	- Complex pages: H1 through H4 maximum
50	- If you need H5 or H6: the page is probably too complex —
51	consider splitting it
52
53	## Patterns
54
55	### Article or Blog Post
56	```
57	H1: Article Title
58	H2: First Major Section
59	H3: Subsection
60	H3: Subsection
61	H2: Second Major Section
62	H3: Subsection
63	H2: Conclusion
64	```
65
66	### Dashboard
67	```
68	H1: Dashboard Name
69	H2: Summary / Key Metrics
70	H2: Recent Activity
71	H2: Tasks
72	H2: Notifications
73	```
74
75	### Form
76	```
77	H1: Form Title (e.g., "Apply for an Account")
78	H2: Personal Information
79	H2: Contact Details
80	H2: Preferences
81	H2: Review and Submit
82	```
83
84	### Settings Page
85	```
86	H1: Settings
87	H2: Profile
88	H2: Notifications
89	H2: Privacy
90	H2: Billing
91	```
92
93	## Assessment Checklist
94
95	- [ ] Exactly one H1 per page
96	- [ ] No skipped heading levels
97	- [ ] Headings describe the content beneath them
98	- [ ] Heading tags are used for structure, not visual styling
99	- [ ] A user reading only headings would understand the page
100	- [ ] Heading depth does not exceed H4

People who liked this also viewed

6 picks

Type

heading-structure

82stars25forks

View on GitHub

How to install heading-structure?

owl-listener/inclusive-design-skills/heading-structure

$npx -y skills add Owl-Listener/inclusive-design-skills --skill heading-structure

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Heading Structure
2
3	Headings are navigation for screen reader users and cognitive signposts
4	for everyone. A clear heading structure is the difference between
5	content people can find and content people abandon.
6
7	## Why This Matters
8
9	Screen reader users navigate by headings — they press a key to jump
10	between headings the way sighted users scan a page visually. If your
11	heading structure is broken, screen reader users are lost in a wall
12	of undifferentiated text.
13
14	For people with cognitive disabilities, headings are the primary way
15	they understand what content a page contains and where to find what
16	they need.
17
18	## Rules
19
20	### One H1 Per Page
21	- The H1 is the page title — what this page is about
22	- It should match or closely relate to the page's title tag and
23	the link that brought the user here
24	- Never use more than one H1 on a page
25
26	### No Skipped Levels
27	- Go H1 → H2 → H3, never H1 → H3
28	- Skipping levels breaks screen reader navigation and confuses
29	the document outline
30	- You can go back up: H3 → H2 is fine (starting a new section)
31
32	### Headings Describe Content
33	- Headings are signposts, not decoration
34	- "Your Account Settings" not "Section 2"
35	- "Choose a Delivery Date" not "Step 3"
36	- A user should understand the page's content by reading only
37	the headings
38
39	### Headings Are Not Visual Styling
40	- Don't use a heading tag just to make text big or bold
41	- Don't skip heading tags and just style text to look like a heading
42	- The tag determines the structure; CSS determines the appearance
43	- If it looks like a heading but isn't one, screen reader users
44	can't find it
45
46	## Recommended Depth
47
48	- Most pages: H1 through H3 is sufficient
49	- Complex pages: H1 through H4 maximum
50	- If you need H5 or H6: the page is probably too complex —
51	consider splitting it
52
53	## Patterns
54
55	### Article or Blog Post
56	```
57	H1: Article Title
58	H2: First Major Section
59	H3: Subsection
60	H3: Subsection
61	H2: Second Major Section
62	H3: Subsection
63	H2: Conclusion
64	```
65
66	### Dashboard
67	```
68	H1: Dashboard Name
69	H2: Summary / Key Metrics
70	H2: Recent Activity
71	H2: Tasks
72	H2: Notifications
73	```
74
75	### Form
76	```
77	H1: Form Title (e.g., "Apply for an Account")
78	H2: Personal Information
79	H2: Contact Details
80	H2: Preferences
81	H2: Review and Submit
82	```
83
84	### Settings Page
85	```
86	H1: Settings
87	H2: Profile
88	H2: Notifications
89	H2: Privacy
90	H2: Billing
91	```
92
93	## Assessment Checklist
94
95	- [ ] Exactly one H1 per page
96	- [ ] No skipped heading levels
97	- [ ] Headings describe the content beneath them
98	- [ ] Heading tags are used for structure, not visual styling
99	- [ ] A user reading only headings would understand the page
100	- [ ] Heading depth does not exceed H4

People who liked this also viewed

6 picks

Type