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: Da Anders er vi på episode 8 av 26. I dag skal vi snakke om luftig og lettlest. Hva går det i, Anders?

Anders: Det går i at tekst skal være lett å lese, og gjerne ha litt luft rundt seg.

Erling: Vi er fortsatt på 1-en, hva står én for?

Anders: Mulig å oppfatte.

Erling: Dette er siste episode på 1.4.

Anders: Ikke bare siste episode på 1.4, siste på 1.

Erling: Det er det òg.

Anders: Vi har disse fire prinsippene og dette er siste episode på det første prinsippet.

Erling: Det er en milepæl. Neste gang skal vi snakke om 2. Men 1.4, vi skal fokusere på tre suksesskriterier i dag. Hvilke?

Anders: Vi skal snakke om 1.4.8 som handler om visuell visning av tekstblokker. Tekstblokker er alt som er lengre enn én setning. Altså ikke et menyelement eller et datofelt.

Erling: Overskrift, er det en tekstblokk?

Anders: Nei. Vi skal snakke om 1.4.10 som handler om å unngå to rullefelter.

Erling: Eller som vi andre sier, scrollbar.

Anders: Eller, det handler egentlig om responsiv design, enkelt forklart.

Erling: Ja, det handler om å tilpasse seg til skjermbredden, til viewporten.

Anders: Vi skal snakke om 1.4.12 som er om luft og kun luft i alle retninger. Over, under, på sidene og innimellom.

Erling: Det går ikke bare på størrelsen på teksten, men hvor mye luft det er rundt teksten.

Anders: Vi skal snakke om tre forskjellige, 8, 10 og 12. 8 og 12 går litt inn i hverandre, så de har vi slått sammen. 10, om responsiv design, kommer vi tilbake til etter vi har snakket om tekstpresentasjon og luft.

Erling: Vi deler opp i to – typografi og responsiv design.

Anders: Så slår vi dem sammen igjen i ris og ris-spalten.

Erling: Og i ris og ros skal vi snakke om utdanningsinstitusjoner.

Anders: Eller skoler, som jeg ville sagt.

Erling: Hvorfor har vi disse retningslinjene, unnskyld, suksesskriteriene.

Anders: Det er lett å svare på, det skal være lett å lese det som står. Det skal være lett å lese teksten, den skal presenteres på en måte som ikke ødelegger eller forstyrrer lesbarheten.

Erling: Dette er noe som treffer alle, lett å lese gjelder for alle, ikke bare de som har vanskelig for å lese.

Anders: Dette handler om godt håndverk, god design og fokus på typografi. Gjerne et fag eller tema som har blitt mer neglisjert i den digitale æraen, enn det var i det trykte formatet.

Erling: Hvem treffer dette?

Anders: Det treffer det svaksynte. Dersom teksten er vanskelig å lese, er det enda vanskeligere for de som ser dårlig. Der er det viktig med lesbarhet og forstørrelse. Vi skal òg snakke om forstørrelse i dag, selv om vi snakket om det forrige gang. Var det forrige gang? Nei, to episoder siden.

Erling: Men vi skal snakke om det på en litt annen måte i dag.

Anders: Det er spesielt viktig for dyslektikere, og de er det mange av.

Erling: Har du et tall?

Anders: Nei. Far min er dyslektiker!

Erling: Det er tilgjengelighetsbiasen det.

Anders: Men òg andre typer, det vi kaller kognitive utfordringer, lære- eller språkvansker. Dersom du har problemer med å lese i utgangspunktet, så blir problemene dine, du får større problemer om teksten ser dårlige ut. Dersom du har god typografi og god kontroll på det, så er jo totalopplevelsen av løsningen bedre.

Erling: Dette er et suksesskriterie som fører til at ting ser bedre ut. Dette er ting du blir fortalt i gamle dager, når du skulle lage Word-dokument. God, gamle råd om typografi. Hva med produsenter, hvem må tenke på det?

Anders: I dag er det designere og kodere. De skal utfylle hverandre. Designere må ta hensyn til en del typografiske valg, og så må koderne selvfølgelig vite hvordan de skal implementere de valgene som er tatt. Ansvarsfordelingen er ganske lik.

Erling: De har ansvar for hver sine ting, på mange måter, selv om det er litt overlapp. Designerne hvordan det ser ut. Koderne hvordan det er implementert, som går på mulighet til å overstyre.

