Share
Med 4,5% av den globale befolkningen som opplever fargeblindhet, 4% som lider av nedsatt syn, og en annen 0,6% er blind, er visuelle problemer med å bruke nettet mer utbredt enn du kanskje setter pris på. Denne veiledningen vil se på hvordan utforming for personer med synshemming kan forbedre nettet for alle.
Dagens web må gjøres tilgjengelig for alle, uavhengig av personens evner eller nedsatt funksjonsevne.
"Tilgjengelighet sikrer at funksjonshemmede kan få tilgang til samme informasjon fra et system som alle andre, og få samme fordeler"
Som omtalt i en tidligere artikkel, finnes det en rekke nedskrivninger, fra fem bemerkelsesverdige områder:
Denne veiledningen vil fokusere på å designe for synshemming, noe som kan være ganske vanlig, alt fra mild til ekstrem funksjonshemming. Faktisk anslår Cathy O'Conner (designer og forfatter for Smashing Magazine) at for hver to millioner nettkunder vil rundt 200 000 ha nytte av design som er enklere å se.
Det er en skikkelig vurdering, spesielt vurderer hvordan noen kan utvikle nedsatt syn, ettersom de blir eldre. Vanlige synshemming kan omfatte:
Fargeblindhet innebærer vanskeligheter med å oppdage eller skille mellom farger, samt følsomhet for fargelysstyrke. Det påvirker omtrent 4,5% av hele den globale befolkningen.
Svak syn kan inkludere delvis syn i ett eller begge øyne, dårlig skarphet (uskarpt syn), tunnelvisjon, sentralt feltfall og overskyet syn. Det påvirker 246 millioner mennesker, eller ca 4% av verdens befolkning.
Blindhet er det betydelige tapet av syn i både en persons øyne. Det påvirker omtrent 39 millioner mennesker, eller 0,6% av befolkningen.
Den mangfoldige karakteren av disse svekkelsene kan skape en stor variasjon i hvordan nettsider oppfattes av personer med ulike visuelle evner. Som beskrevet ovenfor, lider et stort antall mennesker av synshemming, så vi må sikre at de har tilgang til og tolker alle funksjoner det samme.
For eksempel, se Tumblrs hjemmeside, der bakgrunnen til siden er satt til et stort bilde (opprettet av brukerne):
The Tumblr hjemmesideAvhengig av type og nivå av synshemming som en person kan ha, kan nettstedet oppfattes på en rekke måter (her simulert med NoCoffee Chrome-utvidelsen):
1. Perifert blokkert syn (for eksempel glaukom)
2. Store flekker av blokkert syn (diabetisk retinopati)
3. Tap av skarphet (sløret syn)
4. Spøkelsesproblemer
5. Tritanopia fargeblindhetEksemplene ovenfor viser forskjellige typer nedsatt syn, og også et par eksempler på fargeblindhet. Til oppsummering:
På grunn av disse variasjonene i oppfatningen kan viktige elementer på et gitt nettsted bli mindre tilgjengelige (og dermed mindre brukbare) avhengig av omfanget av brukerens synshemming.
For eksempel kan et tap av skarphet (uklart syn) gjøre søkelinjen på Tumblr-nettstedet nesten forsvunnet i bakgrunnen. Det samme kan sies for innloggingsknappen:
Sammenlign søylinjen på bildet til venstre med det til høyre til høyre, søkefeltet har blandet seg inn i bakgrunnen, og er knapt synlig.
Beveg deg bort fra Tumblr-eksemplet, vurder en person med rød / grønn fargeblindhet (protanopi). På en Google-søkeresultatside, ble fargen brukt til å representere nåværende resultatside synes mindre viktig for en fargeblind bruker, mulig å gjøre det litt mindre meningsfylt:
Google Protonopia eksempelKontrasten fra rød og gul, er mindre åpenbar for en fargeblind bruker, og vises mer som en lysegrønn farge mot en mørkegrønn.
Begge de ovennevnte eksemplene viser hvordan variasjoner i oppfatning kan påvirke bruken av kjerneegenskaper. Heldigvis kan folk med slike synshandlinger endre presentasjonen av innhold slik at elementene blir mer tilgjengelige og brukbare for dem. Dette kan gjøres ved å:
Slike justeringer kan gjøres gjennom standardinnstillinger i en nettleser. I tillegg har mer avanserte endringer blitt gjort tilgjengelig via nettleser tilgjengelighetstillatelser. For eksempel har Google bygget ulike tilgjengelighetsplugins for synskadede brukere:
Høy kontrast, for eksempel, lar folk variere kontrast på et nettsted, noe som gjør teksten klarere å lese. Her er det i aksjon på Spotify-hjemmesiden:
Eksempel på en plugin for tilgjengelighetsbrowser som brukes til å endre kontrast på en nettsideSom vist ovenfor kan nettleserutvidelsen:
Med alle de forskjellige synsforstyrrelsene, og det store spekteret av verktøy som kan brukes til å endre hvordan innhold vises, blir det klart at vi ikke alltid kan bestemme hvordan nettsider skal vises eller oppfattes av mennesker.
Siden innholdet kan vises på flere måter, må vi derfor være forsiktige med hvordan innholdet vårt er strukturert, til og med på kodingsnivået. Det er fordi det blir viktig å opprettholde et klart hierarki med informasjon, da folk kan bruke forskjellige måter å presentere den informasjonen på. La oss nå se på noen gode metoder for å sikre at innholdet vårt alltid er tilgjengelig, uansett hvordan det vises:
Her er en liste over seks beste praksis for å gjøre designene dine bedre for de med synshemming.
Det er viktig at vi sikrer at webinnholdet er uavhengig av den underliggende strukturen. Når endringer i presentasjonen kan inneholde størrelsen på elementer (for eksempel tekst og bilder), avstanden mellom elementer, eller om elementene kan ses i det hele tatt (blinde brukere ser kanskje ikke bilder), blir det klart at utvikleren ikke kan bestemme hvordan innholdet blir vist på et gitt tidspunkt.
Som angitt av W3C, for å aktivere ulike nettlesingsmetoder for å jobbe (for eksempel ved bruk av skjermlesere eller tastaturnavigasjon), må utviklere sørge for at deres kode gir en struktur som er uavhengig av presentasjon:
"Utviklere må sørge for at presentasjonen av webinnhold er uavhengig av den underliggende strukturen" - W3C
En solid struktur vil også gi relevante semantiske koder som for eksempel overskrifter, avsnitt og listeelementkoder for å sikre at en skjermleser for eksempel kan tolke informasjonen og presentere den på en alternativ måte:
Eksempel på et nettsted layout ved hjelp av riktige semantiske koderSom forklart tidligere, kan enkelte strukturelle elementer, spesielt bilder, ikke oppfattes av noen brukere. Blinde personer som bruker hjelpende teknologier (for eksempel skjermlesere) for å tolke nettsteder, vil høre alternativ tekst tilskrives bildet leses ut, heller enn faktisk ser bildet. Hvis den teksten ikke er tilstede, eller ikke er beskrivende nok, vil de ikke kunne oppleve informasjonen som ønsket.
Her er et eksempel fra University of Leicester, som viser nøyaktig alternativ tekst, som gir mer kontekst til brukeren:
Eksempel på nøyaktig alternativ tekstbruk på et bildeAbility.net gir fem gyldne regler for bruk alt koder (tekstalternativer) riktig for å gjøre et nettsted mer tilgjengelig:
Accentsconagua
![]()
alt = "" EgenskapFarge er ikke den beste måten å formidle informasjon, som vist i følgende eksempel. Nedenfor brukes en rød ramme til å markere skjemafelt som ikke er fylt ut på riktig måte. Derfor, hvis en bruker er fargeblind, vil de ikke kunne se denne indikasjonen, så det blir vanskelig å forstå hvilke felter som har feil:
Bruken av ikoner og etiketter for å vise hvilke felt som er ugyldige, bedre kommuniserer informasjonen til en fargeblind bruker:
Eksempel fra Bootstrap v4Dette eksemplet viser at farge ikke skal brukes alene for å formidle informasjon, men bare i tillegg til eksisterende informasjon.
Fargeblindbrukere kan også finne det vanskelig å fortelle forskjellen mellom bestemte farger. For eksempel kan grønn, rød og brun se veldig ut som:
Hvordan fargeblind brukere oppfatter grønn og rød Derfor, når farger brukes på diagrammer og grafer, kan det være nyttig å bruke mønstrede overlegg til solide farger for å gi brukerne en klarere måte å skille mellom elementer. Dette hjelper ikke bare de som er fargeblind, men gjør det også lettere for alle. Tenk på Trello etiketter for et eksempel på å bruke teksturer:
På høyre side, farger blinde-vennlige etiketter fra TrelloMonokromatiske fargeskjemaer gjør kun bruk av farger på en enkelt fargetone. Her er et eksempel, opprettet med paletton.com:
Monokromatisk palett laget med paletton.comVed å bare bruke nyanser av en enkelt nyanse, kan enhver ekstra betydning som kunne blitt innført med forskjellige fargetoner, fjernes.
Variasjoner i kontrast og toner kan brukes til å gi betydning eller betydning for elementer, og tiltrekke brukerens oppmerksomhet til forskjellige områder. Betydningen her kan også lettere overføres til fargeblindbrukere som vist i følgende eksempel på et monokromatisk nettsted.
BIGSOUND Buzz er et nettsted som gir stor nytte av et monokromatisk fargeskjema:
Monokrom på BIGSOUND Buzz
Tekstur overaltEn fargeblind bruker vil se alle de samme tonene og kontrasten, men i en annen fargetone:
BIGSOUND Buzz for fargeblindKontrast er forskjellen mellom den letteste fargen (f.eks. Bakgrunnen) og den mørkeste fargen (for eksempel teksten). For eksempel, vurder denne kontrastfølsomhetsdiagrammet:
Øverst til venstre (bokstaven A) har den høyeste kontrast, og når vi beveger rett, reduseres kontrasten, da forskjellen i luminans mellom bakgrunn og forgrunnen reduseres. Til slutt vil de ikke kunne skille teksten fra bakgrunnen, avhengig av en persons kontrastfølsomhet.
Derfor, for å sikre at tekst er lesbar av personer med synshemming, har WCAG gitt en kontrastforholdsretningslinje. De foreslår at et kontrastforhold på minst 4,5: 1 bør eksistere mellom en tekst og dens bakgrunn. Dette forholdet faller til 3: 1 for større tekst (24px eller 29px fet).
Et eksempel på dette forholdet er vist i eksemplene nedenfor, fra accessebility.psu.edu:
Samlet sett, ved å utforme inklusiv de mest ekstreme funksjonshensynene, forbedrer det nesten sluttproduktet for alle andre.
For eksempel å designe for folk med ingen visjon kan legge et godt fundament for de som kan se. Dette skyldes at det gjør oss i stand til å sikre at strukturen på nettstedet er uavhengig av presentasjonen, og kan tolkes av hjelpeteknologi også som folk. Derfor, hvis presentasjonsendringer skulle skje av annen grunn, vil strukturen på nettstedet fortsatt være tilgjengelig.
I tillegg sikrer at farge bare brukes til å markere det som allerede er synlig, er et annet flott skritt mot å bygge en lett tilgjengelig og dermed brukbar nettside. En nyttig designprosess kan derfor være å designe tidlige iterasjoner av et produkt i gråtoner, og deretter bruke farger i slutten.
Du trenger ikke å gjenoppfinne hjulet når du lager tilgjengelige design; Det er mange designsystemer og retningslinjer som kan hjelpe deg.
