Smernice

Navigacija brez ugibanja: vrstni red in vidnost fokusa

Ustrezen vrstni red vsebine je ključen za razumevanje in uporabo spletnih strani. Uporabniki bralnikov zaslona in tisti, ki se po strani pomikajo s tipkovnico, vsebino zaznavajo zaporedno – element za elementom. Če vsebina ni logično strukturirana, lahko hitro pride do zmede, izgube konteksta ali preskakovanja pomembnih informacij.
Vrsta: Digitalna dostopnost
Zahtevnost: Osnovno
Avtor: Andreja Bevc
Objavljeno:
Posodobljeno:
Deli na:

Smernica pokriva oviranosti:

Pravilno zaporedje vsebine zagotavlja, da se informacije podajajo v smiselni in predvidljivi obliki. Skupaj z jasno vidnim fokusom uporabniku omogoča, da ves čas ve, kje se nahaja na strani in kaj je naslednji korak. To izboljšuje razumevanje vsebine, zmanjšuje napor pri uporabi in prispeva k boljši uporabniški izkušnji za vse.

Namig: Logičen vrstni red vsebine in jasno viden fokus uporabnikom omogočata učinkovito navigacijo ter zmanjšujeta možnost izgube orientacije na strani.

Primer prikazanega fokusa na spletni strani:

Navigacijski meni spletne strani. Element »Vodeni ogledi« ima viden fokus tipkovnice.

Za katere uporabnike sta ustrezen vrstni red in viden fokus posebej pomembna?

Jasen vrstni red vsebine in viden fokus sta ključna za:

  • osebe z vidnimi oviranostmi, ki uporabljajo bralnike zaslona,
  • uporabnike, ki splet uporabljajo s tipkovnico ali njenimi alternativami,
  • osebe z zmanjšano koncentracijo ali kognitivnimi oviranostmi.

Hkrati pa takšna zasnova koristi tudi širši javnosti, saj omogoča bolj pregledno, predvidljivo in manj zmedeno uporabo spletnih strani, zlasti pri daljših vsebinah, obrazcih ali kompleksnejših postopkih.

Kako preveriti, ali je vrstni red vsebine ustrezen?

Ustreznost vrstnega reda vsebine preverimo tako, da se po spletni strani pomikamo s tipko Tab in opazujemo, ali se fokus premika v smiselni in pričakovani smeri (od zgoraj navzdol ter od leve proti desni). Dodatno si lahko pomagamo z bralnikom zaslona, ki vsebino bere v zaporedju, kot je določeno v strukturi in izvorni kodi strani.

Primer neustreznega vrstnega reda elementov, ki si sledijo iz desne proti levi:

Glava spletne strani Narodne galerije. Številke označujejo nelogičen vrstni red fokusa, ki se med navigacijo s tipkovnico premika z desne proti levi.

Slaba praksa: Fokus se premika v nelogičnem zaporedju, zaradi česar uporabnik težje sledi vsebini in izgubi orientacijo.

Primer ustreznega vrstnega reda vsebine na spletni strani:

Glava spletne strani z navigacijskim menijem. Številke prikazujejo logičen vrstni red fokusa, ki med navigacijo s tipkovnico poteka od leve proti desni.

Dobra praksa: Fokus se premika v logičnem in predvidljivem zaporedju, ki sledi strukturi vsebine na strani.

Kako preveriti, ali je fokus dovolj jasno viden?

Pri preverjanju logičnega vrstnega reda vsebine hkrati opazujemo tudi, ali je fokus na vseh interaktivnih elementih jasno in nedvoumno označen. Posebno pozornost namenimo temu, ali je ob premiku s tipkovnico vedno razvidno, kateri element je trenutno aktiven.

Namig: Smernice dostopnosti določajo, da mora biti sprememba videza ob fokusu dovolj izrazita, da jo uporabniki zlahka opazijo. Barva ali označba fokusa mora imeti kontrast vsaj 3 : 1 v primerjavi z videzom elementa brez fokusa.

Primer dobro vidnega fokusa na spletni strani:

Navigacijski meni spletne strani. Postavka »Strokovno« ima jasno viden fokus, označen z rumenim ozadjem in visokim kontrastom.

Dobra praksa: Fokus je jasno viden in uporabniku omogoča hitro prepoznavo trenutno aktivnega elementa.

Kako pa je v praksi?

Kljub izpolnjevanju tehničnih zahtev je fokus v praksi pogosto še vedno premalo opazen. Zato je pomembno, da poleg formalne skladnosti upoštevamo tudi dejansko uporabniško izkušnjo in zagotovimo, da je fokus jasno viden, razumljiv in enostavno sledljiv za vse uporabnike.

Primer slabo vidnega fokusa na spletni strani, ki je sicer skladen s smernicami dostopnosti:

Ploščice z novicami na spletni strani. Fokus je označen le s tankim temnim robom, zato je slabo opazen in ga uporabniki težko prepoznajo.

Slaba praksa: Fokus sicer obstaja, vendar ga uporabnik težko opazi, zato je navigacija po strani otežena.

Nemalokrat se zgodi, da na spletni strani fokus sploh ni viden, kar pomeni, da uporabnik, ki uporablja tipkovnico, ne more ugotoviti, kateri element je trenutno aktiven.

Primer, kjer na interaktivnih elementih ni vidnega fokusa:

Seznam novic na spletni strani. Interaktivne ploščice nimajo vidnega fokusa, zato uporabnik pri navigaciji s tipkovnico ne more ugotoviti, katera novica je trenutno izbrana.

Slaba praksa: Na strani ni vidnega fokusa, zato uporabnik ne more vedeti, kateri element je trenutno aktiven.

Kako preverimo dostopnost vrstnega reda in fokusa?

Pri preverjanju si lahko pomagamo z naslednjimi vprašanji:

  • Ali se fokus premika v logičnem zaporedju?
  • Ali vrstni red sledi vizualni in vsebinski strukturi strani?
  • Ali je trenutni fokus vedno jasno viden?
  • Ali fokus ostane viden tudi pri povečavi strani?
  • Ali je mogoče brez težav ugotoviti, kateri element je trenutno aktiven?
  • Ali fokus ni zakrit z drugimi elementi strani?

Povezava s smernicami dostopnosti (WCAG)

Področje ustreznega zaporedja vsebine in vidnosti fokusa naslavljajo naslednji kriteriji uspeha WCAG:

  • 2.4.3 Fokusni red

    Zaporedje premikanja po strani mora biti logično in smiselno glede na vsebino ter funkcionalnosti strani.

  • 2.4.7 Viden fokus

    Uporabnik mora ves čas jasno videti, kateri element je trenutno izbran oziroma aktiven.

  • 2.4.11 Fokus ni zakrit (najmanjše)

    Element, ki prejme fokus, ne sme biti v celoti zakrit z drugimi elementi strani.

Ti kriteriji zagotavljajo, da se uporabniki po spletni strani premikajo v logičnem in predvidljivem zaporedju ter da je trenutno izbran element vedno jasno viden.

S tem omogočajo boljše razumevanje vsebine, lažjo orientacijo na strani in enakovredno uporabo spleta predvsem uporabnikom tipkovnice in bralnikov zaslona, hkrati pa izboljšujejo splošno preglednost in uporabniško izkušnjo za vse.