UU-podcasten:Universelt utformet

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: Før vi begynner dagens episode, Anders, så må vi fortelle om en e-post som vi fikk fra Eva Kirkevik. Hva er det hun sier?

Anders: Hun sier «ey, ikke skjul emojier».

Erling: Hun er faktisk blind, og bruker skjermleser, og reagerte på vår anbefaling til Kode24.

Anders: Vi var ikke klar i anbefalingen om at alle emojier skal skjules. Vi sa at en kunne vurdere, på de som ikke var så veldig meningsbærende.

Erling: Men, Eva sier, ikke gjør det. Vi vil gjerne få med oss emojier.

Anders: Det er kjekt. Vi liker det. Det setter en stemning.

Erling: Da er vi tilbake, Anders.

Anders: Hei Erling.

Erling: Fjerde episode. Dette er gode greier. Nå er vi inne i en flyt, føler jeg. Strengt tatt 22 episoder igjen, men vi er i en flyt.

Anders: Det er et moment.

Erling: I dag skal vi snakke om 1.3.2, 1.3.3 og 1.3.4.

Anders: Ja, mye tall.

Erling: Men alle er under 1.3, samme som sist. Hva står 1.3 for?

Anders: Det står for mulig å tilpasse. Det sier kanskje ikke så mye, men det går på at en skal huske på at innhold kan presenteres på forskjellige måter. Ikke alle ser eller oppfatter en nettside likt. Det skal du ta høyde for. For eksempel kan folk fjerne eller tilpasse eget stilark, egen CSS. Da skal ikke informasjon gå tapt.

Erling: Hvorfor finnes disse retningslinjene?

Anders: De finnes fordi innholdet skal gi samme mening, som jeg sa, hvis CSS-en forsvinner eller redigert. Og også dersom innholdet blir lest av en skjermleser, som vi har snakket om tidligere. Det går litt på det samme som vi snakket om i siste episode, 1.3.1, der vi snakket om at innholdet skal være kodet som det ser ut som.

Erling: Dersom vi går raskt gjennom 1.3.2, 1.3.3 og 1.3.4, hva er det?

Anders: Først og fremst vil jeg si at de tre vi snal snakke om, de har få fellestrekk, så grunnen til at vi har slått dem sammen til én episode er fordi de er små eller ikke så viktige lengre. Vi prøver bare å koste under litt.

Erling: De er fortsatt viktige på sine måter, hvis de feiler, men det er ikke så ofte at de feiler.

Anders: De er ikke så aktuelle. Hvis vi kort oppsummerer, så er 1.3.2 meningsfull rekkefølge på innholdet. Hva skal vi si? Hvis du har en bok, river du ut en side, og putter den inn en annen plass, vil det bli vanskelig å lese den boken.

Erling: Det blir veldig vanskelig å forstå den siden du plasserte en tilfeldig plass.

Anders: Ja, hvis det ikke er noe informasjon om at det har skjedd, eller at du bør lese den siden før du leser neste siden.

Erling: Og 1.3.3?

Anders: Den handler om sensoriske egenskaper. Nå høres det kanskje litt vanskeligere ut en hva det er. Det betyr at du ikke skal henvise til former eller størrelser eller plasseringer. Og lyd er med i denne, sensoriske egenskaper, men det skal vi ikke snakke så mye om.

Erling: Og 1.3.4?

Anders: Ja, det er én av de nyere. En fersk og derfor mer aktuelle. Den handler om hvordan du holder telefonen din eller nettbrettet ditt. Liggende eller stående. Eller som vi snakket om, eller vi har ikke snakket om det i podkasten før, men portrett eller landskap.

Erling: Litt obskure begrep?

Anders: Ja, det gir jo mening. Vi er jo litt trege litt begge, så vi må tenke litt ekstra hver gang vi hører det.

Erling: Jeg må bruke en huskeregel for å huske hva som er portrett og hva som er landskap. Liggende eller stående er bedre begrep. Hvis vi skal gå litt mer inn på 1.3.2, meningsfull rekkefølge. Hva betyr det, og hvorfor har vi denne?

