UU-podcasten:Universelt utformet

Introduksjon

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.

Anders: Hallais Erling.

Erling: Hallo Anders. Går det bra?

Anders: Det går veldig bra. Det er en god start på helgen. Dette bruker vi helgen vår på.

Erling: Dette er fredagskvelden vår. Det er fint det. I dag, 20 episoder. Det er kjekt.

Anders: Fint tall.

Erling: Nå sjekket vi nettopp hvor mange lytt vi har. 3400. Så det er litt over 200 per episode i snitt.

Anders: Når vi tross alt snakker om noe som er ganske smalt, så er jeg veldig overrasket.

Erling: Jeg synes det er kjempekult.

Anders: Det er ikke Tusvik og Tønne.

Erling: Ganske langt derifra.

Anders: Tror ikke vi skal sette på noe reklame for å tjene penger.

Erling: Og det er ikke derfor vi gjør dette, heller. Hvis noen forbedrer noe, så er vi happy. Det er målet vårt.

Anders: Vi får tilbakemeldinger. Nå sist fra en tidligere kollega, som satt på bussen og noterte mens han hørte på.

Erling: Det varmer hjertet. Men la oss komme til saken.

Anders: Tre to.

Erling: Hva står det for?

Anders: Treen er forståelig.

Erling: Prinsipp tre, er forståelig.

Anders: Retningslinje to er forutsigbart.

Erling: Skal vi si det med én gang, jinxe det? Denne episoden blir kort. Har vi jinxet det nå?

Anders: Neeei, vi vet jo ikke hvor lang den blir, for vi har jo ikke et strengt manus. De som har begynt å høre, de vet jo hvor lang den blir. De vet mer enn oss.

Erling: Helt sant. Hvorfor blir den kort? Vi skal snakke om to suksesskriterier.

Anders: I dag skal vi snakke om sunn fornuft. Tidligere har vi snakket om noen suksesskriterier som er sunn fornuft, og det er disse to i dag. Det er så sunn fornuft at det dessverre ikke blir en ris og ros-spalte, for det er så få som feiler.

Erling: Dette ligger på mange måter i kjernen til alt som blir laget.

Anders: Nå har vi solgt det inn dårlig. Men jeg tror aside-sporet i dag blir litt lærerikt.

Erling: Jeg tror han som sitter på toget og tar notater, kan legge vekk notatboken. Her er det ikke så mye å notere. For å gå rett inn på disse suksesskriteriene. 3.2.3 er konsekvent navigering.

Anders: Det er det det er. Ikke bytt navigasjon for hver side. Eller ikke bytt navigasjonslenkene som gjentas på hver side.

Erling: Det er så enkelt.

Anders: Jeg har sett eksempler på det, men jeg klarte ikke å …

Erling: WCAG forvirrer meg på dette, faktisk.

Anders: Ja.

Erling: Men de er sikkert konsekvente, det er sikkert bare meg som ikke forstår det. Der gikk jeg i den fellen, å skylde på meg selv.

Anders: Men det skal vi snakke om WCAG, W3C og den gjengen der.

Erling: La oss ta 3.2.4 først, som vi har oversatt til konsekvent identifikasjon. Det er fordi det heter consistant identification.

Anders: Vi har ikke oversatt, vi har stjålet oversettelsen fra Difi.

Erling: Men hva betyr det egentlig?

Anders: Det betyr at elementer, eller ting, som har samme funksjonalitet, skal utformes likt, skal se likt ut.

Erling: Så enkelt. Det går på tekst. Interaktive element. Bilder, funksjoner, ikoner og så videre. I dagens aside, hva skal vi snakke om da?

Anders: Vi skal snakke om hva er dette WCAG. Vi kunne ha hatt det i første episode. Det gjorde vi ikke, vi ventet til episode 20.

Erling: Vi sa fuck de først.

Anders: Vi skal fortelle litt om hvem som står bak dem, hvordan det er rigget.

Erling: Og som sagt, ingen spesifikk ris og ros, men vi skal kanskje komme innom forskjellige eksempler.

Hvorfor?

Erling: Hvorfor har vi disse suksesskriteriene?

