Smernice

Dostopni obrazci kot temelj uspešne komunikacije z uporabniki

Obrazci so eden najpomembnejših delov spletnih strani, saj uporabnikom omogočajo prijavo, nakup, rezervacijo, pošiljanje povpraševanj in številne druge storitve. Če niso pripravljeni skladno z načeli digitalne dostopnosti, lahko postanejo nepremostljiva ovira za številne uporabnike.
Vrsta: Digitalna dostopnost
Zahtevnost: Napredno
Avtor: DigARegion
Objavljeno:
Posodobljeno:
Deli na:

Smernica pokriva oviranosti:

Dostopen obrazec uporabniku omogoča, da razume, kaj mora vnesti, enostavno izpolni zahtevana polja, pravočasno zazna morebitne napake in jih tudi uspešno odpravi. Pri tem imajo pomembno vlogo tako vizualna zasnova kot tudi pravilna programska implementacija.

Za katere uporabnike je to posebej pomembno?

Dostopni obrazci so posebej pomembni za:

  • slepe in slabovidne uporabnike, ki uporabljajo bralnike zaslona,
  • uporabnike z barvno slepoto,
  • osebe z gibalnimi oviranostmi, ki uporabljajo tipkovnico,
  • osebe s kognitivnimi oviranostmi,
  • starejše uporabnike.

Dobro zasnovani obrazci pa koristijo vsem uporabnikom, saj zmanjšujejo število napak, pospešijo izpolnjevanje in izboljšajo uporabniško izkušnjo.

Ključna področja dostopnih obrazcev

Jasno označena vnosna polja

Vsako vnosno polje mora imeti jasno oznako, ki uporabniku pove, katere podatke mora vnesti. Oznaka mora biti trajno povezana z vnosnim poljem in ne sme biti nadomeščena zgolj z besedilom znotraj polja (placeholder), saj to ob začetku vnosa izgine. Pri zahtevnejših obrazcih je pomembno tudi, da so z vnosnimi polji pravilno povezani dodatni opisi, navodila in obvestila o napakah, tako da jih lahko zaznajo tudi podporne tehnologije.

Dobro označena polja zmanjšujejo število napak, izboljšajo uporabniško izkušnjo ter omogočajo učinkovito uporabo obrazcev uporabnikom bralnikov zaslona.

Primer dostopnega obrazca:

Obrazec z vnosnim poljem, ki ima pravilno določeno dostopno ime in ustrezno določeno vlogo besedilnega polja.

Več o dostopnem poimenovanju elementov

Logična struktura in upravljanje obrazcev

Daljši obrazci morajo biti pregledno razdeljeni na smiselne sklope, uporabnik pa se mora po njih lahko premikati tudi samo s tipkovnico. Fokus mora slediti logičnemu zaporedju, skupine sorodnih polj pa naj bodo ustrezno označene. Takšna zasnova izboljša uporabniško izkušnjo vsem uporabnikom, še posebej pa osebam, ki uporabljajo tipkovnico ali podporne tehnologije.

Primer elementa, ki ni dosegljiv s tipkovnico:

Primer gumba za izbiro DA ali NE, ki ni dosegljiv s tipkovnico. Ob gumbu je prikazano besedilo za podajo soglasja za naročilo na e-novice.

Več o dostopnosti s tipkovnico

Več o ustreznem vrstnem redu in vidnosti fokusa

Dober kontrast in jasna vidnost elementov

Uporabniki morajo posamezna vnosna polja, potrditvena polja, izbirnike in gumbe zlahka opaziti. Zato morajo imeti vsi interaktivni elementi ustrezen kontrast glede na ozadje. Poleg kontrasta besedila je pomemben tudi kontrast robov vnosnih polj, ikon, indikatorjev fokusa in drugih grafičnih elementov obrazca.

Dober kontrast izboljša berljivost in uporabnost obrazcev, zlasti za slabovidne uporabnike, osebe z barvno slepoto ter uporabnike mobilnih naprav ali slabših svetlobnih razmer.

Primer neustreznega besedilnega kontrasta (levo) in ustreznega besedilnega kontrasta (desno):

Primer gumbov z oranžnim besedilom na oranžnem ozadju ter črnim besedilom na oranžnem ozadju.

Več o ustreznih kontrastih in uporabi barve

Jasna opozorila na napake

Če uporabnik pri izpolnjevanju obrazca naredi napako, mora spletna stran jasno pojasniti, katero polje vsebuje napako, zakaj je do nje prišlo in kako jo lahko odpravi. Opozorila morajo biti dovolj opazna, razumljiva in ne smejo temeljiti zgolj na barvi.

Kadar je mogoče, naj sistem uporabniku ponudi tudi konkreten predlog za popravek, saj se s tem bistveno poveča uspešnost izpolnjevanja obrazcev in zmanjša število ponovnih napak.

Primer dostopnega opozorila na napako:

Obrazec za prijavo na e-novice z jasno vidnim opozorilom o neveljavno vnesenem e-poštnem naslovu.

Več o dostopnih opozorilih na napake

Statusna sporočila

Po uspešni oddaji obrazca ali drugi pomembni spremembi mora uporabnik prejeti jasno povratno informacijo. Statusna sporočila, kot so »Obrazec je bil uspešno poslan« ali »Podatkov ni bilo mogoče shraniti«, morajo biti dostopna vsem uporabnikom, tudi tistim, ki uporabljajo bralnike zaslona.

Če takšna sporočila niso pravilno posredovana podpornim tehnologijam, uporabniki z okvarami vida pogosto sploh ne vedo, ali je bilo njihovo dejanje uspešno ali ne.

Več o dostopnih statusnih sporočilih

Zaščita pred neželenimi oddajami obrazcev – CAPTCHA

Zaščita obrazcev pred neželenimi oddajami, kot je CAPTCHA, ne sme uporabnikom preprečiti dostopa do storitve. Klasične slikovne CAPTCHA rešitve, pri katerih mora uporabnik prepoznati popačeno besedilo ali označiti slike, so pogosto nedostopne za slepe in slabovidne uporabnike, osebe s kognitivnimi oviranostmi ter uporabnike podpornih tehnologij.

Kadar je preverjanje potrebno, naj spletna stran omogoča dostopne alternative, na primer preverjanje brez uporabnikovega posredovanja, preverjanje prek e-pošte ali druge rešitve, ki ne temeljijo izključno na vidnem zaznavanju. Pomembno je, da je postopek razumljiv, izvedljiv s tipkovnico in dostopen bralnikom zaslona.

Dostopna zaščita obrazcev omogoča varnost brez izključevanja uporabnikov.

Več o dostopni zaščiti CAPTCHA

Povezava s smernicami dostopnosti (WCAG)

Dostopni obrazci vključujejo več kriterijev uspeha WCAG, med najpomembnejšimi pa so:

  • 1.1 Nebesedilna vsebina
  • 1.3.1 Informacije in razmerja
  • 1.4.3 Kontrast (najmanjši)
  • 1.4.11 Nebesedilni kontrast
  • 2.1.1 Tipkovnica
  • 2.2.1 Časovno prilagajanje
  • 3.3.1 Identifikacija napake
  • 3.3.2 Oznake ali navodila
  • 3.3.3 Predlog za odpravo napake
  • 3.3.4 Preprečevanje napak
  • 3.3.8 Dostopna avtentikacija
  • 4.1.2 Ime, vloga, vrednost
  • 4.1.3 Statusna sporočila