Priručnik "Veb pristupačnost" - Daltonizam

Daltonizam

Proces vida

Osjećaj svjetlosti kod ljudi počinje sa fotoreceptorima smještenim u mrežnjači. Postoje dva tipa receptora: čepići, ili konusi i štapići. Vizuelna informacija od mrežnjače prenosi se preko optičkih nervnih vlakana do moždanih polja i naziva se vizuelna kora, gdje se vizuelni proces i razumijevanje završava.

Slika D.1 Normalno viđenje boja

Štapići koji su brojniji od čepića rade pod slabim ambijentalnim svjetlom i izvlače jedino luminentnu informaciju tj. osjetljivi su samo na promjene u sjajnosti u srednjem dijelu spektra svjetlosti. Ako bi čovjek imao samo štapiće, vidio bi crno-bijelo.

Čepići funkcionišu pod sjajnim svjetlom i mogu da opažaju ton boje. Postoje tri vrste čepića koje imaju preklapajuće prelazne opsege u vidljivom spektru:

  • L – čepići su osjetljivi primarno na crveni opseg vidljivog spektra
  • M – čepići su osjetljivi na zeleni opseg
  • S – čepići su osjetljivi na plavi opseg

Dok su crvena, zelena i plava raspoređene prilično ravnomjerno preko vidljivog spektra, određene osjetljivosti L, M i S čepića nisu. Ovo može djelovati malo zbunjujuće pogotovo zato što L-čepići nisu čak ni blizu centrirani u crvenoj oblasti spektra. Na sreću osjetljivost čepića je samo jedan dio načina na koji mozak dekodira informaciju boje. Dodatna procesiranja uzimaju ove osjetljivosti u računicu.

Slika D.2 Tri bijele krive označavaju nivo osjetljivosti za tri tipa čepića. Crna kriva označava osjetljivost štapića.

Problem

Problem sa viđenjem boje nastaje kada svi čepići jednog ili više tipova funkcionišu ispod normalnih nivoa ili ne funkcionišu uopšte. Pošto su geni koji utiču na viđenje boje dio X hromozoma, nemogućnost viđenja boja zahvata muškarce znatno više nego žene. Oko 8 procenata svih muškaraca imaju neki defekt sa viđenjem boja, dok samo 0.5 procenata svih žena ima vid sa poremećenom mogućnosti viđenja boja.

Slijede nazivi određenih formi poremećaja viđenja boja, takođe su dati primjeri točkova boja i paleta za svaki od njih. Oni predočavaju na koji način boju vide ljudi sa poremećajem. Može biti zbunjujuće to što se ne govori direktno o nedostatku „crvene“, „zelene“ i „plave“. Dva faktora su u igri ovdje. Prvi je taj, kao što dijagram iznad ilustruje, da stvarna osjetljivost čepića na boje nije direktno centrirana unutar njihovih određenih oblasti spektra. Drugi faktor uključuje dalje procesiranje u mozgu, koje u stvari  povezuje boju i sliku sa odgovorima štapića/čepića tako da će rezultantne boje koje vidi korisnik sa defektom viđenja boja biti pomjerene u pokušaju kompenzacije.

Protanopija utiče na oko 1% muške populacije.

Pronotopija je nedostatak osjećaja crvene boje. Ona je rezultat gubitka funkcije L-čepića, koji omogućavaju osjećaj crvenog opsega vidljivog spektra. Pošto je crvena boja na kraju vidljivog spektra postoji samo djelimično preklapanje sa dva druga tipa čepića, tako da ljudi sa protanopiom imaju izražen gubitak osjetljivosti na svijetlo na crvenom kraju spektra.

Protanomalija utiče na oko 1 procenat muške populacije.

Protanomalija je slabost osjetljivosti na crvenu boju i nastaje kada L-čepići funkcionišu, ali ne na nivou na kome bi trebalo.

Slika D.3 Točak boja i skala osoba koje boluju od protanopije

Deuteranopija utiče na oko 1.1%  muške populacije.

Deuteranopija je nedostatak osjećaja zelene boje. Ona je rezultat gubitka funkcije M- čepića, koji omogućavaju osjetljivost na crveni opseg vidljivog spektra. Zbog lokacije zelene boje u spektru, stvarni osjećaj se preklapa između M-čepića (zelenih) i L-čepića (crvenih) i zbog djelimičnog prekla-panja sa S-čepićima (plava). Qudi sa deutra-nopijom imaju prilično normalan nivo osjetljivosti duž spektra, ipak oni mogu doživjeti da zamjene individulane boje.

