Pristupačnost web stranica i mrežnih mjesta

Pristupačnost web stranica iz perspektive marketinga govori o stvaranju digitalnog iskustva koje je pristupačno što većem broju korisnika. Za digitalnu pristupačnost dizajnira se pristup za osobe s određenim poteškoćama i fizičkim ograničenjima.

Carnetove smjernice za pristupačnost web stranica osobama s invaliditetom:

  • kao glavne elemente stranice trebalo bi koristiti strukturalne elemente iz HTML5 standarda (header, footer, nav, section, article, aside) umjesto div elemenata, kako bi čitači ekrana prepoznali značenje pojedinog elementa
  • svakoj stranici trebalo bi postaviti naslov unutar HTML elementa title (koji se nalazi unutar head elementa)
  • za naslove treba koristiti h1, h2, h3, h4, h5 i h6 elemente, a za odlomke teksta p elemente
  • za naglašavanje manjih dijelova teksta treba koristiti strong i em elemente (umjesto b i i elemenata)
  • tablice (table element) treba koristiti isključivo za prikaz tabličnih podataka, a ne za postizanje vizualnog rasporeda elemenata na stranici
  • tablice trebaju sadržavati naslov tablice u elementu caption, a naslove stupaca treba definirati pomoću elementa th
  • za tekst treba koristiti jednostavne, čitljive fontove bez serifa, poput fontova Arial, Verdana i sličnih
  • sav tekst treba biti poravnat lijevo
  • veličina fonta treba biti 12 pt
  • moguće je jednostavno promijeniti veličinu slova, bez gubitka okolnog teksta (sadržaja)
  • moguće je jednostavno promijeniti vrstu fonta u font pogodan za osobe s disleksijom
  • kontrast teksta, tekstualnih okvira i slika na mrežnim stranicama u odnosu na pozadinu stranica je dobar (jak) i postoji opcija promjene kontrasta
  • slike i složene slike (npr. grafovi i dijagrami) imaju prikladan tekstualni naziv (alt atribut) na hrvatskom jeziku
  • slike i složene slike (npr. grafovi i dijagrami) imaju opis na hrvatskom jeziku koji sadržava najvažnije informacije o onome što slika prikazuje. Objašnjenje funkcije slike je važnije (ako funkcionalnost postoji) i nalazi se na početku opisa (primjerice, slika predstavlja poveznicu na adresu elektroničke pošte), a nakon funkcije slijedi sadržaj
  • tekst u obliku slikovnih datoteka se ne koristi
  • kada se koriste posebne boje za označavanje teksta koji se želi naglasiti ili za označavanje poveznica, koriste se i dodatne oznake poput podcrtavanja
  • poveznice su deskriptivne, pružaju informaciju o sadržaju koji se nalazi iza njih
  • kretanje kroz digitalni sadržaj i njegovo korištenje omogućeno je korištenjem samo tipkovnice
  • audio i video zapisi moraju se moći pokrenuti, zaustaviti i ponovno pokrenuti
  • audio i video zapisi imaju prikladan tekstualni naziv na hrvatskom jezik,u CARNET: Smjernice za osiguravanje digitalne pristupačnosti Ver. 1.1 / studeni 2019. 15
  • audio i video zapisi imaju tekstualni opis na hrvatskom jeziku koji sadržava najvažnije informacije o onome što audio ili video zapis prikazuje
  • gumbi na audio i video zapisima imaju kratak tekstualni naziv na hrvatskom jeziku i jasno označavaju danu funkcionalnost gumba
  • audio i video zapisi moraju biti snimljeni ili izvedeni u stereo tehnici ukoliko je riječ o glazbenom dijelu ili je audio zapisom potrebno prenijeti atmosferu. Audio zapis govora može biti snimljen u mono tehnici, pri čemu je potrebno voditi računa da se mono zapis šalje podjednako u oba stereo kanala. Prilikom snimanja audio i video zapisa koji sadržavaju govor, zvukove i/ili glazbu, treba voditi računa da ostali zvukovi ne narušavaju čujnost govora
  • jasno su označeni bljeskajući elementi koji mogu izazvati smetnje kod osoba s poremećajem senzorne integracije i drugim neurološkim smetnjama
  • veličina ikona na mrežnim stranicama, zajedno s prostorom oko njih, koje se aktiviraju klikom miša ili nekog drugog pokazivača, mora biti minimalno 44 x 44 dp13, a međusobna udaljenost tih klikabilnih elemenata, kao i njihova udaljenost od teksta, minimalno 8 dp
  • veličina ikona u mobilnim aplikacijama, zajedno s prostorom oko njih, koje se aktiviraju dodirom prsta, mora biti minimalno 48 x 48 dp, a međusobna udaljenost tih klikabilnih elemenata, kao i njihova udaljenost od teksta, minimalno 8 dp
  • izbornik i/ili podizbornik je fiksan element koji se aktivira klikom/dodirom, a ne prelaskom pokazivača preko njega
  • kada se koriste drag and drop elementi postoji i alternativni način izvršavanja akcije (primjerice, dvostrukim klikom na element)
  • nema ograničenog vremena za unos podataka, ako to nije neophodno

Standardni HTML omogućava čitačima ekrana da uspostave strukturu sadržaja prilikom čitanja istog. Koriste se elementi zaglavlja, elementi izbornika, glavni elementi i elementi podnožja kako bi čitači ekrana prepoznali elemente strukture i najavili ih korisniku.