Anders: Vi skal ikke gå inn i den diskusjonen, men vi har en langvarig diskusjon om designerne skal kunne kode og vice versa. Helst den veien, om designerne skal kunne kode. Jeg heller mot ja. Det er fordi CSS har hatt en stor utvikling innen de typografiske mulighetene. Dersom du i gamledager laget noe som ikke lot seg implementere, så var det du som designer som ikke kunne teknologien godt nok.

Erling: Det som er fint her, når vi snakker om CSS, er at begrepene som brukes er omtrent de samme som i typografien. Vi snakker om letter spacing, word spacing og line height og lignende.

Anders: Her må du arrestere meg om jeg sporer av. Her lærte jeg noe nytt i dag. Dette har jeg sagt feil hele livet, uten å bli irettesatt, jeg har blandet kerning og tracking.

Erling: De er jo tett relatert.

Anders: Ja, men jeg har utelukkende brukt kerning om tracking. Og så lærte jeg at vi ikke har gode norske begreper for dette. Det brukes i typografifaget. Sånn, nok om det.

Erling: I de to neste segmentene skal vi snakke om hvordan, og vi har valgt å dele dem inn i to – typografi og det som går på flow. Men først, hvordan kan vi ta vare på den typografiske delen av disse suksesskriteriene.

Anders: Det første temaet vi skal snakke om, hvordan du skal gjøre det, der må vi holde tungen beint i munnen. Fordi, etter boken, eller etter WCAG, så skal du … nå nøler jeg Erling, jeg finner en tankerekke nå. Du skal helst ikke definere farge og bakgrunn på mengdetekst. Og dersom du gjør det, så bør du ha en funksjon som lar brukeren overstyre dette. Og det er helt urimelig, og det passer ikke inn i 2019. Det passet heller ikke inn i 2010. Det er et utdatert råd.

Erling: For dette er en del av 1.4.8, stemmer det? I det første punktet så står dette. Fortsett på tankerekken.

Anders: Saken er den, hvis brukeren ønsker å overstyre farge på tekst og bakgrunn, så må de gjøre det i nettleseren sin, enten i instillinger eller ved hjelp av en utvidelse. I Chrome, så har det valget er tatt bort som standard. Og du må bruke utvidelse. Nå er jo Chrome den mest brukte nettleseren i Norge, derfor snakker vi om den. Den har markedsandel på over 50 %. Tidligere kunne du si at du ville ha blå tekst på alt. Det kan du ikke nå, nå må du bruke en utvidelse. Men det som WCAG egentlig sier er at du skal lene deg på brukernes valg. Konklusjonen er, glem alt det vi har sagt nå. Det du skal huske er at du alltid skal definere begge to. Du må passe på å ikke bare si color og hvilken farge du skal ha, uten å definere background color.

Erling: For hvis du setter teksten som svart, og brukeren har satt bakgrunnen som svart, for han vil ha høy kontrast, så vil han kanskje få svart på svart.

Anders: Da har jo brukeren òg satt teksten til hvit, men det respekterer ikke nettleseren, for …

Erling: Stilarket til nettsiden overstyrer stilarket til brukeren.

Anders: Det blir litt komplisert, men det kan resultere i svart på svart, eller hvit på hvit.

Erling: Eneste du skal huske fra det vi nå har snakt om, er å sette bakgrunnsfarge hvis du setter farge på teksten. Neste punktet på typografi, det går på bredden av tekst. Hva sier den om det?

Anders: Den sier ikke mer enn 80 tegn. Min anbefaling da er å sette egenskapen max-width i CSS til 50–60 em.

Erling: Hvorfor ikke 80?

Anders: Fordi da blir det for langt. Fordi én em er bredden til en stor M, den bredeste bokstaven. Gjennomsnittet til én bokstav er mindre enn én em.

Erling: Du må sette noe til lavere enn 80, type 50–60.

Anders: Du kan sette 60 og telle bokstavene, og så ser du at det blir rundt 80, så er det good.

Erling: Det er ikke en absolutt maks med 80?

Anders: Nei. Én av de store synderne er Wikipedia, de har forferdelig lange tekstlinjer hvis du kjører full skjerm vindu på en moderne, stor, fin skjerm.

Erling: Den mest ironiske synderen her er jo WCAG selv. De bryter jo denne i den teksten hvor de beskriver dette. I setningen! Den er for lang. Det er morsomt, en liten kuriositet. Det neste punktet går på blokkjustert tekst. Hva er det?

