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 er vi klar igjen, dette er episode 7. Da er det bare 19 igjen. Vi har ganske godt moment, vi spiller inn jevnlig. Nå ligger vi noen episoder foran.

Anders: Du må si hva episoden handler om, Erling.

Erling: Den heter få se. Handler om ting som skal være enklere å se, enklere å få med seg. I dag skal vi snakke om suksesskriterier under 1.4. Og som vanlig, Anders, hva står det for?

Anders: Vi er fortsatt på én, mulig å oppfatte. Som forrige episode, så skal det handle om retningslinje fire. Vi har delt inn alle suksesskriteriene under firen, i tre episoder. Denne og neste skal vi snakke om dette – at det skal være lettere å se og høre innhold. I dag skal vi kun snakke om å se innhold, ikke noe lyd i dag. Hvilke retningslinjer har vi tatt for oss i dag, Erling?

Erling: I dag har vi tatt for oss fire suksesskriterier – 1.4.4 som handler om å forstørre tekst, 1.4.5 og 1.4.9 som hanlder om bilder avtekst, og så har vi òg 1.4.13 som handler om innhold av teskt ved hover og fokus.

Anders: Det er en litt nyere sak, som ikke så mange kjenner til. Her håper vi at folk blir opplyste.

Erling: I dagens aside skal vi snakke om at universell utforming er dyrt. Eller er det det?

Anders: Det er litt frem og tilbake. Og i ris og ros-spalten, som vi har fått gode tilbakemeldinger på, at det er én av de bedre delene av podkasten vår.

Erling: Og som vi synes er veldig kjekk å lage.

Anders: Hvem tar vi for oss der?

Erling: Det er ferjer og hurtigbåter.

Anders: Det er viktig å kunne bestille seg en ferjetur hvis du skal ut å reise.

Erling: Det burde alle få lov.

Anders: Alle bør få lov å ta båt.

Erling: Hvorfor har vi disse suksesskriteriene?

Anders: Hvis vi begynner på den som handler om forstørring, så er det åpenbart, de som ikke klarer å lese en tekst fordi den er for liten, de bør få mulighet til å forstørre den. Folk må kunne forstørre tekst opptil 200 prosent uten at det går ut over lesbarheten til teksten.

Erling: Uten at det bryter designet på en slik måte at det ikke er mulig å lese.

Anders: Og vi har dette kriteriet her – det burde være litt unødvendig. Dette er litt av webbens styrke, at du har mulighet å gjøre slike grep, forstørre tekst, i motsetning til holdbarhetsdatoen på en colaflaske, eller alt annet som er trykt.

Erling: Hvis du lager en nettside uten legge på noe CSS, altså styler den, så er den i seg selv veldig tilgjengelig. Da kan du forstørre tekst, hvertfall i dagens suksesskriterier.

Anders: Men nå skal vi ikke oppfordre folk til å ikke bruke CSS, for da får du ikke solgt mange sandaler på nett.

Erling: Det er et viktig perspektiv å ta med seg, at en reduserer ofte tilgjengeligheten med den CSS-en en legger på, så bevisst på hva du gjør for noe.

Anders: Men du kan òg forbedre den. Så skal vi òg snakke om dette med innhold som dukker opp hvis du hovrer eller fokuserer på noe. Det mest vanlige eksempelet er jo menyer som popper opp, utfallsmenyer eller store megamenyer.

Erling: Store, gigantiske megamenyer. Eller dropdownmenyer som vi anglifiserte folk gjerne sier.

Anders: Der må vi tenke oss litt om, når vi lager dem, fordi det er ikke alle som klarer å bruke dem.

Anders: Hvem treffer dette, hvis vi begynner med konsumentene, Erling?

Erling: Konsumentene er svaksynte, de som vil ha større tekst for å kunne lese det.

Anders: I dag snakker vi ikke om blinde. Dette er kun svaksynte.

Erling: Folk som er i stand til å se noe. Og slike som deg, de som foretrekker større tekst. Preferanser.

Anders: Jeg inntar gjerne en annen sittestilling når jeg skal lese en lengre tekst på skjermen.

Erling: Du setter deg litt bak?

Anders: Litt bak, litt i godstolen, og fyrer opp tekststørrelsen litt.

