Pieejamība (accessibility, saīsināti a11y) nozīmē, ka mājas lapa ir lietojama visiem cilvēkiem — arī tiem, kas izmanto ekrāna lasītājus, tastatūru vai citas palīgtehnoloģijas. Pareiza HTML struktūra ir pieejamības pamats, jo ekrāna lasītāji interpretē tieši HTML kodu, nevis vizuālo izskatu.

Šajā rakstā apskatīsim galvenās HTML tehnikas, kas padara mājas lapu pieejamu, un tipiskas kļūdas, no kurām izvairīties.

1. Kāpēc pieejamība ir svarīga?

  • Ētiski — aptuveni 15% pasaules iedzīvotāju dzīvo ar kādu invaliditāti
  • Juridiski — daudzās valstīs pieejamība ir likumā noteikta prasība (piemēram, EU direktīva 2016/2102)
  • SEO — pieejamas lapas parasti ir labāk strukturētas un Google tās ranžē augstāk
  • Lietojamība — pieejamas lapas ir ērtākas visiem lietotājiem, ne tikai tiem ar invaliditāti

2. Semantiskais HTML — pieejamības pamats

Pats svarīgākais pieejamības princips: izmantojiet pareizo HTML elementu pareizajam mērķim. Ekrāna lasītāji paļaujas uz HTML semantiku, lai saprastu lapas struktūru.

Pogas un saites

<!-- SLIKTI — div izskatās kā poga, bet ekrāna lasītājs to neredz -->
<div class="btn" onclick="iesniegt()">Iesniegt</div>

<!-- LABI — īsta poga, ko ekrāna lasītājs atpazīst -->
<button type="submit">Iesniegt</button>

<!-- SLIKTI — span kā saite -->
<span onclick="location.href='/kontakti'">Kontakti</span>

<!-- LABI — īsta saite -->
<a href="/kontakti">Kontakti</a>

Galvenais noteikums: ja elements veic darbību — lietojiet <button>. Ja elements ved uz citu lapu — lietojiet <a>.

Virsrakstu hierarhija

Ekrāna lasītāju lietotāji bieži navigē pa virsrakstiem. Tāpēc virsrakstu hierarhijai jābūt loģiskai:

<!-- SLIKTI — izlaists H2 līmenis -->
<h1>Mājas lapa</h1>
<h3>Sadaļa</h3> <!-- Kāpēc nevis h2? -->

<!-- LABI — secīga hierarhija -->
<h1>Mājas lapa</h1>
<h2>Sadaļa</h2>
<h3>Apakšsadaļa</h3>

3. Attēlu pieejamība

Attēliem vienmēr jānorāda alt atribūts, kas apraksta attēla saturu:

<!-- Informatīvs attēls — aprakstiet saturu -->
<img src="grafiks.png" alt="Pārdošanas pieaugums 2025. gadā — no 100 līdz 250 tūkst. EUR">

<!-- Dekoratīvs attēls — tukšs alt -->
<img src="ornaments.svg" alt="">

<!-- Komplekss attēls — izmantojiet figure ar figcaption -->
<figure>
<img src="shema.png" alt="Sistēmas arhitektūras shēma">
<figcaption>1. att. — klienta-servera arhitektūras pārskats</figcaption>
</figure>

Alt teksta padomi

  • Nerakstiet "Attēls ar..." — ekrāna lasītājs jau paziņo, ka tas ir attēls
  • Aprakstiet attēla nozīmi, nevis izskatu (ja attēls ir grafiks, aprakstiet galveno secinājumu)
  • Dekoratīviem attēliem izmantojiet tukšu alt="" — ekrāna lasītājs tos izlaidīs
  • Garumam nav striktu ierobežojumu, bet cenšieties būt kodolīgi (līdz ~125 rakstzīmēm)

4. Formu pieejamība

Formu lauki ir viens no biežākajiem pieejamības problēmu avotiem.

Label elementi

Katram formas laukam obligāti jābūt saistītam <label> elementam:

<!-- SLIKTI — nav label -->
<input type="text" placeholder="Vārds">