Anders: Det betyr å ha samme følge på koden som den visuelle rekkefølgen. La oss ta et eksempel med spalter. Tidligere da webteknologien var litt mindre moden, så hadde vi ikke gode teknikker for å lage kolonner, spesielt ikke kolonner hvor teksten flyter automatisk over i hverandre. Da brukte vi kanskje CSS float eller absolutt posisjonering. Da skjedde det, dersom du var litt ubevisst, at den spalte nummer to eller kolonne to faktisk lå foran første kolonne, fordi du stokket om for å få dem til å floate på rett plass. Selve floatingen ble brukt på en måte som ikke var tiltenkt, og fikk da litt overraskende oppførsel.

Erling: Det er ikke så vanlig nå lengre.

Anders: Så heldigvis er teknikkene som forårsaker disse feilene nesten forsvunnet.

Erling: Og 1.3.3? Sensoriske egenskaper.

Anders: Det betyr at du ikke skal henvise til en form eller plassering eller størrelse. Du skal ikke si «trykk på den største knappen under for å komme videre». Du skal ikke si «du finner søkefeltet øverst til høyre», fordi høyre gir ikke nødvendigvis mening dersom du har skrudd av CSS-en eller bruker en skjermleser. Da finnes det ikke noe høyre.

Erling: Det er bare én rekkefølge, og det er den meningsfulle rekkefølgen på innholdet. Den rekkefølgen det kommer i koden.

Anders: Her har vi noen unntak. Vi kan henvise til det som er over og under, fordi det gir mening ettersom alt er linært.

Erling: Over og under, blir det samme som før og etter. Altså, det blir i en naturlig rekkefølge av innholdet. Så vi kan si «se i lenken under».

Anders: Da bryter du ikke denne regelen.

Erling: Men som vi snakket om i første episoden, hvor vi sier fuck WCAG, hvis det ikke gir mening å si «se i lenken under», så er det fortsatt ikke greit, selv om du fortsatt følger dette suksesskriteriet.

Anders: De fleste eksemplene som er knyttet til denne 1.3.3, de er ganske teite, fordi det er sjelden at vi forklare i et grensesnitt hvordan noe skal brukes. Det hender at du blir møtt av, nei det er sjelden, en slik introduksjonsvideo eller et overlegg på en tjeneste som sier hvor du finner ditt og datt. Jeg har brukt som heter Airtable, og der ligger det en liten boks nede til høyre som gir deg visse tips underveis som er ganske greie, men det er sjelden at man må forklare et grensesnitt.

Erling: For å bryte med denne må du nesten bryte sunn fornuft. Vi har ikke funnet noen eksempler hvor dette er blitt brutt.

Anders: Vi har ikke letet så hardt heller fordi det er gammeldags.

Erling: Det er litt gammeldags, det var litt når folk var veldig kreative og ikke veldig påskrudde når de skulle lage tjenestene sine.

Anders: Men det som er en vanlig praksis som vi kanskje bør snakke litt om, det er jo ikoner. Og fontikoner er jo veldig mye brukt. Vi har snakket om emoticons og fontikoner kan være problematiske.

Erling: Det kan de.

Anders: Blant annet fordi det er bilder som du ikke kan sette en alternativ tekst på. Og hvis du bruker et bruker et fontikoner for å gi mening til noe. Hvis du har for eksempel en grønn hake for å indikere at en vare er på lager i en nettbutikk, så har ikke koden til dette fontikonet, denne bokstaven, eller tegnet om du vil, den har ingen informasjon om at dette betyr at produktet er tilgjengelig. Så det vil si at en datamaskin vil ikke forstå at produktet er tilgjengelig, selv om du har brukt et tegn som noen vil forstå. Det vil være et brudd her. Igjen, vi har ikke funnet de gode eksemplene.

Erling: Heldigvis.