Erling: Det er jo en fin trend, at det er større tekst på tekst som skal leses. Det er bra.

Anders: Det var jo en designtrend for noen år siden, at jo mindre tekst, finere var den.

Erling: Jo mindre du så teksten, jo finere var den. Så har du òg skrevet et punkt her om bruker med stor muspeker. Det må jeg innrømme at jeg ikke vet hva betyr.

Anders: Det er faktisk et lite triks som kom i én av de siste OSX-versjonene.

Erling: Det fikk jeg med meg.

Anders: Dersom du rister litt febrilsk på musen, så blir muspekeren stor, og det er fordi at når oppløsningen har blitt så bra som den er, så blir muspekeren så liten, og det er ikke alltid du ser den. Hvis du ikke klarer å finne den, så kan du bare riste litt på musen, så blir den stor. Noen velger å ha den stor hele tiden, fordi de har dårlig syn. Da har jo den opp skjermplass.

Erling: Det er noe å være bevisst på.

Anders: At folk klarer å trykke på det som dukker opp, eller faller ut. Og òg kognitive utfordringer, når noe dukker opp, så må det ikke forsvinne av seg selv. Vi som brukere må få lov å bestemme hvor lang tid vi vil ha på å lese innholdet.

Erling: Hva med produsentene her?

Anders: Der treffer vi alle typer produsenter. Her er det veldig viktig for designerne, at de husker på at tekst kan være større enn det er i et perfekt grensesnitt.

Erling: For eksempel at en overskrift kan over to linjer. Dersom du øker skriftstørrelsen vil den kreve mer plass.

Anders: Knapp, ikoner, menyer, menyelementer – det er ofte en lager det pikselperfekt uten å tenke at tekst kan forstørres, eller at en tekst kan være av en annen skrifttype som krever mer plass.

Erling: Knapp er et godt eksempel, det er typisk feil å definere den i piksler. Den bør være definert i et forhold til teksten, altså at det er padding rundt teksten, men at den ekspanderer til teksten.

Anders: Kodere, ikke minst. Må bruke rett måleenhet. Være veldig forsiktig og ikke definere høyde på elementer med absolutte tall. For eksempel hvis du har en boks som er 100 piksler høy og du har en skrift som er satt i en relativ enhet, så er det dømt til å mislykkes.

Erling: Det er helt sant. Og så har du de som skriver innhold.

Anders: Der ser vi jo at folk prøver å tilpasse innholdet sitt til sin egen skjerm, gjerne spesielt vanlig i bannere og type hero, der de velger ord for ikke å få tekst på flere linjer. Det er feil tilnærming. Skriv godt innhold, og sørg for at det vises bra på alle enheter og med større tekst.

Erling: Hvordan kan vi fylle disse suksesskriteriene?

Anders: Da har vi mulighet når vi lager innhold å forstørre teksten. Og her er det veldig viktig å ikke gå i fellen å bruke sideforstørring, men tekstforstørring.

Erling: Den må du utbrodere litt.

Anders: Fordi i moderne nettlesere, når du forstørrer, så forstørrer du alt slik at ting ikke brekker. Det gjør at du potensielt sett får horisontalt rullefelt.

Erling: Scroll som vi anglifiserte kaller det. Rullefelt, hehe.

Anders: Men når du skal teste dette må du forstørre teksten til 200 %, det er det som er regelen, du skal forstørre teksten uten at ting overlapper eller blir skjult. Det trenger ikke å se fint ut.

Erling: Hvis du gjør det rett i implementeringen, så er gjerne verdiene satt i et forhold til teksten, slik at designet vil tilpasse seg til tekststørrelsen som er skrudd opp.

Anders: Og det er hvertfall, sikkert flere, to måter å forstørre teksten på. Måten jeg gjør det på er at jeg forstørrer den i Safari, nettleseren på Mac, fordi da kan jeg … det som er den vanlige måten å forstørre på, det er command pluss, dersom du holder inne alt i tillegg til command, så forstørrer du kun teksten. Og det fungerer ikke i Chrome, for eksempel. Hvis du skal forstørre teksten i Chrome så må du inn i Dev Tools og endre verdiene i CSS-en. Det er ikke vanskelig, det heller, det bør …