Deuteranomalija utiče na oko 4.9 proce-nata muške populacije.

Deuteranomalija je slabost osjetljivosti na zelenu boju i nastaje kada M-čepići funkcionišu, ali ne na nivou na kome bi trebalo.

Slika D.5 Točak boja i skala osoba koje boluju od tritanopije

Negativan način korištenja boja

Gledajući palete boja u prethodnom poglavlju može se shvatiti zašto ljudi koji boluju od poremećaja prepoznavanja boja neće vidjeti neke od boja koje su odabrane za veb sajt.

Na primjer, ako se korisnik suočava sa slijedećom situacijom:

Slika D.6 Primjer slučaja korištenja boja za prenošenje informacija  na sajtovima

Kliknite na zeleno dugme da nastavite,
žuto dugme ako vam je potrebna pomoć,
ili crveno dugme ako želite da odustanete.

Za osobu sa zdravim vidom izbor bi se činio lakim, ali osoba sa defektom bi mogla vidjeti slijedeće:

Slika D.7-a Primjer kako prethodnu sliku vide osobe koje boluju od protonopije ili Slika D.7-b Primjer kako prethodnu sliku vide osobe koje boluju od deuteranopije ili Slika D.7-v Primjer kako prethodnu sliku vide osobe koje boluu od tritanopije

Ovaj konkretan primjer se rijetko nalazi na veb sajtovima, ali slučajevi ovog tipa se dešavaju, ne samo na veb stranama već i u stvarnom životu.

Јednostavnije je definisati funkciju dugmadi labelama kao što su „Dalje“, „Pomoć“ ili „Izlaz“, čak zauzima i manje mjesta na stranici.

Rješenje problema je izbjegavanje korištenja boja kao jedinih pokazatelja onoga što se može uraditi, ili kao jedini način za prenošenje informacije. Umjesto toga, boje se mogu koristiti samo kao dodatna naznaka korisnicima.

Kontrast i boja

Kao što je poznato svima koji se bave dizajniranjem veb sajtova, jedan od bitnih aspekata izbora boja je jak kontrast između boje pozadine i boje onoga što je u prvom planu. Kontrast omogućava lakše čitanje teksta. Ovo je još bitnije kada se uzmu u obzir korisnici sa poremećajem prepoznavanja boja.

Ako se pogledaju boje na već navedenim točkovima, i onda pogleda na točak sa normalnim bojama, može se primijetiti da će raznolikost boja za korisnike sa smanjenim osjećajem biti znatno manja u odnosu na osobu sa mogućnošću da vidi sve boje. Mnoge od susjednih boja na točku će se činiti praktično identičnim. Primjer kako ovo može uticati na dizajn sajta je opisan u nastavku teksta:

Slika D.8 Primjer nedovoljnog kontrasta boja

Iako ovo nije prigodan izbor boja, takav ili sličan može se vidjeti na dosta sajtova. Iako se ovaj izbor boja može učiniti suviše drečavim korisniku sa normalnom mogućnošću uočavanja boja, on će ipak moći da pročita poruku koja je prikazana, ali šta je sa osobom koja boluje od defekta osjetljivosti na boje?

Postoji mišljenje da je dovoljan način provjere da li će izbor boja dobro funkcionisati za korisnike sa defektom osjetljivost na boje redukovanje u paletu sa sivim tonovima, tj. nijansama sive. To nije tačno. Na slijedećem primjeru će biti pokazano kako će slika izgledati redukovanjem pomoću palete grej skale:

Slika D.9 Prikaz u skali tonova sive boje

Naprijed izneseno navodi na zaključak da se ova šema boja može smatrati sigurnom za korisnike sa defektom. Ali, da li je to zaista tako? Na slijedećim primjerima će biti primijenjena paleta koja preciznije aproksimira šta korisnici sa defektom mogu vidjeti:

Protanopija:

Slika D.10 Prikaz načina na koji vide osobe koje boluju  od protanopije

Deuteranopija:

Slika D.11 Prikaz načina na koji vide osobe koje boluju od  deuteranopije

Tritanopija:

Slika D.12 Prikaz načina na koji vide osobe koje boluju  od tritanopije

Čini se da osobe sa tritanopijom u ovom slučaju imaju sreće jer boje koje one vide su malo ugodnije za gledanje nego one za osobe sa normalnim vidom. Ali zato se može vidjeti da slika koja je izgledala zadovoljavajuće sa paletom sivih tonova očigledno nije sigurna kombinacija za mnoge korisnike sa defektom osjetljivosti na boje.

