Minden amit a címsorokról tudni érdemes

A címsorok helyes használata alapvető fontosságú a weboldalak szerkezetének kialakításában. Nemcsak a vizuális hierarchiát teremtik meg, hanem a képernyőolvasók számára is nélkülözhetetlen navigációs pontokat jelentenek. Ebben az átfogó útmutatóban megvizsgáljuk a WCAG szabványok előírásait, a legjobb gyakorlatokat, és választ adunk a leggyakoribb kérdésekre – többek között arra is, hogy hány H1 elem lehet egy oldalon, és hogyan építsünk fel egy valóban akadálymentes címsorstruktúrát.

WCAG 2.2 előírásai a címsorokkal kapcsolatban

A nemzetközi Web Akadálymentesítési Útmutató (WCAG) 2.2 több helyen is foglalkozik a címsorok (heading elemek) használatával és szerkezetével. Az egyik alapkövetelmény, az 1.3.1 Info and Relationships (Információ és kapcsolatok), előírja, hogy a vizuálisan címsorként megjelenő szövegeket a kódban is megfelelő címsorelemmel (<h1>–<h6>) kell jelölni. Ez azt jelenti, hogy ha egy szöveg mérete, stílusa alapján fejcímként funkcionál, akkor nem elegendő pusztán CSS-sel nagyobb betűssé tenni – valódi HTML <h> elemként kell megvalósítani, különben sérül a programozottan meghatározható struktúra követelménye.

Emellett a 2.4.6 Headings and Labels (Fejlécek és címkék) sikerkritérium kimondja, hogy ha használunk címsorokat, azok leíró jellegűek és érthetőek legyenek a tartalom szempontjából. A címsor szövegének nem kell hosszadalmasnak lennie, de legyen egyértelmű, hogy az adott szakasz miről szól.

Végül a WCAG 2.2 2.4.10 Section Headings (Szakaszfejlécek)↗⧉ sikerkritériuma (AAA szinten) ajánlja, hogy a tartalom szakaszait lássuk el címsorokkal a jobb áttekinthetőség kedvéért.

Összefoglalva: A WCAG előírásai szerint a címsorokat helyesen kell jelölni HTML-ben (nem elég vizuálisan annak látszaniuk), a szövegük legyen találó és röviden leíró, és célszerű a tartalmi szerkezet minden fő részét címsorral ellátni a jobb navigáció érdekében.

Hány darab <h1> lehet egy oldalon?

Gyakori kérdés, hogy hány első szintű címsor (<h1>) szerepelhet egy oldalon. A régebbi konvenciók és a fejlesztők elvárásai szerint általában egyetlen <h1> tartozik egy oldalhoz, ez jelenti az oldal főcímét vagy tartalmi fő témáját. Ezt a gyakorlatot támogatja sok akadálymentességi szakértő is: például a TPGI cikkében↗⧉ is hangsúlyozza, hogy egy oldalon csak egyetlen első szintű címsor legyen, amely a fő tartalom elején áll és az oldal címeként szolgál.

Fontos megjegyezni, hogy a HTML5 specifikációja már megengedi több <h1> elem használatát is (például külön szekciókban) anélkül, hogy formailag hibás lenne a HTML. Tehát technikailag nem sért semmilyen szabványt vagy WCAG kritériumot, ha több <h1> is van. A WCAG sem írja elő expliciten, hogy csak egy <h1> lehet – sőt, az is előfordulhat, hogy egy oldal nem <h1> címsorral indul, és ez sem vezet automatikusan hibához.

Mégis, felhasználói szempontból a tapasztalat azt mutatja, hogy az emberek (és a segédeszközök) egy oldalon egy darab főcímet várnak el, ami összefoglalja vagy megnevezi az oldal tartalmát. Több <h1> használata esetén zavaró lehet, ha nincs egyértelmű hierarchia köztük – például ha az első <h1> vizuálisan hangsúlyosabb, mint a második, a felhasználó azt hiheti, az utóbbi egy alárendelt szakasz címe, holott a HTML hierarchia szerint mindkettő egy szinten van.

A WebAIM 2024-es képernyőolvasó-használati felmérése↗⧉ szerint a válaszadók 57%-a kifejezetten hasznosnak találja, ha a címsorszintek jól tagoltak és logikusan követik egymást. A strukturális átláthatóság tehát nem csak technikai kérdés, hanem valós használhatósági előny.

Összességében a legjobb gyakorlat az, hogy minden oldal rendelkezzen egy (és csak egy) <h1> címsorral, amely az oldal fő tartalmának címét jelöli. A további tartalmi egységek címéhez pedig használjunk alacsonyabb szintű <h2>–<h6> elemeket.

Mikor és hogyan használjuk a <h2>–<h6> címsorokat?

A főcím (H1) után a tartalmat logikusan tagolnunk kell másod- és további szintű címsorokkal. A H2–H6 elemek arra valók, hogy az oldal fő témáját (H1) alátámasztó alcímeket adjunk meg, ezzel hierarchiát kialakítva.