Erling: Det har litt med hvordan det er implementert, at fontstørrelsen er relativ, ikke absolutt.

Anders: Der vil jeg si at dersom du har dessverre brukt en liten grunnstørrelse, så ville jeg ha testet med mer enn 200 %, for de aller fleste, om ikke alle nettleser, har 16 piksler som grunnstørrelse. Da kan du sette body til 32 piksler og se hvordan det ser ut.

Erling: Hvorfor er det satt til 200 % her i suksesskriteriet?

Anders: Det er fordi vi må forvente at de som kreve større tekst enn 200 %, at de de bruker sidezoom.

Erling: I tillegg?

Anders: Ja, og at de er vant med å rulle i to dimensjoner, altså opp og ned. Ikke opp og ned. Opp/ned og tilsiden. Jeg har vært på brukertest hos en svaksynt som hadde 800 % sidezoom. Så 200 % er for mange ganske lite, men vi må huske på at 200 % er regelen for at ikke tekst skal bli uleselig. Det er en måte å sjekke om ting er bra.

Erling: Bare for å gjenta, det er forskjell på tekstzoom og pagezoom.

Anders: Hvis du trykker command pluss, eller kontroll pluss hvis du er på Windows, og du gjør det én, to, tre, fire ganger. For du forstørrer 25 % for hvert trykk, og det ser bra ut, er du ikke nødvendigvis i tråd med dette, for da har du zoomet hele siden. Så fire trykk, da er du der.

Erling: Men hva med de små bokstavene som står i toppen av type offentlige nettsted.

Anders: Der tenker jeg at …

Erling: Liten A, mellomstor A og stor A.

Anders: Det er jo funksjonalitet som noen har laget for å forstørre tekst, og da tenker jeg, hvorfor skal du konkurrere med nettleserens egen funksjonalitet?

Erling: Vi har jo en teori om hvorfor de har gjort. Det er litt sånn legacy som vi anglifiserte gjerne kaller det, for i IE6 var det ikke mulig å forstørre noe.

Anders: Tja, det er ikke helt sant. Så lenge du definerte tekststørrelse i piksler, så var det ikke mulig å forstørre, det hang igjen i IE i årevis. Det var én av de store forbannelsene vår, eller mine, at det ikke var mulig. De definerte piksler som en absolutt måleenhet, ikke en dynamisk. I dag ser jeg det som helt unødvendig å legge til slik tilleggsfunksjonalitet. La nettleseren gjøre jobben. Litt på samme måte som at du ikke trenger å lage en egen knapp for utskrift, eller en egen knapp for tilbake.

Erling: Stol på det som finnes.

Anders: Det kan godt hende at folk er uenige her.

Erling: Vi vil gjerne høre det.

Anders: Kjør på. Det kan godt være at de som bruker disse, elsker dem. Som vi har sagt, brukerne først.

Erling: Det er ikke et brudd på suksesskriteriet?

Anders: Nei!

Erling: Du har lov å hive inn disse A-ene.

Anders: Ja, men mye mer arbeid.

Erling: Men denne 1.4.13, som går på hover og fokus og sånn, hvilke teknikker kan vi bruke der?

Anders: Når du har innhold som dukker opp med hover eller fokus, tastaturfokus.

Erling: Har vi noen eksempler der?

Anders: Typisk menyer som faller ned. Det er vanlig å ha en horisontal hovedmeny på en nettside. Når du hovrer over der, så dukker det opp noen undervalg. Da sier vi at det skal være mulig å fjerne eller lukke det innholdet ved hjelp en mekanisme, som det heter. Overfører vi det til praksis, la escape-lukke den handlingen.

Erling: Reversere det du akkurat gjorde.

Anders: Det er jo ofte det ESC-knappen er til, flukt.

Erling: Et annet eksempel er tooltips, hvor du gjerne midt i teksten har et tooltip. Tar du muspekeren over der så skygger det over noe annet.

Anders: Ja, men der treffer du et unntak fra dette suksesskriteriet. Nå er vi nede i detaljene. Dersom dette tooltippet er innebygget nettleserfunksjonalitet, for eksempel hvis du bruker title-attributtet, da er det unntak, da trenger ikke escape-tasten å lukke den, for du skal ikke overstyre nettleserens standard oppførsel.

