Developeri i dizajneri mogu zajedničkim snagama omogućiti korisnicima sa različitim sposobnostima korištenje web stranice uz upotrebu CSS-a za kontrolu vizualnih elemenata. Evo još nekoliko načina na koje se kreiraju pristupačne web stranice.
Kada govorimo o digitalno pristupačnosti iz perspektive marketinga, govorimo o namjernom stvaranju digitalnog iskustva koje je pristupačno što većem broju osoba.
Dizajniranje za digitalnu pristupačnost znači mnogo stvari. To znači dizajniranje za pojedince sa senzornim ili kognitivnim poteškoćama. To znači dizajniranje za osobe sa fizičkim ograničenjima. To znači dizajniranje za pojedince koji ovise o pomoćnim dodacima kao što su čitati ekrana ili povećala pomoću kojih konzumiraju digitalni sadržaj.
Ključ ovakvog dizajna leži u tome da se pristupačnost ugradi u digitalno iskustvo od početka, umjesto da se naknadno “prišarafi” kao dodatak. U nastavku smo izlistali neke ključne principe pristupačnosti o kojima vrijedi razmišljati prilikom kreiranja digitalnih marketinških materijala.
Zakon o pristupačnosti web stranica za osobe s invaliditetom
8.2.2019. u Hrvatskoj je donesen zakon o potrebi za prilagodbama web stranica javnih institucija, kako bi se osobe s invaliditetom lakše koristile njihovim online sadržajem. S obzirom da je to EU standard, u budućnosti se očekuje da se ove zakonske uredbe odnose i na web stranice drugih organizacija i poslovnih subjekata. Zahtjevi u pogledu pristupačnosti mrežnih stranica i programskih rješenja za pokretne uređaje (Članak 6. zakona) su opisani u nastavku. Tijelo javnog sektora dužno je poduzeti potrebne mjere kako bi svoje mrežne stranice i programska rješenja za pokretne uređaje učinilo pristupačnijima, što uključuje:
- mogućnost opažanja, što znači da sadržaj i sastavni dijelovi korisničkog sučelja moraju biti predstavljeni korisnicima na način da im omogućavaju opažanje,
- operabilnost, što znači da se sastavnim dijelovima korisničkog sučelja i navigacije mora moći upravljati
- razumljivost, što znači da informacije i način rada korisničkog sučelja moraju biti razumljivi i
- stabilnost, što znači da sadržaji moraju biti dovoljno stabilni da ih mogu pouzdano tumačiti različiti korisnički programi, uključujući pomoćne tehnologije kojima se služe osobe s invaliditetom, kako bi korisnici uvijek imali pristup sadržaju.
Carnetove smjernice za pristupačnost web stranica osobama s invaliditetom:
- struktura stranice je označena na način da slijepe i slabovidne osobe znaju kad prelaze iz jedne rubrike, poglavlja ili neke druge kategorije sadržaja u drugu,
- kao glavni elementi stranica koriste se strukturalni elementi iz HTML5 standarda (header, footer, nav, section, article, aside) zajedno sa drugim div elementima, kako bi čitači ekrana prepoznali značenje pojedinog elementa,
- svaka stranica ima postavljen naslov title unutar HTML elementa (koji se nalazi unutar head elementa),
- za naslove se koriste h1, h2, h3, h4, h5 i h6 elementi, a za odlomke teksta p elementi,
- za naglašavanje manjih dijelova teksta koriste se strong i em elementi (umjesto b i i elemenata),
- tablice (table element) koriste se isključivo za prikaz tabličnih podataka, a ne za postizanje vizualnog rasporeda elemenata na stranici,
- tablice sadrže naslov tablice u elementu caption, a naslovi stupaca definirani su pomoću elementa th.,
- za tekst se koriste jednostavni, čitljivi fontovi bez serifa, sav tekst je poravnat lijevo,
- 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 web stranicama u odnosu na pozadinu stranica je dobar (jak) i postoji opcija promjene kontrasta (tzv. dark mode),
- 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 mogu pokrenuti, zaustaviti i ponovno pokrenuti,
- audio i video zapisi imaju prikladan tekstualni naziv na hrvatskom jeziku,
- audio i video zapisi imaju tekstualni opis na hrvatskom jeziku koji sadržava najvažnije informacije o onome što audio ili video zapis prikazuje,
- veličina ikona na web stranicama, zajedno s prostorom oko njih, koje se aktiviraju klikom miša ili nekog drugog pokazivača, mora biti minimalno 44 x 44 dp, 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,
- nema ograničenog vremena za unos podataka, ako to nije neophodno,
- kod tabličnih prikaza koji sadrže veću količinu podataka, pridruženo im je sažeto objašnjenje na hrvatskom jeziku,
- svi elementi koji nisu stalno prikazani otvaraju se i zatvaraju dodirom (klikom) miša (ne prelaskom pokazivača preko gumba),
- navigacijski izbornici imaju vidljivu samo prvu razinu navigacije, dok su podrazine izbornika inicijalno skrivene ili smanjene,
- padajući izbornici i/ili podizbornici nemaju veliki broj podrazina navigacije niti veliki broj poveznica u jednoj razini,
- slike i složene slike (npr. grafovi i dijagrami) imaju prikladan tekstualni naziv (alt atribut) i opis na hrvatskom jeziku,
- udio i video zapisi postavljeni na web stranicu imaju prikladan tekstualni naziv i opis na hrvatskom jeziku,
- dinamički sadržaj (npr. slider), izuzev audio i video zapisa, može se zaustaviti, odnosno proizvoljno pokrenuti,
- izbjegava se potreba istovremenog korištenja dviju ili više tipki tipkovnice za određenu naredbu,
- tekstualni dio je podijeljen u manje blokove odijeljene praznim prostorom.
Principi za programere
Korištenje standardne HTML semantike
Pristupačni dizajn počinje sa standardnom HTML semantikom. Standardni HTML omogućava čitačima ekrana da najave elemente na stranici kako bi korisnik znao kako konzumirati sadržaj. Kada se koriste HTML oznake bez semantičkih informacija, poput <div> ili <span>, internet preglednik će te elemente prikazati upravo kako je programer zamislio, a što nije od velike pomoći korisniku.
Imajte na umu da se korisničko iskustvo sa čitačem ekrana bitno razlikuje od onog bez čitača. Naprimjer, upotreba elemenata poput <div class=”h1”>Uvod u semantiku</div> ili prilagođenog kodiranja kako bi se nadjačali standardni stilovi internet preglednika mogu proizvesti nešto što sliči zaglavlju. Međutim, čitač ekrana to neće razumjeti, te neće taj element najaviti kao zaglavlje.
Za zapamtiti:
- Koristite standardni HTML kad god je to moguće kako bi čitači ekrana mogli uspostaviti strukturu sadržaja tijekom čitanja.
- Koristite elemente strukture kako bi grupirali elemente i kreirali različite regije na stranici, npr. elemente zaglavlja (header), izbornika (navigation), glavne elemente (main) i elemente podnožja (footer). Čitači ekrana prepoznaju te elemente strukture i najavljuju ih korisniku, te čak omogućavaju dodatnu navigaciju između tih elemenata.
Omogućite navigaciju pomoću tipkovnice
Sve web stranice trebali bi biti pristupačne uz upotrebu tipkovnice, prije svega zbog toga što određeni dio korisnika nije u mogućnosti koristiti miša, ili gledati u ekran. Štoviše, prema portalu WebAIM, u istraživanju koje obuhvaća osobe s oštećenjima vida (članak na linku https://webaim.org/blog/low-vision-survey2-results/), 60.4% anketiranih osoba izjavilo je da uvijek ili često koriste tipkovnicu u svrhe kretanja po web stranici. Također, osobe s privremenim ili trajnim gubitkom upotreba ruku ili oštećenja mišića za kontrolu ruku također mogu koristiti tipkovnicu ili prilagođene tipkovnice za kretanje po web stranici.
U svakom slučaju, važno je razmisliti o navikama korisnika, te uzeti u obzir sve radnje koje korisnik može ili želi izvršiti na web stranici. Ako na web stranici postoji element s kojim korisnik može izvršiti interakciju upotrebom miša, onda osigurajte da je interakcija moguća i tipkovnicom.
Za zapamtiti:
- Omogućite korisnicima upotrebu svih interaktivnih elemenata web stranice pomoću tipkovnice.
- Strukturirajte kod web stranice tako da su ispravno poredani i strukturirani sadržaji i izbornici. Koristite CSS za vizualnu stilizaciju elemenata.
Koristite atribute
Kod povezivanja teksta i opisa u linkovima, čitači ekrana mogu preskakati od linka do linka unutra članka. Kod upotrebe nejasnih tekstova linka poput “Kliknite ovdje” ili “Saznajte više”, osobe koje koriste čitače nisu u mogućnosti razumjeti kontekst niti značenje linka.
Budite deskriptivni kod kreiranja teksta linka i koristite smislene fraze koje opisuju sadržaj na koji link vodi. mjesto “Kontaktirajte nas”, napišite “Kontaktirajte naš prodajni tim”. Kod fotografija i videa, koristite ALT oznake i deskriptivne nazive datoteka.
Za zapamtiti:
- Izbacite suvišne i beznačajne opise poput “Kliknite ovdje”, “Ovdje” ili “Saznajte više”. Link naziva “Kontaktirajte naš prodajni tim” ima puno više smisla nego “Kliknite ovdje kako biste kontaktirali naš prodajni tim”.
- Uredite nazive datoteka i linkova i koristite titlove za video sadržaj. Razmislite i o upotrebi transkripcije kod video materijala.
Koristite ARIA oznake
U nekim slučajevima, tipke ili drugi interaktivni elementi na vašoj web stranici ne sadrže sve informacije potrebne čitačima ekrana. ARIA oznaka omogućava čitačima da preskoče HTML oznake i pružaju vlasnicima web stranica mogućnost za dodavanje konteksta bilo kojem elementu na web stranici.
U sljedećem linku, čitač ekrana će pročitati: “Jabuke. Link.”
<a href=”…”>Jabuke</a>
No, ako je naš link zapravo tipka koja poziva na akciju, ARIA oznaka omogućava čitaču da izgovori dodatni tekst koji nije prisutan u samom tekstu linka. U sljedećem slučaju, čitač će pročitati: “Kupite naše organske jabuke online. Link.”.
<a href=”…” aria-label=”Kupite naše organske jabuke”>Jabuke</a>
Za zapamtiti:
- Koristite ARIA oznake unutar elemenata kao što su formulari, linkovi, tipke i ostali interaktivni elementi kod kojih želite pružiti dodatni kontekst ili omogućiti čitaču da izgovori tekst koji poziva na akciju.
Ispravno označavajte i formatirajte formulare
Svakako se pobrinite da su vaši formulari intuitivno i logično strukturirani, sa jasno objašnjenim uputama i oznakama.
Iz perspektive formatiranja, koristite obrube za tekstualna polja i padajuće izbornike, te postavite formular u jedan stupac. Koristite HTML input vrste (input types), kako korisnici ne bi morali mijenjati više vrsta virtualnih tipkovnica. Npr. polje za unos telefonskog broja trebalo bi pokrenuti numeričku tipkovnicu, a ne tekstualnu.
Za zapamtiti:
- Oprezno sa upotrebom JavaScript-a u formularima, jer to može dovesti do poteškoća u slanju formulara korištenjem tipkovnice.
Koristite tablice za podatke
Namjena HTML tablica jest prikaz tabularnih podataka. Iz tog razloga, bolje je ostaviti CSS za oblik i formu web stranice, a tablice za podatke. Ako koristite tablice, koristite tzv. mark-up za podatkovne tablice i uvijek koristite zaglavlje (header) u tablicama. Uvijek prije odaberite CSS umjesto tablica za kreiranje okvira web stranice.
Principi za kreatore sadržaja i grafičke dizajnere
Kreirajte strukturirani sadržaj
Struktura sadržaja posebno je važna osobama s oštećenjima vida koje se služe čitačima ekrana. No, struktura je važna i osobama sa kognitivnim oštećenjima, ali i svima onima koji skeniraju vaš sadržaj na mobilnim uređajima. Kada kreirate sadržaj sa svrhom upotrebljivosti, sjetite se vaše profesorice / profesora hrvatskog jezika, te organizirajte sadržaj sa jasno označenim i deskriptivnim naslovima za svako poglavlje.
Za zapamtiti:
- Pobrinite se da je vaš sadržaj jednostavno čitati, te da je logički posložen. Koristite semantičke oznake za naslove i podnaslove, liste, odlomke i citate.
Poravnavajte tekst na lijevo
Portal UX Movement (više o članku na linku http://uxmovement.com/content/why-you-should-never-center-align-paragraph-text/) javlja da poravnavanje teksta utječe na čitljivost. Centrirani tekst otežava čitanje zbog nedostatka ravnog lijevog ruba, drugim riječima, ne postoji konzistentna putanja za oko koje nastavlja u sljedeći redak teksta. Lijevo centrirani tekst također olakšava skeniranje teksta i pronalazak predaha (bijelog prostora koji odvaja odlomke i podnaslove) u tekstu.
Za zapamtiti:
- Centrirati je preporučljivo samo naslove i kratke retke teksta, poput citata. Izbjegavajte korištenje različito poravnatog teksta.
Oprezno birajte fontove
Svi volimo atraktivan font na webu. No, činjenica je da postoje fontovi koje je lakše, i teže čitati. Zato je važno koristiti jednostavniji font. Sans-serif font je lakše čitljiv, pogotovo za osobe sa oštećenjima vida i kognitivnim oštećenjima. Sans-serif je čak lakše čitljiv i kod privremenih vizualnih poteškoća, poput čitanja na ekranu pod jakim danjim svjetlom.
Veličina fonta je također važna. Izbjegavajte upotrebu više vrsta fonta na web stranici. Također, izbjegavajte trepćući ili pokretiljvi tekst.
Za zapamtiti:
- Odaberite jednostavniji font sa sans-serif završecima, kod kojih oči lakše raspoznaju slova.
- Ograničite upotrebu vrsti fontova i različitih veličina.
Koristite boje
Upotreba boje utječe na pristupačnost. Prema istraživanju portala WebAIM (više o istraživanju na linku https://webaim.org/blog/low-vision-survey2-results/), 75% ispitanika prijavilo je više vrsta vizualnih poteškoća, 61% prijavilo je probleme sa svjetlošću i odsjajem, a 46% osjetljivost na kontrast.
Uzmite u obzir kontrast na vašoj web stranici, te se pobrinite da je tekst jasno vidljiv te u dovoljnom kontrastu u odnosu na pozadinu. Web Content Accessibility Guidelines (WCAG) (smjernice glavnog autoriteta na području web upotrebljivosti, konzorcija W3C) kaže da kontrast normalnog teksta treba biti 4.5:1. Kako bi bolje razumjeli ovu brojku, recimo da crni tekst na bijeloj pozadini ima kontrast 21:1, dok sivi tekst na crnoj pozadini ima kontrast 4.5:1.
Korištenje boje za prenošenje poruka nije nužno vidljivo osobama s vizualnim poteškoćama. Na primjer, web stranice često koriste zelenu boju za pozitivne poruke (uspješno poslana poruka, itd.), te crvenu boju za negativne (dogodila se greška, i sl.), što može biti problematično osobama s vizualnim oštećenjima. Umjesto toga, razmislite o kombiniranju oblika ili ikona i boja.
Za zapamtiti:
- Pobrinite se da upotreba boja na vašem webu stvara dovoljno velik kontrast, te kombinirajte boje sa grafikama za prenošenje značenja poruka.
