Ce înseamnă acest criteriu?
Criteriul WCAG 1.3.1 cere ca informațiile, structura și relațiile dintre elementele de pe o pagină să fie transmise nu doar vizual, ci și prin mijloace programatice — adică să fie corect codificate astfel încât să poată fi interpretate de tehnologii asistive (ex: cititoare de ecran).
Pe scurt: nu e suficient să arate bine, trebuie să fie bine structurat în cod.
De ce este important?
O persoană care nu vede pagina și o accesează cu un cititor de ecran are nevoie să înțeleagă:
- care este titlul,
- ce relație are o etichetă cu un câmp de formular,
- ce rânduri aparțin unui tabel,
- ce listă are itemi ierarhici.
Fără o structură semantică corectă, informația devine haotică pentru utilizatorii care depind de tehnologii asistive.
Exemple de aplicare corectă:
- Titluri și subtitluri:
Se folosesc tag-uri HTML semantice (<h1>, <h2>, etc.), nu doar fonturi mari și îngroșate. - Liste:
Se folosesc <ul> și <ol>, nu liniuțe introduse manual în paragrafe. - Tabele de date:
Se marchează anteturile cu <th>, nu doar bold vizual. - Formulare:
Eticheta (<label>) este corect asociată cu câmpul (<input>) prin for și id. - Secțiuni de conținut:
Se folosesc elemente ca <section>, <article>, <nav> pentru a semnaliza structura semantică.
Ce greșeli apar frecvent?
- Se creează „titluri” vizuale cu <div> și CSS (font-size: 24px; font-weight: bold;), dar fără tag semantic.
- Se grupează elemente fără a le asocia programatic: un câmp de formular fără label, sau o legendă de grafic fără context.
- Se folosește <table> doar pentru layout vizual, nu pentru date structurate.
- Se ignoră ierarhia titlurilor: de exemplu, se sare direct de la <h1> la <h4>.
Criteriul 1.3.1 ne obligă să ne gândim dincolo de estetică — la structura profundă a informației. Un site bine structurat semantic este mai accesibil, mai ușor de întreținut și mai bun pentru SEO. Este despre a construi conținut inteligent, nu doar frumos.