Erling: Men vil den gå vekk hvis du trykker escape? Det kan vi teste etterpå!

Anders: Men hvis du lager din egen tooltip. Et vanlig eksempel er i skjema hvor du har informasjonsbobler, der du hovrer og det kommer en instruksjon på hvordan du skal bruke dette skjemaelementet. Et tooltip som er et hakk mer avansert. Skal du bruke et slikt, så må du forholde deg til tre regler i 1.4.13. Du skal kunne lukke med tastaturet, trykke på escape. Det skal være mulig å hovre det hovrede innholdet.

Erling: Altså hvis det kommer opp nytt innhold som må du kunne ta muspekeren over det innholdet uten at det går vekk?

Anders: Ja, og det skal forbli der helt til du ønsker at det forsvinner selv.

Erling: Betyr det når du tar muspekeren bort?

Anders: Ja, da har du bestemt selv. Det skal ikke være en automatisk timer. Det handler om at noen bruker lengre tid å ta inn over seg informasjon, og da skal brukeren ha makten her.

Erling: Et annet eksempel som var vanligere i gamle dager, var at mellom menyelementet og denne megamenyen så var det et lite gap, én piksel, som førte til at dersom du ikke var rask nok, så forsvant megamenyen.

Anders: Det var et typisk IE-problem, fordi boksmodellen var ulik.

Erling: Et annet eksempel, som kanskje er mer aktuelt nå, er hvis du har et menyelement, gjerne et ganske kort menyelement, så kommer det en megameny og du vil ned mot høyre, og så går du på tvers, du går egentlig utenfor det elementet du har hovret og du går òg utenfor elementet som har dukket opp, men da burde du ha en liten delay slik at megamenyen ikke går bort. Det er en litt sær situasjon, men likevel ganske relevant. Noe som òg dukker opp for de som ikke har motoriske utfordringer. Et veldig godt eksempel.

Erling: Når feiler vi på dette?

Anders: Vi feiler hvis teksten blir uleselig fordi den er kuttet eller overlapper. Overlappende tekst er veldig vanlig med 200 %. Da vi snakket før episoden nevnte du det med linjehøyde.

Erling: Når du implementerer er det fort gjort å ha en line height som ikke ivaretar at teksten kan gå over flere linjer, så anbefalingen der til frontendere er å teste overskrifter og knapper og sånn når teksten går over flere linjer.

Anders: En feil en kan gjøre er å definere linjehøyde i piksler og tekststørrelse i prosent eller em. Da knekker det, da vil jo teksten stå på samme linje. Zoom inn. Når vi snakker om disse enhetene, så har jeg lyst å slå et slag for REM, ikke bandet, men enheten. Min lille erfaring, nå er jo ikke jeg en som koder så mye, min erfaring er at det er mer forutsigbart å bruke rem i stedet for em, fordi du slipper å forholder deg til flere nivåer av arv.

Erling: REM-enheten er relativ til grunnstørrelsen, altså den som er definert på html eller body. Den størrelsen som er definert der, er rem i forhold til.

Erling: Og så er det òg når du har tekst på bilder.

Anders: Ja, det var ikke snakket så mye om.

Erling: Det er jo viktig i to av disse suksesskritiene.

Anders: To av dagens sukesskriterier handler om akkurat dette. Nei, én handler om det. Nå sa jeg feil.

Erling: Jeg sa feil først.

Anders: Tekst i bilder er noe du bare skal unngå.

Erling: Når vi sier tekst i bilder så er det herobilder, store bilder i toppen, eller bilder som ligner litt på bannere. De har tekst som ligger i bildet. Her er den sterke anbefalingen å unngå tekst som en del av bildet.

Anders: Også knapper. Jeg så senest i forrige uke, at den første handlingsdriveren, den første viktige knappen til Fjordkraft var et bilde. Det betyr jo at når du har tekst i bilde, så dersom du forstørrer tekst, så vil ikke knappen eller bilde bli forstørret. Hvis du bruker pagezoom så vil teksten bli av dårligere kvalitet. Så uansett hvilken teknikk du bruker, så vil du få en dårligere opplevelse. Det er årsaken til dette kriteriet.

Erling: Når vi snakker om implementering og frontendutvikling, så er dette dårlig håndverk, å ha tekst i bilde.

