main
El punto de referencia del contenido principal — el contenido primario de la página, excluyendo encabezados repetidos, navegación y pies de página. El elemento <main> incorpora este rol de forma automática. Debe existir exactamente un main por página.
Cuándo utilizarlo
Se debe utilizar el elemento <main>. Es el punto de referencia más importante de la página: los usuarios de lectores de pantalla suelen saltar directamente a main para evitar la navegación y los encabezados.
role="main" sobre un <div> solo es apropiado cuando no es posible emplear <main> (fundamentalmente, por restricciones del CMS). Ambas formas deben satisfacer la misma regla: exactamente un main por página. La presencia de varios mains rompe el mecanismo de «saltar al contenido principal», y muchos lectores de pantalla solo exponen el primero.
El punto de referencia main debe contener todo lo exclusivo de la página actual, y no debe incluir el encabezado del sitio, la navegación principal ni el pie de página. Esos elementos pertenecen a los elementos hermanos <header>, <nav> y <footer>, no dentro de <main>.
Cuándo añadir etiqueta
Un único main no necesita etiqueta: los lectores de pantalla lo anuncian como «main». Solo se debe añadir aria-label si la página contiene varios mains (situación que no debería producirse) o si se desea distinguir el área de contenido principal de una SPA de un estado anterior.
El enlace «Saltar al contenido principal» debe apuntar a <main id="main"> (o al identificador que se le asigne) mediante <a href="#main"> al inicio de la página. Esta es la técnica de bloques de omisión del criterio WCAG 2.4.1.
Fallos habituales
- Dos elementos
<main>en la misma página. La causa más frecuente: una SPA que inserta el<main>de una vista nueva sin eliminar el anterior. - Página sin ningún
<main>. Los usuarios de lectores de pantalla no pueden saltarse el encabezado. <main>ubicado dentro de<header>o<footer>. La jerarquía de puntos de referencia queda incorrecta.- Navegación de ámbito general incluida dentro de
<main>. Al repetirse en todas las páginas, debe estar en<header>/<nav>, no en el contenido exclusivo de la página. - El enlace «Saltar al contenido principal» apunta a un identificador que no existe.
Ejemplo
<body>
<a href="#main" class="visually-hidden focus-visible">Saltar al contenido principal</a>
<header>…</header>
<main id="main">
<h1>Por qué debe haber un único punto de referencia main por página</h1>
<p>…</p>
</main>
<footer>…</footer>
</body>