Anders: Det kan vi nesten hoppe over, det er nå setningen går helt ut til begge sider, helt ut til venstre marg og helt ut til høyre.

Erling: En typisk typografisk teknikk fra den trykte verden.

Anders: Det kan du gjøre på en plakat der du har kontroll på alle linjene. Men i et medie som web, som er så dynamisk, så er det ingen som bruker det.

Erling: Ikke gjør det. Neste går på linjeavstand. Det er jo det rådet, eller regelen vi fikk når vi skulle levere inn eksamen på skolen, vi skulle ha halvannen linjeavstand. Det sier WCAG òg, halvannen linjeavstand.

Anders: Så WCAG er som lærerne.

Erling: Lærerne ville at det skulle være lettleselig. Det vil WCAG òg. I mellom avsnittene sier WCAG at vi skal ha halvannen ganger linjeavstanden. Og nå må vi holde tungen litt bent i munnen, for det er to ting vi ser på i forhold til, det er linjeavstand og skriftstørrelse, stemmer ikke det?

Anders: Jo.

Erling: Her snakker vi halvannen ganger linjeavstand i mellom avsnittet. Ikke 1,5 em. Dersom linjeavstanden er, hold tungen bent i munnen, 1,5 em, så skal mellomrommet mellom avsnittetene være 2,25 em. Som da er 1,5 av 1,5. Stemmer ikke det?

Anders: Jo. Men vi ble jo enige om å ikke komme med slike tall, det er ingen som husker dette.

Erling: Vi kommer til å komme med flere slike nå, vi har en liten liste. Vi skal ikke dvele ved alt dette. Det er forskjell på linjeavstand og tekststørrelse. Vi kommer til å gå generelt gjennom dem.

Anders: Jeg vil bare si noe for at folk skal klare å huske det du akkurat har sagt. Ja, gjør det som læreren vår sa, bruk halvannen linjeavstand, og sørg for at du har god luft mellom avsnittene. For hvis du ikke øker luften mellom avsnittene når du har økt linjeavstanden, så glir jo alt sammen.

Erling: Da ser det ikke ut som avsnitt lengre. Pass på at det ser ut som avsnitt.

Anders: Det er regelen, pass på at det ser ut som avsnitt!

Erling: Det neste går på forstørring. Hva sier den, Anders.

Anders: Den sier at tekst skal kunne forstørres 200 %. Det har vi sagt før, men her sier regelen at du ikke skal få rullefelt med 200 %.

Erling: Som vi andre kaller det, scrollbar.

Anders: Når vi har nevnt det tidligere, så handler det om at tekst ikke skal forsvinne. Her handler det om at dersom teksten forsvinner ut av skjermen, det skal ikke skje.

Erling: Den skal heller ikke kuttes. Er det òg en del av disse suksesskriteriene? Kutting av tekst.

Anders: Nå det gjelder forstørring så var det forrige, eller for et par episoder siden, men når det er rullefelt så er det denne. Vi skal snakke om kutting litt senere, men ikke ved forstørring.

Erling: Er det rart at dette er kompliserte greier?

Anders: Nå må vi passe på å være tydelige, det er derfor vi her her, for dere kjære lyttere.

Erling: Så har vi det som vi bare har kalt for responsiv design.

Anders: Tekstblokkene, det er jo tekstblokker vi snakker om, at de blir smalere med mindre vindu.

Erling: Det er vel egentlig det de sier. Det er jo det vi gjør når vi lager responsivt design i stor grad. Og så er det én av de viktige tingene her, som går på relativ enhet på tekststørrelse. Her må kodere høre godt etter.

Anders: Det er en tommelfingerregel som løser så mye.

Erling: Enormt.

Anders: Eksempler på relative enheter, Erling.

Erling: Det er E M. Eller enda bedre, rem, eller REM, tenk på bandet. Det REM er at den er relativ til den fontstørrelsen som er satt på body, ikke til foreldrene. det er E M. E M er relativt til nærmeste definerte forelder. REM er til body. Hvis du belager deg på REM så vil alle verdier bli i relasjon til den fontstørrelsen som er satt. Så hvis noen øker fontstørrelsen i nettleseren, så vil alt det du har satt i REM følge det. Som gjør det mye enklere. Så hvis du setter line-height til REM, så vil du ikke bryte noen av disse her som går på line-height.

Anders: Eller hvis du setter den til veldig lite, så bryter du.