Anders: I CSS 3 fikk vi mange typografiske hjelpemidler. Før det var det litt mer kav, hvis du skulle lage slike fine wordart.

Erling: Nå har vi mange muligheter. Det er ikke like mange begrensninger i CSS som det var før.

Anders: Unngå bildefiler med tekst.

Erling: Hvilke verktøy er aktuelle?

Anders: Det er litt dumt å nevne Safari. Det er jo det jeg bruker. Nå husker jeg ikke om du har tekstforstørring i Internet Explorer eller Edge. Hvis du ikke har det, så har du uansett Dev Tools hvor du kan sette tekststørrelsen.

Erling: Og på mobiler kan du gjøre det i tilgjengelighetsinnstillingene. Hvertfall på iOS.

Anders: På Android òg. Gå inn der, skru det opp og se om det blir respektert. Dette ligger inne i iOS-retningslinjene og Android-retningslinjene. Nå vet jeg ikke, nå er jeg ute på tynn is, men du vil nok kunne få avslag på en app i Appstore hvis du ikke respekterer brukernes valg av tekststørrelse.

Erling: Vi får håpe det er slik.

Anders: Litt tynn is, arrester meg gjerne.

Erling: Bryter du loven, må du?

Anders: Disse er dobbel A. Nå er den om innhold ved hover eller fokus, den er 2.1. Det vil si at den er ikke en del av forskriften vår når vi slipper inn denne episoden i slutten av mai 2019, men den vil bli en del av det europeiske direktive, så bare gjør det folkens.

Erling: Og igjen, brukeren vil sette pris på det.

Anders: Dette er en av de retningslinjene som er ren brukervennlighet. Det som vi ikke nevnte er forskjellen på de to retningslinjene som går på forstørring. Den ene, 1.4.9, er nesten identisk. Det ene unntaket er at du ikke trenger å kunne forstørre teksting av synkroniserte medier eller video.

Erling: Tidsbaserte medier. Video og lyd.

Anders: Det vil si at når vi snakket om video i episode to, så anbefalte vi sterkt å legge inn programatisk teksting, og ikke teksting i videofilen.

Erling: Legge inn closed caption i motsetning til open caption.

Anders: Dersom du fulgte den anbefalingen der, så har du ryggen fri.

Erling: Da er du i tråd med 1.4.3 som er en trippel A. Alltid fint å få noen triple A-er.

Anders: Godt for samvittighet. Så ja, løsningen din må kunne leses med 200 %. Og du har ikke lov å ha tekst i bilder. Enkelt og greit.

Erling: Så til dagens aside. Dette er ikke dyrt. Eller er det dyrt?

Anders: Jeg har hørt flere ganger, at så lenge du har fokus på universell utforming tidlig i prosessen, og kvalitetssikrer gjennom flere ledd, så er det ikke nødvendigvis dyrere.

Erling: Det kan vi kalle en sannhet med sterke modfikasjoner.

Anders: Jeg vil si at det er noen kriterier som ikke er fordyrende. Det er ikke dyrere å lage kontrast åtte enn kontrast to på en tekst.

Erling: Det gjelder bare å vite om det. De som preker universell utforming, har ofte det budskapet at det ikke er fordyrende om du tenker på dette fra starten. Her kommer ditt men.

Anders: Jeg vil bryte denne uu-myten, fordi det er dyrere.

Erling: Det kan være dyrere.

Anders: Det er en grunn til at NRK ikke har tegnspråktolkning på alt av sendinger.

Erling: Det er naturligvis fordyrende.

Anders: Det vi gjør på denne podkasten er å lage en tekstversjon av alt.

Erling: Det er det du som gjør. Det har du fått kjenne på.

Anders: Men jeg vil ikke klage, fordi det har vært en veldig kjekk reise. På forrige episode, så skrev jeg og skrev og skrev. Ikke tro at du kan automatisere det, fordi vi snakker dialekt. Episoden varte i over en time og det ble over 7500 ord. Det er klart at det er billigere å ikke gjøre det.

Erling: Definitivt.

Anders: Det tar mindre tid å ikke gjør det. Nå har jeg jo ikke betalt for det, jeg har gjort det.

Erling: Tid er penger.