Dizajneri koji praktikuju pravilne izbore boja nikada ne bi odabrali ovu konkretnu šemu boja. Umjesto toga, oni bi izabrali boje sa većim kontrastom da učine informaciju ugodnijom oku. Ako bismo, iz nekog razloga, morali upotrijebiti ovu zeleno-žutu kombinaciju, šta bi dizajner mogao da uradi? Čineći jednu boju tamnijom, a drugu svjetlijom povećaće kontrast. Na slijedećem primjeru je prikazana slika sa istim tonovima boja, dok su svjetlina i zasićenje izmijenjeni da bi se obezbijedio bolji kontrast:

Normalna:

Slika D.13 Primjer primjene dovoljnog kontrasta

Protanopija:

Slika D.14 Primjer kako osobe koje boluju od protanopije vide  sliku sa dovoljnim kontrastom

Deuteranopija:

Slika D.15 Primjer kako osobe koje boluju od deuteranopije vide  sliku sa dovoljnim kontrastom

Tritanopija:

Slika D.16 Primjer kako osobe koje boluju od tritanopije vide  sliku sa dovoljnim kontrastom

Ova konkretna selekcija boja još uvijek nije dobra kombinacija, ali je mnogo bolja od originalne. Čak i sa ovom malom izmjenom uspješno je postignuto da se održi osnovna namjena originalne selekcije boja i da se proizvede tekst koji korisnici sa defektom mogu čitati.

Formula sjajnosti boja

Da bi se ispoštovale WCAG smjernice, boje pozadine i boje elemenata koji su  u prvom planu treba da omoguće dovoljan kontrast kada ih gleda neka slabovida osoba ili osoba sa defektom osjetljivosti na boje, ili kada se gledaju na crno-bijelom ekranu.

Formula koju predlaže W3C da bi se odredila sjajnost boje je:

((Crvena vrijednost X 299) + (Zelena vrijednost X 587) + (Plava vrijednost X 114)) / 1000

Dvije boje pružaju dobru vidljivost boja ako je razlika između sjajnosti veća od 125 i razlika u boji veća od 500.

Alat za provjeru kontrasta boja

Alat koji bi pomogao dizajneru da izgradi pristupačan veb sajt, treba da posjeduje mogućnost testiranja kontrasta i sjajnosti boja između pozadine i onoga što je u prvom planu svih elemenata u DOM-u.  Na taj način se  osigurava dovoljno velik kontrast za osobe sa oštećenjem vida.

Alati tog tipa mogu se naći ponuđeni na sajtu WCAG. Јedan od takvih alata je i AccessColor - onlajn alat za provjeru kontrasta. Ovaj alat će automatski pronaći relevantne kombinacije boja unutar HTML i CSS dokumenata umjesto da se te boje traže ručno uz testiranje kontrasta za svaku kombinaciju boja. AccessColor koristi algoritam koji predlaže AERT. On analizira i eksterne i interne CSS i onda proračunava kontrast boja između pozadine i teksta u prvom planu za svaki element u DOM-u.

AccessColor provjerava samo kontrast između teksta i pozadine. Ovaj alat je namijenjen za veb sajtove gdje većina teksta nije pisana na pozadinskim slikama ili sa flash-om. Pored ovog postoji još alata tako da je  moguće izabrati onaj koji odgovara za konkretne namjene. Neki od njih su

  • Colour Contrast Check – omogućava osnovno testiranje šema boja i nivoa kontrasta
  • Color Sheme Designer – omogućava da se paleta boja provjeri u skladu sa nekoliko nivoa defekta kolornog vida
  • Color Oracle – ovaj simulator defekta kolorog vida radi na više operativnih sistema i funkcioniše tako što na ekran primjenjuje filtere
  • Contrast-a – ovaj Flash alat provjerava određenu kombinaciju boja pozadine i teksta na osnovu smjernica W3C
  • GrayBit – konvertuej čitavu stranu u grayscale verziju
  • Check My Colours – funkcioniše slično kao i AccessColor.

Kooperativni izbor boja

Iako, postoje utvrđene formule i programi koji će automatski testirati i ponuditi kontraste boja koji bi zadovoljili uslov vidljivosti za sve korisnike, prilično teško je naći kombinaciju koja je optimalna za svaku vrstu korisnika. Dodajući ovoj konfuziji različite stepene defekta viđenja boja za različite korisnike to još više komplikuje problem. Treba uzeti u obzir potencijalnu mogućnost nepravilno podešenih monitora, što će rezultovati lošim kontra-stom čak i za korisnike sa normalnim vidom. Svi ovi faktori zajedno čine izbor odgovarajuće kombinacije boja važnim i teškim.

