Sobes.tech
Middle

Kāda ir atšķirība starp semantiku un pieejamību (a11y)?

sobes.tech AI

Atbilde no AI

Sēman­tika palīdz mašīnām (pārlūk­programmām, pars­er­iem, meklēšanas robotiem) saprast satura struktūru un nozīmi. Pieejamība (a11y) ir vērsta uz to, lai saturs būtu saprotams un ērti lietojams cilvēkiem ar dažādiem fiziskiem vai kognitīviem ierobežojumiem, kuri izmanto palīgtehnoloģijas.

Sēman­tiski tagi

HTML sēman­tisko tagu, piemēram, <article>, <nav>, <aside>, <footer>, <h1>-<h6>, izmantošana piešķir lapas elementiem nozīmīgu nozīmi. Piemēram:

<article>
  <h2>Raksta virsraksts</h2>
  <p>Raksta teksts...</p>
</article>

Tas palīdz pārlūkprogrammām pareizi interpretēt dokumenta struktūru.

Pieejamība (a11y)

Pieejamība ietver daudzus aspektus:

  • Sēman­tika: Pareiza sēman­tisko tagu lietošana jau ir daļa no pieejamības, jo tā palīdz palīgtehnoloģijām (skrinrīderiem) saprast elementu struktūru un nozīmi.

  • ARIA atribūti: Papildu atribūti, piemēram, aria-label, aria-describedby, aria-hidden, role, sniedz papildu informāciju palīgtehnoloģijām, ja HTML sēman­tika nav pietiekama:

    <button aria-label="Aizvērt dialoga logu">
      <img src="close.svg" alt="">
    </button>
    
  • Kontrasts: Pietiekams kontrasts starp tekstu un fonu cilvēkiem ar redzes traucējumiem:

  • Navigācija ar tastatūru: Iespēja pārvietoties lapā un mijiedarboties ar elementiem tikai ar tastatūru:

  • Alternatīvais teksts attēliem (alt): Apraksts attēla saturam lietotājiem, kuri to neredz:

    <img src="cat.jpg" alt="Melna kaķis guļ uz palodzes">
    
  • Virsrakstu struktūra: Loģiska hierarhija (<h1> - <h6>) ērtai navigācijai ar skenrīderiem:

Saistība

Sēman­tika ir svarīgs pamats pieejamībai. Labāk strukturēta lapa ar sēman­tiskiem elementiem ir daudz vieglāk padarāma pieejama. Tomēr viena sēman­tika pati par sevi nav pietiekama – bieži nepieciešami papildu pasākumi, piemēram, ARIA atribūti, fokusa pārvaldība un pietiekama kontrasta nodrošināšana:

Aspekts Sēman­tika Pieejamība (a11y)
Mērķis Piešķirt elementiem nozīmīgu vērtību Nodrošināt, lai saturs būtu saprotams un lietojams visiem
Instrumenti HTML tagi (<nav>, <article>, <h1>...) Sēman­tika, ARIA, kontrasts, fokuss, alt teksts un citi
Lietotājs Pārlūk­programmas, parsēri, meklēšanas sistēmas Cilvēki ar dažādām vajadzībām, palīgtehnoloģijas