Erling: Bra poeng.

Anders: Så har du òg E N, men det er det ingen som bruker.

Erling: Ganske obskur.

Anders: Men prosent er brukt. Og ord kan du bruke.

Erling: Or? Nå tøffer du deg. Or?

Anders: Font-size small. Sånn ord.

Erling: Ahh, sånn ja. Jeg trodde du mente O R. small, smaller, smallest.

Anders: Nei. X. Nei, jeg burde ikke dratt opp denne.

Erling: Det du skal huske på er at relative enheter på tekststørrelse løser veldig mye. Og de neste punktene går på å endre disse verdiene, som går på linjeavstand, avstand på avsnitt, tracking, line-spacing og avstanden mellom ord. Det vi kan si om disse er at det er noen verdier du skal tåle.

Anders: Tåle, kan du forklare det?

Erling: Tåle er at dersom brukeren endrer på dette, hvis de overstyrer, så skal nettsidene eller appen din tåle det.

Anders: Ja, de skal både respektere endringen og sørge for at presentasjonen blir leselig.

Erling: At det ikke blir kuttet noen ord, og at det ikke blir overlapp.

Anders: Et eksempel på det er at dersom du har en venstrenavigasjon der det står «Våre tjenester» og den har fast bredde, og du øker avstanden mellom hver bokstav, slik at det ikke er plass til ordet lengre, og det ordet blir skjult, eller som du sa tidligere i dag, hvis du bruker Google Translate og setter språket til finsk, som bruker flere bokstaver på å forklare det samme, så forsvinner ordet. Vi jobber med et fleksibelt medium, det må vi respektere.

Erling: Og bruke det for det det er verdt.

Erling: Hvordan feiler vi den typografiske delen av disse suksesskriteriene?

Anders: Hvis tekst blir kuttet, da feiler vi. Eller hvis teksten overlapper. Vi skal dra frem eksempler på begge deler, både kutt og overlapp.

Erling: Da blir det verken luftig eller lettlest.

Erling: Hvilke verktøy kan vi bruke innenfor typografi?

Anders: For å gjøre endringer i CSS-en så er det DevTools, det innebygde verktøyet. Det har jo Edge, Internet Explorer og Chrome.

Erling: Det har jo Firefox og Safari og hele gjengen.

Anders: Har alle det?

Erling: Ja.

Anders: Safari har ikke.

Erling: Jo, det er jeg nokså sikker på.

Anders: Ikke juks nå, Erling. Men jeg kan si, bruk DevTools, og skru gjerne på den mobile emulatoren der. Du kan òg bruke et Chrome-tillegg som heter Web Developer. Der kan du òg endre CSS-en. Nå har vi snakket om typografi. Da skal vi over til …

Erling: Hvordan kan vi ivareta det de har kalt for reflow?

Anders: Det ivaretar vi ved å lage ting responsivt. Hvis du har innhold i forskjellige kolonner eller spalter, at de da flyter under hverandre, at to spalter blir til én dersom du har en liten skjerm, eller du forstørre skjermen din. Frem til nå, når vi har snakket om forstørring, har vi snakket om tekstforstørring.

Erling: Når du sier forstørre skjemen så mener du?

Anders: Nettleseren. Forstørre nettleseren.

Erling: Zoome inn på bildet i nettleseren. Reflow er bare at ting er dynamisk og responsivt. Responsivt både til innholdet men òg skjermbredden. Ting flyter naturlig. Ting blir ikke brutt hvis noe endrer seg.

Anders: Og her er det om å gjøre, å unngå to rullefelt.

Erling: Altså, unngå to scrollbars.

Anders: Det mest vanlige er å unngå det horisontale. Det er det vi snakker om i dag. Her er det unntak. Jeg kan nevne kart, der er det helt naturlig å rulle i alle retninger. Et annet viktig unntak, som er vanskelig på mobil, er tabeller. Det er et unntak. Det vil si at dersom du har brede tabeller og kjører det ned på mobilvisning så er det i orden å ha et horisontalt rullefelt.

Erling: Så dette suksesskriteriet går på innhold som ikke burde hatt et horisontalt rullefelt, skal ikke få det. Og òg hvis du forstørrer. Hva sier suksesskriteriet om det?

Anders: Det sier at du skal kunne forstørre 400 % med 1280 CSS-piksler. Grunnen til at vi sier CSS-piksler, det er på grunn av …