Anders: Men jeg vil si at det har vært så gøy, fordi det har påvirket meg i stor grad om hvordan jeg formulerer meg, og hvordan vi bygger opp denne podkasten. Og jeg har smakt veldig på forskjellen mellom det talte og det skriftlige språket.

Erling: Og du får utøve faget.

Anders: Ja, jeg må inn med masse attributter, språkendringer og forkortelser, lenker i øst og vest. Det er veldig kjekt. Det er godt å vite at vi skaper, vi produserer mye innhold som vil bli plukket opp av for eksempel Google og andre roboter. Det har en verdi. Jeg skal med hånden på hjertet si at det er ikke så mange som kommer til å lese disse tekstversjonene av podkasten.

Erling: Det har du nok helt rett i.

Anders: Vi skal ikke være skomakerens barn, vi skal gjøre det skikkelig. Jeg er glad for det. Dersom det er andre ting vi ikke har gjort skikkelig vil vi gjerne høre det. Konklusjonen er at universell utforming kan være ganske dyrt.

Erling: Men det er billigere å fokusere på det fra starten av enn å ta skippertak etterpå.

Anders: Det er ingen magisk pulver du kan drysse over på slutten.

Erling: Du kan ikke plutselig fokusere på det.

Erling: Så til favorittsegmentet. Vi har fått høre at det er favorittsegmentet til lytterne òg, ikke bare vårt. Nå er det praktiske eksempel i ferje- og hurtigbåtbransjen.

Anders: Da begynner vi med litt ris til Fjordline. Jeg kan jo nevne at jeg ganske nylig tok Fjordline fra Stavanger til Bergen, i stedet for bussen. Hadde en kanonbra opplevelse. Skal ikke gå inn på det. Husk at nå har vi lett etter feil. Så dette betyr ikke at Fjordline suger. De har ikke tenkt på 200 % tekststørrelse. De har designet eller implementert det til å feile. Det som skjer er ganske klassisk. De har en venstremeny der de har fine ikoner, det ser bra ut. Dette er moderne design. Fine ikoner med tilhørende tekst. Fyrer du opp tekststørrelsen, overlapper teksten slik at den blir uleselige. Ikke på alle, kun på de lengste. Dette gjør det vanskelig å lese. Ikke minst, kanskje en enda større blemme er at i rutesøket så har de, når du skal velge i nedtrekkslisten, hvor du skal reise fra, så faller teksten utenfor boksen, eller listen.

Erling: Den blir usynlige.

Anders: Dette gjør at hvis du skal reise fra ett av de første stedene i listen, så går det greit, men hvis du er uheldig og skal reise fra en plass med en bokstav litt uti alfabetet. Dette er òg et klassisk eksempel, fordi rutetsøket er et skjema, per definisjon. Men de har ikke implementert det med standard skjemakomponenter. Eller så kan du si at mulighetene vi har med HTML er ikke i tråd med de kravene vi har med moderne nettløsninger.

Erling: Et annet poeng er at dette er kjernefunksjonalitet, dette er det folk går inn for å gjøre i de fleste tilfeller, antar jeg.

Anders: Men vi ser at de har litt aria, som vi har snakket om. De bruker aria expanded.

Erling: Har de drysset litt sånn magisk støv på det etterpå?

Anders: Det er godt mulig at det funker, jeg testet det ikke, det kan godt være at bestillingsløsningen fungerer bra i skjermlesere, og jeg håper den gjør det, de har jo brukt aria. Men de har ikke tenkt på tekststørrelse. Der feiler de. Det er vanskelig hvis du er svaksynt å bestille på Fjordline.

Erling: Har de òg feilet på andre suksesskriterier.

Anders: Ja, dette med tekst i bilder feiler de ganske grovd på. De er ganske glade i karuseller. Nå skal vi ikke gå inn på det. Der har de ulike reklamer – bannere, i denne karusellen. Det er veldig fint grafisk. Det er grafikere som kan faget. Men det er implementert feil. Det er ikke brukt CSS. Det er satt inn som bakgrunnsbilder. Da kan du ikke sette alternativ tekst.

Erling: Dette er informative, ikke dekorative bilder.