Anders: Fordi det er brukervennlig å ha dem, det er naturlig, en skal slippe å tenke over noe, når du har lært noe. Hvis du har brukt en nettside før, så skal navigasjonen være i samme rekkefølge, og du skal være konsekvent i måten du bruker ikoner, bilder og betegnelser.

Erling: Vi snakker ofte om konvensjoner. Her er det snakk om å skape konvensjoner i kontekst av din løsning. Du bryter ikke disse retningslinjene hvis du bryter konvensjoner.

Anders: Du får lov å finne opp ting på ny. Du får lov, i henhold til disse kriteriene, å ha en rød x på lagreknappen din, så du lenge du gjør det på alle lagreknappene dine. Det vil være dumt å gjøre det. Men hvis du har en rød x på en lagreknapp, og i en annen del av løsningen din, så har du en diskett som en lagreknapp, så bryter du. Da er du ikke konsekvent.

Erling: Av folk som bruker det, er det bare alle, eller er det noen som har utfordringer som dette treffer ekstra hardt?

Anders: Alle ville blitt forvirret hvis ting hopper og danser. Da tenker jeg ikke på animasjoner, men hvis du skal gå inn på sporten på VG og den plutselig ligger på siste plass i menyen, og av og til ligger den på tredje plass.

Erling: Eller du trykker på Om oss oppe i menyen, og når du kommer inn på Om oss, så har plutselig hovedmenyen flyttet seg til venstre.

Anders: Ja, enda verre. Og det kan vi jo faktisk finne eksempler på, på de nettsidene som er under redesign, der de tar del for del.

Erling: Ja, det er sant.

Anders: Da kan du gjerne treffe dette.

Erling: Men det er noen.

Anders: Ja, men dette med rekkefølge, er spesielt viktig for svaksynte som ser en en mindre del av skjermen, fordi de har forstørret. Hvis du skal lete etter noe, og det plutselig bytter rekkefølge, så bruker du mye lengre tid dersom du er svaksynt.

Erling: For da har du zoomet inn på en mindre del.

Anders: Og begge disse, med identifikasjon og rekkefølge, det går òg på, det er spesielt vanskelig, hvis du har litt kognitive utfordringer, og der du tar lengre tid å lære, å kjenne deg igjen.

For hvem?

Erling: Hvem må passe på dette, av produsentene?

Anders: Nettredaktørene må tenke på dette, i den grad rekkefølge på ting, og bestemme ikoner, bilder og knapper. Det kan en jo ofte. Og designerene. Akkurat her er det ikke så mye å tenke på for utviklere.

Erling: På vanlige nettsider så hjelper CMS-systemet veldig, for det bygget opp slik at man har en standard navigasjon.

Anders: Du må jo faktisk jobbe for å ødelegge dette. Du må gjøre ekstraarbeid, for å klare å bryte det. Du har som regel globale på en løsning.

Hvordan?

Erling: Hvordan kan vi påse at vi er i henhold til disse suksesskriteriene?

Anders: At du bruker konsistent med tekst og tekstalternativer på ikon. Hvis et dokumentikon alltid betyr last ned dokumentet, som det ofte gjør i en liste med dokumenter, for eksempel vilkår for en tjeneste, så har du masse forskjellige filnavn nedover, med ikon for et dokument. Da bør du ha samme alt-tekst, begynne med samme alternativ tekst, for eksempel «last ned».

Erling: Og du sier begynne med last ned, for du kan skrive «last ned» og så navnet på filen?

Anders: Ja. Men ikke bare navnet på filen. Som vi sa i første episode, du skal si noe om intensjonen med ikonet, og det er jo at du skal laste den ned. Og tenk på at når du bruker visuelle hjelpemidler, så skal de bety det samme. For eksempel en avhukning, det blir brukt på forskjellige måter, det kan betyr godkjent, at noe er i orden. Og det kan betyr at noe er inkludert, for eksempel i en produktmatrise der du sammenligner ulike produkter, så kan dette inkludert i denne produktvarianten. Det er egentlig et brudd her da, hvis du bruker like avhukninger to steder, hvor du mener forskjellige ting. Det kan være et problem dersom du har en bildebank i CMS-et ditt og du ett ikon til flere ting, og du har forskjellig tekst knyttet opp til det, så vil det kunne skje at du endrer det én plass, så endrer det seg alle plasser. Hvis du for eksempel skriver alt-tekst til en avkrysningsboks til «godkjent», og så er du ikke på en produktmatrise, så får da den som hører på disse alt-tekstene, opp «godkjent godkjent godkjent». Hva er det som er godkjent her? Fordi det er brukt som godkjent i en annen kontekst. Jeg vil jo si at dette er et grenseeksempel.

