WCAG ja SEO nipid Frameris – semantika

Hoia oma veebilehe struktuur semantiline – sektsioonidel olgu tähendus. Nii on selge kus su lehel mis asub, nii on lihtne struktuuris orienteeruda, nii on ka erivajadustega inimestel selgem pilt asjast ja oma asukohast lehel.

Mis on semantiline HTML?

Lihtsustatult öeldes on see struktuur, kus veebilehe osadel on arusaadav nimi, selmet, et kõik konteinerid on lihtsalt DIV'id.

Joonis 1. Näidis semantilise HTML-i struktuurist – olulised elemendid on arusaadavate nimedega.

Miks on semantiline HTML hea või vajalik?

• Selge struktuur: struktuur on loetav, on arusaadav kus miski asi asub ja mida ta teeb.

• Parem ligipääsetavus – WCAG: erivajadustega kasutajad, nt nägemispuudega inimesed, kes kasutavad ekraanilugejaid vms tehnoloogiat, saavad teada, kus nad lehel asuvad.

• SEO: otsimootorid saavad paremini aru lehe ülesehitusest.

• Stiilid ja disain: stiili saab vastavalt semantikale muuta.

• Koodi hooldus: koodi on lihtsam hallata, koodis on lihtsam orienteeruda.

Frameris saab määrata elemendile sobiva semantilise märgendi käsitsi:

Joonis 2. Elementidele semantiliste tagide lisamine käib Frameris Accessibility sektsioonist

Semantilisi elemente on ca 100, väike valik rohkem kasutatavatest:

• <article>

• <aside>

• <details>

• <figcaption>

• <figure>

• <footer>

• <form>

• <header>

• <main>

• <mark>

• <nav>

• <section>

• <summary>

• <time>