Web stranice trebaju omogućiti upotrebu navigacije pomoću tipkovnice jer određeni korisnici nisu u mogućnosti koristiti se mišem, te je potrebno uzeti u obzir radnje koje korisnik želi izvršiti na web stranici i osigurati korisniku interakciju upotrebom tipkovnice.
Interaktivni elementi na web stranici ne sadrže sve informacije koje su potrebne čitačima ekrana. Stoga ARIA oznaka pomaže čitačima ekrana da preskoče HTML oznake i omogućavaju vlasnicima web stranica dodavanje konteksta elementima na web stranici. Korištenjem ARIA oznake u formularima, tipkama, linkovima i ostalim interaktivnim elementima pružaju dodatni kontekst i omogućavaju čitaču ekrana da izgovori tekst koji poziva na akciju.

Svakako se pobrinite da su vaši kontakt obrasci logično strukturirani, te da su polja jasno označena i intuitivna. Preporuka je da tekstualna polja sadrže obrube kako bi se istaknula područja unosa teksta. U polja gdje nije potrebno upisivati tekst preporučljivo je staviti padajuće izbornike s ponuđenim odgovorima zbog lakšeg i bržeg popunjavanja. Korisno je strukturirati kontakt obrasce u jednu kolonu kako bi bili pregledniji te prilagoditi HTML input vrste (input types) kada je riječ o unosu određene vrste teksta. Tako je primjerice za unos telefonskog broja potrebno koristiti numeričke znakove (kako korisnici ne bi morali mijenjati više vrsta virtualnih tipkovnica). Kako korištenjem tipkovnice ne bi došlo do poteškoća kod slanja formulara pri uporabi JavaScript-a u formularima treba biti vrlo oprezan.

Razlikujte upotrebu HTML i CSS koda je kada je primjena oba moguća. Iako se za npr. okvir stranice mogu koristiti oba načina, važno je znati da je HTML tablica prije svega namijenjena za prikaz podataka u tabularnom obliku, dok je CSS stilski jezi namijenjen za oblikovanje i dizajnersko dorađivanje elementa (boje, stilovi, fontovi i slično). Uvijek tablicama dodijelite header kako bi uređaji za pristupačnost mogli adekvatno prepoznati strukturu elementa.

Kod kreiranja sadržaja vrlo je važno kako ga strukturiramo. Iako se na prvu ne čini tako, bitno je tekstove podijeliti u logične odlomke s jasnim naznakama (naslovima, podnaslovima, numeracijom) što se unutar određenog odlomka ili djela teksta nalazi. Na taj način će se osobe s oštećenjima vida i kognitivnim oštećenjima puno lakše snalaziti na vašoj web stranici jer čitači ekrana funkcioniraju upravo na taj način, a svakako je korisno i za skenere sadržaja na mobilnim uređajima.

Poravnavanje teksta također igra veliku ulogu kada je u pitanju čitljivost. Preporučljivo je poravnanje teksta postaviti na lijevu stranu jer poravnanje uvelike utječe na čitljivost vaše web stranice. Primjerice, obostrano poravnati tekst ne ostavlja dovoljno okolnog bijelog prostora za odmaranje očiju što može postati umarajuće. Dodatna prednost lijevo poravnatog teksta je to što olakšava skeniranje i jasnije naglašava praznine između odlomaka. Najgora opcija je ipak naizmjenično poravnanje dijelova tekstova stoga je najlošija opcija koristiti više poravnanja na web stranici. Ako je baš potrebno centriranje se može koristiti samo za određene rečenice, kraće odlomke ili citate koji se žele istaknuti.

Iako postoji pregršt raznovrsnih i lijepih fontova, većina njih nije dobra za korištenje na web stranici. Imajte na umu da je neke fontove teže čitati od drugih, stoga uvijek upotrebite standardne fontove koji su lako čitljivi kao što je primjerice Sans-serif. Osim za ljude, ovaj font je lakše čitljiv i za uređaje kojima se osobe s oštećenjima vida i kognitivnim oštećenjima služe. Osim toga, svakako odaberite adekvatnu veličinu fonta koja nije premala jer takvi fontovi izazivaju napor već i nakon nekoliko minuta čitanja. Na svojoj web stranici koristite jedan font te izbjegavajte trepćući ili pokretljivi tekst.

Prema brojnim istraživanjima nerijetko se korisnice žale na vizualne poteškoće pri pregledavanju sadržaja na web stranicama zbog neadekvatne upotrebe boja (problemi s odsjajem, svjetlosti, kontrastom) stoga pripazite da je tekst jasno vidljiv i u dovoljnom kontrastu u odnosu na pozadinu. Prema Web Content Accessibility Guidelines (WCAG) smjernicama (smjernice glavnog autoriteta na području web upotrebljivosti) minimalni kontrast normalnog teksta treba biti 4.5:1. Kontrast najčešće predstavlja problem kod osoba koje ne prepoznaju boje ili su slabovidne. Najčešći primjer neadekvatne uporabe boja za takve osobe su crvena boja za upozorenja ili greške te zelena boja za potvrdne poruke. Prikladnija signalizacija je uporaba ikona, grafika ili oblika koji mogu sugerirati isto što i boje na prihvatljiviji način.

Osim što će vam prilagođavanje web stranice prema navedenim smjernicama omogućiti veći broj korisnika, osobama s određenim poteškoćama i fizičkim ograničenjima olakšat ćete pronalaženje informacija. Budite primjer pozitivne prakse za one koji se još nisu odlučili na takve poticajne promjene.

Iris Gregić

info@sm-art-design.com

SMART DESIGN © 2017-2024 Sva prava pridržana

Pisali smo još i o...

Kako od 2017. godine uspješno vodimo projekte?

Definiranje ciljeva i opsega projekta Prvi korak svakog projekta je definiranje jasnih ciljeva. Ključno je razumjeti što klijent želi postići projektom. Kroz razgovore s vama postavljamo specifične, mjerljive, ostvarive, relevantne