<!-- LABI — label ar for atribūtu -->
<label for="vards">Vārds</label>
<input type="text" id="vards" name="vards">

<!-- ARĪ LABI — label aptver input -->
<label>
Vārds
<input type="text" name="vards">
</label>

Placeholder nav label aizstājējs! Placeholder pazūd, tiklīdz lietotājs sāk rakstīt, un daudzi ekrāna lasītāji to ignorē.

Obligāto lauku un kļūdu apzīmēšana

<!-- Obligāts lauks -->
<label for="epasts">E-pasts <span aria-hidden="true">*</span></label>
<input type="email" id="epasts" name="epasts" required
aria-required="true"
aria-describedby="epasts-piezime">
<p id="epasts-piezime">Mēs nesūtīsim surogātpastu.</p>

<!-- Kļūdas paziņojums -->
<label for="parole">Parole</label>
<input type="password" id="parole" name="parole"
aria-invalid="true"
aria-describedby="parole-kl">
<p id="parole-kl" class="error">Parolei jābūt vismaz 8 rakstzīmēm garai.</p>

Fieldset un legend

Saistītu lauku grupēšanai izmantojiet <fieldset> ar <legend>:

<fieldset>
<legend>Piegādes veids</legend>
<label><input type="radio" name="piegade" value="kurjers"> Kurjers</label>
<label><input type="radio" name="piegade" value="pasts"> Pasts</label>
<label><input type="radio" name="piegade" value="uz-vietas"> Uz vietas</label>
</fieldset>

5. ARIA atribūti

ARIA (Accessible Rich Internet Applications) atribūti papildina HTML semantiku gadījumos, kad parastie HTML elementi nav pietiekami. Tomēr galvenais princips ir: ja varat izmantot parasto HTML elementu — izmantojiet to, nevis pievienojiet ARIA.

Galvenie ARIA atribūti

Atribūts Lietojums Piemērs
aria-label Pievieno neredzamu teksta apzīmējumu <button aria-label="Aizvērt">✕</button>
aria-labelledby Atsaucas uz redzamu apzīmējumu pēc ID <div aria-labelledby="tituls">
aria-describedby Saista papildu aprakstu ar elementu <input aria-describedby="piezime">
aria-hidden="true" Paslēpj elementu no ekrāna lasītāja Dekoratīvām ikonām
aria-live Paziņo par dinamisku satura maiņu Kļūdu paziņojumiem, čata ziņām
aria-expanded Norāda, vai elements ir izvērsts vai sakļauts Izvēlnēm, akordeona paneļiem
role Nosaka elementa lomu <div role="alert">

ARIA piemēri

<!-- Ikonu poga — ekrāna lasītājs nolasa "Meklēt" -->
<button aria-label="Meklēt">
<svg aria-hidden="true">...</svg>
</button>

<!-- Dinamiska satura maiņa — ekrāna lasītājs paziņo par izmaiņām -->
<div aria-live="polite" id="statuss"></div>
<script>
document.getElementById('statuss').textContent = '3 rezultāti atrasti';
</script>

<!-- Izvēršama sadaļa -->
<button aria-expanded="false" aria-controls="detaļas">
Rādīt vairāk
</button>
<div id="detaļas" hidden>Papildu saturs...</div>

6. Tastatūras navigācija

Daudziem lietotājiem pele nav pieejama — viņi lieto tikai tastatūru. Pārliecinieties, ka:

  • Visas interaktīvās funkcijas ir sasniedzamas ar Tab taustiņu
  • Fokusa secība ir loģiska (seko vizuālajai secībai)
  • Fokuss ir redzams — nekad nenoņemiet fokusa kontūru bez aizstājēja

<!-- SLIKTI — noņemta fokusa kontūra -->
<style>
*:focus { outline: none; }
</style>

<!-- LABI — pielāgota, bet redzama fokusa kontūra -->
<style>
*:focus-visible {
outline: 3px solid #4A90D9;
outline-offset: 2px;
}
</style>

Tabindex