Erling: Men jeg tror at hvis folk tenker seg om, så er det nok en del situasjoner hvor en har feilet på dette.

Feiling

Erling: Når feiler vi her?

Anders: Hvis du bruker samme ikon for to ulike funksjoner, eller samme knapp for to ulike funksjoner. Et eksempel er et forstørrelsesglass for både søk og forstørring.

Erling: Men da spør jeg, vil ikke folk skjønne det av konteksten?

Anders: Jo, men det er veldig lett å gjøre det enda mer tydelig. For eksempel å vise et pluss eller minustegn inni forstørrelsesglasset når det er en forstørrelsesfunksjon.

Erling: Har du et eksempel på når dette ville blitt problematisk for noen?

Anders: Ja. Det er problematisk dersom du bruker det i samme skjermbilde og du har svaksynte som synes navigasjonen på nett nettsted er vanskelig, de ser en liten del av skjermbildet.

Erling: For de har zoomet inn.

Anders: … eller fordi de har snevert synsfelt. Og hvis de da kommer over et slikt ikon, og det er det eneste de ser.

Erling: Og de har sett det tidligere.

Anders: Ja, nå er jeg på søkefunskjonen, trykker her, og så kommer det et bilde stort. Dette er nok ikke et veldig stort problem, men det er dette som er tanken bak dagens kriterier.

Erling: Jeg synes det setter ting litt i pespektiv. Hadde du flere eksempel?

Anders: Et litt mer aktuelt eksempel med hamburger- og kebab-ikoner.

Erling: Hva er kebabikon? Og hva er hamburger?

Anders: Hamburger er tre horisontale streker oppå hverandre, ikon for meny som blir mye brukt, spesielt på mobil. Har begynt å brukes mer på større skjermer òg. Lett å gjemme komplisert navigasjon bak et slikt ikon.

Erling: Ofte latskap.

Anders: Ja, vi skal ikke ta den diskusjonen.

Erling: Brukt rett er det bra.

Anders: Men du har flere slike hamburgere eller kebaber til ulike formål i et skjermbilde.

Erling: Eller en applikasjon.

Anders: Ja, som skjer, da feiler du her. Og nå har vi ikke et konkret eksempel. I Google Chrome så er det lett, hvis du åpner devtools og litt ulike paneler, så skal det ikke så mye til å få flere slike kebaber. Nå har du åpnet Gmail. I dette skjermbildet ser vi at det er to ulike kebaber.

Erling: Med forskjellig innhold i menyen.

Anders: Og egentlig er dette et godt eksempel. Fordi det er ikke entydig hva de ulike gjør. Ja, de står på to ulike linjer, men alle er i kontekst av den e-posten som du nå har åpnet. Så hvis du er på jakt etter en menyknapp som du ikke ser i verktøylinjen, for tanken med denne kebaben, er å vise de viktigste knappene, så skjuler vi de mindre viktige knappene, for å gjøre et renere grenesnitt, et godt designvalg. Men når du gjør det to steder, så er det noen plassen som kun eksisterer bak den ene kebaben, og da blir det forvirrende. Der fant vi egentlig et ganske klart brudd på suksesskriterie 3.2.4, og det var Gmail.

Erling: Jeg vet ikke hvordan de skulle gjort det annerledes. Skulle de hatt en annen type kebab? Eller en slik hamburgermeny hvor strekene er forskjellig lengde, bare for å ha det forskjellig?

Anders: Ja, fordi hvis du hadde brukt hamburger og «mer» eller «flere valg» på den andre. Jeg sier ikke at dette er et godt designvalg, men hvis du hadde gjort det …

Erling: Hadde det ikke vært et brudd med 3.2.3 da, altså konsekvent navigasjon?

Anders: Nei, ikke så lenge så du hadde brukt kebaben samme plass på samme linje hver gang.