Minden egyes alcímszint behúzást jelent a hierarchiában – például a H3 tartalmilag egy H2-es részhez tartozó alrészt jelöl, míg a következő H2 már egy új fő szakaszt indít.

Fontos a következetesség: mindig az adott tartalom fontosságának megfelelő szintű címsort használjuk. Ha egy szakasz egy H2 alá tartozó alfejezet, akkor H3-at alkalmazzunk, ne ugorjunk például rögtön H4-re.

A strukturális hierarchia jelentősége a segédeszközök szempontjából

A helyesen felépített címsorstruktúra kritikus szerepet játszik a képernyőolvasót használók navigációjában. A modern képernyőolvasó szoftverekben általában van lehetőség címsorok listázására vagy egy billentyű lenyomásával a következő/előző címsorra ugrani.

A WebAIM 2024-es kutatásában a válaszadók 71,6%-a mondta, hogy hosszabb weboldalon elsősorban a címsorok között navigálva keres információt – messze megelőzve például a keresőmező használatát vagy a landmark régiók közötti navigációt.

Láthatatlan címsor: role="heading" és aria-level

Előfordulhat, hogy egy tartalmi elem vizuálisan címsorként jelenik meg, de technikailag nem <h1>–<h6> elem, és nem is tudjuk utólag erre módosítani (például mert egy külső könyvtár generálja le a DOM-ot fix struktúrával). Ilyenkor hasznos eszköz lehet a role="heading" attribútum és az aria-level, amelyekkel képernyőolvasók számára jelölhetünk ki címsorszintet anélkül, hogy a HTML struktúrát ténylegesen megváltoztatnánk.

<div role="heading" aria-level="2">Vizuális címsor, nem HTML tag</div>

Ez a megoldás azt jelzi a segédeszközöknek, hogy az adott elem egy H2 szintű címsorként viselkedik. A képernyőolvasók ennek megfelelően jelentik be, és a címsor-listában is megjelenik. Fontos azonban, hogy ez a módszer kizárólag a képernyőolvasók számára hasznos, a vizuális hierarchiát vagy a HTML outline-t nem befolyásolja. Ezért csak akkor alkalmazzuk, ha nincs lehetőség valódi <h*> elem használatára – például ha külső komponens generálja a HTML-t, és nincs módunk azt felülírni, csak utólag JavaScripttel módosítani.

Widgetek és oldalsávok címsorai

Sok weboldalon találhatók ismétlődő komponensek, például „Kapcsolódó cikkek”, „Legutóbbi bejegyzések”, „Menü” stb. Ezek gyakran nem részei a fő tartalmi hierarchiának, viszont címsort használnak. Ilyen esetekben a címsorszint legyen következetes minden oldalon – például mindig <h2>, függetlenül attól, hogy az adott oldal más tartalma milyen szinten kezdődik. Ez segíti a képernyőolvasó-felhasználókat abban, hogy felismerjék a minta alapján, hol van a navigáció, hol a fő tartalom stb.

Címsorok és a SEO

A címsorok önmagukban már nem közvetlen rangsorolási tényezők: A Google hivatalosan is kijelentette, hogy bár segítik a tartalom szervezését és értelmezését, nem ad rangsorolási előnyt csak azért, mert kulcsszavakat tartalmaznak vagy követik a hierarchiát. Azonban a jól strukturált, logikus hierarchia továbbra is fontos:

• felhasználói élményt segíti, áttekinthetővé és könnyen fogyaszthatóvá teszi az oldalt — ez közvetetten befolyásolja a SEO-t (pl. alacsonyabb bounce rate),
• AI-alapú keresés (pl. Google SGE, ChatGPT stb.) jobban tudja értelmezni a világos szekciókat címsorok alapján, és gyakrabban használja fel rész-válaszként vagy snippetként.

Gyakori hibák a címsorok alkalmazásában

• Csak vizuális kiemelés, valódi címsor nélkül
• Több <h1> vagy hiányzó <h1>
• Kihagyott szintek
• A hierarchia felborítása
• Ismétlődő, nem informatív címszövegek

Legjobb gyakorlatok

• Legyen egyértelmű főcím (H1) minden oldalon.
• Alcímekkel tagoljuk a tartalmat (H2–H6).
• Ne hagyjunk ki címsorszinteket feleslegesen.
• A vizuális kiemeléshez ne használjunk nem heading elemet.
• A címsorok legyenek leírók és egyediek.
• Használjunk role="heading" és aria-level workaroundot végső esetben.
• Következetes címsorstruktúra az egész oldalon (navigáció, oldalsáv is).

A jól strukturált címsorok nem csupán megfelelnek a WCAG szabványainak — ezek teszik lehetővé, hogy a képernyőolvasók egyáltalán használhatóvá tegyék az oldalt a látássérült felhasználók számára.