HTML & Tehnic

HTML semantic și accesibilitate

De ce HTML semantic este fundament al accesibilității: elementele corecte, structura de heading-uri, landmark-uri și când să nu folosești div.

HTML & Tehnic

HTML semantic — baza oricărui site accesibil

Un site poate arăta bine vizual, dar să fie complet inaccesibil pentru screenreadere dacă nu folosește HTML semantic corect.

Elemente semantice HTML5

  • <header> — antet pagină sau secțiune
  • <nav> — navigare principală
  • <main> — conținut principal (o singură dată)
  • <article> — conținut independent
  • <aside> — conținut tangențial
  • <footer> — subsol pagină sau secțiune
  • <section> — secțiune tematică cu heading

Regula heading-urilor

Structura h1-h6 trebuie să fie logică și ierarhică. Screenreaderele o folosesc pentru navigare rapidă.

  • O singură <h1> per pagină
  • Nu sări niveluri: h1 → h3 fără h2
  • Nu folosi heading-uri pentru stil (dimensiune font)
  • Nu folosi bold/italic în loc de heading-uri
Cel mai frecvent antipattern: Butoane sau linkuri implementate ca <div onclick> sau <span onclick>. Acestea nu sunt accesibile cu tastatura și nu sunt anunțate corect de screenreader. Folosește întotdeauna <button> și <a>.

Testează accesibilitatea site-ului tău

Scannerul Wawsome analizează automat site-ul după WCAG 2.1 și îți oferă un raport complet cu măsuri prioritare — gratuit 7 zile.

Scanează gratuit →