# Főcím (h1)

> A teszt azt nézi, hogy az oldalon pontosan egy h1 főcím van-e. Ha nincs vagy több van, hagyd meg egyet, a többit írd át h2-re.

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 title="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:

   ```js title="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.