About This HTML Issue
A page must contain no more than one visible element with role="main" because this landmark role identifies the primary content area of the document, and having multiple instances creates ambiguity for assistive technologies.
Screen readers and other assistive tools use the main landmark to let users skip directly to the page's primary content. When two or more visible elements carry role="main", the tool cannot determine which one is the actual primary content block. The HTML <main> element has an implicit role="main", so mixing <main> elements with role="main" on other elements can also trigger this error.
A common cause is having multiple <main> elements without hiding the inactive ones. Single page applications sometimes keep several <main> elements in the DOM for different views. That is valid only if all but one are hidden using the hidden attribute.
Another cause is placing role="main" on a <div> while also having a <main> element elsewhere in the page.
Invalid example
<body>
<main>
<h1>Home</h1>
<p>Welcome to the home page.</p>
</main>
<main>
<h1>About</h1>
<p>About this site.</p>
</main>
</body>
Valid example
Only one <main> is visible at a time. The others use the hidden attribute:
<body>
<main>
<h1>Home</h1>
<p>Welcome to the home page.</p>
</main>
<main hidden>
<h1>About</h1>
<p>About this site.</p>
</main>
</body>
If you do not need multiple views, remove the extra <main> or role="main" entirely and keep a single one:
<body>
<header>
<h1>My Site</h1>
</header>
<main>
<p>Primary content goes here.</p>
</main>
<footer>
<p>Footer content.</p>
</footer>
</body>
Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.