Rooli Maamerkki

`main`

Sivun pääsisältömaamerkki — ensisijainen sisältö ilman toistuvia ylätunnisteita, navigointia ja alatunnisteita. <main>-elementti kantaa tämän roolin automaattisesti. Täsmälleen yksi main per sivu.

Milloin käyttää

Käytä <main>-elementtiä. Se on sivun tärkein yksittäinen maamerkki — ruudunlukuohjelmien käyttäjät hyppäävät tyypillisesti main-elementtiin ohittaakseen navigoinnin ja ylätunnisteet.

role="main" <div>-elementillä on sopiva vain, kun <main>:a ei voida käyttää (useimmiten CMS-rajoituksen vuoksi). Molempien muotojen on täytettävä sama sääntö: täsmälleen yksi main per sivu. Useampi main rikkoo “Siirry pääsisältöön” -toiminnallisuuden, ja monet ruudunlukuohjelmat esittävät vain ensimmäisen.

Main-maamerkin tulee sisältää kaikki nykyiselle sivulle yksilöllinen sisältö, eikä sen tule sisältää sivuston ylätunnistetta, ensisijaista navigointia tai alatunnistetta. Sijoita ne <header>-, <nav>- ja <footer>-sisaruksiin, ei <main>-elementin sisään.

Milloin lisätä tunniste

Yksittäinen main ei tarvitse tunnistetta — ruudunlukuohjelmat ilmoittavat sen nimellä “main”. Lisää aria-label vain, jos sivulla on useampi main (mitä ei pitäisi olla) tai jos haluat erottaa SPA:n pääsisältöalueen aiemmasta jostain syystä.

“Siirry pääsisältöön” -linkki osoittaa <main id="main">-elementtiin (tai mihin tahansa antamaasi id:hen) sivun yläosassa olevalla <a href="#main">:lla — tämä on WCAG 2.4.1:n ohituslohkotekniikka.

Yleiset virheet

Kaksi <main>-elementtiä samalla sivulla. Yleisin syy: SPA upottaa uuden näkymän <main>-elementin poistamatta edellistä.
Sivu ilman <main>-elementtiä. Ruudunlukuohjelmien käyttäjät eivät pysty ohittamaan ylätunnistetta.
<main> sijoitettu <header>- tai <footer>-elementin sisään. Maamerkki-hierarkia on väärä.
Sivustolaajuinen navigointi <main>-elementin sisällä. Se toistuu kaikilla sivuilla, joten se kuuluu <header>-/<nav>-elementtiin, ei sivun yksilölliseen sisältöön.
“Siirry pääsisältöön” -linkki osoittaa id:hen, jota ei ole olemassa.

Esimerkki

<body>
  <a href="#main" class="visually-hidden focus-visible">Siirry pääsisältöön</a>
  <header>…</header>
  <main id="main">
    <h1>Miksi yksi main-maamerkki per sivu</h1>
    <p>…</p>
  </main>
  <footer>…</footer>
</body>