Erling: 1.3.4, orientering og retning. Liggende å stående. Portrett og landskap. Den kom inn med WCAG 2.1.

Anders: Den er ny.

Erling: Det er en dobbel A? Enkel A?

Anders: Jeg tror det er enkel A. Nå er det kanskje noen som arresterer oss, vi klarer jo ikke å huske alt dette.

Erling: Men den er viktig. Fortell litt mer om den.

Anders: Den handler om at du ikke skal tvinge en retning på telefonen eller nettbrettet. Så ikke ta mulighet bort fra brukerne dine, la brukerne selv bestemme om de skal se på telefonen sin stående eller liggende. Det er jo ikke derfor vi har denne retningslinjene, fordi brukerne skal ha makten, men det er faktisk situasjoner der det er absolutt nødvendig for en bruker å ha den én retning. For eksempler dersom du har motoriske utfordringer og du har telefonen din fastmontert på en rullestol. Og du bruker rullestolen til å navigere deg, så er det dumt hvis du da inn på en tjeneste som krever at du legger telefonen ned eller motsatt.

Erling: Hvem treffer dette, Anders?

Anders: Av brukere så treffer det jo blinde og svaksynte med skjermleser, spesielt da denne rekkefølgen og disse sensoriske egenskapene hvor høyre og venstre ikke gir mening med en skjermleser. Den siste, med orientering eller retning, den treffer som har motoriske utfordringer. Enten permanente eller midlertidige. Vi skal ikke glemme at …

Erling: Det er mange som har midlertidige funksjonsnedsettelser. Det kan være meg og deg, hvem som helst. Brukket en arm. Sterkt lys. Stresset situasjon.

Anders: Når du har en baby på armen, så er det lettere å holde telefonen stående med den frie armen, enn liggende, synes jeg.

Erling: Og produsenter?

Anders: Koderne må sørge for at de ikke bruker dumme, utdaterte teknikker som float og absolutt posisjonering.

Erling: Ikke strukturer ting med tabeller og sånn tøys som vi gjorde i 2001. Da har du stor sjanse å ødelegge rekkefølgen på innholdet.

Anders: Hvis du virkelig legger vondviljen til, så må òg innholdsfolk tenke på dette, fordi du kan jo lage en tabell med bare tekst og masse mellomrom for å prøve å strukturere det med enter og kolonner og rader.

Erling: Jeg tror at som innholdsprodusent, hvis du virkelig vil, så kan du kødde til noe av dette. Men òg, som innholdsprodusent, så er du litt ansvarlig for hvor hvordan innholdet fremstår på den siden du legger det ut på. De skal kanskje holde koderne litt i hånda. Passe på at designerne ivaretar de forskjellige suksesskriteriene.

Erling: Hvordan kan vi følge disse tre suksesskriteriene.

Anders: I dag er det ganske lett, fordi her kan vi si at det å ha en naturlige rekkefølge på innholdet ditt, sørg for at du har samme på rekkefølge i koden som i den visuelle visningen. Unngå tabeller til oppsett.

Erling: Som nesten igjen gjør lengre. Det hender dukker opp gammel kode, men det er sjeldent.

Anders: Selv om du bruker tabeller til layout, så skal de tabellene være komplekse for å bryte denne rekkefølgen.

Erling: Et eksempel på hvor dette kan slå inn, som jeg kom på nå, det er e-poster, der bruker vi mye tabeller. Nå har jeg ikke eksempel på hvor dette har skjedd. Jeg tenker at det er en fallgruve du lett kan gå i.

Anders: Mulig, jeg er ikke så flink på koding av e-poster.

Erling: Det er sykt med tabeller. Celler over alt. Tro det eller ei.

Anders: Jeg vet det var slik før, men jeg visste ikke om e-posten hadde kommet litt lengre.

Erling: E-poster er fortsatt på renderingsmotoren til IE 4.

Anders: Wow.

Erling: Tenk på det, det er gammelt.