Anders: Veldig informative! Og det er bilder som for eksempel Google hadde satt pris på å lese. For eksempel står det Din billigste bilferie bestiller du nå. Og her har du både ordet bilferie som er et kjerneprodukt, og så har du billigste som er et søkeord som de ville vært synlige på. Så her bryter de både tekst i bilder, men òg 1.1.1 som vi snakket om i første episode, alternativ tekst.

Erling: Men de har ikke feilet helt, det er ikke full krasj.

Anders: De har gode eksempler òg. De har fine bilder med en slik trekant i hjørne med tekst i. Det kalles kanskje en ribbon.

Erling: En flik.

Anders: Der står det spesialtilbud, og den har de kodet riktig. Det er tekst og 100 % CSS.

Erling: Prøvde du å øke tekststørrelsen der?

Anders: Nei, det burde jeg gjørt.

Erling: For det er et ganske langt ord som tar mye av plassen. Det må vi prøve etterpå.

Anders: Den har god kontrast, svart på gult. Det var Fjordline. Så kikket vi på det jeg tipper er hovedkonkurrenten, Color Line. De var litt bedre. De bruker mye tekst i bilder. De bryter det vi har snakket om i dag. Men Colorline får likevel litt mer kudos enn Fjordline fordi de har en alt-tekst som er perfekt. Da snakket vi litt om intensjon. De har én til én-forhold mellom teksten i bildet og alt-teksten. De beskriver ikke fargen på båten som er på bildet, de skriver budskapet med banneret.

Erling: De gjengir innholdet.

Anders: Det er helt topp. Litt morsomt. Color Line, de kjører òg slikt bånd. Det er tredy. Erling, du er en trendy designer. De har et tilbud. De har satt det inn med et slikt after, hva heter det.

Erling: Et pseudoelement i CSS.

Anders: Som et bagrunnsbilde uten tekst. Google vet ikke at dette er et tilbud. Og så skal vi snakke litt om Norled. Først må jeg gi dem litt ris. Fordi de har innhold som endrer seg ved hover. Det vil si at de har innhold, de har noen bilder der det står – i bunn står det en tekst, kontrasten er fin.

Erling: I motsetning til tekst i bildet.

Anders: De har gjort det vi snakket om i forrige episode, det er mange fallgruver om du putter tekst på et bildet, men de har gjort det bra. Men det som skjer når du hovrer et bilde er at teksten hopper opp, og i noen tilfeller, viser mer tekst. Det er ikke mulig å reversere den handlingen.

Erling: Dette er et mønster som er ganske vanlig i nettbutikker, på produkter. De har feilet her, de har brutt suksesskriteriet?

Anders: Ja, og grunnen til det er at dersom du har et veldig lite synsfelt, fordi du har forstørret, så ser du lite du den teksten og tenker at det var interessant, så hovrer du og teksten forsvinner, for den er utenfor synsfeltet ditt.

Erling: Det brukeren gjør da er å trykke på escape for å hindre det som skjedde, prøver det først, og funker det?

Anders: Nei, det funker ikke. Da har jo brukeren tre valg. Han må jo begynne å, heter det panere? Å bla seg i én av fire retninger. Da er vi igang. Må gjette hvor teksten forsvinner. Så litt ris til Norled. Men jeg så vil jeg òg trekke frem Norled. Det er litt med en bismak. Hvis du er på Nordled og går til bestilling, så kommer du inn på en helt egen løsning, som ser veldig umoderne ut. Oi, nå har vi en krabat her som er rastløs. En hund. Den ser umoderne ut, de gjør mye feil på denne siden. Men, du kan forstørre teksten helt uten problemer. Hvis du forstørrer teksten er det like enkelt, eller like vanskelig.

Erling: Nå har jeg ikke sett dette, men du nevnte at de hadde nok brukt standardelement som gjør at det ser litt umoderne ut. Ref. det du snakket om tidligere, at standardelementene ikke dekker de behovene vi har til et moderne design. Her ser det gammeldags, fordi de bruker standardelementene?

Anders: I dag har òg fantastiske mulighet til å få standardelement til å se moderne ut.

Erling: Dette er fortsatt ganske begrenset.

Anders: Ja, dette kan du bedre enn meg.

Erling: Det er noen dumme begrensninger som kanskje ikke burde vært der.

