WCAG 1.4.1, 1.4.2, 1.4.7, 1.4.3, 1.4.6, 1.4.11God kontrast er som en god leselampe
Gjør det enkelt å lese og å skille mellom elementer med for eksempel god kontrast. Det gjelder også for lyd, faktisk!
Tekstversjon
Anders: Dette er to entusiaster som i løpet av 26 episoder skal diskutere 78 suksesskriterier på en forståelig måte. Dette er universelt utformet.
Erling: Da er vi på den sjette episoden, Anders. Nummer seks av 26. Veldig bra. Godt jobbet.
Anders: Godt moment.
Erling: Vi ligger litt foran det som har blitt lansert, det er jo skamgudd. I dag skal vi snakk om WCAG 1.4, blant annet. Under 1.4 er det ganske mange suksesskriterier som vi har fordelt på tre episoder. I dag skal vi gå gjennom seks av dem, stemmer det?
Anders: Ja.
Erling: Men, som vi har gjort på det andre episodene, hva står 1.4 for?
Anders: Vi er så langt på 1, det som alle episodene så langt har dreid seg om, som handler om mulig å oppfatte.
Erling: Perceivable.
Anders: 4 handler om at det skal være lett å se og høre innhold, blant annet med å skille forgrunn og bakgrunn – kontrast som vi gjerne snakker om. Da er vi inne på det som mange forbinder med universell utforming.
Erling: Dette er en av de klassiske. Vi snakket om det i den første episoden òg, altså blinde og bilder, hva som er på bilder. Alt-tekst. Også én av de klassiske. Og så er det denne som går på kontrast, er det god nok kontrast.
Anders: Vi vet jo, som alle som hører på disse episodene vet, at det handler om mye mer, men det er en standardrespons vi hører, ja det er kontrast og slikt. Det skal vi snakke om i dag.
Erling: Hva er de seks suksesskriteriene.
Anders: De som vi har valgt ut for denne episoden.
Erling: Ja, for vi har jo strukturert dette etter beste skjønn.
Anders: Ja, det er jo vår vurdering. De hører ikke nødvendigvis sammen. I den episoden hvor vi snakket om video, da hørte alle de suksesskriteriene sammen, og det gjør de ikke nødvendigvis i dag. Alle hører til 1.4, men for å ikke lage en episode per suksesskriterie, så har vi laget noen bolker. De vi skal snakke om i dag er 1.4.1 som handler om bruk av farge for å formidle informasjon, uavhengig av om det er god kontrast på den fargen eller ikke. Så skal vi snakke om 1.4.2, den handler om å styre lyd, der hopper vi plutselig over på lyd. Vi skal snakke om 1.4.3 og 1.4.6 som begge handler om kontrast. Vi skal snakke om 1.4.7, tilbake til lyd. Nå sier jeg dem etter WCAG sin struktur. 7-en handler om bakgrunnslyd. Apropos lyd får jeg nå kjeft av Erling for at jeg ikke snakker direkte i mikrofonen.
Erling: Det er ikke tilgjengelig, Anders.
Anders: Vi må ha god lyd her, så da må jeg snakke rett i mikrofonen, nesten spise opp mikrofonen.
Erling: Og så den siste?
Anders: Som også handler om kontrast. Den er kjekk, den handler om kontrast på det som ikke er tekst.
Erling: Disse som går på lyd, la oss ta dem med én gang fordi de er enkle å forklare, å spesielt 1.4.7. Denne er trippel A. Enkel å forklare, men kanskje ikke så relevant for folk? Gå fort gjennom 1.4.2, Anders.
Anders: Du skal ikke spille lyd av automatisk.
Erling: Det er så godt at dette er en suksesskriterie.
Anders: Det vil si, du har lov å spille lyd automatisk hvis det er mulig å stoppe den eller den ikke varer mer enn tre sekunder.
Erling: Du kan hive inn en høy gong, og ikke bryte suksesskriteriet?
Anders: Ja. Men automatisk avspilt lyd, som ofte blir brukt i forbindelse med video … Vi snakket litt om det før opptaket her. Tidligere hadde Facebook automatisk avspilling av video med lyd, nå har de kun video uten lyd.
Erling: Du må aktivt sette på lyden. Det var slik i en liten periode, at lyden òg ble spilt automatisk.
Anders: Og det er jo fordi folk har klaget, ikke fordi Facebook plutselig skal høre på WCAG. Da er det jo en regel som er nødvendig for noen, og bra for alle.
Erling: Det går ikke bare på universell utforming, det går på god opplevelse, altså
Anders: Den går på bakgrunnslyd.
Erling: Det er en trippel A. Litt sær, men gir mening.
Anders: Den sier at det må være mulig å skru av bakgrunnslyd eller at lyden må være minst 20 decibel lavere enn hovedlyden. Dersom vi skal sitte utendørs å lage podkast, som kanskje vi skal gjøre i sommmer, eller vi skal gjøre det på toget. Da må vi passe på at det er stor forskjell på bakgrunnslyden. Det gjelder ikke uforutsett lyd, det er unntak fra regelen.
Erling: Står det spesifikt?
Anders: Ja. Nå har vi jo en hund her i studio. Så dersom han plutselig bjekker, så må ikke vi legge inn en mekanisme for at brukeren skal kunne ta bort bjeffet, eller skru det ned. Dette er akseptert.
Erling: Dette er det vi skal si om lyd i dagens episode.
Anders: Jeg vil si en liten kommentar på den. Dette er primært rettet til lyd som er tale. Så dersom du er flink å spille gitar og synge og legger ut en video av deg selv, eller et lydklipp, så er ikke det et brudd på denne regelen. Brukeren skal ikke kunne skru av gitaren for å kun høre vokalen.
Erling: Det er ikke slik at alle musikkvideoer i hele verden bryter denne.
Anders: Nei. Dette handler om tale.
Anders: Nå gikk vi inn på de som handler om lyd. Vi skal snakke mye om visuell kontrast i dag, men først skal vi snakke om hva som skjer i resten av episoden. Vi har en gjest med oss i dag, i dagens aside. Dette er noe vi liker godt, det var ei som tok kontakt og sa, hei, bra initiativ, bra podkast. Kan jeg få være med dere å prate litt? Veldig kjekt. Ingeborg Tande Johnsen har vi snakket med i dagens aside.
Erling: Og i dagens ris og ros? Hva skal vi snakke om der?
Anders: Da skal vi se på hotellbransjen.
Erling: Jeg tror ris og ros er favorittsegmentet mitt. Det er så kjekt å grave ned i alt det folk har gjort feil eller gjort bra.
Anders: Jeg tror vi skal vie litt mer tid til det fremover. Det er ønsket og planen min og din. Om du der ute er uenig i det, si ifra. Det ris og ros-greiene, det trenger dere ikke å ha.
Erling: Apropos det, la oss gå gjennom det vi må gå gjennom.
Anders: Ja, essensen.
Erling: Disse retningslinjene, hvorfor har vi dem.
Anders: Fordi ikke alle kan skille farger og ikke alle har godt syn. I dag snakker vi visuelt. Da kan vi snakke om konsumentene av innhold – svaksynte er avhengig av god kontrast for å kunne lese, se og forstå. Og fargeblinde er en viktig gruppe.
Erling: Det er ganske mange. Overraskende mange. Nå har vi ikke sjekket dette før vi begynte, men jeg lurer på om det er 20 % av alle menn.
Anders: Jeg trodde det var 10. Men vi har ikke sjekket det opp.
Erling: Rundt der, en gangske stor andel.
Anders: Det er vanligst hos menn, og det vanligste er rød-grønn-fargeblindhet.
Erling: Hvorfor har vi disse suksesskriteriene?
Anders: Ikke alle kan skille farger og ikke alle ser godt.
Erling: Nå er vi ferdige med det som går på lyd, nå ser vi på kontrast på visuelle ting.
Anders: Det legger vi bak oss.
Erling: Det vi fokuserer på her er folk som ikke kan skille farger og ikke har godt syn.
Anders: Svaksynte eller fargeblinde.
Erling: Vi har sagt det tidligere, at folk assosierer universell utforming med folk som er blinde eller har dårlig syn. Dette er et godt eksempel på universell utforming som òg treffer funksjonsfriske folk, fordi det har med konteksten og situasjonen du er i. Et typisk eksempel er hvis du sitter på en solseng i Spania, ser på mobilen og skal bestille taxi. Når du har sol på skjermen og det ikke er god nok kontrast på de knappene og skjemafeltene, så klarer du ikke å lese det, du klarer ikke å bruke løsningen. Så dette treffer veldig mange, veldig ofte. Det er ikke mye svaksynt du skal være før du begynner å myse, hva er det som står der, spesielt om det er liten tekst.
Anders: Jeg har ganske dårlig syn før jeg har fått på meg linsene om morgenen, og det hender jeg kikker på mobilen som det første jeg gjør – det hender.
Erling: Du ønsker ikke å fremstå som en av de som sjekker mobilen som det første du gjør.
Anders: Nei, det henter. Jeg skrur jo av vekkerklokken. Tenk hvis jeg ikke finner knappen for å skru av vekkerklokken på telefonen på grunn av for lite kontrast?
Erling: Det hadde vært dritt, da hadde du hatt en funksjonsnedsettelse i det du skulle skru av.
Anders: Det gjelder òg, det er i hvertfall brukt som eksempel, dette med monokrome skjermer, men der er jo en minitrend hvor folk, som meg, har skrudd av farger på mobilskjermen sin for å gjøre den kjedelig. Dette var noe NRK Beta tok opp som et virkemiddel for å bruke mindre tid på telefonen.
Erling: Og den innstillingen er en tilgjengelighetsinnstilling.
Anders: Jeg har det, det fungerer superbra for meg. Det fungerer bra fordi jeg bruker mobilen mindre. Og det fungerer bra fordi det meste på telefonen har god kontrast og ikke bruker farge som et virkemiddel. For eksempel når du blir oppringt, eller når du får et innkommende anrop så bruker de jo rød og grønn for å ta eller legger på, men de bruker et symbol i tillegg. Dette er jo essensen av dette med å ikke bruke farge alene. Så faktisk, det eneste eksempelet jeg kommer på, for meg som har grå skjermer, på ting som jeg ikke ser. Det er de ikonene, nå har jeg en Apple-telefon. Hvis du holder inne en melding, så får du et sett med fem-seks ikoner med hjerte, tommel opp og ned. Det hjertet har dårlig kontrast. Så hvis jeg får et hjertet klarer jeg så vidt så det. Tommelen, som er gul, ser jeg lett. Det var en liten avsporing. Du nevnte dette med sollys. Alle har jo opplevd det. En liten annen anekdote til det. Designpioneren Don Norman, som mange av oss kjenner til. Jeg har faktisk ikke lest den boken hans.
Erling: Design of everyday things. Har du ikke lest den. Jøss.
Anders: Jeg er jo glad i å lese, men. Den har du lest?
Erling: Jeg har lest den, ja. Hvorfor har ikke du lest den?
Anders: Jeg vet ikke. Hvertfall, han har nå vært ute nylig og sagt at det bare er tull at empati er en viktig egenskap som designer, fordi det går ikke ann å ha ekte empati for de du skal designe for. Men da sa han, og han har jo blitt 83 år, det er jo en reell alder.
Erling: Da begynner du jo å få litt funksjonsnedsettelser.
Anders: Han sa nå, at han alltid gikk rundt med lommelykt for å få bedre kontrast når han skal lese på ting og tang.
Erling: Det tar oss litt over i produsenter, de som produserer innhold. Den viktigste gruppen her er designerne. En designer sitter gjerne i et relativt mørkt rom, ikke ute i sollys, sitter gjerne på en ekstra god skjerm med god kontrast, som er stilt inn godt, slik at fargene kommer frem ordentlig. Og så sitter de og designer noe som ser veldig fint ut på skjermen, gjerne tynn tekst, gjerne pastell, det skal se fint ut, og så glemmer de brukeren.
Anders: Jeg har bemerket meg at det er en litt forbigående trend, at lav kontrast er finere enn høy kontrast.
Erling: Ja, du har rett i at det går på at det er en trend. Veldig mange ser på kontrast og universell utforming for en hemsko når en skal designe noe. For veldig ofte vil en dysse ned noen element, fordi de ikke skal ha fokus. Men hvis du skal ivareta kontrastkravene, så er det ikke like lett.
Anders: Og her kommer tankesettet til designeren inn. Hvis du har en designer som lager noe som ser bra ut, men som ikke har tatt hensyn til kontrast, og så sier du, hei, vi skal være i henhold til WCAG, så du må skru opp kontrasten på dét, dét eller dét elementet. Da ødelegger du helheten, da ser det ikke bra ut. Dersom du klarer å skape et visuelt hierarki med god kontrast fra starten av, så slipper du å gjøre de justeringene. Det som skjer er at folk justerer opp til en kontrast på 4,5 bare for å være i henhold til disse reglene, og det er feil måte å jobbe på. Det opplever jeg veldig ofte.
Erling: Dette er som vi har snakket om tidligere, godt håndverk. I en digital verden, som en designer, så er dette en del av håndverket, å lage ting med god kontrast.
Erling: Hvem andre produsenter?
Anders: Kodere må jo gjerne ha kjennskap til dette, og gjerne sette opp automatisk testing av kontrast direkte i koden. Dette er jo et samarbeid, og det hender at designerne har glemt dette, eller at det plutselig blir implementert en kombinasjon av to elementer som ikke ligger i designskissene, som ikke designerne har tenkt på – vi bruker de og de grunnfargene og vi har de og de bakgrunnsfargene, og plutselig oppstår det en kombinasjon og så er ikke det ivaretatt fordi kombinasjonen er glemt. Hei hei utviklere. Husk på dette.
Erling: Innholdsprodusenter, redaktører og utviklere. Dere har et ansvar å passe på designeren. Det er definitivt designer som er den viktigste her, for å bestemme hvordan ting skal se ut. Men hvis ikke koderne og innholdsprodusentene passer på dem, så kan vi fort havne i slike situasjoner.
Anders: Nå nevner du jo innholdsprodusenter eller redaktører, og der kan jo de ødelegge dette selv om designerne og koderne har gjort en god jobb. Det er i mange verktøy mulig å legge på en lys tekst på en lys bakgrunn. At du har de mulighetene i verktøyene, selv om det er ikke er tiltenkt slik fra desigeren.
Erling: Det er et av argumentene for at innholdsprodusenter ikke bør ha for mye fleksibilitet i disse verktøyene sine. Som vi snakket i en annen episode, WYSIWYG, ikke gi de muligheten til å feile.
Anders: Og her ser vi at antall valg i slike editorer har jo bare gått nedover. I starten når vi fikk editorer så hadde vi knapperad på knapperad.
Erling: Du kunne gjøre alt det du kan gjøre i Word, nærmest.
Anders: Det var nesten slik. Nå er det jo veldig vanlig at det er helt strippet ned, du kan ikke lage lysegrå tekst på lysegrå bakgrunn. På sosiale medier òg, nå er det jo flere og flere mulighet på Facebook. Det er ikke et Word-dokument. Jeg kan ikke endre tekstfargen min. Men jeg kan lage slike plakater, eller hva det heter. Det er et samspill.
Erling: Det er det, alle har et ansvar.
Erling: Hvordan kan vi ivareta disse suksesskriteriene?
Anders: Det er jo når en sitter og skriver, tegner og koder, så må du måle kontrasten. Av gammel vane så bruker jeg et nettsted som heter Contrast bindestrek ratio dot com. Vi legger jo alle lenker som vi nevner, de legger vi som episodelenker på universeltutformet no. Conrast ratio er kanskje ikke det beste verktøyet, det har fordeler og ulemper. Fordelene er at du ser, du kan bruke mange typer farge inputtyper. Du kan både ha hex, RGB og du kan bruke alfakanaler som er mye brukt nå.
Erling: Og alfakanaler det er at det blir gjennomsiktig, som er en felle i denne verden.
Anders: Der er jo regelen at du har delvis gjennomskinnbarhet, så må du måle kontrasten opp mot det lyseste punktet i den bakgrunnflaten du er på, så det er ikke et gjennomsnitt.
Erling: Det er det lyseste som gjelder. Eller mørkeste òg?
Anders: Ja, det spørs jo om du har lys eller mørk tekst. Verktøyet sier òg … det er jo forskjellige krav, alt etter hvor stor eller tykk teksten er, nå har vi ikke snakket så mye om kravene, men dette verktøyet, Conrast ratio, sier òg noe om, ja, denne fargen er i henhold til AA dersom den er så og så stor. Det er fint å få.
Erling: Nyttig informasjon.
Anders: Ulempen med verktøyet er at du ikke på en enkel måte kan justere fargen eller få opp en palett med forslag til farge, fordi det er ikke alltid at det å justere, det er ikke bare å gå opp eller ned på styrke som er det beste, det kan hende at du skal velge en farge fra en annen palett for å få bedre kontrast og harmoni. Det gjelder ikke verktøyet deg med. Det er òg manuelt, du kan ikke plukke en farge fra et bilde eller fra skjermen.
Erling: Slik jeg har gjort det opp gjennom er å søke på Google etter Conrast cheker eller noe sånt, og så vet jeg hvilken jeg pleier å bruke i resultatet. Men nå de siste årene har jeg brukt en Mac app som jeg tror bare heter Conrast hvor jeg har en tastatursnarvei, og kan plukke farger fra hvor som helst på skjermen. Veldig effektivt. Den har ikke A og trippel A og dobbel A og fontstørrelsen og sånn. Kanskje ulempen, men veldig fort å måle. Vi har ikke snakket om de spesifikke kontrastkravene enda. Altså 4,5 til 1 er ofte et tall som dukker opp her, hva er det.
Anders: I dagligtale sier vi ofte bare 4,5. Kalkulasjonen bak er jeg ikke så stødig på. For å forklare det enkelt, så er høyere tall bedre kontrast. Hvis du har 1, så er det hvitt på hvitt eller svart på svart. Vi har to nivåer i WCAG å forholde oss til. Vi har egentlig tre, men, ok, la oss ta alle tre.
Anders: Vi har tre, og det er den nye retningslinjen som går på ikke-tekstlig kontrast. Altså på interaktive komponenter. Hvis du har en meny eller knapper som bare er ikoner, så er kontrastkravet der lavere enn på tekst. Og så har vi 4,5 så er den gyldne, den som flest kjenner til. Det er da kontrast på tekst. Hvis du skal være i henhold til dobbel A, så skal du ha 4,5 i kontrast. Det tredje nivået, det er 7. Du spurte hva er egentlig disse tallene. Det som jeg synes er veldig viktig å tenke på, det er at … grunnen til at en bør strebe etter syv, er at syv er det de fleste klarer å se som ikke bruker ekstra hjelpemidler, og da snakker vi ikke om briller, da snakker vi om folk som har så dårlig syn at de har ekstra hjelpemidler utover briller. Tallet er ikke satt tilfeldig, det er satt fordi at dersom du har lavere kontrast enn syv, så vil ikke alle klare å lese eller se det, av de som ikke bruker hjelpemidler. Hjelpemidler kan være forstørrelsesverktøy eller høykontrastskjermer. Hvis du bruker 7 som din grense, så får alle det med seg.
Erling: En må hige etter syv. Men 4,5 er dobbel A. Og 7 er trippel A. Kort fortalt. Det er litt variasjoner på størrelse og tykkelse.
Anders: De detaljene tar vi ikke.
Erling: Det kan du gå inn å lese om.
Anders: Når du skal skape en vekting i designet ditt, så bruk minst syv i kontrast på det som er hovedinnhold. Hvis du har en artikkel, med mye brødtekst, bruk syv i kontrast på den. Dersom den funfacten på siden har lavere kontrast for å skape litt dynamikk i designet, så er ikke det krise.
Erling: Og det er som vi snakket om, kanskje den første episoden, WCAG er én ting, men brukerne er viktigst. Hvilken informasjon er det som er viktig for brukeren. Det finnes element hvor en kan tenke, dersom noen ikke får med seg dette, så er ikke det viktig i det hele tatt. Det bryter ikke med forståelsen av innholdet. En bryter kanskje WCAG, men bryter ikke med forståelsen av innholdet. Av og til kan det være greit, når det kommer til universell utforming, å ha ting som ikke har god nok kontrast, fordi opplevelsen til de som ikke har dårlig syn, blir bedre.
Anders: Så lenge en er bevisst på det, det er et bevisst valg, her velger jeg å ekskludere noen, det gjør ingenting, folk vil klare å bruke den viktigste delen av min løsning uansett. Vi snakker om teknikker, Erling. Når vi måler kontraster så har vi frem til nylig, frem til ifjor, så har vi kun hatt krav om å måle tekstkontrast. Jeg har alltid målt ikke-tekst-kontrast òg, for jeg har sett på det som åpenbart.
Erling: Jeg visste ikke at det var kun tekst som gjaldt. Jeg har òg alltid målt alt. Men når vi tenker på brukeren, er det vesentlig at brukeren får med seg det skillet mellom disse to elementene? Da bør det være kontrast på det, har min tanke alltid vært. Det har ikke vært en del av WCAG?
Anders: Ikke før 2.1 som kom i fjor. Det som den tar med seg er at du skal ha kontrast på alle interaktive elementer, det er jo knapper. Den sier òg at du skal ha det på tilstander. Og det er jo noe nytt som veldig mange har glemt alltid.
Erling: Hva er en tilstand?
Anders: Innenfor CSS så har du mange, mange tilstander. La oss begynne med den som flest kjenner til, det er jo hover.
Erling: Hva er det?
Anders: Det er når du har en musmarkør og beveger den over et interaktivt element, så får du en hover-effekt.
Erling: Den endrer utseende.
Anders: Det gjelder kun de som bruker mus. Den effekten der gir ikke mening for tastaturbrukere eller mobilbrukere.
Erling: Touchscreen.
Anders: Og det er noe som alle kjenner seg igjen i, du tar musen din over en lenke eller knapp eller et stort bilde du kan trykke på, og så skjer det noe. Det kan være endre farge, endre litt posisjon, endre bakgrunn. Nå har vi plutselig fått et kontrastkrav på hovereffekten òg. Det betyr at du kan ikke lage, hvis du har en knapp som er i henhold til kravet, så blir den lysere når du hovrer og da dårligere kontrast, så har du brutt denne nye 2.1-retningslinjen. Det er jo bra.
Erling: Du skal jo fortsatt kunne lese det selv om du har muspekeren over.
Anders: Men det betyr ikke at du må ha høy kontrast mellom opprinnelig tilstand og hover-effekten.
Erling: Det spurte jeg deg om, på den ene siden gir det mening at den burde ha det, altså at du ser at du går over et element, men det er ikke et krav i WCAG.
Anders: Ikke slik jeg har tolket det. Og her må jo folk bare komme med innspill. Men jeg ser heller ikke at det skal være viktig, hvis vi fokuserer på brukeren, hvis du bruker mus så vet du hvor muspekeren er. Hvis du har problemer med å se den, så bruker du innstillinger på dataen til å forstørre den eller gjøre den i høyere kontrast.
Erling: En liten kommentar på det, den viktige indikatoren på at noe er klikkbart på en maskin, er at du går fra pil til hånd med en fing som klikker.
Anders: Når vi som designere lager en hover-effekt i tillegg, så er det kun for å gi en hjelpende hånd, men det er ikke nødvendig for å kunne bruke det. Vi oppfordrer til fine og gjerne kreativ bruk av hover-effekten, men den trenger ikke å være veldig annerledes enn grunnformen. Det var én av tilstandene. Det er den mest kjente, men ikke den viktigste innenfor universell utforming. Den viktigste, som vi skal snakke mye om i andre episoder, det er jo fokus. Og er fokus er, og dette er litt misforstått, fokus er …
Erling: Her er det en stor sjanse for at jeg har misforstått.
Anders: Fokus er ikke når du trykker på noe, fokus er når du har tastaturfokus på noe. Det er ikke når du er på en side, og du har en visuell indikator at den siden er den du er på. Hvis jeg er på Okse og leser om Erling på siden Om oss, hvis dere har en slik side, og det er en liten strek under Om oss, så er ikke det fokus. Det er kun fokus hvis du bruker tastaturet ditt til å tabbe deg bort til den lenken eller knappen som heter Om oss.
Erling: Fokusstylingen vil du se hvis du bruker tastaturet, forhåpentligvis, hvis du har gjort det riktig.
Anders: Hvis du ikke har tullet det til
Erling: Hvis du klikker på ting, hvis du ikke bruker tastaturet, så vil den dukke opp først og fremst på skjemaelement, stemmer det? For skjemaelement får fokusstyling på et element når du klikker på det? Vil du det?
Anders: Ja, nå begynner vi å bli litt detaljerte. Hvis du klikker på et element så inntreffer to tilstander, både fokus og den som heter active slår inn, og det er forvirrende. Jeg vil ikke slippe fokusen helt enda, fordi den er viktig når vi snakker om kontrast. Fordi fokustilstanden, i motsetning til hover, så er den essensielt å se for de som trenger det. Så hvis du ikke bruker mus, men bruker tastatur, og kontrasten er dårlig. Nå sa vi jo at det ikke gjør så mye om kontrasten er dårlig på hover, men hvis kontrasten på fokus er dårlig. Du har en blå knapp som blir litt mørkere når du kommer til den med tastatur, så klarer du ikke å se den. Du vet ikke hvor du er, du har bare trykket på en tab og hoppet til en knapp.
Erling: I nettleseren er det en default styling på fokus. Er det alltid blå?
Anders: Nei, Chrome har blå. Microsoft bruker gjerne gult.
Erling: Det er uansett en ganske tydelig default styling i nettleseren.
Anders: Jeg synes ikke den er så tydelig. Min anbefaling er jo å forbedre den. Men når du forbedre den, så er det mange fallgruver å gå i. Her skal en trå litt varsomt. Det er bra du nevner det fordi det er et unntak fra regelen her, at dersom dårlig kontrast på fokustilstanden din er nettleserens sin feil, så bryter ikke du retningslinjen.
Erling: Så med mindre du fjerner fokuset så er du i henhold til WCAG?
Anders: Ja. Og det er litt synd, fordi da har du ikke brukeren i fokus. Hvis du har en blå toppmeny. Og så legges det en outline, eller en kantlinje, så vil den ha så dårlig kontrast at du ikke ser hvor tastaturfokuset er. Da mener jo jeg at vi har et ansvar som designere å fikse på det.
Erling: For da er vi tilbake til føkk WCAG. Nå er det brukeren som er viktig.
Anders: Ha tungen beint i munnen, fokuser på fokus. Der skal kontrastkravet være tre.
Erling: Er det tre der ja? Interessant.
Anders: Du må sørge for at den effekten du slenger på skille seg ut fra bagrunnen. Nå var jeg inne på den active, den er en mindre viktig tilstand, slik jeg ser det. Det er akkurat i det du klikker på en lenke.
Erling: Eller et interaktivt element.
Anders: Det øyeblikket varer normalt sett ganske kort, det er ikke en tilstand som er viktig for folk. Det bekrefter at du har truffet, hvis du har problemer med å treffe ting, og du ikke er sikker på du faktisk traff det du klikket på, så hjelper det.
Erling: En bør ikke neglisjere det. Det finnes situasjoner hvor dette er viktigere enn andre situasjoner. For eksempel i applikasjoner hvor du skal gjøre tynge ting.
Anders: For å ta det fjerde som jeg vil nevne, så er det besøkte lenker. Det som kalles visited. Det er noe som har fått et kontrastkrav på seg, det har vi ikke hatt før. Vi har implisitt hatt det, men nå er det mer tydelig. Det er noe som, litt som fokus, folk går i fellen med å fjerne det. En bruker gjerne stilark som nullstiller alt, slik at du får brukt med blanke ark. Hvis du har sider med mye lenker, spesielt tekstuelle eller lange menyer, og du er litt stresset, og du har litt dårlig hukommelse, og du er usikker på, fordi ordlyden eller navigasjonen er dårlig, og du klikker mye frem og tilbake, fordi du vet ikke hvor det du leter etter er, da er det digg med besøkte lenker som skiller seg fra de andre lenkene.
Erling: Sier WCAG noe om det, altså at visited skal være stylet annerledes?
Anders: Nei, men den sier at tilstander skal ha kontrast. Men der er det godt håndverk, tilbake til det. Det WCAG sier er at hvis du bruker visited og visited-fargen har for dårlig kontrast, da bryter du. Hvis du har samme på a link og a visited så bryter du …
Erling: WCAG sine suksesskriterier.
Anders: Men du har brutt grunnideen til webben. Fra dag én så var alle lenker i alle nettlesere blå ubesøkte og lilla besøkte.
Erling: Stemmer.
Anders: Nå sier jeg ikke at vi skal ha blå lenker og lilla besøkte.
Erling: Kontrast mellom blå og lilla her, hvis du ikke ser farger, og ser de to.
Anders: For her har vi lav kontrast mellom de to.
Erling: Så hvis du har monokrom skjerm, svart-hvitt-skjerm, eller at du ikke ser farger i det hele tatt, så vil du ikke se forskjell på dem. Dette har ikke noe med WCAG å gjøre, forløpig, bare en liten observasjon.
Anders: Det var et dårlig eksempel for på en monokrom skjerm, det hadde ikke gitt mening å løst det, for du måtte jo hatt et annet ikon …
Erling: Eller bakgrunn, kunne være mulig.
Anders: Ok, godt poeng. Kjøper den.
Erling: Litt interessant denne visited-diskusjonen, jeg vet ikke hvor dypt vi skal gå i den, det er ikke lenger en etablert konvensjon, å style ting som besøkt.
Anders: Nei, og kanskje er jeg gammeldags og sutrete, men …
Erling: Men du har, som alltid, det kommer ann på konteksten, hvis du har et langt komplisert dokument, med for eksempel innholdsfortegnelse, for eksempel forskningsdokument eller lignende, hvor du skal gå gjennom ting og lete og sånn. Men på en mer tradisjonell nettside med en enkel struktur, hvor det er enkelt å skille mellom de forskjellige områdene, ikke like viktig. Og kanskje ikke vits i det hele tatt.
Anders: Hvis Wikipedia hadde samlet utseende på besøkte og ubesøkte lenker, så hadde de ødelagt brukervennlighet, eller forverret den.
Erling: Wikipedia var et veldig godt eksempel der.
Anders: All right. Nå har vi snakket mer om lenketilstander enn om kontrast. Poenget er at vi skal ha kontrast på ikke-tekstlige elementer òg, men ikke på pynt.
Erling: Dekorative element.
Anders: Det gjelder kun de som du trenger å bruke.
Erling: De som gir mening, eller har en funksjon.
Anders: Det som har en funksjon.
Erling: Det er en viktig presisering. Du kan ha lyse element i designet, som ikke har god nok kontrast.
Anders: Jeg vil nesten gå så langt som å si at dersom du har dekorative element, så bør de ha lavere kontrast, fordi de ikke skal ha blikkfang.
Erling: De skal ikke ta fokuset bort fra det viktige.
Anders: Det ble en lang drøs om tilstander.
Erling: Men det er jo kjekt.
Anders: Ja, men jeg vil òg nevne, vi snakker fortsatt om teknikker. Der vil jeg si at vi har ikke snakket så mye om den teknikken hvor du ikke skal bruke farge som det eneste virkemiddel for å skille informasjon. Et veldig tydelig eksempel er stolpe- og linjediagrammer. Den vanligste måten å skille to linjer i et linjediagram, er å bruke farge alene. Det er ikke, da bryter du, det er brudd. Da gjør du at slike som meg, som har går skjerm på telefonen, ikke forstår forskjell på, hva er strømforbruket mitt i 2017 versus 2018? Jeg ser ikke forskjell.
Erling: Fordi de er røde og grønne.
Anders: Det man gjør da, spesifikt for linjediagrammer. For hvert datapunkt, så har du en geometrisk figur.
Erling: En firkant, pil eller trekant.
Anders: Det er noe de fleste diagramverktøy med respekt for seg selv, har en funksjon for. Da er det opp til designeren å spesifisere dette.
Erling: Og gjerne innholdsprodusentene, i dette tilfellet, som skal styre innholdet i grafen. I stolpediagram da?
Anders: Da må du bruke mønster.
Erling: Skraverte diagonale linjer. Eller?
Anders: Du kan bruke kryss, du kan bruke diagonale linjer den ene veien, den andre veien, horisontale linjer, vertikalen linjer, mønster.
Erling: Det er ganske mye forskjellig, du ivaretar de fleste tilfellene med forskjellige former, i stedet for farge. Du kan bruke farge òg, men det skal ikke være det eneste.
Anders: Ja, bruk farge for all del!
Erling: Det øker brukervennligheten.
Anders: Ja, farge er helt topp. Det var litt om diagrammer. Så skal vi ta noen eksempler på hvordan du feiler med dette.
Anders: Når feiler du med kontrast og fargebruk?
Erling: Når du har for lav kontrast. Eller når du bruker farge for å skille informasjon. Kun.
Anders: Nå på mandag var jeg på Kastrup, flyplassen. Da var jeg inne på et handicaptoalett. Der var det en grønn knapp for å åpne døren og rød knapp for å lukke døren. Og det stod ingenting, mer enn det.
Erling: Det stod på et skilt?
Anders: Det stod ikke open og close på knappene, men det stod instruksjon over: Trykk på den grønne knappen for å åpne. Og dette kunne vi likt så godt gjort på web. Et godt eksempel på her har de laget en instruksjon, fordi de har antatt at folk ikke forstår forskjellen, men de har laget en instruksjon uten å tenke på at det ikke er sikkert at folk ser forskjell. Så hvis de hadde trykk på den røde, øverste knappen, så hadde du innfridd dette. Da hadde du brukt posisjon i tillegg til farge, da bruker du to virkemidler. Men her er jo løsningen å fjerne instruksjonen, å legge på en etikett.
Erling: Interessant.
Anders: Det var fra den fysiske verden. Der er jo òg universell utforming viktig. Et eksempel fra skjemadesign er jo, av og til står det at påkrevde felter er røde. Det er dumt av to årsaker. Ikke alle ser den rødfargen, du bruker farge for å gi en mening.
Erling: Det er spesifikt det å referere til rødfargen, det er ikke det at det er rød?
Anders: Nei. Men det at det at det er rød er dårlig brukervennlighet, for rød indikerer at noe feil. For vi bruker jo rød skjemaetikett for å indikere at det er en feil i valideringen.
Anders: Og så har vi et mye brukt designgrep som er tekst over bilder. Det er utrolig mye hvor mye du kan diskutere om dette med tekst over bilder. Hvor komplisert dette egentlig er. Jeg vil dra det så langt og si at det er for mange fallgruver til at du bør gjøre det. Hvis du skal legge tekst på et bilde, gjør det som er trendy nå, å ha en fast bakgrunn på teksten.
Erling: Eller unngå å ha tekst på bildet, i det hele tatt.
Anders: Akkurat nå, nå er vi ikke i ris og ros-spalten helt enda, men det er litt rart å trekke frem SAS, men her gjør SAS det bra.
Erling: De gjør mye dårlig i denne verden, men akkurat her gjør de det bra.
Anders: Nå fikk jeg litt deja vu, har vi snakket om dette før?
Erling: Nei, dette nevnte du på månedsmøte hvor du holdt et foredrag om universell utforming.
Anders: Hvertfall, SAS har en tydelig blå bakgrunn som ligger over bildet. Det ser bra ut, det ser moderne ut. Og veldig mange legger teksten på bilde, det som skjer er at det opprinnelige bildet som ble satt inn har god kontrast til teksten, så endrer noen bildet, i noe som varierer mellom lyst og mørkt, du bryter kontrasten, og så prøver du å gjerne unngå det ved å legge på slike lag, gjennomsiktige lag, gjerne med forløpning, så glemmer du at forløpningen ikke går like høyt på mobil, så har du det gående.
Erling: Det er mange fallgruver. Det er litt slik at dersom et bilde ikke har kontrast så er det kanskje et dårlig bilde, som betyr at det er lyse og mørke områder, som fører til at, dersom du har forskjellige bredder på nettleservindet, så vil en havne i en situasjon hvor teksten ikke er lesbar.
Anders: Der sier du noe, litt samme argument når designeren sitter på sin flotte skjerm, så er det òg at innholdsredaktøren prøver å sette inn en tekst, tar vekk noen ord for å at teksten passer på bildet, og så glemmer vi at dette vil se helt annerleden ut på forskjellige skjermstørrelser, og ikke minst hvis brukeren har en annen skriftstørrelsen enn det redaktøren, og det skal vi snakke om i neste episode. Alle disse problemene, alle disse fallgruvene, de unngår du om du har en fast bakgrunn på teksten. Noen mener dette er stygt. Det er hvertfall mye enklere og billigere.
Erling: Tenker du på bøter?
Anders: Jeg tenker på tiden vi bruker på å tilpasse bilder.
Erling: Jeg må nevne at vi som designere alltid har begrensninger, alltid rammer vi må jobbe innenfor. Definer dette som en ramme, så finnes det mye du kan gjøre, som ser fint ut, som ser moderne ut. Som ikke åpner for alle disse fallgruvene, som bilde med tekst på har.
Anders: Er vi fornøyde med teknikker? Har vi gode eksempler på hvordan du bør gjøre det eller ikke gjør det?
Erling: Vi har snakket så mye om det nå at dersom folk ikke forstår det, så vet ikke jeg. Da må de gå inn å lese WCAG sine sukesskriterier for å se om det er bedre. Her tror jeg vi har vært tydelig. Vi kan si det enkelt, pass på at du har god nok kontrast mellom det interaktive element, og bakgrunnen. Det er det folk bør ta med seg.
Anders: Og ikke si trykk på den grønne knappen for å fortsette. Vet du hva? Jeg kom på noe. Vi har glemt den viktigste, den mest vanlige feilen med å bruke farge som det eneste signalet på at noe er interaktivt.
Erling: Det er en designtrend, dersom du skal si det jeg tror du skal si.
Anders: Det er lenker. Strek under. Det er ingenting i WCAG som sier at lenker skal ha strek under, men det vi sier er at vi må ha noe annet enn farge som indikerer at det er klikkbart. Så du har sånn formelt lov å ha streken oppå, eller midt igjen.
Erling: Eller firkant bak.
Anders: Eller å ha hva som helst. Litt som den bildediskusjonen, gjør det enkelt. Sørg for å ha strek under på lenker i brødtekst. Det er en konvensjon som er så etablert. Og du slipper å trø i disse fallgruvene.
Anders: Et argument mot å ha understrek er jo det uholdbare argumentet at det ser styggere ut.
Erling: Det argumentet er det dårligste i verden. Vi har rammer, begrensninger, som designere uansett, dette er rammer vi burde omfavne.
Anders: Dette med understrek, her har jeg litt meninger. Du har to måter å gjøre det på. Eller, tradisjonelt sett har vi to, og det er å bruke text decoration underline i CSS. Og du har òg mulighet til å bruke border bottom. Grunnen til at vi har brukt border bottom av hensyn til uu, er at du kan øke avstanden mellom teksten og linjen, som gjør at ikke linjen ødelegger for lesbarheten, som gjør at bokstavene går inn i hverandre, som er et viktig grep for for eksempel dyslektikere. Jeg synes det ser bedre ut. Og du kan ha forskjellig farge på border og tekst. Så hvis du har høy kontrast mellom bakgrunn og tekst, så trenger ikke linjen å ha like høy kontrast. Dette er et grep som BBC og NRK var tidlig ute med å bruke. Nå er det mange flere muligheter med CSS 3, til å håndtere dette med text decoration egenskaper. Jeg er ikke helt oppdatert på om border bottom er den beste praksisen. Burde kanskje ha sjekket dette ut. Jeg heller mot det. Jeg tror faktisk at NRK og BBC gjør dette fortsatt. Om det er fordi at nettleserstøtten for de nye CSS-egenskapene ikke er god nok, det vet jeg ikke, der må jeg melde pass. Du har lov å justere ned litt på kontrast, og øk gjerne avstanden.
Erling: Gjelder det samme her som på fokus, altså bruke du default browser styling, så er det ikke brudd på suksesskriteriene. Det er jo default med text decoration underline.
Anders: Helt riktig.
Erling: Når vi snakker om design og om ting ser fint ut. Når du bruker border, hvordan er det med after. Det går litt på det samme som border, det gir ikke mer informasjon til skjermlesere og slik. Derfor kan du bruke after til å gjøre lignende. Kombinasjonen av border og after eller before gjør at du kan gjøre mye stilige ting. Du kan ha bakgrunnsfarge, du kan animere det, og lignende. Bare pass på kontrasten der òg. Hvis du har noe som går opp bak, for eksempel, så må du fortsatt ivareta kontrasten på teksten.
Erling: Det er morsomt hvor mye vi kan snakke om så lite.
Anders: Ja, når jeg begynte å forberede meg til denne episoden tenkte jeg at denne er plankekjøring, dette går fort, dette snakker vi om i fem minutter.
Erling: Så kan vi bruke mye tid på ris og ros.
Anders: La oss komme oss videre.
Anders: Må du dette, Erling?
Erling: Ja, Anders, tror jeg at jeg sier. Svaret er i de fleste tilfeller. Men det er du som kan dette.
Anders: Du òg kan det.
Anders: Både det som går på bruk av farge og kontrast, og det som vi snakket om innledningsvis, om å skru av lyden, det er A eller dobbel A, så det må du forholde deg til. Det som går på kontrast på ikke-tekstlige elementer, det er en del av WCAG 2.1, som vi ikke har fått inn i den norske forskriften enda, men som er på vei. Det er bare god brukervennlighet. Det er ingen grunn i verden å ha lite kontrast på ikonene dine i menyen. Du har lov å gjøre det, hvis du har tekst i tillegg som har godt kontrast, hvis det er bare et støtteelement.
Erling: Tenk på brukeren.
Anders: Dette med bakgrunnslyd, det er trippel A, det må du ikke tenke på. Vi har lov i dag, å lage podkast på toget uten å …
Erling: Selv om det er mindre enn 20 decibel forskjell på forgrunn og bakgrunnslyd.
Anders: Og dette med kontrastkrav syv, er jo òg trippel A. Det er en anbefaling. Noe å strekke seg etter.
Erling: Men du ikke bot.
Anders: Arrester meg gjerne, men jeg tror at både Apple og Google sier at man skal strekke seg etter syv, men bruk lavere der du må.
Erling: Her jeg har gått i mange år og alltid higet etter syv, fordi jeg følte det var en skulle ha, og det er først nå for et par år siden jeg ble gjort oppmerksom på du er i henhold til WCAG hvis du har 4,5.
Anders: Der er du unik. Min oppfattelse er at folk higer etter 4,5. Med én gang folk når 4,5 er det ferdig, da er de fornøyde, det er universelt utformet.
Erling: Det kan godt være at designene mine har blitt dårligere de siste året fordi jeg har akseptert 4,5 i kontrast. Interessant.
Anders: Over til ris og ros.
Erling: Favorittsegmentet. Her kan vi snakke om konkrete ting, snakke drit om folk. Snakke bra om folk. Ikke folk. Løsninger.
Anders: Vi begynner med ris, slik at vi avslutter med noe positivt. Innenfor det å bruke farge feil, til å kommunisere en gitt informasjon, der er det ikke så mange eksempler. De fleste trør i salaten i diagrammer, men det med kontrast, der er det mange som synder. Spesielt dette med tekst over bilde, der er det drøssevis av eksempler. Det er ikke så mange eksempler lengre på brødtekst som har lav kontrast, eller navigasjon og knapper og sånn.
Erling: Der begynner folk å skjønne.
Anders: Det er litt fordi, det kontrast blir forbundet med universell utforming. Ett eksempel som jeg kom over. Jeg fikk litt snøabstinenser på slutten av vinteren, eller våren, hadde vært litt for lite i snøen. Jeg ville ta meg en helgetur til Sirdal, og sjekket hotellet i Sirdal, som var ett alternativ. Jeg har ei hjemme som foretrekker hotell foran andre overnattingsalternativer, som telt for eksempel.
Erling: Jeg holder med henne i det.
Anders: Da kom jeg inn på hotell Sirdal, og der var for eksempel telefonnummeret skrevet med hvit på veldig lys grønn bakgrunn. Jeg tror jeg målte kontrasten til 1,6 eller 1,7.
Erling: Altså ikke 4,5.
Anders: Veldig langt ifra. Så her vil jeg komme med en påstand. Her er det en designer som ikke at telefonnummer er viktig informasjon for folk å se. Her er en designer som har sittet på den store, fine skjermen sin og tenkt at dette var en fin, nøytral grønnfarge. Det ble ro i sjelen min når jeg så hvor fint den grønnfargen …
Erling: Jeg hører ikke han eller hun som har designet dette lytter på.
Anders: Jo! Det håper jeg fordi da tenker den personen seg bedre om neste gang. Det er ganske uvanlig faktisk. Dette er ikke en feil, du ser at nettstedet er moderne og det er designet av folk som …
Erling: Vet hva de gjør. Men burde vitet bedre.
Anders: Så en liten ros til hotell Sirdal.
Erling: Ros? Ris!
Anders: De kjører òg rett under 7 på brødteksten, det er ganske uvanlig.
Erling: De bryter ikke sukesskriteriet. Men det som er så essensielt. Dette feiler folk sjeldent på.
Anders: Ja, brødtekst eller mengdetekst.
Erling: De skjønner intuitivt at dette er informasjon som bør være lett å lese. Det er ofte lettere å lese med god kontrast.
Anders: I tillegg har de uvanlig liten tekst. Det er ikke direkte et brudd, men det er en utgått designtrend, at mindre tekst er finere enn stor tekst.
Erling: Heldigvis.
Anders: Det jeg kom på er at faktisk kan for mye kontrast òg være negativt.
Erling: Fortell.
Anders: Hvis kontrasten er for hard, har bokstavene lettere å samle seg for dyslektikere. Så det er anbefalt å skru litt ned. Ikke null på F, eller svart på hvit. Ha gjerne godt over syv.
Erling: Ikke full, ikke maks.
Anders: Jeg har en sjekkliste jeg bruker, med en anbefaling for dyslektikere, jeg kommer ikke på den anbefalingen nå.
Redaksjonell kommentar: Referansen til denne anbefalingen er fjernet, og vi finner ingen vitenskaplige undersøkelser som underbygger denne påstanden.
Anders: Litt til hotellbransjen, og vi nevnte SAS. På alle hoteller har du en bestillingsfunksjon, med noen felter.
Erling: Dette er kjernefunksjonaliteten deres.
Anders: Ja, det er jo det. Hvertfall fly, der kan du ikke ringe. Til hotell kan du ringe.
Erling: Hvis du klarer å lese telefonnummeret.
Anders: De fleste har en datovelger, det er blitt en standard. Det er få datofelter som nå ber bruker om å skrive inn datoen med ren tekst, med de fordelene og ulempene det har. I alle de datovelgerne jeg sjekket så var det ni av ti, de aller fleste, bruker utelukkende farge til å signalisere hvilke datoer som du ikke kan velge, enten fordi de er booka, eller at de er bakover tid. Du kan jo ikke bestille et hotell i går. Alle datovelgere bruker farge for å indikere dagens dato, og for å indikere dato du har valgt. Her er det mange typer informasjon, og alle bruker kun farge. Så det er en generell ris. Her testet jeg òg, som med fokus, så har jo nettleseren sin egen dato. Det vil si at dersom du ikke putter inn en egen javascriptbasert datovelger selv, så gjør nettleseren det for deg, hvis du har brukt riktig type på feltet. Det skal vi snakke om i en annen episode.
Erling: Har vi ikke snakket om det?
Anders: Jo, i episode tre. Så du har en date og da kommer for eksempel Chrome opp med sin egen datovelger, og de òg synder på dette. På samme måte som de kan synde med den blå kantlinjen sin.
Erling: De som lager nettlesere, må de fylle WCAG?
Anders: Nei, de har sine egne regler som heter UAAG.
Erling: Hva det står for?
Anders: User Agent Accessibility Guidelines.
Erling: Ja. Kult.
Anders: Du har tre sett med retningslinjer. WCAG er jo det vi snakker om, og som alle kjenner til. Det er jo mange flere som lager nettsider enn som lager nettlesere. Og så har du òg det som heter. Ehm. Nå sporer vi av igjen. Det som heter ATAG som står for Authoring Tool Accessibility Guidelines. Og authoring tool kan være et CMS eller et sosialt medie.
Erling: Så et admingrensesnitt, grenesnittet til Wordpress for eksempel må fylle, hva kalte du det, ATAG, ikke WCAG. Eller begge deler?
Anders: Grensesnittet må fylle ATAG men de må sørge for at koden som spyttes ut må være i henhold til WCAG.
Erling: La oss dra det inn til ris og ros igjen. Nå har vi gitt ris til Hotell Sirdal. Vi har rist generelle datovelger.
Anders: Der må jeg bare si, at den mest åpenbare løsningen på datovelger er jo å utheve, bolde teksten på den datoen du er på.
Erling: Det skal ikke mer til.
Anders: Da har du brukt to virkemiddel. Over til ros. Vi er fortsatt i hotellbransjen. Det er ingen jeg trekker frem nå som er perfekt, de har gjort noe rett. Vi tar de frem som ros, fordi det finnes god eksempler på universell utforming.
Erling: Hvem er det vi skal rose.
Anders: Jeg har plukket ut tre hoteller.
Erling: Hvor lenge skal du sitte her, skal vi sitte her i to timer til?
Anders: Vi har jo sagt at dette er det kjekkeste å snakke om. Thon Hotell. I hovedmenyen, de har en blå hovedmeny, en venstremeny. Veldig fin. De har brukt både tekst og ikon. Samme kontrast på begge. Og så har de òg i tillegg til nettleserstandarden, den blå kantlinjen, så har de òg økt konstasten på fokus. Så her har designeren tatt et bestemt valg. Her vet vi at vi har en kantlinje, men den kan være å se siden vi bruker blåfarge, så der øker vi kontrasten i tillegg. Tommel opp for Thon Hotell. Så kom jeg over Nordic Choice Hotels. Generelt sett er det bra, tydelige lenker og god kontrast. Hvis du går inn på Nordic Choice Hotels så vil du finne ting med dårlig kontrast, men generelt sett veldig bra. Moderne og fint. Til slutt vil jeg trekke frem, jeg letet ganske mye før disse dukket opp, De Historiske Hotell, som òg er en hotellkjede. De hadde to ekstra virkemidler i datovelgeren sin. De hadde en kantlinje med avrundede hjørner.
Erling: På valgt dato, eller dagens dato?
Anders: Det husker jeg ikke nå. I tillegg brukte de en liten trekant nede … De brukte den runde kantlinjen på den dagen du har valgt, og en liten trekant nede i hjørne på dagens dato. Da har de brukt design og gemetriske figurer på å formidle en forskjell i informasjon. Det er veldig bra. Selv om du nå spør meg hva som var hva, og jeg ikke husker det, så i konteksten når du bruker den, så forstår du det, for den ene vil endre posisjon, og den ene vil stå fast og du skjønner at det er dagens dato. Det er er litt herlig, her har folk sett at den standard jeg får av nettleseren er ikke god nok. Den jeg får av biblioteket mitt, den er heller ikke god nok. Vi legger på litt ekstra virkemidler som gjør det bedre å bruke. Det blir jeg glad av, i min uu-sjel. Tommel opp til De Historiske Hotell.
Anders: I dagens aside har vi vært så heldige å få med en gjest. Med meg på tråden har jeg Ingeborg Tande Johnsen. Hei Ingeborg!
Ingeborg: Hei!
Anders: Veldig kjekt at du ville være med. Vi har jo vært ute på internett at sagt at folk som har lyst, kan bidra, og du tok kontakt, det var veldig kjekt. Da har jeg lyst å få vite litt mer om, hvem er du?
Ingeborg: Jeg heter Ingeborg Tande Johnsen og jeg jobber i et design- og teknologibyrå som heter Halogen i Oslo. Jeg jobber da til daglig med konsept og universell utforming, og har delvis ansvaret for universell utforming i Halogen.
Anders: Hvordan jobber dere med universell utforming der, må du passe på at det blir tatt med i alle prosjekter, eller kommer det av seg selv?
Ingeborg: Nei, det kommer ikke helt av seg selv, jeg må gå gjennom og se gjennom. Jeg er opptatt av at universell utforming må være med i starten av et prosjekt, og ikke i midten eller slutten.
Anders: Så da må du godsnakke med selgere og prosjektledere?
Ingeborg: Vi har onboarding når vi får nye ansatte, og da prøver jeg å lære dem at det skal være en naturlig del av prosessen, likestilt med design og kode.
Anders: Veldig bra. Blir det fulgt opp?
Ingeborg: Ja, jeg føler at det gjør det.
Anders: Det er som du sier, det er viktig å få det med i starten, hvis ikke kan det bli dyrt. Det er ikke noe magisk pulver du kan drysse på rett før lansering, som mange kanskje tror.
Ingeborg: Én ting er at det blir dyrt, en annen er at folk ikke får til å bruke det.
Anders: Det er jo et enda viktigere poeng. Nå har jo du og jeg varmet opp litt før vi kom på luften. Du kjente ikke til begrepet universell utforming før du studerte i 2014.
Ingeborg: Jeg studerte fra 2012 til 2014. Etter 2014 ble jeg kjent med begrepet.
Anders: Det var bare begrepet, for konseptet hadde du kjennskap til?
Ingeborg: Ja, altså, jeg har CP og sitter i rullestol. Bruker elektrisk rullestol til daglig. Trenger hjelp til alt praktisk. Jeg har 24 timers bistand, og dermed har jeg jo en del utfordringer som kanskje ikke andre har, og jeg er avhengig av at ting er universelt utformet.
Anders: Hva er viktig for deg på digitale tjenester?
Ingeborg: At det er ryddig og brukervennlig, det høres litt selvsagt ut, men jeg har motoriske vansker og bruker lengre tid, så for eksempel å fylle ut skjema, da er det greit at det er så ryddig som mulig. Tid, det er viktig at det ikke er noe tidsbegrensning på hvor lang tid jeg kan bruke på å skrive.
Anders: Er det noen tjenester du kommer på som har dårlig tid?
Ingeborg: Det har blitt bedre nå, men bank hadde dårlig tid i en periode. Det har blitt mye bedre. Og så er det typisk når du skal bestille billetter, spesielt, da er det ikke nødvendigvis dårlig tid, men det er kronglete med lange menyer, mye informasjon, du skal skrive inn alt og være sikker på at alt er riktig, og så skal du betale, og så må du ofte verifisere, og innen du får gjort det så er tiden løpt ut på nettsiden. Det er mange ganger jeg må gjøre det om igjen to–tre ganger for å få det gjort eller verste fall ringe inn for å få bestilt billett til konsert eller noe slikt.
Anders: Er det noen tjenester som er bra eller som du vil gi litt ris til?
Ingeborg: Jeg har en tjeneste som er bra, eller som har blitt bedre, er Oslo Kino. Eller Noridsk Film Kino. Der var det en del kronglete før, men det har blitt bedre, fordi de har fokusert på det du skal gjør når du er inne, nemlig å bestille kinobilletter. Tidligere var det slik at du måtte skrive inn e-postadresse og sånn fast, når har du muligheten til å autofylle. Det kan du gjør som en automatisk innstilling. Nå får du spørsmål om du har lyst å autofylle på nettsiden hvis du har bestilt tidligere. Det gjør at du sparer tid.
Anders: Det var gøy at du sa, fordi i forrige episode, som du ikke har hørt enda, den er ikke på luften når vi spiller inn denne, så snakker vi om autofyll, så det var godt å høre at Oslo Kino har gjort dette bra.
Ingeborg: Det prøver hvertfall.
Anders: Så er det sikkert forbedringspotensial der òg.
Ingeborg: Det er det hos de fleste.
Anders: Denne podkasten og et verk som du står bak, har litt til felles, og det er at vi prøver å spre det glade budskap om universell utforming. Vi lager podkast, meg og Erling. Men du har laget en liten ebok om uu. Fortell.
Ingeborg: Den heter EasyAll, den er gratis, den kan du laste ned så lenge du bruker den. Det er mitt største ønske, at den ikke blir lest én gang og så lagt bort, men at det blir et oppslagsverk. Det er derfor jeg har kalt den en praktisk miniguide i universell utforming. Med praktiske eksempel.
Anders: Jeg har lest den, og der står det blant annet litt om det vi har snakket om i dag, kontrast. Hvilke andre tema tar du opp?
Ingeborg: Jeg tar opp innhold, at du må skriv godt innhold som en del av universell utforming. Det tenker folk at hører til design og kode. Og så er det fokusmarkør, det vi må passe på, som ofte går i glemmeboken når vi snakker om universell utforming. Og at kundene har et ansvar å spør etter universell utforming.
Anders: Opplever du at det er mange som føler på det ansvaret og tar det ansvaret?
Ingeborg: Jeg føler at folk begynner å bli mer og mer bevisst på det, samtidig så trenger vi nok flere og flere påminnelser på at det bør bli gjort. Hvertfall nå som flere og flere tjenester blir koblet sammen, det fysiske og det digitale, da er det ekstra viktig.
Anders: Hvis våre lyttere har lyst å lese denne eboken?
Ingeborg: Den finnes på Issuu Digital Publishing. Jeg kan eventuelt lenke til den i beskrivelsen.
Anders: Vi legger episodelenker på alle episodene, så du vil finne lenke til EasyAll på universell utformet no. Hvis folk vil ta kontakt med deg for å høre mer om hva du gjør, hva du kan hjelpe med?
Ingeborg: Du kan ta kontakt på ingeborgtandejohnsen.no som er nettsiden min. Eller ingeborg@ingeborgtandejohnsen.no.
Anders: Da takker jeg for denne gang, veldig kjekt at du ville være med. Jeg håper at du har lyst å være med igjen, det er jo fortsatt 20 episoder som skal lages. Du er hjertelig velkommen til å bidra.
Ingeborg: Takk!
Erling: Det ble en lang episode, jeg trodde den skulle bli kort.
Anders: Jeg trodde det.
Erling: Det var kjekt.
Anders: Jeg sa jeg skulle være tidlig hjemme i dag. Jeg sa vi skulle snakke om noe som kommer til å gå fort.
Erling: Det er engasjement, det er mange detaljer. Dette er typisk ting som vi må bry oss om når vi lager løsninger, ofte, for diskusjonene er det mange av, og vi må ta dem. La oss oppsummere. Hva skal vi huske?
Anders: Mål nå kontrasten. Begynn tidligere enn det. Eller, nå skal vi oppsummere, ikke innføre noe nytt. Eller, jeg innfører noe nytt. Begynn å definere en fargepalett som har god kontrast, slik at du slipper å justere hver farge hver gang du skal bruk den.
Erling: Godt tips, Anders.
Anders: Husk tilstander, at en lenke ikke alltid ser lik ut, eller et interaktivt komponent ikke ser likt ut. Det letteste. Ikke spill lyd automatisk, det er veldig irriterende.
Erling: Neste episode, da skal vi snakke om …
Anders: Stor tekst!
Erling: Spennende. Jeg har ikke forberedt meg til den episoden, og lurer på hvordan vi kan snakke en hel episode om stor tekst?
Anders: Nå har vi jo klemt inn litt flere suksesskriterier i den òg.
Erling: Da er jeg spent på hva du har klemt inn, for det er du som har strukturert dem.
Anders: Jeg tror ikke vi skal ha problemer med å snakke om stor tekst heller. Nå sitter vi i to stoler, vi ser på hver vår skjerm, én av oss har forstørret teksten. Neste episode, vi skal snakke om stor tekst.
Erling: Vi får energi av tilbakemeldinger. En bekreftelse på at folk har hørt på oss. Tips og trikt til hva vi kan gjøre. Mer av det! Send til hei@universellutformet.no.
Anders: Der vil jeg si at jeg ble litt skuffet i starten over hvor lite tilbakemeldinger vi fikk.
Erling: Å ja?
Anders: Jeg hadde forventet mer. Jeg er ikke så erfaren i dette podkastgreiene. Men så slo det meg hvor mye jeg hører på som jeg aldri gir tilbakemelding på.
Erling: Den barrieren er stor. Derfor må vi understreke det og presisere det og fortelle hvor stor pris vi setter på det.
Anders: Vi kunne ha løyet nå og sagt at, dersom dere vil at vi skal fullføre denne serien, så gi oss tilbakemeldinger, men vi kommer til å fullføre uansett.
Erling: Dette skal vi gjennom! Og jeg har mange ideer til ting vi skal spinne videre på etter dette. I dag skal vi bare gjøre én ting til, å takke for oss. Jeg er Erling fra Okse.
Anders: Og jeg er Anders fra Webstep. Tusen takk for at du hørte på i dag.
Episodelenker
- Ingeborg Tande Johnsen
- NRKbeta: Slik gikk det da jeg omgjorde fargene på mobilen til kjedelige gråtoner
- The Design of Everyday Things
- Adobe Blog: Why I Don’t Believe in Empathic Design
- Constrast ratio
- Apple: Color and Contrast
- Google: Fargekontrast
- Sirdal Høyfjellshotell
- Thon Hotels
- Nordic Choice Hotels
- De Historiske Hotel
- EasyAll – en praktisk miniguide i universell utforming