Primjeri digitalne pristupačnosti

1. Primjeri digitalne pristupačnosti

Kontinuirana ažuriranja i nove verzije Smjernica digitalne pristupačnosti WCAG-a osiguravaju da standardi pristupačnosti prate tehnološke promjene. Standardi pristupačnosti WCAG-a razvijali su se tijekom godina, a sa svakom novom verzijom dodani su napredniji zahtjevi. Posljednja verzija, WCAG 2.2, objavljena je u listopadu 2023., a već je u izradi WCAG 3.0, verzija koja će biti prilagođena većini modernih tehnologija i uređaja te će imati razvijeniji pristup testiranju digitalne pristupačnosti i uključivosti.

Ovisno o tome koliko digitalni sadržaj može biti u skladu sa standardima WCAG-a, varira njegova razina pristupačnosti. Tako se razlikuju razine A, AA i AAA.

Temeljem smjernica W3C, standard je da digitalni sadržaji teže WCAG 2.0 razini AA. Ova razina predstavlja optimalnu ravnotežu: pruža značajno više od minimuma pristupačnosti, a istovremeno je realno dostižna za implementaciju (Sabilano, nepoznata godina).

2. Elementi koje trebaju sadržavati pristupačni digitalni sadržaji

Neki od osnovnih elemenata koje trebaju sadržavati pristupačni digitalni sadržaji usklađeni sa Smjernicama WCAG 2.1 i 2.2, preuzeto i prilagođeno s Webaim:

Alternativni tekst (Alternative Text) 🖼️

• Svaki element koji nije tekst treba tekstualni ekvivalent (često prenesen u alt atributu) kako bi pružio alternativu sadržaju slike.
• Alt atribut treba predstavljati sadržaj i funkciju slike, ali ne nužno i detaljan opis.
• Ako je slika dekorativna ili redundantna obližnjem tekstu, treba imati prazan alternativni tekst (alt="").
• Ako je slika poveznica ili interaktivno područje (hotspot), alt tekst mora opisati funkciju veze.
• Riječi poput „slika od”, „fotografija od” ili „poveznica na” posve su suvišne. Čitači zaslona već po zadanim postavkama identificiraju slike i poveznice.
• Alternativni tekst treba biti što sažetiji.

Čitljivost (Readability) 📖

• Korištenje najjednostavnijeg jezika koji odgovara sadržaju i korisnicima.
• Korištenje praznog prostora (dužina redaka, razmak teksta) za poboljšanje čitljivosti.
• Nadopunjavanje teksta slikama i ikonama.
• Provjera pravopisa, gramatike i razine čitanja.

Navigacija sadržajem (Content Navigation) 🧭

• Stvaranje semantičke strukture uz pomoć regija, naslova i popisa.
• Osiguravanje poveznice za preskakanje (skip link) kako bi korisnici mogli doći izravno do glavnog sadržaja stranice.

Tablice podataka (Data Tables) 📊

• Označiti zaglavlja tablice podataka s < th scope = col > za zaglavlja stupaca i < th scope = row > za zaglavlja redaka.
• Ako je prikladno, dodati <caption> za tablicu podataka.

Boja (Color) 🎨

• Boja može poboljšati razumijevanje, ali nije dobro upotrijebiti boju isključivo za prenošenje informacija. Posebno oprezno treba upotrebljavati crveno/zelene kombinacije boja.
• Tekst, ikone i elementi korisničkog sučelja trebaju imati snažan kontrast osvjetljenja (luminance contrast).

Obrasci (Forms) 📝

• Oznake obrazaca (labels) treba postaviti uz njihove kontrole ili blizu njih tako da su oznake vizualno povezane.
• Korištenje <label> za programsko povezivanje oznaka s kontrolama.
• Korištenje <fieldset> i <legend> za grupiranje povezanih kontrola (poput radio gumba) s oznakom više razine.
• Jasno označavanje obveznih elemenata obrasca. 
• Osiguravanje da su sve upute i smjernice lako dostupne.
• Osiguravanje da su pogreške pri validaciji očite korisnicima čitača zaslona te da korisnici mogu lako izvršiti ispravke i ponovno poslati obrazac.

Poveznice i gumbi (Links and Buttons) 🔗

• Osiguravanje da poveznice i gumbi sadržavaju opisni tekst.
• Izbjegavanje generičkih fraza kao što su „kliknite ovdje”, „ovdje”, „više”, „više informacija”, „pročitajte više”, „nastavi” itd.
• Osiguravanje da se poveznice mogu vizualno razlikovati od drugog sadržaja stranice.

Multimedija (Multimedia) 📹

• Videozapisi i audiozapisi uživo moraju imati titlove i transkript.
• Titlovi moraju biti sinkronizirani, ekvivalentni i pristupačni.
• Arhivirani audiozapis mora imati transkript.

