Primjeri digitalne pristupačnosti

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.