Szemantikus HTML

A szemantikus elemek (<header>, <nav>, <main>, <footer>) megmondják a böngészőnek és a segédeszközöknek, mi micsoda az oldalon. A képernyőolvasóval böngészők ezekkel a tájékozódási pontokkal (landmarkokkal) ugorhatnak a lap részei között, például egyből a fő tartalomra. A WCAG 2.2 1.3.1-es sikerességi feltétele (Info and Relationships, A szint) azt kéri, hogy az oldal szerkezete programozottan kiolvasható legyen; a HTML-elemek ezt a feladatot látják el.

Hogyan mérjük

A riport egy valódi böngészőben betölti az oldalt, és a betöltött DOM-ban megkeresi a szerkezeti elemeket.

• Főtartalom: van <main> elem vagy role="main" attribútumú elem.
• Szerkezeti elemek: van legalább egy <header> (vagy role="banner"), <nav> (vagy role="navigation"), vagy <footer> (vagy role="contentinfo").

Az eredmény:

• Megfelelő: mindkét feltétel teljesül.
• Hiba: hiányzik a main, vagy a header, nav, footer hármas mindegyike. A riport jelzi, melyik hiányzik.

Figyelmeztető szint nincs; a teszt súlyossága alacsony.

A mérés megengedő: a három szerkezeti elemből elég egy, és a <header> bármilyen elhelyezésben számít, akkor is, ha egy cikken belül áll (a HTML szerint az ilyen nem az oldal fejléce, és nem lesz belőle oldalszintű tájékozódási pont). Azt sem vizsgálja, hogy a tartalom jól van-e csoportosítva, vagy hogy egy oldalon egynél több <main> van-e.

Hogyan javítsd

Cseréld le a szerkezeti szerepet betöltő <div> elemeket a megfelelő szemantikus elemekre:

• <header>: az oldal fejléce (logó, főcím);
• <nav>: a fő navigáció (menü);
• <main>: az oldal fő tartalma, oldalanként egyszer;
• <footer>: az oldal lábléce.

HTML

HTML

<header>…</header>
<nav>…</nav>
<main>…</main>
<footer>…</footer>

Ha csak a <main> hiányzik, tedd köré a lap fő tartalmát. Ha csak a fejléc, a menü és a lábléc hiányzik, azokat a megfelelő blokkokra kell tenni.

WordPress

Ezek az elemek a téma sablonfájljaiban vannak: a header.php, a footer.php és az oldal- vagy bejegyzéssablon. Egy jól elkészített téma eleve használja őket; ha nem, gyermektémában módosítsd a sablonokat. Blokkos témánál a webhelyszerkesztőben a sablon és a sablonrészek (fejléc, lábléc) kezelésénél nézd meg, hogy a blokkok milyen HTML-elemet írnak ki.

Hogyan ellenőrizd

1. Az oldal Konzoljában (F12) futtasd:

   Konzol

   ['main', 'header', 'nav', 'footer'].map((s) => [s, document.querySelectorAll(s).length])

   A main értéke legyen 1, a másik háromból legalább az egyik legyen 1 vagy több.

2. A riportban futtasd újra a mérést.