Erling: DPI og sånn?

Anders: Ja, det er et stort og tungt fagområde. Hvis du forstørrer 400 % med 1280, så tilsvarer det 320 bredde på en mobilskjerm. Det vil si at så lenge du ikke får horisontalt rullefelt på en slik forstørrelse eller på en mobilskjerm, så er du innenfor.

Erling: Det jeg liker her at WCAG har gjort er at de har brukt konrkete verdier, de har sagt 320 piksler som en nedre grense på mobil. De har sagt 400 % på 1280. Jeg liker når de bruker faktiske verdier, ikke bare sier obskure ting som «på mobil» eller «små skjermer». Kudos til WCAG for det.

Erling: Hvilket verktøy kan vi bruke for reflow?

Anders: Her bruker vi òg DevTools, fyrer på mobilemulator, eller enda bedre, bruker sin egen mobil. Se at det ikke blir rullefelt.

Erling: Bruk gjerne flere mobiler med ulikt OS.

Anders: Hvis du skal forstørre, kan du gjøre det i alle nettlesere. Husk tekstforstørrelse, det kan du ikke gjøre i alle. Det er bare kontroll eller command pluss +. Det er vel en hurtigtast som jeg håper mange kjenner til. Forstørr opp til 400 %, sett vinduet ditt til 1280, og se om du får rullefelt.

Erling: Må du gjøre dette? Bryter du loven?

Anders: Ja, men ikke helt i dag. Fordi 1.4.8 som går på dette med bakgrunnsfarge og halvannen linjeavstand og sånn, det er en trippel A. Så du må ikke sette maksvidde på avsnittene dine. Men vi skal jo huske på at dette er jo gode prinsipper, helt uavhengig av universell utforming, som de fleste er enige i. Det er ingen som med hånden på hjertet sier at de liker veldig lange linjer. Så jeg ser ingen grunn til å ikke følge dem.

Erling: Det er gode poeng du har, selv om det er trippel A, så betyr det ikke at du ikke skal følge dem. Du kan veldig gjerne følge dem.

Anders: Så når du fikk beskjed av læreren din, husk halvannen linjeavstand, så trenger du ikke å svare med «nei, vil ikke, det er trippel A». De to andre. Dette med responsivt og dette med å tåle typografiske endringer fra brukeren, de er begge dobbel A, men 2.1.

Erling: Men 2.1 gjelder ikke når vi spiller inn denne podkasten?

Anders: Det stemmer, men det er tatt inn i det europeiske direktivet, så det er bare å gjøre det.

Erling: WAD. Følg dem.

Erling: I dagens aside skal vi snakke om trender. Hva går det i?

Anders: Universell utforming kan jo være litt konservativt. Å forholde seg til konvensjoner litt for mye, vil noen si.

Erling: Noen vil gjerne si at dersom noe skal være universelt utformet, så ser det kjedelig ut, for det er ikke trendy.

Anders: Så er det noen trender som er bra for uu, og noen trender som er dårlige. Tror jeg nevnte dette med Don Norman sin kritikk til at trenden med å ha så tynn skrift, det er kanskje en trend som er litt forbigående? Nå må du gjerne arrestere meg, men Apple hadde en veldig smal, så har de gått litt tilbake nå.

Erling: Det tror jeg du har helt rett i.

Anders: Det er en trend som kanskje er forbigående, men det er trend som ødelegge for lesbarheten.

Erling: Og selv om det ikke er en spesifikk suksesskritere på det, på tykkelsen på teksten, så er det noe som reduserer lesbarheten. På én måte kontrasten òg. Selv om det ikke er teknisk sett kontrasten, så er det vanskeligere å lese.

Anders: Det er bare til å tenke seg en bok. Hvis du hadde lest en bok med veldig tynn skrift, du har ikke sett det.

Erling: Det er ikke behagelig. Det ser kanskje fint ut og trendy ut. Det er det som er nøkkelordet her.

Anders: Du har jo teksten for at den skal leses. Så kan du være kreativ i flotte, store overskrifter. Du kan jobbe med kjekk typografi.

