more-than-one-main

This fails the run. Where it is wrong about your code, // ramonda-check-ignore <reason> on the line says so, and the reason is printed on every run.

Reported when one render has more than one main landmark, where HTML allows one.

HTML allows one main that is not hidden, and it is the one landmark with that constraint because main is a DESTINATION rather than a description. "Skip to main content" is the first thing a keyboard reader presses, and a screen reader's landmark list is how somebody moves around a page without scrolling through it.

With two, that destination is ambiguous and tools resolve it differently — some jump to the first, some list both under the same name — and whichever is picked, half the page is now somewhere the reader has to find by hand.

<div role="main"> counts: it produces the same landmark as <main>. The commonest way to end up with two is a layout component that owns a <main> and a page component that adds a role to its own wrapper, neither author seeing the other's.

Keep the outer one and make the inner a <section> or a <div>, or give the inner one an aria-labelledby and a role that says what it actually is — region, complementary, search.

Two route views that each own a main are NOT this: they are never on the page together, and this only ever reads one render.

Next

• All rules — the other checks this one runs beside.
• Checking your app — how to run it, and what it proves.