Dokumenti (Documents) 📄

• Za najrobusniju pristupačnost upotrijebiti HTML.
• Kad je dokument jedino rješenje, PDF, Word, PowerPoint i Excel pružaju osnovne značajke pristupačnosti.
• Ako se sadržaj dokumenta ne može učiniti potpuno pristupačnim, potrebno je osigurati pristupačnu alternativu.
• Testiranje pristupačnosti dokumenta čitačem ekrana.

Razno ✨

• • Sadržaj se treba prelomiti (reflows) bez narušavanja izgleda pri zumiranju do 400 % (iz okvira za prikaz širine 1280 piksela).
  • Prilagodljivi izgledi i strukture (responsive layouts) trebaju biti dostupni uz pomoć tipkovnice.
  • Osiguravanje opisne <title> stranice.
  • Osiguravanje da je funkcionalnost dostupna korisnicima miša i također dostupna uz pomoć tipkovnice.

Akinyemi (2023) daje opsežan prikaz loših i dobrih digitalnih sadržaja koji su usklađeni sa smjernicama WCAG-a.

3. Principi pristupačnog sadržaja

Plakati „što činiti” i „što ne činiti” prikazuju neke ključne principe u izradi pristupačnih materijala za korisnike s posebnim potrebama pristupačnosti, uključujući autizam, sljepoću, oštećenja vida, gluhoću ili nagluhost, probleme s mobilnošću i disleksiju. Posteri su dizajnirani 2016. godine u UK Home Office Digital, a hrvatska inačica postera bila je dostupna od 2020. godine na stranicama Središnjeg državnog ureda za razvoj digitalnog društva. 

4. Primjeri digitalno pristupačnog sadržaja

Pogledajte različite primjere univerzalnog dizajna za učenje.

Slika 35. Prikaz pristupačne infografike s kontrastom boja, odgovarajućom veličinom fonta, označenom poveznicom s nazivom sadržaja na koji vodi

5. Primjeri pristupačnosti internetskih stranica

Pristupačne internetske stranice trebaju imati mogućnost prilagodbe pristupačnosti. Internetska stranica Sveučilišta u Zagrebu Edukacijsko-rehabilitacijskog fakulteta omogućava prilagodbu izgleda (standardno, visoki kontrast, visoka vidljivost), prilagodbu fonta (prilagodba disleksiji i veličinu fonta.

Slika 36. Internetska stranica Sveučilišta u Zagrebu Edukacijsko-rehabilitacijskog fakulteta (ERF)

s mogućnostima prilagodbe pristupačnosti 

Slika 37. Prilagodba internetske stranice ERF-a: visoki kontrast, povećani font, prilagodba disleksiji 

Internetske stranice Knjižnice Nikola Zrinski Čakovec uz prilagodbu izgleda, veličine i oblika fonta, nudi i mogućnost podcrtanih linkova.

Slika 38. Prilagodbe pristupačnosti na internetskoj stranici Knjižnice „Nikola Zrinski“, Čakovec

Internetska stranica Zajednice saveza osoba s invaliditetom nudi mogućnost izbora kontrasta, veličine i oblika fonta, naglašavanje poveznica, mogućnost skrivanja slika i zaustavljanja animacija, kratke opise, masku za čitanje, mogućnosti poravnanja teksta. Također daje poveznicu na alat UserWay za provjeru pristupačnosti stranica. 

Slika 39. Mogućnosti prilagodbe pristupačnosti na internetskoj stranici Zajednica saveza osoba s invaliditetom Hrvatske

Slika 40. Primjeri dobrih i loših kombinacija boje teksta i pozadine

(Izvor)

Slika 41. Primjeri dobrih i loših kombinacija boje teksta i pozadine

(Izvor)

Slika 42. Primjena uočljivih naslova i podnaslova kojima su označena pojedina poglavlja 
na internetskoj stranici W3C

Zadatak: Pogledajte internetsku stranicu Pravobranitelja osoba s invaliditetom RH i promotrite načine pristupačnosti koje nudi.

6. Pitanja za samoprocjenu i promišljanje

Navedite barem četiri elementa koja trebaju sadržavati pristupačni digitalni sadržaji.

7. Literatura

Akinyemi, A. (2023). WCAG 2.0/2.1 Simplified Checklist (With Examples).

Povjerenik za informiranje Republika Hrvatska (2020) Pristupačnost mrežnih stranica i mobilnih aplikacija. Promotivni materijali.

Sabilano, J. (nepoznata godina). WCAG Levels A, AA & AAA: Navigating Web Accessibility Standards.

What is WCAG Compliance? (nepoznata godina).