10 principa pristupačnosti web stranica

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 invaliditom 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 sljedeći:
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.

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.

Izvori: rdd.gov.hr, searchengineland.com

Želite imati web stranicu pristupačnu svoj populaciji, uključujući i osobe s inivaliditetom?

Javite nam se i saznajte što vam točno možemo ponuditi. Možete nam se obratiti putem e-mail adrese info@webizrada.org ili broja telefona +385 91 455 1066 – naš tim vam stoji na raspolaganju.