Erling: Det jeg pleier å argumentere for, folk tar ikke helt feil når de sier at universelt utformede ting gjerne ser litt traust ut, men det fordi vi skal følge konvensjoner. Da pleier jeg å kontre med, at vi, i mangel av et bedre begrep, kreative folk, vi jobber med alltid med begrensninger. Det er alltid noen rammer vi må forholde oss til. Vi aksepterer dette som rammer, så er det veldig mye kjekt vi kan lage med de rammene. Ikke la det være et hinder. En annen trend som gjorde mye med tilgjengeligheten på applikasjoner og nettsted var flat design, som har vært kritisert og fortsatt blir kritisert. Der har en redusert, du bryter ikke nødvendigvis noen suksesskriterer, men du har redusert tydeligheten av elementene.

Anders: Innen interaksjonsdesign, så har det gått ut over affordance, det har vi ikke et godt norsk begrep for. Hva du anser som klikkbart.

Erling: Hvor lysten du er til å interagere med noe.

Anders: Det er jo blitt bransjestandard. Alle bruker denne flate designen nå. Jeg er ikke så skeptisk til den, den har mange fordeler. Blant annet utviklingstid og designtid. Det å ha veldig detaljerte komponenter og grafiske elementer.

Erling: Skygger og gradienter.

Anders: Det er mye vanskeligere å tegne. Nå er jo terskelen for å tegne noe, mye lavere.

Erling: Det er helt sant. Det var et mye større problem når de først gjorde det, for da va det ikke en konvensjon. Nå som alle gjør det, og de som er bransjeledende innen hvilke flater og hvor mange de treffer – Apple, Google og gjengen. Når de gjør det, så blir det en ny konvensjon. Da er konvensjonen endret. Da er det mer greit. Oppe i alt dette, forstår målgruppen hvordan de skal bruke de elementene du har designet? Ja eller nei. Hvis de gjør det, er det ikke så viktig om det er flatt eller skeumorphic.

Anders: Men da må vi huske på å bruke de mulighetene vi har for å øke affordance. En god konvensjon er å ha avrundede hjørner på en knapp.

Erling: Ikke nødvendigvis, men eksempel. Dette med tekstlenker, understreking av tekstlenker, det øker affordance. Det går ikke bare på farge og fargeblindhet, det går på at du øker klikkbarheten. En minitrend som går litt av og på, dette med å fjerne understreken på tekstlenker. Så har du frontend-rammeverk som Material Design og gjengen. Bootstrap, Foundation og de. Jeg vet ikke om vi skal kalle det trender, men de har noen retningslinjer som ikke nødvendigvis er så bra.

Anders: De utfordrer sterke konvensjoner. Det vi har diskutert litt er jo dette med skjemaetiketter, eller label. Det er helt klart brudd å ha erstatte en etikett med en placeholder-tekst. Men det som Material har begynt å gjøre, er å ha etiketten inne i feltet, men at den hopper opp når du fokuserer på innskrivningsfeltet.

Erling: Den ser ut som en placeholder-tekst, en liten grået ut tekst som står midt i input-feltet. Når du da fokuserer, begynner å skrive, så hopper den opp, ovenfor feltet slik at den ser ut som en label.

Anders: I Material så har de bare kantlinje nede, ikke rundt hele feltet slik som er konvensjonen.

Erling: De har begge deler. De har kjørt ganske hardt på den streken som ikke ligner på et inputfelt i det hele tatt. Og dette er vi skeptiske til.

Anders: Jeg har observert i brukertester …

Erling: Og jeg har feilet selv på det.

Anders: Så en trend som ikke er helt UU-venlig, er dette skjemadesignet til Google. Men der sier du at de har …

Erling: Ja, jeg var inne og sjekket. De har nå alternativ A og B. Én med strek nede og en som ser ut som et vanlig inputfelt.

Erling: Så til ris og ros, Anders! Her har vi funnet både ris og ros. Hvem er det vi skal rise i dag?

Anders: I dag går vi for ditt forslag, så du trenger ikke å spørre meg, det er skolen til din kjære datter.

Erling: Trones skole i Sandnes. Ikke for å henge ut noen, men det er Trones skole i Sandnes. Nå skal vi jo holde oss til disse suksesskriteriene her, men dette er så dårlig. Det er et takras av dimensjoner. Men vi skal klare å holde oss litt i trøya her og holde oss til 1.4.8, 1.4.10 og 1.4.12 – om de bryter dem eller ikke. Da kan vi begynne med 1,5 linjeavstand. Det har de ikke. De bruker lite avsnitt. De bruker ikke p. De bruker div. Vi fant noen steder de bruker p, og der har de ikke godt nok mellomrom. De har brukt nettleserstandarden som er 1 em. Hvis vi øker tekststørrelsen er det både overlapp og kutt. Det blir ikke ekstra rullefelt hvis vi øker kun teksten, overranskende nok, jeg hadde forventet at de klarte å bryte den òg.