Erling: Det er greit. Men det er jo noe med å være konsekvent i hvordan navigeringen fungerer. Og hvis tre prikker er navigasjon for å vise resten av menyelementene, nå begynner vi …

Anders: Jeg skjønner hva du sier, begge deler er dårlig, men du ville hvertfall … ikke sikkert dette var et godt eksempel.

Erling: Jeg vet ikke. Noen av disse suksesskriteriene … Hva skulle du si, du ble så giret plutselig?

Anders: Jeg prøvde bare å spisse eksempelet litt. Hvis det hadde vært en semantisk forskjell, hvis for eksempel den ene bare var en fargemeny, farge på tekst, og så hadde du de tre viktigste fargene, og så byttet du ut den ene kebaben med «flere farger», du hadde ikke hatt noe generelt som «flere valg», så hadde det kanskje vært bedre. Forstod du forskjellen?

Erling: Ja, men jeg skjønner ikke hvorfor det nødvendigvis, for eksempel her i Gmail er det en semantisk forskjell på de ikonene.

Anders: Før du klikker på de to ulike kebabene, så skjønner du ikke hva du forventer i den ene, som du ikke forventer i den andre.

Erling: Kanskje ikke, hvis en ser grensesnittet for første gang. Dette har jo med ikonbruk og hvor tydelig det er, den jeg hovrer over nå, der svarpilen ligger, da regner jeg med at den kebabmenyen har ting som har med svar og videresend å gjøre.

Anders: Og så har du rapporter søppelpost, og den har den har du lengre oppe som en egen knapp.

Erling: Har jeg det?

Anders: Ja, den der.

Erling: Ja, OK. I stand corrected. Da er ikke semantikken på plass her.

Anders: Men det kan være en tanke bak. Men jeg tenker at vi gir oss her, det er litt vanskelig å gjøre dette radiovennlig, eller podvennlig.

Verktøy

Erling: La oss heller snakke om verktøy, hvilke verktøy kan vi bruke her?

Anders: Her er det jo å åpne kildekoden, og se om metadataene som ligger bak knapper og ikoner, er konsekvente. Du har jo nevnt brukertest.

Erling: Du spurte om forskjell på speedometerikon og klokkeikon. Forstår folk det? Klarer folk å navigere seg? Tar folk feil. Og så har vi òg designsystem, det kan være nyttig her.

Anders: Kjært barn har mange navn, designsystem synes jeg er et godt navn. Det er for å forhindre tivoli.

Erling: Hvis du har regler i bunn, hvis du kan forklare hvordan en komponent skal være, så er det større sjanse for at du er konsekvent.

Andre sitasjoner

Erling: Andre situasjoner?

Anders: Nei, dette er ren, skjær, brukervennlighet.

Erling: Folk bryter ikke dette med vilje. Og siden jeg ikke ønsker å legge inn jingle, så er det tett til neste segment.

Må du?

Erling: Bryter de loven?

Anders: Ja, de få som klarer å bryte dette, bryter loven. Begge to er dobbel A. Det er innenfor forskriften vår.

Aside

Erling: Så til dagens aside. Hva er W C A G?

Anders: Da tar vi et skritt tilbake. Vi begynner med W3C som står for World Wide Web Consortium.

Erling: Jeg har en innrømmelse. Jeg har trodd og tenkt at WCAG har stått for Web Consortium Accessibility Guidelines, ikke Web Content Accessibility Guidelines. Det gir jo mer mening.

Anders: Som en liten fakta så har W3C ingenting med W3Schools å gjøre.

Erling: Det var jo litt snodig å hive inn her?

Anders: Det er mange som blander de to.

Erling: For meg er det tydelig.

Anders: Det vet jeg mange blander. Hvis du søker på noe HTML, CSS eller Javascript-greier, så får du veldig ofte opp en artikkel fra W3Schools, og det har ingen direkte relasjon. W3C er stort, eller ikke så veldig stort, det er et internasjonalt fellesskap som består av noen ansatte og noen organisasjoner.

Erling: Er det kommersielt?

Anders: Nei.

Erling: Er det eid av noen?

Anders: Eierfordelingen vet jeg ikke.

Erling: Det er vel medlemsorganisasjoner som står bak.

Anders: Inntektsmodellen er i hovedsak inntektene fra medlemsorganisasjonene.

