Share
În cazul în care 4,5% din populația globală se confruntă cu orbire cu culoare, 4% suferă de vederea scăzută, iar alte 0,6% sunt orbi, iar dificultățile vizuale cu utilizarea webului sunt mai frecvente decât ați putea aprecia. Acest ghid va arăta modul în care proiectarea pentru persoanele cu deficiențe de vedere poate îmbunătăți web-ul pentru toată lumea.
Web-ul de astăzi trebuie să fie accesibil pentru toată lumea - indiferent de abilitățile sau deficiențele unei persoane.
"Accesibilitatea asigură că persoanele cu dizabilități pot avea acces la aceleași informații dintr-un sistem ca oricine altcineva și pot obține aceleași beneficii"
După cum sa subliniat într-un articol anterior, există o gamă largă de deficiențe, din cinci zone notabile:
Acest ghid se va concentra pe proiectarea pentru deficiențe de vedere, care pot fi destul de frecvente, variind de la dizabilități ușoare până la extreme. De fapt, Cathy O'Conner (designer și autor pentru Smashing Magazine) estimează că pentru fiecare două milioane de clienți online, aproximativ 200.000 ar beneficia de modele mai ușor de văzut.
Aceasta este o estimare corectă, în special având în vedere modul în care oricine poate dezvolta tulburări de vedere scăzut pe măsură ce îmbătrânesc. Deficiențele vizuale frecvente pot include:
Blinderea culorii implică dificultăți în perceperea sau distingerea culorilor, precum și sensibilitatea la luminozitatea culorii. Aceasta afectează aproximativ 4,5% din întreaga populație globală.
Vizibilitatea redusă poate include vederea parțială în unul sau ambii ochi, acuitatea slabă (vederea neclară), vizibilitatea tunelului, pierderea centrală a câmpului și vederea vizibilă. Aceasta afectează 246 de milioane de oameni, sau aproximativ 4% din populația lumii.
Orbirea este pierderea substanțială a vederii atât în ochii unei persoane. Aceasta afectează aproximativ 39 de milioane de oameni, sau 0,6% din oameni.
Diversitatea acestor dezavantaje poate crea o variație largă în ceea ce privește modul în care paginile web sunt percepute de către persoane cu abilități vizuale diferite. Așa cum am subliniat mai sus, un număr mare de persoane suferă de deficiențe vizuale, așa că trebuie să ne asigurăm că pot accesa și interpreta toate caracteristicile la fel.
De exemplu, luați în considerare pagina de pornire a Tumblr, unde fundalul paginii este setat la o imagine mare (creată de utilizatori):
Pagina de pornire TumblrÎn funcție de tipul și nivelul de afectare vizuală pe care o persoană le poate avea, site-ul poate fi perceput în mai multe moduri (aici simulat cu extensia NoCoffee Chrome):
1. Viziune blocată periferic (de exemplu, glaucom)
2. Pete mari ale vederii blocate (retinopatie diabetică)
3. Pierderea acuității (vedere încețoșată)
4. Probleme de ghosting
5. Orbirea prin culoare tritanopicăExemplele de mai sus prezintă diferite tipuri de deficiențe de vedere scăzut și, de asemenea, câteva exemple de orbire colorată. A sumariza:
Datorită acestor variații de percepție, elementele-cheie ale unui anumit site web pot deveni mai puțin accesibile (și, prin urmare, mai puțin utilizabile), în funcție de amploarea deficienței vizuale a unui utilizator.
De exemplu, o pierdere de acuitate (viziune neclare) poate face ca bara de căutare de pe site-ul Tumblr aproape să dispară în fundal. Același lucru se poate spune și pentru butonul de conectare:
Comparați bara de căutare din imaginea din stânga cu cea din dreapta-dreapta, bara de căutare a fost amestecată în fundal și este abia vizibilă.
Trecând de la exemplul Tumblr, luați în considerare o persoană cu orbire de culoare roșie / verde (protanopia). Pe o pagină cu rezultatele căutării Google, culoarea utilizată pentru a reprezenta pagina curentă de rezultate apare mai puțin semnificativ pentru un utilizator de tip orb color, posibil făcându-l puțin mai semnificativ:
Exemplul Google ProtonopiaContrastul de la roșu și galben este mai puțin evident pentru un utilizator blind-color, și apare mai mult ca o culoare verde deschisă contra unui verde închis.
Ambele exemple de mai sus arată cum variațiile de percepție pot afecta utilitatea caracteristicilor de bază. Din fericire însă, persoanele cu astfel de deficiențe vizuale pot modifica prezentarea conținutului astfel încât elementele să devină mai accesibile și mai ușor de utilizat. Acest lucru se poate face prin:
Astfel de ajustări pot fi făcute prin setările implicite într-un browser web. În plus, s-au făcut modificări mai avansate prin extensiile de accesibilitate ale browserului. De exemplu, Google a construit diverse pluginuri de accesibilitate pentru utilizatorii cu deficiențe de vedere:
Contrastul ridicat, de exemplu, permite oamenilor să diferențieze contrastul unui site web, făcând astfel textul mai clar pentru citire. Aici este în acțiune pe pagina de pornire Spotify:
Exemplu de plugin de browser de accesibilitate utilizat pentru a modifica contrastul unei pagini webDupă cum se vede mai sus, extensia browserului poate:
Cu toate tulburările vizuale diferite, și o gamă largă de instrumente care pot fi folosite pentru a modifica modul în care apare conținutul, devine clar că nu putem determina întotdeauna modul în care vor fi afișate paginile web sau percepută de oameni.
Deoarece conținutul poate apărea în mai multe moduri, trebuie să fim atenți la modul în care este structurat conținutul nostru, chiar la nivelul codării. Asta pentru că devine important să menținem o ierarhie clară a informațiilor, deoarece oamenii pot folosi diferite mijloace pentru a prezenta aceste informații. Să aruncăm o privire asupra unor bune practici pentru a ne asigura că conținutul nostru este întotdeauna accesibil, indiferent de modul în care este afișat:
Iată o listă de cele șase cele mai bune practici pentru a vă îmbunătăți designul pentru cei cu deficiențe de vedere.
Este important să asigurăm că conținutul web este independent de structura sa de bază. Atunci când modificările prezentării pot include dimensiunea elementelor (cum ar fi textul și imaginile), distanța dintre elemente sau dacă elementele pot fi văzute deloc (utilizatorii orbici nu văd imaginile), devine clar că dezvoltatorul nu poate determina modul în care conținutul va fi vizualizat la un moment dat.
Așa cum afirmă W3C, pentru a permite funcționarea diferitelor metode de navigare (de exemplu, prin utilizarea cititoarelor de ecran sau a navigării cu tastatură), dezvoltatorii trebuie să se asigure că codul lor oferă o structură independentă de prezentare:
"Dezvoltatorii trebuie să se asigure că prezentarea conținutului web este independentă de structura sa de bază" - W3C
O structură solidă va furniza, de asemenea, etichete semantice relevante, cum ar fi anteturile, paragrafele și etichetele elementului de listă, pentru a se asigura că, de exemplu, un cititor de ecran poate interpreta informațiile și le poate prezenta într-un mod alternativ:
Exemplu de aspect al site-ului utilizând etichete semantice corecteDupă cum sa explicat anterior, anumite elemente structurale, în special imaginile, nu pot fi percepute de unii utilizatori. De exemplu, persoanele nevăzători care folosesc tehnologii de asistență (cum ar fi cititorii de ecran) pentru a interpreta site-urile vor auzi text alternativ atribuită imaginii citite, mai degrabă decât de fapt vedere imaginea. Dacă acest text nu este prezent sau nu este suficient de descriptiv, acesta nu va putea să perceapă informațiile așa cum au fost intenționate.
Iată un exemplu de la Universitatea din Leicester, care prezintă un text alternativ precis, care oferă mai mult context utilizatorului:
Exemplu de utilizare a textului alternativ precis pe o imagineAbility.net oferă cinci reguli de aur pentru utilizare Alt tag-uri (alternative de text) în mod corect pentru a face un site mai accesibil:
Accentsconagua
![]()
alt = "" atributCuloarea nu este cea mai bună metodă de a transmite informații, așa cum se arată în exemplul următor. Mai jos, o margine roșie este utilizată pentru a evidenția câmpurile de formular care nu au fost completate corect. În consecință, dacă un utilizator este orbitor, acesta nu va putea să vadă această indicație, astfel încât devine dificil să înțelegeți care dintre ele au erori:
Utilizarea icoanelor și etichetelor pentru a arăta care sunt câmpurile nevalide le comunică mai bine informațiilor unui utilizator orb color:
Exemplu de la Bootstrap v4Acest exemplu arată că culoarea nu ar trebui utilizată singură pentru a transmite informații, ci numai pe lângă informațiile existente.
Utilizatorii de culoare orb pot avea, de asemenea, dificultăți de a spune diferența dintre anumite culori. De exemplu, verde, roșu și maro pot arăta foarte asemănătoare:
Cum utilizatorii de culoare orb percep verde maro și roșu Prin urmare, atunci când culorile sunt utilizate pe diagrame și grafice, poate fi util să se aplice suprapuneri tipizate culorilor solide pentru a oferi utilizatorilor o modalitate mai clară de a face distincția între elemente. Acest lucru nu numai că ajută pe cei care sunt colorați orbi, dar, de asemenea, îi ușurează pe toți. Luați în considerare etichetele lui Trello pentru un exemplu de aplicare a texturilor:
În partea dreaptă, etichetele culori orbi colorate de la TrelloSchemele de culori monocromatice utilizează numai culorile unei singure nuanțe. Iată un exemplu, creat cu paletton.com:
Monocromatică paletă creată cu paletton.comFolosind doar nuanțe de o singură nuanță, orice înțeles suplimentar care ar fi putut fi introdus de nuanțe de culori diferite este eliminat.
Variațiile de contrast și tonuri pot fi folosite pentru a furniza sens sau importanță elementelor și pentru a atrage atenția utilizatorilor asupra diferitelor zone. Semnificația de aici poate fi, de asemenea, transmisă mai ușor utilizatorilor de culoare orb, așa cum se arată în exemplul următor al unui site monocromatic.
BIGSOUND Buzz este un site web care folosește o schemă de culori monocromatică:
Monocrom pe BIGSOUND Buzz
Texturi peste totUn utilizator orb color va vedea toate aceleași tonuri și contraste, dar într-o nuanță diferită:
BIGSOUND Buzz pentru culoarea orbContrastul este diferența dintre culoarea cea mai ușoară (de ex. Fundalul) și cea mai întunecată culoare (de ex. Textul). De exemplu, luați în considerare această diagramă de sensibilitate la contrast:
Stânga sus (litera A) are cel mai mare contrast și, pe măsură ce mergem spre dreapta, contrastul scade, deoarece diferența de luminanță dintre fundal și prim-planuri se reduce. În cele din urmă, în funcție de sensibilitatea de contrast a unei persoane, ei nu vor putea distinge textul de fundal.
Prin urmare, pentru a asigura că textul poate fi citit de către persoanele cu deficiențe de vedere, WCAG a oferit o orientare privind raportul de contrast. Acestea sugerează că trebuie să existe un raport de contrast de cel puțin 4,5: 1 între un text și fundalul acestuia. Acest raport scade la 3: 1 pentru textul mai mare (cu caractere aldine 24px sau 29px).
Un exemplu al acestui raport este prezentat în exemplele de mai jos, de la accessebility.psu.edu:
Per ansamblu, proiectând inclusiv cele mai multe dintre cele mai extreme handicapuri, aproape întotdeauna îmbunătățește produsul final pentru oricine altcineva.
De exemplu, proiectarea pentru persoanele cu nici o viziune poate pune o temelie mare pentru cei care poate sa vedea. Acest lucru se datorează faptului că ne pune în poziția de a ne asigura că structura site-ului este independentă de prezentarea sa și că poate fi interpretată prin tehnologii de asistență de asemenea ca oameni. Prin urmare, dacă s-ar întâmpla schimbări de prezentare din orice alt motiv, structura site-ului va fi în continuare accesibilă.
În plus, garantarea faptului că culoarea este utilizată doar pentru a evidenția ceea ce este deja vizibil reprezintă un alt pas important spre construirea unui site web foarte accesibil și, prin urmare, ușor de utilizat. Un proces util de proiectare poate fi, prin urmare, acela de a proiecta iterațiile timpurii ale unui produs în tonuri de gri, apoi aplicați culori la sfârșitul lor.
Nu este nevoie să reinventați roata atunci când creați modele accesibile; există multe sisteme de design și orientări care vă pot ajuta.