Anders: Nå tror jeg at mange lærte noe nytt, det gjorde jeg. Unngå det, prøv å styr unna absolutt posisjonering med CSS.

Erling: Det går på 1.3.2, meningsfull rekkefølge. Og 1.3.3, hvordan kan vi passe på å fylle den retningslinjen.

Anders: Ikke forklar hvordan brukerne skal gjøre ting, lag det så enkelt som mulig.

Erling: Ikke forklar ved hjelp av posisjon og form. Ikke si at de skal trykke på den rundingen til høyre. For det vil ikke alle forstå.

Anders: Ikke alle vet hvor høyre er, og det er ikke alle som er i stand til å vite hva en runding er i et grensesnitt.

Erling: Ikke sikkert de har en posisjon å forholde seg til.

Anders: Da er jo en teknikk du kan bruke er å skru av stilarket, for å se hvordan nettsiden fungerer da. Gir lenker og instruksjoner mening da? Der bruker jeg en utvidelse, et tillegg til Google Chrome som heter a Web Developer hvor det er lett å skru av ting og tang. CSS og masse annet. Veldig fint. Så nevnte vi fontikoner, prøv å unngå det så mye som mulig.

Erling: De inneholder ingen informasjon om hva ikonene er, og det er vanskelig å legge til alternativ tekst, er det rett å si?

Anders: Ja. Du kan nok teknisk sett gjør det, men jeg har aldri sett at det har blitt gjort. Du kan nok putte på en span, du kan trikse det til. Kanskje en title.

Erling: Tilhørende tekst kan hjelpe med dette. Bruk heller SVG enn fontikoner. Og så har vi 1.3.4 som går på retningene. Liggende eller stående. Landskap eller hva du kaller det.

Anders: Der har vi ikke så mange konkrete råd, det er bare å gjøre det.

Erling: Ikke lås brukeren i én retning, verken den ene eller andre.

Anders: Der har jeg tenkt litt slik, når mobilvideo tok av, så begynte jo mange å filme stående, til manges irritasjon. Det ble laget kampanjer og mye greier. Husk nå på at øynene våre er plassert ved siden av hverandre. Alle TV-er, har du noengang sett en kino stående? Den kampen har vi tapt. Folk kommer aldri til å slutte å filme stående.

Erling: Jeg tørr påstå at det ikke alltid er hensiktsmessig heller.

Anders: Nei, det er jeg enig i.

Erling: Vi ser jo at selv om en filmer stående, eller liggende. Så skal vi ikke tvinge folk til å se det i den ene eller andre retningen. En må jo fortsatt tilpasse til den skjermen det er. Hvis noen er tvunget til å ha mobilen eller nettbrett i én orientering, så skal de kunne se den filmen selv om den er filmet i den andre orienteringen.

Anders: Her har vi jo en teknikk, hvis du filmer stående og ser det liggende, så var det tidligere svarte felter, du mistet en del informasjon. Jeg vet ikke hva den teknikken heter, der en del av filmen er blitt forstørret og uklar, ved siden av, for å gi en følelse av at det er helt bilde, ikke du ikke ser et lite utsnitt.

Erling: Ja, jeg har sett mye av det.

Anders: Det er jo en måte å akseptere at folk bruker enhetene på forskjellig måte. Den teknikken er i tråd med det vi her snakker om.

Erling: Jeg må òg si, når vi først er inne på det, videoer som ble filmende i stående orientering, hvor dette blir lagt til på siden, men når du da skal se dem i ståeende, så er det lagt på en slik måte at den vises bitteliten. De har prøvd å fikse det, men gjort det værre i den ene orienteringen.

Anders: Da har du skikkelig snublet.

Erling: Men sånn er det.

Erling: Så er det store spørsmålet, må du gjøre dette, er det en lov som sier at du må gjøre det?