tabindex atribūts kontrolē, vai un kā elements piedalās tastatūras navigācijā:

Vērtība Nozīme
tabindex="0" Iekļauj elementu dabīgajā Tab secībā (izmanto neinteraktīviem elementiem, ja nepieciešams)
tabindex="-1" Izslēdz no Tab secības, bet ļauj fokusēt ar JavaScript (element.focus())
tabindex="1+" Neizmantojiet! Pozitīvas vērtības izjauc dabīgo secību

Skip link (izlaišanas saite)

Pievienojiet "izlaist navigāciju" saiti lapas sākumā, lai tastatūras lietotāji varētu pāriet tieši uz saturu:

<body>
<a href="#galvenais" class="skip-link">Pāriet uz saturu</a>
<nav>...navigācija...</nav>
<main id="galvenais">...saturs...</main>
</body>

<style>
.skip-link {
position: absolute;
left: -9999px;
}
.skip-link:focus {
position: static;
display: block;
padding: 0.5rem 1rem;
background: #1a1a2e;
color: #fff;
}
</style>

7. Citas svarīgas pieejamības tehnikas

Valodas norādīšana

<!-- Norādiet lapas valodu -->
<html lang="lv">

<!-- Ja fragments ir citā valodā -->
<p>Šo konceptu angliski sauc <span lang="en">progressive enhancement</span>.</p>

Krāsu kontrasts

  • Parastam tekstam minimālais kontrasta koeficients ir 4.5:1 (WCAG AA)
  • Lielam tekstam (virs 18px treknrakstā) — 3:1
  • Pārbaudiet ar rīkiem: WebAIM Contrast Checker
  • Nepaļaujieties tikai uz krāsu — izmantojiet arī ikonas, tekstuālus paziņojumus vai modeļus

Responsīvs un tālummaiņai draudzīgs dizains

Lapai jābūt lietojamai arī ar palielinātu mērogu (līdz 200%). Izmantojiet relatīvās vienības (rem, em), nevis fiksētos pikseļus.

8. Pieejamības pārbaudes rīki

Rīks Apraksts
WAVE Tiešsaistes pieejamības pārbaudītājs — vizuāli atzīmē problēmas
axe DevTools Chrome/Firefox paplašinājums — automātiska WCAG pārbaude
Chrome DevTools → Lighthouse Iebūvēts Chrome — ietver pieejamības auditu
NVDA Bezmaksas ekrāna lasītājs (Windows) — testējiet savu lapu kā to dzird neredzīgs lietotājs
VoiceOver Iebūvēts macOS un iOS ekrāna lasītājs

9. Pieejamības kontrolsaraksts

  • Visiem attēliem ir alt atribūts (tukšs dekoratīviem)
  • Visiem formu laukiem ir <label>
  • Virsrakstu hierarhija ir secīga (H1 → H2 → H3)
  • Izmantoti semantiskie elementi (<nav>, <main>, <button>)
  • Visi interaktīvie elementi ir sasniedzami ar tastatūru
  • Fokusa kontūra ir redzama
  • Krāsu kontrasts atbilst WCAG AA (4.5:1)
  • Norādīts lang atribūts <html> elementā
  • Ir "izlaist navigāciju" saite
  • Dinamiskais saturs izmanto aria-live

Kopsavilkums

Pieejamība nav papildu darbs — tā ir kvalitatīvas tīmekļa izstrādes daļa. Lielāko daļu pieejamības problēmu var novērst, vienkārši izmantojot pareizos HTML elementus un ievērojot dažus vienkāršus principus:

  1. Izmantojiet semantisko HTML — <button>, <a>, <nav>, <main>
  2. Nodrošiniet teksta alternatīvas — alt attēliem, <label> formu laukiem
  3. Pārbaudiet tastatūras navigāciju — viss ir sasniedzams bez peles
  4. Nodrošiniet pietiekamu kontrastu — teksts ir lasāms visiem
  5. Testējiet ar automatizētiem rīkiem un, ja iespējams, ar ekrāna lasītāju

Noderīgas saites: