Főcím (h1)

A főcím (<h1>) mondja meg, miről szól az oldal. A képernyőolvasót használók gyakran a címsorokon ugrálva tájékozódnak, a kereső pedig a főcímből is következtet a témára. A WCAG 2.2 szerint a szerkezetnek a kódból is kiolvashatónak kell lennie (1.3.1 Info and Relationships, A szint), a címsoroknak pedig le kell írniuk a tartalmat (2.4.6 Headings and Labels, AA szint).

Hogyan mérjük

A riport egy valódi böngészőben betölti az oldalt, és a betöltött (JavaScript után kialakult) DOM-ban megszámolja az összes <h1> elemet.

• Megfelelő: pontosan egy <h1> van.
• Hiba: nincs <h1>, vagy kettő vagy több van.

Figyelmeztető szint nincs. A mérés a láthatóságot nem vizsgálja: a CSS-sel elrejtett <h1> is számít, és a böngészőben megjelenő shadow DOM belsejét sem számolja.

Eltérés a szabványtól: a riport szigorúbb, mint a HTML-szabvány és a WCAG. A HTML szabvány megengedi, hogy egy oldalon több <h1> legyen (ha nem egymásba ágyazottak), és a WCAG sem írja elő, hogy pontosan egy legyen. Az MDN ugyanakkor bevált gyakorlatként azt ajánlja, hogy az oldalon egyetlen <h1> legyen, mert az írja le az oldal tartalmát. A riport ezt az ajánlást kéri számon.

Hogyan javítsd

Ha nincs h1: az oldal fő témáját írd bele egy <h1> elembe, az oldal tartalmának elején.

HTML

HTML (a <body>-ba)

<h1>Az oldal fő témája</h1>

Ha több h1 van: hagyd meg azt, amelyik az oldal tartalmát írja le, a többit írd át <h2>-re (vagy mélyebb szintre, ha alcím). A címsorokat ne ugord át: <h1> után <h2>, utána <h3> jön.

WordPress

• Oldalaknál és bejegyzéseknél a témák többsége az oldal címét teszi <h1>-be. Ilyenkor a szerkesztőben a tartalomban ne használj Címsor 1 blokkot, a szakaszokat Címsor 2-vel indítsd.
• Ha a téma a logót vagy a webhely nevét is <h1>-be teszi, vagy a lap tetején másik <h1> is van (például egy hero szekció), a témát vagy a sablont kell módosítani. Gyermektémában írd át a sablon fájlt, hogy a logó <div> vagy <p> legyen, a fő cím pedig egyetlen <h1>.
• Oldalszerkesztő bővítményeknél nézd meg a címsor-elemek beállításait: ha a szintet (a HTML-címkét) lehet választani, ott, ahol nem az oldal fő címe áll, h2-t válassz.

Hogyan ellenőrizd

1. Böngészőben nyisd meg a fejlesztői eszközöket (F12), a Konzolban futtasd:

   Konzol

   document.querySelectorAll('h1').length

   Az eredménynek 1-nek kell lennie.

2. A riportban futtasd újra a mérést; a teszt ilyenkor megfelelő lesz.