Erling: Hvem er med der?

Anders: Dette er ikke noe jeg har pugget, dette har jeg lest meg litt opp på nå. Det er 444 (fint tall) organisasjoner. Jeg tar et tilfeldig utvalg selskaper – Amazon, AirBnB, Apple, Baidu. Vet du hva Baidu er?

Erling: Det er Kinas svar på ganske mye, samlet.

Anders: Ja. Og jeg fant, det er mulig jeg tar feil, kun et norsk selskap, i den listen av de 444 organisasjoner, Norsk lyd- og blindeskriftbibliotek.

Erling: Veldig interessant. De ble jeg nysgjerrige på.

Anders: Netflix er med. Og for eksempel Volvo.

Erling: Hvorfor er ikke Google med?

Anders: Dette er bare et tilfeldig utvalg.

Erling: Ja, men når du tok Amazon og Apple. Så tok du ikke med Google?

Anders: De er sikkert med.

Erling: Helt sikkert. Er det masse folk som jobber der?

Anders: 63 ansatte. Det er ledet av en ganske kjekt kar som heter Tim Berners-Lee.

Erling: Webbens far.

Anders: Og sjefen heter Jeffrey Jaffe. De holder til på fire steder, Massachusetts, en plass i Frankrike, en annen rar plass jeg ikke har hørt om. En plass i Japan, og én i Kina. Og de lager blant annet webstandarder. Det er W3C som har laget HTML og CSS, som har vært kodespråkene som vi har brukt på webben fra dag én, og som fortsatt den dag i dag … Noen trodde at Flash skulle ta over en stund, men det er HTML og CSS har vunnet krigen. Så har vi begynt å krydre HTML og CSS med mye mer. De har to prinsipper i bunn. Web for alle og web på alt. Altså web for alle er jo direkte knyttet til universell utforming. Og web på alt, det er jo den fleksibiliteten som ligger i webbens natur, og handler litt om IoT, som vi nå begynner å få innover oss. Grunnlagt så tidlig som 1994.

Erling: Det var jo HTML før 1994.

Anders: Ja? Når kom HTML?

Erling: Det vet jeg ikke. Jeg har bare en fornemmelse om at HTML kom før 94. Men drit i det.

Anders: Nja, den kom enten, det er rundt det han kom. Hehe, han.

Erling: Nå jukser jeg, bare snakk videre du.

Anders: W3C har ulike initiativ. Ett av de initiativene heter WAI. Det er en trebokstavs forkortelse som handler om universell utforming, eller det som på engelsk heter accessibility. Web Accessibility Initiative. Det er standarder og hjelpemidler for universell utforming. WAI har tre retningslinjer, eller tre grupperingen av retningslinjer, som er WCAG, som hele vår podkast handler om. Så har du ATAG og UAAG. De har vi nevnt så vidt. ATAG er jo da Authoring Tool, altså som generer HTML-kode. For eksempel CMS-er.

Erling: Altså kontrollpanelet.

Anders: Ja, hva er det de må tenke på. De må produsere tilgjengelig kode, og de skal både produsere kode som er universelt utformet, og så skal òg grensesnittet i seg selv være det.

Erling: Men dette er andre retningslinjer, har du sett på dem?

Anders: Nei.

Erling: Jeg lurer på hvor like de er.

Anders: Dette er helt ukjent materiale for meg. Jeg har lest litt om det, men det jeg ikke har lest noe som helst om er UAAG. User Agent Accessibility Guidelines. User agent er for eksempel en vanlig nettleser som Google Chrome. Så når Chrome skal sørge for at nettleseren er brukenes for alle …

Erling: Er det nettleseren i seg selv?

Anders: I seg selv, ja.

Erling: Eller er det hvordan de håndterer HTML-en?

Anders: Jeg vet ikke forskjell.

Erling: Glem spørsmålet. Gå videre.

Anders: De har òg WAI, altså den delen av W3C som handler om universvell utforming. De har òg spesifikasjoner, altså. HTML er en spesifikasjon. De har òg egne spesifikasjoner innenfor universell utforming, som heter WAI-ARIA. Og det kaller vi nå bare for Aria. Og det er jo rett og slett HTML-attributter som er spesielt laget for skjermlesere.