Anders: Det er jo et værre brudd å ha overlapp eller kutt, for hvis du har rullefelt så er det mulig å få tak i informasjonen.

Erling: Med overlapp eller kutt, så klarer du ikke å lese teksten. Så det var tekst som ble totalt uforståelig ved å øke tekststørrelsen.

Anders: Et veldig godt eksempel, de hadde en lenke som heter Informasjon om mobbing. Når du skrudde opp tekststørrelsen, så forsvant ordet mobbing, og kun «informasjon om» stod igjen. Da er det jo klin umulig å finne frem til mobbesiden.

Erling: Og hvorfor står det «Informasjon om», hvorfor står det ikke bare «Mobbing»? Det er implisitt at det er informasjon om.

Anders: Alt på internett er informasjon.

Erling: Hva er ikke? De bruker absolutt verdier på tekststørrelen. Ikke et brudd, jeg ville bare nevne det. Tålte ikke å endre letter-spacing, altså på trackingen. Da skjedde det samme som når vi endret på tekststørrelsen, tekst ble kuttet.

Anders: Det henger jo ofte sammen.

Erling: Ja, det er ofte den samme effekten du får. Når vi zoomet inn til 400 % eller satte vinduet til 320 piksler, altså mobilstørrelse, så kom det dobbel scrolling, både horisontal og vertikal. Men ikke bare det, det var til og med scrolling på diver inni, så du fikk to horisontale scrolle. Fyttigrisen. Det var full krasj. Helt håpløst. Totalt elendig.

Erling: Men, så er det noen som har gjort dette litt bedre, heldigvis!

Anders: Jeg vil bare ikke slippe Trones skole helt enda. Ingen forventer at Trones skole, at rektoren på Trones skole hører på denne podkasten, og fikser dette. Det som skiller dagens ris og dagens ros, er at Trones skole bruker en ferdig skoleløsning som sikkert hundrevis av skole i landet, bruker. Så dette gjelder nok ikke bare Trones skole, men mange skoler i hele landet. Vi er jo litt navlebeskuende, å går på de lokale avisene og de lokale skolene.

Erling: Dette er egentlig ikke kritikk av Trones skole, dette er kritikk av løsningen minskole.no.

Anders: Så der burde jo Trones skole ha hatt krav til sin leverandør, eller Fylkeskommunen burde ha krav til leverandørene til velger. Eller om dette går enda høyere opp i undervisningsdepartementet. Nå er jeg på tynn is.

Erling: Noen burde stilt krav til dette, at løsningen skal være universelt utformet. For en skole som treffer så mange.

Anders: Og dette med lesbarhet for elever som i utgangspunktet ikke har samme leseferdigheter som oss voksne.

Erling: Og for de med et annet morsmål, det kan gjøre det vanskelig.

Anders: Det er som du sier, denne løsningen her, det går ikke bare på luft og typografi. De trør i salatene som de kan.

Erling: Det er nesten som om de har prøvd å feile på flest mulig. Det er skikkelig dårlig.

Anders: Det er laget av folk som ikke har hørt om WCAG.

Erling: Eller noe annet. Hvis du går inn på minskole.no/trones og ser, så ser du med én gang hvor dårlig dette er. Det er horribelt håpløst.

Anders: Denne siden må du som forelder forholde deg til.

Erling: Jeg holder igjen nå, for det er så mye dritt.

Anders: Vi går videre til ros!

Anders: Det er Universitetet i Stavanger. De har en løsning som de har kjøpt, sannsynligvis, av en leverandør. De har ikke en Min skole. Ikke en pakkeløsning. De har skreddersøm. De har kunnskap om, de har en kommunikasjonsavdeling og en markedsføringsavdeling, de kjenner til dette.

Erling: Til Trones skoles forsvar, så har de ikke …

Anders: Det er ingen i Trones skole som har gjort en feil.

Erling: På én måte, de har jo bestilt noe som ikke er universelt utformet, men vi kan ikke forvente at de har kompetanse til å bestille rett.

Anders: Linjehøyden til Universitetet i Stavanger.

Erling: Den er halvannen, så det er bra. De har absolutt verdi på 16 piksler på p. Igjen, ikke et brudd, men det gjør at ting fort kan bli vanskelig.