Anders: Det som Fjordline gjorde var å utvide funksjonaliteten, ikke bare utseende i disse skjemaelementene. For eksempel hadde de to kolonner i den ene nedtrekkslisten, for å få med fra og til i samme operasjon. Det klarer du ikke å gjøre med en select. Litt ris til Norled, fordi de er gammeldagse. De trør litt i alt-tekster, fargebrukg og diverse andre blemmer.

Erling: Men i dag fokuserer vi på et spesifikt sett med suksesskriterier, som de har gjort det bra på.

Erling: Da er vi ferdige for i dag. Dette var bra!

Anders: Ja, jeg har hatt det kjekt..

Erling: Det er så spennende å grave seg ned i dette. Det er så mye og det er så kjekt og det er så relevant, hvis du ønsker å treffe alle. Hvis vi skal huske noe fra dagens episode.

Anders: Da stiller jeg spørsmålet tilbake til deg.

Erling: Vi må huske at tekstforstørrelse er ikke det samme som sideforstørrelse. Det er forskjell på 200 % økning i tekst og på å zomme inn på siden. Og suksesskriteriene snakker om 200 %, det er forstørrelse av tekst.

Anders: Sideforstørrelse er alt, bilder …

Erling: Du zoomer inn på hele bildet på en måte. Mange bruker dette i kombinasjon. Du bør ikke ha tekst i bildet, fordi CSS er såpass bra. Det som skal være tekst, må være tekst. Det er hovedregelen. Sist er at du bør tenke deg om to ganger når du bruker nedfallsmeny eller dropdownmeny eller megamany. Noe som kommer ut som et resultat av en hover. Du må tenke på hvordan det er å bruke denne dersom den er forstørret, hvordan er den å bruke med motoriske utfordringer.

Anders: Nå kom jeg på noe som jeg glemt å nevne er at når noe skal dukke opp, så bør du prøve å plassere det over tomt innhold eller dekorativt innhold. Det er ikke alltid det lar seg gjør.

Erling: I motsetning til relevant og viktig innhold. Du fikk nevnt det på slutten.

Anders: Ja, det er jo litt dumt å innføre noe nytt under oppsummeringen.

Erling: Det var så kort og greit. Men neste episdoe, hva skal vi snakke om da?

Anders: Vi skal holde oss til, det er siste episode av 1.4. Vi skal snakke om tekst og lesbarhet, luft og typografi. Der har vi noen nye retningslinjer fra 2.1 som er veldig konkrete, som går på avstand mellom linjer, avstander mellom bokstaver. Litt om det vi har snakket om i dag.

Erling: Det blir kjekt.

Anders: Jeg gleder meg. Vi skal òg snakke om det jeg kaller rullefelter, det du kaller scroll. Når er det akseptabelt å få to rullefelter?

Erling: Horisontalt og vertikalt. Nå er vi i den situasjonen at vi er noen episoder foran det vi har publisert. Det er litt dumt, fordi vi har fått mange gode tilbakemeldinger. Vi ønsker jo å ta de tilbakemeldingene med oss inn i neste episode, men nå som vi ligger litt bak kan vi ikke gjøre det. Vi må hente oss inn. Vi er veldig interessert i tilbakemeldinger. Det er så kjekt. Vi ringer til hverandre og sender mailer og dette er konge. Send oss tilbakemeling på hei@universeltutformet.no. Legg igjen en rating på iTunes, legg gjerne inn en kommentar.

Anders: Det har jeg kjent litt på. Etter de to første episodene, så var det så få som hadde gitt tilbakemeldinger der. Jeg ble litt skuffet. Men så tenkte jeg litt på min egen adferd. Jeg er jo superavhengig av podkast, hører timesvis hver dag.

Erling: Superkonsument av podkast.

Anders: Og jeg gir jo aldri en stjerne. Aldri en tilbakemelding. Det er så synd. Vi som gjør dette fortjener det.

Erling: Det er vår form for applaus.

Anders: Nå har jeg bestemt meg for å gå inn og skrive noen setninger til de jeg liker, fordi de fortjener det.

Erling: Det var det vi hadde. Takk for oss. Jeg er Erling fra Okse.

Anders: Jeg er Anders fra Webstep. Takk for at du hørte på.