6

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!

Varighet: 91 min Slippdato: 12. juni 2019

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.

E: Da er vi på den sjette episoden, Anders. Nummer seks av 26. Veldig bra. Godt jobbet.

A: Godt moment.

E: 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?

A: Ja.

E: Men, som vi har gjort på det andre episodene, hva står 1.4 for?

A: Vi er så langt på 1, det som alle episodene så langt har dreid seg om, som handler om mulig å oppfatte.

E: Perceivable.

A: 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.

E: 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.

A: 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.

E: Hva er de seks suksesskriteriene.

A: De som vi har valgt ut for denne episoden.

E: Ja, for vi har jo strukturert dette etter beste skjønn.

A: 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.

E: Det er ikke tilgjengelig, Anders.

A: Vi må ha god lyd her, så da må jeg snakke rett i mikrofonen, nesten spise opp mikrofonen.

E: Og så den siste?

A: Som også handler om kontrast. Den er kjekk, den handler om kontrast på det som ikke er tekst.

E: 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.

A: Du skal ikke spille lyd av automatisk.

E: Det er så godt at dette er en suksesskriterie.

A: Det vil si, du har lov å spille lyd automatisk hvis det er mulig å stoppe den eller den ikke varer mer enn tre sekunder.

E: Du kan hive inn en høy gong, og ikke bryte suksesskriteriet?

A: 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.

E: Du må aktivt sette på lyden. Det var slik i en liten periode, at lyden òg ble spilt automatisk.

A: 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.

E: Det går ikke bare på universell utforming, det går på god opplevelse, altså UX. Men, 1.4.7, hva går den ut på?

A: Den går på bakgrunnslyd.

E: Det er en trippel A. Litt sær, men gir mening.

A: 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.

E: Står det spesifikt?

A: 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.

E: Dette er det vi skal si om lyd i dagens episode.

A: 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.

E: Det er ikke slik at alle musikkvideoer i hele verden bryter denne.

A: Nei. Dette handler om tale.

A: 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.

E: Og i dagens ris og ros? Hva skal vi snakke om der?

A: Da skal vi se på hotellbransjen.

E: Jeg tror ris og ros er favorittsegmentet mitt. Det er så kjekt å grave ned i alt det folk har gjort feil eller gjort bra.

A: 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.

E: Apropos det, la oss gå gjennom det vi må gå gjennom.

A: Ja, essensen.

E: Disse retningslinjene, hvorfor har vi dem.

A: 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.

E: 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.

A: Jeg trodde det var 10. Men vi har ikke sjekket det opp.

E: Rundt der, en gangske stor andel.

A: Det er vanligst hos menn, og det vanligste er rød-grønn-fargeblindhet.

E: Hvorfor har vi disse suksesskriteriene?

A: Ikke alle kan skille farger og ikke alle ser godt.

E: Nå er vi ferdige med det som går på lyd, nå ser vi på kontrast på visuelle ting.

A: Det legger vi bak oss.

E: Det vi fokuserer på her er folk som ikke kan skille farger og ikke har godt syn.

A: Svaksynte eller fargeblinde.

E: 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.

A: 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.

E: Du ønsker ikke å fremstå som en av de som sjekker mobilen som det første du gjør.

A: 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?

E: Det hadde vært dritt, da hadde du hatt en funksjonsnedsettelse i det du skulle skru av.

A: 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.

E: Og den innstillingen er en tilgjengelighetsinnstilling.

A: 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.

E: Design of everyday things. Har du ikke lest den. Jøss.

A: Jeg er jo glad i å lese, men. Den har du lest?

E: Jeg har lest den, ja. Hvorfor har ikke du lest den?

A: 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.

E: Da begynner du jo å få litt funksjonsnedsettelser.

A: Han sa nå, at han alltid gikk rundt med lommelykt for å få bedre kontrast når han skal lese på ting og tang.

E: 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.

A: Jeg har bemerket meg at det er en litt forbigående trend, at lav kontrast er finere enn høy kontrast.

E: 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.

A: 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.

E: 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.

E: Hvem andre produsenter?

A: 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.

E: 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.

A: 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.

E: 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.

A: 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.

E: Du kunne gjøre alt det du kan gjøre i Word, nærmest.

A: 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.

E: Det er det, alle har et ansvar.

E: Hvordan kan vi ivareta disse suksesskriteriene?

A: 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å.

E: Og alfakanaler det er at det blir gjennomsiktig, som er en felle i denne verden.

A: 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.

E: Det er det lyseste som gjelder. Eller mørkeste òg?

A: 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å.

E: Nyttig informasjon.

A: 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.

E: 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.

A: 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.

A: 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.

E: 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.

A: De detaljene tar vi ikke.

E: Det kan du gå inn å lese om.

A: 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.

E: 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.

A: 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.

E: 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?

A: 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.

E: Hva er en tilstand?

A: Innenfor CSS så har du mange, mange tilstander. La oss begynne med den som flest kjenner til, det er jo hover.

E: Hva er det?

A: Det er når du har en musmarkør og beveger den over et interaktivt element, så får du en hover-effekt.

E: Den endrer utseende.

A: Det gjelder kun de som bruker mus. Den effekten der gir ikke mening for tastaturbrukere eller mobilbrukere.

