Címsorszint helyes használata

A címsorszinteket szinte mindig rosszul használják a WordPressben, de még a webdesignerek is. Kár, mert a keresőoptimalizálás, akadálymentesség és tipográfia szempontjából nagyon lényeges a megfelelő használata. Mire kellene odafigyelnünk?
Akadálymentes címsorszintek alkalmazása a Wordpressben:Részletesen lásd a tartalomban.

Szinte senki sincs tisztában azzal, hogy a címsorszinteknek (<h1>, <h2> stb.) mekkora jelentősége van, és hogyan kell használni őket.  Néhány oldal esetében nem foglalkoznak a címsorszintekkel , más honlapok a keresőoptimalizálás miatt trükköznek vele.

Ha egy weboldal HTML kódjait ellenőrizzük a https://validator.w3.org külső-al, akkor legfeljebb csak azt jelzi, hogy nincsen <h1> elem.

Címsorszint a szabvány szerint

A (már nem érvényes)  HTML 4.1 szabványa külsőösszefoglalja a címsorszintek lényegét:

„A címsorszintek tömören mutatják be az őket követő tartalmakat. Többek között tartalomjegyzék előállításához lehet használni. 6 szintje van: a <h1> a legfontosabb, a <h6> a legkevésbé.”

Az aktuális, professzionális és szabványba foglalt HTML5-re ugyanezek igazak. A Magyarországon használt képernyő olvasó szoftverek (JAWS, NVDA, Voiceover, néha az Orca) működése azonban a címsorszintekre épül. Amikor egy látássérült elkezdi olvasni a honlapot, gyorsbillentyűkkel átolvashatná a címsorszinteket, ugyanúgy, ahogy mi a tartalomjegyzéket nézzük át.

A tartalomjegyzék pedig, jól tudjuk, fa-szerkezetű. A könyv címéből csak egyetlen egy van. Alatta vannak a részek. Ebből már több van. A részek a 2. címsorszintnek felelnek meg. Ezt követik a részekben található fejezetek, amelyek 3. címsorszintnek felelnek meg, és hierarchiában alatta a további kisebb egységek: 4-es és 5-ös címsorszintek (<h4>, <h5>). A <h6>-ra szinte sosincs szükség.

Ideális esetben a weboldalnak a tartalomjegyzék mintájára kellene felépülnie. Az 1-es címsorszint a honlap címe. A 2-es a tartalmi részeké. Mondjuk a bejegyzések, cikkek címe. 3-tól kezdődően pedig a bejegyzések tagolása kezdődik.

Az ideális esethez hozzá tartozik az, hogy a weboldal állandó részeit a HTML5 jelölő elemeivel szabályosan jelöljük. Ez egész egyszerűen a következőket jelenti:

  • A fejrészt  <header>,
  • a menüt <nav>,
  • a tartalmi részt <main>,
  • a fő tartalmon belül az <article> és <section>,
  • az oldalsávot <secondary>,
  • a lábrészt <footer> elemmel jelöljük.

Ha netán valaki még XHTML-t vagy HTML 4-et használ, akkor a WAI-ARIA elemekkel jelölheti mindezt.

Ami a keresőket illeti: a címsorszintek alapján tájékozódnak. Nem véletlen, hogy annyi trükköt használnak: mondatokat írnak be, linkeket és vezérlőelemeket helyeznek el benne. Sokak számára csak ez az egyetlen eddig ismert értelme a címsorszinteknek.

A címsorszintek sokunk számára hasznosak lennének, ha jól használnánk őket. Feladatuk lenne, hogy az oldal tipográfiai eszközeivel kifejezzék annak szerkezetét. Ahogy egy profin kinéző könyvben is azonos betűkkel szedik az azonos címsorszinteket, ugyanúgy kellene a weboldalakon is.

Címsorszintek helyes használata = tartalomjegyzék a látássérülteknek

A HTML címsorszint a képernyő olvasót használó látássérültek számára az egyetlen hozzáférhető és nagyon jól használható tartalomjegyzék lehetne.

Címsorszintek a WordPressben

Sajnos a WordPress fordítói még nem figyeltek fel a hibára, és szisztematikusan Kiemelés 1, Kiemelés 2 stb-vel. fordítják a címsorszinteket. Ezek a WordPress szerkesztőjében jelennek meg hibásan, de valójában a címsorszintet jelentik. A Kiemelés-1 az első címsorszint, és nem szabad használni a bejegyzésben, hiszen az első címsorszint szinte mindig a bejegyzés címe. További problémát jelentenek kategória felsorolások, címke-felsorolások, ahol az 1 .címsorszint a kategória neve, a 2. címsorszint a bejegyzés címe. Erre szintén gondot kell fordítani egy professzionális WordPress sablonnak.