Anders: Ja, det er det. Det vil si at de to første vi har snakket om, 1.3.2 og 1.3.3, er begge enkel A. Det laveste nivået som vi må følge. 1.3.4 er jo WCAG 2.1 som den norske forskriften ikke har tatt inn enda. Kommer sannsynligvis i år, i 2019. Denne er en del av det europeiske direktive, så det er ingen grunn til å vente.

Erling: Og 1.3.4 er orientering, ikke tving applikasjonen eller nettsiden å være i én orientering.

Anders: La nå meg få lov å velge selv hvordan jeg vil holde min egen telefon.

Erling: Som en bitteliten sidekommentar der, på iPhone 10 for eksempel, så er det en liten busslomme, pass på at ikke noe ligger bak den. Det er ikke en retningslinje på dette, det er bare et lite tips.

Anders: Fant du på det begrepet selv, busslomme? Jeg forstod med én gang hva du mente, men jeg har aldri hørt det før.

Erling: Det er et begrep som er brukt, ikke funnet opp av meg.

Erling: Så Anders, dagens ris og ros. Har vi mye å dele ut der?

Anders: Både ja og nei. På de to første, 1.3.2 og 1.3.3, som er litt utdaterte, der har vi ikke letet så mye, og da heller ikke funnet så mye. Det henger ofte sammen. Det er fordi det er litt vanskelig å bryte dem. Arngren er jo en nettbutikk som ikke blir nevnt så ofte lengre, men det er jo et design og en kodekvalitet som er veldig lav, kan vi forsiktig si, som bryter alle regler. Alle beste praksiser som finnes. Og jeg tok en kjapp kikk for å se om jeg kunne finne noen konkrete brudd på disse suksesskriteriene, og det fant jeg ikke. Da er det ikke vits å lete videre.

Erling: Dette er suksesskriterier det er vanskelig å bryte med mindre du prøver. Vanskelig å finne ris og ros, egentlig ros til alle. Godt jobbet alle sammen! Dette er bra. Bli gjerne bevisst på det, men det skal mye til å bryte.

Anders: Men det litt kjekkere, det litt nyere.

Erling: Det som kom med 2.1, det som kom med WCAG 2.1, det som har med orientering å gjøre. Der fant vi litt. Der fant vi mye vi kan rise og faktisk bare én vi kan rose. Vi gikk inn i reiseapper.

Anders: Jeg vil si noe først der, og det er, nå sa jo du reiseapp. 1.3.4 er mye vanligere å bryte på apper.

Erling: Bra poeng.

Anders: Det er sjelden vi ser at dette blir brutt på nettsider, det er mer naturlig å lage dem helt responsive.

Erling: På en nettside må du aktivt gå inn å skru dette av, med mindre du blir bedt om å gjøre det, er det ikke noe du gjør. Som du sier har dette med nettsiders responsive natur å gjøre, nå til dags, som gjør at dette blir ivaretatt. Men i appverden, som vi snakker om nå, reiseapper, var det veldig mange som feilet. Nesten alle. Vi måtte leie lete lenge.

Anders: Jeg vet ikke hvor mange apper du lastet ned, Erling, tidligere i dag.

Erling: Jeg lastet ned og la inn kortinformasjon og hele pakken, jeg var innom Uber, innom Lyft, SAS, Kolumbus-appene, var innom NSB, som når vi har lansert denne episoden, heter Vy, 100 % Vy. Det som viser seg er at de har kun portrett modus, altså stående. Og det eneste vi fant, det er ris til alle nesten, utenom én av appene til Kolumbus, det var den som heter Kolumbus Reise. Den kunne du legge ned, og så snudde appen seg. Men det var der jeg oppdaget busslommen, og det passet jo fint i Kolumbusappen at det var busslommen som feilet. Da kuttet de av venstre del av teksten.

Anders: Og for de som ikke vet det, så er Kolumbus vår lokale reiseoperatør.

Erling: Og jeg prøvde òg en som heter, skal vi se, Skyss fra Bergen.

Anders: Sikkert Bergen og omegn.