Erling: Hvor gammelt er dette?

Anders: Det synes jeg er gøy, fordi det er folk i faget vårt, i bransjen vår, som tror at dette er noe nytt, fordi den norske forskriften er relativt ny. Men én av de viktige grunnideene til Tim Berners-Lee når han skapte webben var å lage et medie som var tilgjengelig for alle. De første, versjon 1 av WCAG, kom i 1999.

Erling: Da kan jeg røpe i samme slengen, at HTML kom i 1993. Du hadde mer rett enn meg. Jeg følte det var en stund før det. Og i 1999 kom WCAG 1.0. Seks år etter. Hvorfor det montro? Tror du noen følte at det sklir ut?

Anders: Jeg vil tro det. Nå er vi på … tynn is. Kom i 99! Og det som er morsomt med de som kom i 99, de var det lenge siden jeg hadde lest, det er at mange av de gir mening den dag i dag. Vi kan si mye om at vi skal til Mars, vi har teknologien, vi har kunstig intelligens, teknologien er i en rivende utvikling, men i HTML innenfor WCAG så har det skjedd så veldig mye.

Erling: Men jeg tenker at det er fordi folk har de samme utfordringene. Det er fra den siden vi bør se det. Folk har de samme funksjonsnedsettelsene da som de har nå, og det må vi ivareta på web. Men noe har endret seg.

Anders: Ja, noe har endret seg. For eksempel var det i 1999 et kriterie om at du skulle hoppe over ascii-kunst. Ascii-art.

Erling: Som vi snakket om i første episode?

Anders: Ja, jeg tror det. Det er jo ikke så relevant i dag. Men i 1.0 stod et òg for eksempel, forklar hensikten med hver lenke. Det er jo noe som er fortsatt er relevant, og som fortsatt grisemange synder på. Det er 20 år siden, og vi har fortsatt ikke lært.

Erling: I 1999 kom 1.0, i 2008 kom 2.0, og ti år etter det igjen, i 2018 kom 2.1. Tar det 10 år til neste versjon?

Anders: Nei, det snakket vi kom i forrige episode. De har så vidt begynt.

Erling: Det kan jo være at de begynner å sette seg såpass, at de ikke trenger å komme med neste versjon.

Anders: Sett i lys av at iPhone kom i 2008, nei iPhone kom i 2007, WCAG 2.0 kom i 2008 og handlet ingenting om trykkfølsomme skjermer, så synes jeg at 10 år er veldig sent å komme med …

Erling: De saler ikke samme dagen de rir.

Anders: Nei, det går litt tregt i W3C-leiren. Det var dagens. Håper det var litt mer oppklarende, disse tre trestavelsesforkortelsene. W3C, WCAG, WAI.

Erling: Hehe, vi var ikke så tydelige. Det er mye forkortelser. Det starter i 1999, og i dag er vi på versjon 2.1.

Avslutning

Erling: Det var dagens episode. Har du noe du vil si?

Anders: Nei, hva skal folk huske?

Erling: Det er enkelt å huske dagens, vær konsekvente. Ikke bytt på rekkefølge, eller ord, eller ikoner. Det er ikke verre enn det. Det er alt.

Anders: Nå var vi dårlige å selge inn denne episoden da vi startet, så det kan hende at folk er hoppet av. Men neste episode, den blir betydelig bedre, det er jeg helt sikker på. Vi skal snakke om noe …

Erling: Den gleder jeg meg veldig til, fordi folk feiler masse.

Anders: Skjemadesign er et felt som jeg bryr meg om.

Erling: Dette kommer vi borti ofte. Mye er skjemabasert.

Anders: Folk hater skjema. Folk har mye problemer med skjema. Kryptiske feilmeldinger. Feilmeldinger skrevet av utviklere.

Erling: Det er det neste episode skal handle om – skjemafeil. Feilhåndtering i skjema.

Anders: Hvordan skal de se ut, hva skal stå i disse feilmeldingene, det skal vi fortelle.

Erling: Som vanlig, send kommentarer til hei@universeltutformet.no. Vi synes det er veldig kjekt.

Anders: Takk for i kveld, Erling. Jeg er Anders, og du er?

Erling: Erling. Ha det bra!