Јedno od rješenja je da se nakon izbora boja za veb sajt ostavi mogućnost korisnicima da odaberu šemu boja koja će biti korištena na sajtu. Ovo je moguće postići koristeći tehnologiju CSS-a koja već podržava pojam „korisničkog CSS-a“ što znači da je korisnicima dopušteno da zadaju sopstvene CSS-ove koji će prepisati one koje je originalno postavio veb dizajner. Da bi se podržala ova mogućnost, bitno je da se izbjegava pisanje pravila sa ključnom rječju important jer takva pravila korisnik kasnije ne može prepisati u svojoj CSS datoteci. Takođe da bi se korisnicima olakšalo pisanje sopstvenih CSS-ova, potrebno je body zadati id da bi korisnik lakše mogao da mu pristupi. Ipak kreiranje takvog dokumenta je prekomplikovano za prosječnog korisnika. Ono što ovdje može da se uradi je da se na samom veb sajtu korisniku ponudi mogućnost izbora jedne od nekoliko ponuđenih kombinacija boja. Na taj način će korisnik primijeniti onu koja mu najviše odgovara. Slijedi primjer mehanizma kojim je to realizovano na sajtu e-Biblioteke Specijalne biblioteke za slijepa i slabovida lica Republike Srpske:

Ako se nekoliko šema boja pripremi u nekoliko CSS datoteka, na primjer da su to „Sema1.css“, „Sema2.css“,  „Sema3.css“, i u svakoj od ovih datoteka definišu se CSS pravila koja će konkretnim elementima dodijeliti boje jedne od šema. te fajlove možemo dinamički primjenjivati kad korisnik na stranici odabere jednu od ponuđenih opcija.  Primijenjena CSS datoteka se može dinamički zamijeniti bez ponovnog učitavanja stranice koristeći JavaScript

<a title="Primjenite prvu šemu boja" onclick="javascript: zamijeni_css('prvaSema')" href="javascript:void(0)">
    Prva šema boja
</a>

<a title="Primjenite drugu šemu boja" onclick="javascript: zamijeni_css('drugaSema')" href="javascript:void(0)">
    Druga šema boja
</a>

<a title="Primjenite treću šemu boja" onclick="javascript: zamijeni_css('trecaSema')" href="javascript:void(0)">
    Treća šema boja
</a>

Kada korisnik izabere neki od ovih linkova, pozvaće se JavaScript funkcija koja će dinamički primijeniti CSS sa odabranom šemom boja.

function zamijeni_css($ime_datoteke )

{
    $('.css_boje').attr('href', $ime_datoteke + '.css');
    $.cookie('css_boje',$ime_datoteke,{ path: '/', expires: 30});
}

Takođe je potrebno određenoj relaciji za CSS u zaglavlju HTML fajla dodijeliti klasu pomoću koje će joj JavaScript funkcija moći pristupiti

<head>
    ...
    <link class="css_boje" type="text/css" href="/Sema1.css"   rel="stylesheet" />
    ...
</head>

Funkcija podatak o izabranoj šemi smješta se u kolačiće (cookies). Taj podatak će se moći iskoristiti pri učitavanju slijedeće stranice da bi se primijenila izabrana šema. Realizacija čitanja podatka iz kolačića i postavljanja i primjenjivanja odgovarajuće CSS datoteke se obavlja na serverskoj strani i realizacija zavisi od programskog jezika koji se koristi na serverskoj strani.

Јednostavniji način da se ispoštuju potrebe korisnika je da se djelimično za boje sajta izaberu boje izabrane za Windows operativni sistem za različite interfejs komponente. Koristeći kontrolnu tablu za podešavanje prikaza korisnik je vjerovatno već podesio operativni sistem prema svojim potrebama, tako da bi korištenje ponuđenih boja trebalo da bude zadovoljavajuće. Negativna strana ove metode je u tome što je ona zavisna od veb čitača jer trenutno jedino Internet Explorer podržava ovu mogućnost.

Način korišćenja sistemskih boja je da se umjesto konkretnih vrijednosti boja koriste ključne riječi. Na primjer za boju:

<font color="#FFCC9">

bi se koristilo:

<font color="windowtext">

što bi postavilo boju fonta na istu onu koju je korisnik izabrao za boju teksta u Windows operativnom sistemu.