Erling: Og den legger seg ikke. Og samme med Skyss Reise, også Bergen og omegn, legger seg ikke. Så de feiler alle sammen. I det øyeblikket WAD blir aktuelt her i Norge, altså WCAG 2.1 og 1.3.4, så er det mange kollektivoperatører som må skjerpe seg, ellers så bryter de norsk lov.

Anders: Og jeg har faktisk snakket litt om dette med en tidligere kollega av meg, Håvard Methi. Han jobber med én av disse appene som ikke ville legge seg. En app som bare vil stå. Da, dette kan jo ikke jeg så mye om, men han mente at det var veldig mye arbeid for dem å få dette til. Det er ikke bare å trykke på en magisk knapp så legger appen seg ned. For du må jo tenke gjennom alle tilstandene, alle skjermbildene og alt. Og her har du et ganske godt eksempel på at det kan være ganske dyrt og omfattende å ta en vurdering av uu-en din på slutten. Så få nå med deg kravene om stående og liggende i innledende designprosesser, så er mye gjort.

Erling: Dette treffer jo, som vi nevnte tidligere, designerne òg. Tenk på hvordan det skal se ut når det er liggende. Da har du mye mindre plass i høyden, som kan påvirke ganske mye.

Erling: Så for å oppsummere dagens episide, Anders. Kjør!

Anders: Ikke bruk fontikoner. Det finnes sikkert unntak der du kan bruke det, og som ikke bryter noe uu.

Erling: Som tommelfingerregel, det finnes bedre alternativer.

Anders: Og ikke ikke lås retningen på telefonen eller nettbrett. Ikke krev at brukeren har en bestemt retning. Det er vel oppsummeringen.

Erling: Resten er ting som folk gjør allerede. I neste episode, da skal vi snakke om de to siste inn under 1.3, altså 1.3.5 og 1.3.6. Hva går de ut på.

Anders: Disse er òg litt kjekke. Det handler blant annet om automatisk utfylling av skjema.

Erling: Interessant.

Anders: Ja, fordi jeg har faktisk oppleved flere ganger at nettleseren min prøver å hjelpe meg med å fylle ut skjemaer, men at en bommer, enten at for eksempel e-postadressen blir fyllt ut i telefonfeltet, men òg at annen type informasjon som ikke er min, men som jeg har skrevet inn, blir fyllt ut, så vi skal fortelle litt om hvordan dette med automatisk utfylling av skjemaer fungerer. Og hvordan man kan gi nettleseren en hjelpende hånd når en koder skjemaer. For det er litt å tenke på.

Erling: Det som jeg synes er litt fint med dette er at det ikke bare er bonusgreier på toppen, dette er faktisk retningslinjer i WCAG, dette går på universell utforming, dette er ikke bare en kul greie som de har lagt inn.

Anders: Jeg blir oppriktig glad når folk har gjort dette riktig, og jeg kan bare, plutselig blir alle skjemafeltene kule, og der var skjemaet ferdig. Send inn, bestill. Få pakke i posten, eller hva det måtte være.

Erling: Hvis noen har kommentarer. Hvis noen vil irettesette oss. Om noen har kommentarer på hvordan vi snakker. Om vi snakker for fort eller for sent.

Anders: Eller om vi puster i mikrofonen, eller om lydkvalitet er bra. Eller om vi gjør feil, vi sier feil. Har vi tolket ting feil?

Erling: Vi vil veldig gjerne høre det. Send en e-post til hei@universellutformet.no, så blir vi veldig glade.

Anders: Send gjerne innspill til gjester. Det kommer gjester.

Erling: Vi har ikke helt funnet ut av formen på det enda. Vi vil gjerne få inn folk.

Anders: Ja, for vi er jo inkluderende, Erling.

Erling: Det er vi! Universelt utformet. Takk for oss! Mitt navn er Erling Håmsø, jeg jobber i Okse. Mitt navn er Anders Slettebø, jeg jobber i Webstep, og jeg gleder meg veldig med å snakke med deg i neste episode, Erling. Hade!