E: Touchscreen.

A: 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.

E: Du skal jo fortsatt kunne lese det selv om du har muspekeren over.

A: Men det betyr ikke at du må ha høy kontrast mellom opprinnelig tilstand og hover-effekten.

E: 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.

A: 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.

E: 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.

A: 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 …

E: Her er det en stor sjanse for at jeg har misforstått.

A: 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.

E: Fokusstylingen vil du se hvis du bruker tastaturet, forhåpentligvis, hvis du har gjort det riktig.

A: Hvis du ikke har tullet det til

E: 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?

A: 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.

E: I nettleseren er det en default styling på fokus. Er det alltid blå?

A: Nei, Chrome har blå. Microsoft bruker gjerne gult.

E: Det er uansett en ganske tydelig default styling i nettleseren.

A: 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.

E: Så med mindre du fjerner fokuset så er du i henhold til WCAG?

A: 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.

E: For da er vi tilbake til føkk WCAG. Nå er det brukeren som er viktig.

A: Ha tungen beint i munnen, fokuser på fokus. Der skal kontrastkravet være tre.

E: Er det tre der ja? Interessant.

A: 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.

E: Eller et interaktivt element.

A: 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.

E: 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.

A: 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.

E: Sier WCAG noe om det, altså at visited skal være stylet annerledes?

A: 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 …

E: WCAG sine suksesskriterier.

A: Men du har brutt grunnideen til webben. Fra dag én så var alle lenker i alle nettlesere blå ubesøkte og lilla besøkte.

E: Stemmer.

A: Nå sier jeg ikke at vi skal ha blå lenker og lilla besøkte.

E: Kontrast mellom blå og lilla her, hvis du ikke ser farger, og ser de to.

A: For her har vi lav kontrast mellom de to.

E: 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.

A: 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 …

E: Eller bakgrunn, kunne være mulig.

A: Ok, godt poeng. Kjøper den.

E: 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.

A: Nei, og kanskje er jeg gammeldags og sutrete, men …

E: 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.

A: Hvis Wikipedia hadde samlet utseende på besøkte og ubesøkte lenker, så hadde de ødelagt brukervennlighet, eller forverret den.

E: Wikipedia var et veldig godt eksempel der.

A: 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.

E: Dekorative element.

A: Det gjelder kun de som du trenger å bruke.

E: De som gir mening, eller har en funksjon.

A: Det som har en funksjon.

E: Det er en viktig presisering. Du kan ha lyse element i designet, som ikke har god nok kontrast.

A: 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.

E: De skal ikke ta fokuset bort fra det viktige.

A: Det ble en lang drøs om tilstander.

E: Men det er jo kjekt.

A: 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.

E: Fordi de er røde og grønne.

A: Det man gjør da, spesifikt for linjediagrammer. For hvert datapunkt, så har du en geometrisk figur.

E: En firkant, pil eller trekant.

A: Det er noe de fleste diagramverktøy med respekt for seg selv, har en funksjon for. Da er det opp til designeren å spesifisere dette.

E: Og gjerne innholdsprodusentene, i dette tilfellet, som skal styre innholdet i grafen. I stolpediagram da?

A: Da må du bruke mønster.

E: Skraverte diagonale linjer. Eller?

A: Du kan bruke kryss, du kan bruke diagonale linjer den ene veien, den andre veien, horisontale linjer, vertikalen linjer, mønster.

E: 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.

A: Ja, bruk farge for all del!

E: Det øker brukervennligheten.

A: Ja, farge er helt topp. Det var litt om diagrammer. Så skal vi ta noen eksempler på hvordan du feiler med dette.

A: Når feiler du med kontrast og fargebruk?

E: Når du har for lav kontrast. Eller når du bruker farge for å skille informasjon. Kun.

A: 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.

E: Det stod på et skilt?

A: 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.

E: Interessant.

A: 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.

E: Det er spesifikt det å referere til rødfargen, det er ikke det at det er rød?

A: 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.

A: 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.

E: Eller unngå å ha tekst på bildet, i det hele tatt.

A: 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.

E: De gjør mye dårlig i denne verden, men akkurat her gjør de det bra.

A: Nå fikk jeg litt deja vu, har vi snakket om dette før?

E: Nei, dette nevnte du på månedsmøte hvor du holdt et foredrag om universell utforming.

A: 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.

E: 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.

A: 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.

E: Tenker du på bøter?

A: Jeg tenker på tiden vi bruker på å tilpasse bilder.

E: 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.

A: Er vi fornøyde med teknikker? Har vi gode eksempler på hvordan du bør gjøre det eller ikke gjør det?

E: 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.

A: 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.

E: Det er en designtrend, dersom du skal si det jeg tror du skal si.

A: 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.

E: Eller firkant bak.

A: 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.

A: Et argument mot å ha understrek er jo det uholdbare argumentet at det ser styggere ut.

E: Det argumentet er det dårligste i verden. Vi har rammer, begrensninger, som designere uansett, dette er rammer vi burde omfavne.

A: 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.

E: 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.

A: Helt riktig.

E: 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.

Denne tekstversjonen er under arbeid. Dette er det vi har foreløpig.