Anders: Så har de ikke god nok avstand mellom avsnittene. La det se ut som et tydelig avsnitt.

Erling: Jeg må si at når jeg ser på siden uten å måle, så ser det ut som avsnitt, det er ikke gale visuelt sett, men de bryter suksesskriteriet, for det er ikke god nok avstand.

Anders: Nå var det ros-spalten, Erling.

Erling: Ja, så har de ikke scroll når du setter opp tekststørrelsen til 200 %, så er det ingen scroll, kjempebra. Og det er responsivt. Glimrende. De har ikke lange linjer. Nå har vi ikke gått innom alle sider, dette er stikkprøver. Dette var inne på en artikkel. Ingen lange linjer, over 80 karakterer. Og av disse justeringen som de skal tåle, så tålte de alle helt fint og flott. Så glimrende ut helt til jeg scrollet ned til footeren, der var det en liten sånn flekk. Én tekst. Godt jobbet, tommel opp, nesten. Uansett ros til Universitetet i Stavanger. De har gjort veldig mye rett.

Anders: Og jeg er ganske trygg på at de har gjort veldig mye annet rett òg, utover det som vi har snakket om.

Erling: Vi har høy tillit til de som institusjon, og nå når vi ser på siden, så ser vi at de har lagt ned litt arbeid og gode tanker. Og derfor har vi høy tillit til at de har fulgt en del andre retningslinjer.

Erling: Det var episode 8. Og nå er vi ferdige med én, altså hva er det du kaller det?

Anders: Prinsipp.

Erling: Det første prinspippet er vi ferdige med, det som går på perceivable, eller oppfattbarhet, hva vi velger å oversetter til.

Anders: Det føles godt.

Erling: Hvor mange er det? Fire?

Anders: Fire, ja.

Erling: Dette er den første av fire.

Anders: Det føles godt, men vi gleder oss òg til å skifte tema.

Erling: Jeg gleder meg til neste episode. Før vi gir slipp på dagens episode, hvis lytteren skal sitte igjen med tre ting, hva skal de huske?

Anders: Bruk relative enheter, for da er det så mange brikker som faller på plass innenfor universell utforming.

Erling: Unngå px, altså piksler. Bruk rem, em eller prosent.

Anders: En generelt regel. Spesielt på høyde og spesielt på bredde. Men og på tekststørrelse. Unngå horionstalt rullefelt. Ganske åpenbart. Det prøver vi jo alltid som designer å unngå.

Erling: Det er noe alle instinktivt skjønner er feil. Det er en bug. Og siste.

Anders: Tenk på linjelengden din. Ikke gjør som W3C gjør, eller Wikipedia.

Erling: Og nettopp episode, 2.1, hva handler den om?

Anders: Nummer to, det andre prinsippet, det heter på engelsk operable. Opererbart gir ikke så mye mening. Jeg har lyst å komme med en liten analogi. Ser for deg en bil. Der har du et ratt. Første prinsippet, mulig å oppfatte. Det handler om at du forstår at det er ratt. Ahh, her er det et ratt. Det skal jeg kunne snurre på for å endre retning på bilen. Men for å kunne ta i det rattet og vri det, og faktisk få bilen til å endre retning, da handler det om prinsipp to, altså mulig å bruke det.

Erling: Brukbarhet.

Anders: Hvis det har kilt seg, dette rattet, så bryter det prinsipp 2, ikke 1. Det første vi skal snakke om i 2-en. Det er tastatur. Det er jo et type ratt på en pc.

Erling: Det blir kjekt, det gleder jeg meg til.

Anders: Det er både for de som ikke kan bruke mus, eller de som foretrekker det.

Erling: Og vi skal gå gjennom hele 2.1.

Anders: Vi har slått sammen alle fire, alle tastaturkriterier i én episode.

Erling: Det var det vi hadde for i dag. Som vanlig har vi lyst på tilbakemelding og kommentarer. Send oss en mail på hei@universeltutformet.no.

Anders: Eller ranger oss i din foretrukne podkastapp. Forrige gang sa jeg at jeg aldri hadde gjort det, og nå har jeg gått inn og rangert alle mine favorittpodkaster.

Erling: Nå vet du hvor mye pris de setter på dette.

Anders: Takk for oss, takk for i dag, Erling. Jeg er Anders fra Webstep.

Erling: Og jeg Erling fra Okse. Hadebra.