Visually, you can make any text look like a heading with CSS, but for someone using a screen reader, an actual <h1> is part of the page structure. It can help answer one of the first questions a user has when arriving on a page: “What is this page about?”
If it is the main topic or purpose of the page → use <h1>.
For example: for a homepage it would be a heading that describes the main purpose of the website.
Why does this matter?
Screen reader users can navigate through headings instead of reading every word on the page.
A heading gives users a quick way to understand the structure of the content.
The H1 can help confirm that they have arrived at the page they expected.
Headings are not just visual decoration. They are part of the information structure.
Here are a few interesting facts:
An H1 does NOT have to be the biggest text on the page. The visual appearance is a CSS decision. The HTML element communicates meaning.
“Exactly one H1 per page” is not a WCAG requirement. This is one of the most common accessibility myths. What matters is that headings and labels describe the topic or purpose of the content and that the information structure is meaningful.
A page can look perfectly structured and still have a terrible heading structure. For example, a designer may create beautiful visual headings while developers use , or other elements instead of actual heading elements. To a sighted user, everything may look fine, while to someone navigating by headings, the structure can be completely different.
Heading level is not about font size. An can be visually larger than an <h1>. That’s not necessarily a problem. The important question is: what is the heading’s role in the content structure?
More headings are not automatically better. A page full of headings doesn’t become more accessible just because it contains lots of , and elements. The headings should reflect the actual organization of the content.
What does WCAG say?
WCAG 2.2 Success Criterion 1.3.1 “Info and Relationships” requires relationships and structure conveyed through presentation to be programmatically determinable. And SC 2.4.6 “Headings and Labels” requires headings and labels to describe topic or purpose.
So it is not correct to think: “I need one H1 because WCAG says so”.
Instead an approach should be: “I need a meaningful main heading because people need to understand what this page is about”.
Web accessibility H1 checklist:
✅ Is the main topic or purpose of the page clear?
✅ Is there a meaningful heading identifying it?
✅ Is it marked up as a semantic heading?
✅ Does the H1 actually describe the page?
✅ Are the other headings meaningful and logically organized?
✅ Are headings being used for structure rather than simply for visual styling?
