Uu-podcasten: Ubrukelig

Introduksjon

Erling: Velkommen til Ubrukelig. Det er litt spesielle omstendigheter i dag. Vi sitter midt i korona.

Anders: Du sier at du sitter, jeg ligger faktisk på magen på et teppe på sønnen min sitt barnerom.

Erling: Jeg sitter med spisebordet i stuen hjemme hos meg. Vi gjør dette her online, så hvis lyden ikke er så bra som den pleier, så er det forklaringen. Men vi skal ikke dvele for mye med det, for vi skal fokusere på det vi skal fokusere på.

Anders: Godt innhold trumfer middelmådig lyd, håper jeg.

Erling: Jeg regner nesten med at folk har litt mer forståelse for at lyden ikke er så bra som den kanskje burde vært. I dag skal vi evaluere Dagbladet.

Anders: Etter tips fra en IXDA-samling vi hadde i Stavanger for noen uker siden. Da kom Dagbladet opp som en kandidat. Da kan vi òg minne folk på at dere kan sende inn forslag til noe du vil vi skal evaluere.

Erling: Nå har vi fått oss domene, e-post og sånn. Så folk kan sende til hei@ubrukelig.fm. Vi prøvde å få dot no, men der var det én som prøvde å få alt for mye penger et ubrukelig domene.

Anders: Har du et godt forhold til Dagbladet, Erling?

Erling: Verken godt eller dårlig. Helt ok. Det er én av de jeg går inn på når jeg skal ha en kognitiv pause. Da går jeg inn på db.no, scroller ned, uten å lese noe, og så er det greit. Det er en tabolidavis som VG og mange andre. Du da?

Anders: Jeg har fått et dårligere og dårligere forhold til Dagbladet. Så jeg leser det aldri. Jeg går ikke innom noen gang. Det er nesten blitt så dårlig at hvis noen deler en sak fra Dagbladet, så er jeg skeptisk til å klikke på den. Det handler mer om at jeg har blitt mer og mer glad i NRK. NRK er nyansert, reklamefritt, det er mer behagelig å forholde seg til NRK.

Erling: Det er jeg enig i. Men nå skal det ikke handle om dette, det skal handle om den universelle utformingen av Dagbladet.

Anders: Beklager at jeg tok opp dette.

Erling: Det var tydelig at du hadde noe på hjertet om Dagbladet. Nå har du fått kommunisert det. Vi har definert en kjerneoppgave. Hva er det?

Anders: Det er å bli bruker eller kunde av Dagbladet Pluss, gjerne i en prøveperiode. For å få tilgang til det innholdet som ligger bak en betalingsmur.

Visuell vurdering

Erling: Å få en gratisuke på Dagbladet Pluss. Det første vi skal å gjøre er å gå gjennom visuelt hvordan det står til, med tilgjengelighetsbrillene på. Så hvis du begynner å snakke om hva du ser.

Anders: Da går jeg inn. Jeg har ikke åpnet Dagbladet enda, men jeg gjør det nå. Jeg åpner Dagbladet. Den laster ganske seint. Nå glemte jeg å ta på uu-brillene. Det første som stjeler oppmerksomheten min noen slike, jeg vet ikke hva det heter. Sånn akkurat nå-animasjon som beveger seg over skjermen. Akkurat nå, akkurat nå, akkurat nå horisontalt over skjermen.

Erling: Det som vi i gamle dager ville brukt en marquee til å lage?

Anders: Ja! Det var et HTML-element jeg hadde glemt. Akkurat nå tar mye oppmerksomhet, og så har de en lignende effekt, litt tilfeldig, på hovedannonsen. Toppannonsen. Det er en ganske ryddig meny i toppen der de bruker Dagbladets rødfarge over hele. Fremstår ganske tydelig hva som er navigasjon. På min skjerm får jeg opp fire tekstsaker rett under hovedlinjen. En ganske fin måte å presentere nyheter på tenker jeg, men de havner i skyggen av de akkurat nå-sakene.

Erling: Jeg mistenker at de ikke får så mange klikk, det er mange annonser og greier.

Anders: Det er mye som skriker etter oppmerksomheten, og det er litt av grunnen til at jeg ikke liker denne typen nettaviser. De nyhetene som blir presentert i tre kolonner, der er det veldig lite luft, veldig tett mellom bildene og teksten. For meg så glir det litt sammen, det er ødeleggende for lesbarheten. Det er litt tivoli med ulike tekststørrelser.

Erling: Jeg ble veldig nysgjerrig med de tre der. Kan du skru opp tekststørrelsen i Safari og se hva som skjer?

Anders: Det kan vi gjøre, for nysgjerrighetens del.

Erling: Det hadde vært interessant å sett.

Anders: Det er litt for Se og Hør-design for min smak.

Erling: Men kontrast for eksempel?

Anders: Ut ifra den visuelle vurderingen jeg gjør, så synes jeg kontrasten generelt sett er bra. Jeg ser ingen eksempler på lav kontrast. De bruker rødfargen mye, de bruker sort på hvitt og sort på gult, som jo har veldig god kontrast. Det er ingen tilfeller av tekst som ligger på et bilde. Kontrast er bra.

Erling: Det er litt bevegelse som jo blir nevnt i WCAG, men den er kanskje så liten at den er innenfor. Det er den akkurat nå-marqueen. Men ellers så sliter jeg med å finne noe som er brudd.

Anders: Det blir subjektivt.

Erling: Det blir å snu hodet rundt, og forstå hva som hører til hva. Jeg har jo sett mang en skjerdump av to titler som står ved siden av hverandre som danner en ny setning som blir morsom. Det er jo noe som folk kan oppleve, at du ikke klarer å lese det fordi det står sammen med noe som ikke er relatert.

Anders: Du hadde rett. Når de kjører tre kolonner, så fungerer det dårlig å øke tekststørrelsen. Tekst kuttes i stedet for at de reduserer antall kolonner, som en burde har gjort.

Erling: Dårlig løst.

Anders: De bruker fargene veldig aktivt for å skape oppmerksomhet. Gjerne litt for mye av det gode, spør du meg. Men de gjør det jo fordi det fungerer. De lever jo av klikk, dessverre.

Erling: Da er det slikt nettsider har en tendens til å se ut, når det er det de lever av.

Anders: Så kan vi snakke litt om språket. Dagbladet er som mange andre, flinke til å skrive overskrifter som en har lyst å klikke på. Og det gjør jo ikke nødvendigvis at språket er dårlig. Kanskje er clickbait-overskrifter bra for universell utforming, fordi du unngår vanskelig språk.

Erling: Jeg oppdaget at det er en tittel som heter bare «Ny jobb». Det sier ikke så mye. Det er fordi det står under et bilde, hvor da konteksten er bildet, og alt-teksten er «Ny jobb». Så hvis du ikke kan se hvem som er på bildet, så vet du ikke hvem som har fått ny jobb.

Anders: Vet du hvem som er på bildet?

Erling: Det er vel hu Funkygine.

Anders: Hun?

Erling: Hun heter Funkygine. Kjenner du ikke Funkygine? Følger du ikke med i timen? Det er en influenser.

Anders: Å ja.

Erling: Sånn fitnessinfluenser. Hun har fått ny jobb.

Anders: Det var bra at Dagbladet ikke hadde brukt sånn fitnessbilde da. Det hadde jo vært litt typisk de.

Erling: Faktisk.

Anders: De har brukt et profilbilde. Fint smil. Her burde det stått Funkygine har fått ny jobb.

Erling: Men, skal vi gå videre til tastaturnavigasjon.

Tastatur

Anders: Det skal vi. Vi må ikke glemme kjerneoppgaven vår. Vi går videre til tastaturnavigasjon. I dag kjører vi uten skjermleser, rett og slett på grunn av teknikken vår. Da begynner vi, som vi alltid gjør, med å trykke på den hellige tasten – tab, tabulator.

Erling: Hva skjedde?

Anders: Jeg gjorde en liten feil selv. Jeg var litt treg. Jeg havnet i bunn. Altså første tabulatorstoppet er en knapp som heter «Les mer» som får en blå ramme, som er bra. De har altså brukt nettleserens standard fokusmarkering. Å ha en knappetekst som er «Les mer», det vet vi ikke er bra, for knappeteksten bør forstås utenfor kontekst. Her må jeg gjøre en liten kognitive jobb, jeg må forstå hva dette handler om. Det er òg litt forvirrende at jeg havner i bunn med første trykk. Det kan en forsvare med det er det øverste elementet hvis en tenker dybde. Det er en slags modal som ligger i bunn, som handler om personvern.

Erling: Når du sier i bunn, så mener du ikke at den blir scrollet helt ned til bunn, det er er i bunn av viewporten så ligger det en overlay.

Anders: God presisering! Den er fixed i bunn. Det er første tabulatorstopp. Jeg vil ikke lese mer om personvern, det er det jeg bryr meg minst om når jeg er på Dagbladet. Jeg har jo lyst å skru av alt utenom det nødvendige. Jeg har lyst å skru av alle informasjonskapslene, utenom de nødvendige. Da må jeg kanskje inn på les mer, men det gidder jeg ikke. Vi Velger minste motstands vei. Jeg trykker en tab til. Da skjedde det ingenting. Nei. Jo!

Erling: Hvor havnet den?

Anders: Det som skjedde var at siden laster på ny.

Erling: Lastet på ny?

Anders: Jeg tror kanskje at de har en meta refresh. Den bare lastet på ny.

Erling: Det er ikke bra.

Anders: Nei. Ikke bra i det hele tatt.

Erling: Du mister der du var.

Anders: Men det kan være at jeg kom borti noe, så la oss ikke arrestere dem veldig på den. Jeg trykker tab én gang til.

Erling: Ja?

Anders: Da hoppet den til knappen «Jeg forstår», som forventet. De hadde to fokusmarkeringer. Knappen ble litt mørkere. Bra. Litt bedre kontrast. I tillegg til en blå ramme. Jeg velger faktisk å ikke trykke på den knappen, jeg vil ikke ta stilling til det. Vi skal ikke ta den personverndiskusjonen. Jeg trykker en til gang. Det som skjer da, er at jeg havner der jeg forventer å havne, helt i toppen. Dagbladet får en mørkere bakgrunn, og her har en ikke den blå fokusmarkeringen. Det er ganske lite tydelig at jeg er på Dagbladet.

Erling: Det var ikke noe «hopp til» her nå.

Anders: Godt observert. Ingen hopp-lenker, så der får de minus i boken. Nå trykker jeg tab én gang til. Nå har jeg forstått hva fokusmarkeringen er, og jeg hopper til nyheter, jeg hopper til sport. Vi er i hovedmenyen. Vi hopper til kjendis. Jeg hopper til TV. Jeg hopper til pluss. Jeg stopper på pluss, fordi det er der vi skal. Men nysgjerrigheten min går likevel til neste menyelement fordi det er det eneste menyelementet i hovedmenyen som har en pil ned, som indikerer at det er undervalg til den menyen. Den menyen heter innhold. Så ser jeg òg at hovedmenyen er delt i to. Du har de som vi nå har vært innom – nyheter, sport, kjendis. Så har vi de som ligger til høyre, som har tykkere tekst, som er Tips oss, Kjøp pluss og Logg inn. Når det står Kjøp pluss, så kan det jo tenkes at den første plussen, første valget Pluss, at det bare er en oversikt over alle pluss-artikler. Ikke sikkert det er kjøp pluss. Uansett, jeg hopper videre til innhold, og så trykker jeg enter på den, for å se om det åpner seg en ny. Det gjorde det! Det kom opp en megameny på den. Da tar jeg av ren nysgjerrighet og tabber én gang til, for å se om jeg hopper videre i hovedmenyen, eller om fokuset har hoppet inn i megamenyen, som jeg forventer. Dette gjorde vi òg i forrige episode. Her hoppet nå fokusmarkeringen ned til første valget i megamenyen. Bra, som forventet.

Erling: Kan ikke du gå opp, lukke menyen og tabbe forbi, for å se om du havner i megamenyen selv om den ikke er åpnet.

Anders: Ja. Jeg trykker escape og forventer at megamenyen lukkes. Det er ikke noe lukkenapp i megamenyen. Det funket ikke. Jeg kan ikke escape den, som jeg forventet. Det var minus. Da shift-tabber meg to tilbake. Trykker enter for å lukke. De har en visuell markering – pilen har snudd seg opp nå, som indikerer at det er interaktivt. Trykker innhold. Pilen snur seg med en liten fin animasjon, og nå forsvant tastaturfokuset. Nå vet jeg ikke hvor jeg er. Når jeg trykker tab nå, så tror jeg ikke jeg hopper videre fra der jeg stod. Jo, det gjorde jeg! Det som skjedde var at jeg hoppet videre til «Tips oss». Vi var i en tilstand der ingenting hadde synlig tastaturfokus, så det var litt dumt. Men det var bra at vi hoppet til tips oss. Jeg tabber videre én til, og havner på kjøp pluss. Jeg har lyst å bli pluss-abonnent. La oss tenke at jeg har funnet noen interessante artikler som jeg har lyst å lese. Jeg trykker enter. Bra. Nå kommer jeg til en ny side selvfølgelig. Her står «Kjøp pluss nå, få første uken gratis. Få tilgang på egne premiumartikler». Det er jo det jeg vil ha. «Videodokumentarer», aha! Så bra. Så har de tre valg. Én uke gratis, én måned 99 kroner, ett år 66 kroner måneden. Det er bra at det er prøv pluss som er uthevet. Den skal jeg tabbe meg til. Først havner jeg nede i personvernboksen. Så må jeg tabbe meg gjennom hele menyen.

Erling: Fordi det er ikke hopplenke der heller?

Anders: Nei, jeg må tabbe meg forbi hele menyen. Den tabber seg heldigvis ikke inn i megamenyen som er skjult. Tabber meg til søkefeltet, som automatisk åpner seg uten at jeg aktiverer det, det er ikke bra. Ikke krise. Intensjonen er god. Jeg skal ikke søke, så jeg hopper videre. Da får jeg et unødvendig tabstopp der. Meget bra, rett fra søkefeltet, så er det første interaktive elementet etter søkefeltet i toppen, det er «Kjøp nå», som er knappen til én uke gratis. Den får samme fokusmarkering som …

Erling: Men den har bare teksten «Kjøp nå»?

Anders: Ja, så der burdet det stått «Kjøp én uke gratis».

Erling: Nettopp.

Anders: Jeg trykker enter, og det kommer opp en modal, så det er jo bra.

Erling: Spørs. Hvis de har løst modalen bra, så er det jo bra.

Anders: Ja, jeg kunne sagt interessant. Fordi jeg ser i bakgrunnen nå, som er neddysset, så står fortsatt fokusmarkeringen på «Kjøp nå». Hvis jeg trykker tab nå, så er jeg spent på hvor den havner. I modalen som jeg ser, så har jeg tre interaktive elementer. Jeg har en x med lav kontrast, som er å lukke boksen. Jeg har sjekkboks som er å akseptere kjøps- og bruksvilkår og jeg har en gå videre-knapp. Det jeg skal gjøre nå er å tabbe meg til sjekkboksen og så skru på den. Og tabbe meg til «Gå videre». Jeg trykker tab og få en megablemme. Det som skjedde var at jeg tabbet meg til månedspakken i bakgrunnen. Tastataturfokuset er ikke i modalen. Det vil si at jeg tviler på at jeg klarer å tabbe meg frem til modalen, men hvis jeg er veldig interesserte i å kjøpe dette nå, så får jeg tabbe meg videre og se hva som skjer. Det som skjedde var at jeg tabbe meg ned til en video som ligger i bakgrunnen. Der er det mange tabstopp. Det er en Youtube-video. Jeg tabber meg videre til reklame. Nå ser jeg ikke modalen lengre. Jeg er i bunnteksten. Trykker tab tab tab tab tab. Det som skjedde nå var at denne modalen ligger helt til slutten i koden, så jeg kom inn på modalen nå. Jeg tabbet meg gjennom hele bunnseksjonen, og nå er jeg på den sjekkboksen som jeg ville tabbe meg til. Den er ikke helt utilgjengelig. Den er bare vrien å få fatt på.

Erling: Jeg regner ikke med at det er en aria-live på den.

Anders: Og det trenger det ikke å være. Hvis en bruker role="dialog". Eller enda bedre, det finnes et eget HTML-element for dialog. Jeg kan òg si at WAI-ARIA har en god beskrivelse på hvordan dialogbokser skal kodes. Og her er det veldig klart at Dagbladet ikke har løst dette i henhold til beste praksis.

Erling: Men dette dialog-elementet, hvor godt støttet er det?

Anders: Det vet ikke jeg, så jeg er spent på svaret ditt.

Erling: Jeg kan si at det ikke er støttet i Safari, ikke støttet i Firefox. Ikke støttet i IE, men det er støttet i Edge og Chrome. Ikke overraskende at det er støttet i begge to siden det er Chromium på begge. Og støttet i de siste Opera-versjonen. Ganske dårlig støtte.

Anders: Kan du òg sjekke role="dialog"? Nå kan du si til våre kjære lyttere hvor du sjekker dette, så kan vi legge det til i episodelenkene.

Erling: Jeg går inn på caniuse.com og søker opp elementet eller attributt, og så pleier jeg å få ganske gode treff, men jeg fikk ikke treff på role dialog her. Nei. Der kan vi ikke gi noen svar.

Anders: Fokuset mitt står på sjekkboksen, at jeg må godta kjøps- og bruksvilkår. Jeg markerer den med space. Det funket bra. Tabber meg videre. Da tabber jeg meg faktisk til bruks- og kjøpsvilkårene. Det er greit. Det er god fokusmarkering. Tabber meg videre til knappen «Gå videre». Den ble godt markert. Trykker enter. Nå regner jeg med at jeg kommer inn i en betalingsløsning. Nå kom jeg inn i noe som heter aid.no. Noe jeg aldri har sett før. Skjermbildet er superrent. Så her har de forstått at de ikke skal forstyrre med unødvendig informasjon, men de kunne ha skrevet en liten setning om hva AID er.

Erling: De kunne skrevet med noen få ord hva som skjedde.

Anders: Jeg tipper at dette er Aller sitt alternativ til Spid, altså Schibsted sin ID-løsning. Og det kan godt være at de fleste vet dette, men ikke jeg.

Erling: Jeg har ikke så god kjennskap til dem, jeg.

Anders: Som en liten pfishing-varsel, så har plutselig favorittikonet endret seg fra den røde og hvite Dagbladet-logoen, til en rosa A, som tydeligvis er logoen til AID. Her kan det lukte litt. Knappedesignet har òg endret seg. Nå skal jeg ikke lage mer trøbbel enn jeg må, så jeg aksepterer at jeg trenger en ny bruker på AID. Jeg tabber meg til logoen, en stor Dagbladet-logo i toppen, hvis jeg vil gå tilbake til Dagbladet. Det vil jeg jo ikke. Jeg tabber meg ned til første knappen som heter Logg inn. Veldig svak fokusmarkering. Kun en liten understrek på teksten.

Erling: Kunne vært bedre.

Anders: Jeg tabber meg til neste, som er lag ny bruker. Det samme skjer der. De har en liten understrek på knappen. Jeg trykker enter. Nå åpnet det seg et skjema her, som jo er bra, for da får vi testet skjema. Her står det lag en AID-bruker. De har fortsatt ikke forklart meg hva AID er. Det står at alle felter må fylles ut. Det synes jeg er greit at de skriver. Så står det òg Facebook og Google på to knapper, men det står ikke hva de gjør. Da må jeg forstå at det er innlogging med Facebook og Google. Jeg ønsker ikke å knytte min Facebook-konto til Dagbladet, så jeg velger ikke å bruke den. Den har god fokusmarkering. Det har Google òg. Veldig bra – de skriver fornavn og etternavn. Det var ganske kul fokusmarkering på innskrivningsfeltet.

Erling: Hvordan er den?

Anders: Det starter med at de bruker en for svak kantlinje. Men når jeg markere det, så er det en liten animasjon slik at kantlinjen blir sort. Da skriver jeg Anders Ekkje Slettebø. Og mitt telefonnummer. Jeg gjør dette på privaten. Nå havnet jeg ned i fødselsdato. Her ser vi at de ikke har ledetekst per skjemafelt, de har fødselsdato i tre nedtrekksmenyer. Der bruker de da førstevalget i nedtrekksmenyen som ledetekst, som ikke er bra. Så her burde de ha løst dette med et fieldset, der legend er fødselsdato. Og så bruke en label per nedtrekksmeny, det hadde vært mer tilgjengelig.

Erling: Er det greit å skjule dem?

Anders: Nei. Det kan være, jeg husker ikke.

Erling: Hvordan fungerer de?

Anders: Jeg trykket enter for å åpne den, det som skjedde nå var at den prøvde å sende inn skjema. Tastaturfokuset forsvant, så jeg må tabbe meg gjennom alt på ny. Og det kan godt være at det var min feil, at enter bør sende inn skjema, at det er slik en select fungerer, og hvis jeg tabber meg ned til første felt, så kan jeg da velge null fire, tabbe meg videre, så kan jeg velge elleve, så tabber jeg meg videre til år, så må jeg pile meg ned til ganske mange valg. 1980. Nå vet alle når jeg fyller året, men det er bare kjekt. At lytterne kan gratulere meg med dagen.

Erling: Jeg har jukset litt og sjekket koden bak dem, om det er custom eller ordentlig. Det ser ordentlig ut. Det er en select option som de rett og slett har stylet. De har stylet elementet i seg selv, og det er ikke så ofte vi ser.

Anders: Supert! Bra Dagbladet.

Erling: Eller AID.

Anders: Jeg tabber meg videre. Det som er litt forvirrende nå er at feilmeldingene ikke går bort. De står der fordi de valideres kun ved innsending. Jeg kommer ned til en sjekkboks, som er å akseptere brukervilkårene. Den markerer jeg med space, som er forventet, tabber meg til brukervilkårene som er en lenke, de vil jeg ikke lese. Jeg tabber meg til lenken retningslinjer for personvern, det gidder jeg ikke å lese. Tabber meg til fortsett.

Erling: Én kommentar her. Nå fikk du opp feilmeldinger, tilfeldigvis, for du trykket enter på select option. Men du fikk kun kontekstuelle feilmeldinger, du fikk ikke oppsummering.

Anders: Nei.

Erling: Da feilet de på den òg.

Anders: Bra, men det er tastaturnavigering vi holder på.

Erling: Men det er greit å nevne annet òg.

Anders: Fokusmarkeringen på fortsettknappen er svak, kun understrek. Enter. Da skal jeg skrive inn en engangskode, den fikk jeg på SMS. Heldigvis har de ingen global meny, jeg må tabbe meg forbi hovedlogoen hver gang, men det er spiselig. Det er et lite problem at de ikke har skiplenker.

Erling: Ja, altså det er ikke et problem. Det hadde nesten vært mer forvirrende hvis det hadde vært en skiplenke der.

Anders: Ja, like mange trykk. Da trykker jeg på fortsett, jeg har skrevet inn engangskoden. Tydelig skjemaetikett. Teksten er god. Jeg skal lage et passord. De har en lenke som heter «Slik lager du et sikkert passord», den gidder jeg ikke å lese. Jeg velger mitt eget passord. Og så har de en vis-knapp i skjemafeltet. Nå har jeg skrevet inn et passord som jeg vil ha, så tabber jeg meg til vis-knappen. Den får god visualisering. Jeg trykker på enter. Passordet vises. Knappen heter fortsatt vis, den burde nå hete skjul.

Erling: Det er kudos at de har den funksjonen.

Anders: Det er det. Så trykker jeg på enter, jeg er nede på fortsett-knappen. Flott, du har nå en AID. Du er nå innlogget. Når du skal bruke AID … OK. Se nettstedene kan brukes på AID-profilen din. Nå har jeg en knapp som heter «Fortsett, du er snart i mål». Den har jeg markert, trykker enter. Husk nå kjære lytter, jeg har enda ikke brukt musen, så jeg har kommet ganske langt. Jeg er på Dagbladet. Nå kom det mye tekst her. Nå ble det ikke like rent lengre. Nå ble det litt støyete.

Erling: Er vi fortsatt i AID-verden?

Anders: Ja, det er jeg. Nå kommer det opp den informasjonen som jeg mistenkte, at det er Aller Media sin ID. Nå sier de at jeg må gi Aller Media AS tilgang til din AID. Det forstår jeg ingenting av. Jeg har jo opprettet en AID, som er Aller Media sin tjeneste. Hvordan skal jeg gi tjenesteleverandøren tilgang til sin egen tjeneste? Dette steget forstår jeg ikke. Men det er kanskje et juridisk krav, jeg vet ikke. Jeg regner ikke med at Dagbladet prøver å lure meg her, så jeg tabber meg ned til knappen som heter gi tilgang og gå videre. Jeg har fortsatt ikke forstått hvilke valg jeg tar nå. Forstår du?

Erling: Nei.

Anders: Følger du meg parallelt nå forresten?

Erling: Nei, jeg hører bare på deg, jeg.

Anders: For du er nå en lytter, ja.

Erling: Jeg har jukset litt, for å sjekke litt kode. Nå er jeg helt blind, fordi jeg har ikke gått gjennom den innmeldingsprosessen.

Anders: Jeg er på en knapp som heter gi tilgang og gå videre. Jeg trykker enter. Selv om jeg synes prosessen har vært bra til nå, så begynner jeg å bli litt lei. Nå har det vært mange steg her.

Erling: Når en blir lei av mange steg, så er det ofte en indikator på at det er steg en ikke helt forstår meningen med.

Anders: Det var det siste. Nå ble jeg kastet inn i en tredje løsning. Jeg begynte på Dagbladet, nå har jeg vært inne i en verden som heter AID. Nå er jeg inne i noe som heter, i tittelen står det Nets, i URL-en så står det dibspayment.com. Logoen på siden Nets. Dagbladet har ikke fortalt meg at de bruker Nets. Her blir jeg litt skeptisk. Nå er ikke dette en UX-evaluering, dette er en uu-evaluering.

Erling: Skulle du ikke få det gratis?

Anders: Det har de ikke sagt noe om, jeg har hvertfall ikke lest det.

Erling: Hvorfor er du inne i en betalingsløsning?

Anders: Det er sikkert fordi at jeg må betale etter gratisuken.

Erling: Så de ber om kortdetaljene nå. Hmm.

Anders: Vet du hva? Jeg hadde tenkt å gjennomføre dette. Jeg stopper her. De har satt automatisk fokus i feltet for kortnummer, som gjør at jeg slipper å tabbe meg ned til det. Bra til Nets. Hvis jeg tar på meg sikkerhetsbrillene. Vi skal ikke bytte briller hele tiden, men det er vanskelig å unngå. Det står i toppen «Tilbake til Dagbladet Pluss AS». Det tror ikke jeg på. Jeg tror ikke på at det finnes et firma som heter Dagbladet Pluss AS.

Erling: Nei.

Anders: Det kan godt hende at det finnes, men jeg ble usikker. Jeg ble sendt fra AID til dette. Men grunnen til at jeg avslutter her, der er fordi jeg ikke har kortet på meg, og jeg har kun lagret kortinformasjonen min i min private nettleser, og her er jeg inne i på jobbnettleseren, og her har jeg ikke lagret kortet mitt. Jeg er jo en slik som skiller hardt mellom jobb og privat. Så derfor så kan jeg ikke betale, og de har ikke et valg om Vipps, som jeg gjerne ville ha brukt. Men det er verdt å nevne, dette var en tastaturtest. Jeg har kommet meg nesten i mål. Og jeg tror jeg hadde kommet meg gjennom denne Netsen med tastatur. Så Dagbladet har forsåvidt klart oppgaven, selv om den feilen med modalen var veldig stygg.

Erling: Men det at du nå kommer til betaling. Var det noe før som indikerte at du skulle legge inn kortdetaljene.

Anders: Ikke direkte, men det stod i en veldig … ok, jeg skal gå tilbake. Dette er bra at du spør om.

Erling: Det har litt å gjøre folk i stand til å fullføre oppgaven. Som du sier nå, hvis du ikke har kortet, eller hvis du ikke er mobil. Og så er det sikkert en timeout på denne betalingen.

Anders: Vet du hva, dersom jeg går tilbake til det første steget inne på plussen, så sier den med veldig liten tekst, at uken er gratis med en stjerne, det fornyes automatisk til 55 kroner per uke, som da indirekte sier at du må inn med kortinformasjonen. Så står det i stjerneinformasjon at jeg kan si opp når som helst, men senest 48 timer. Det står ikke veldig klart at jeg må inn med kortet, men de kunne ha skrevet det, så kunne jeg funnet frem det før jeg startet. Eller så hadde faktisk begynt på denne prosessen i min private nettleser.

Erling: Nå mistet de en bruker.

Anders: Ja, det gjorde de. Og jeg hadde tenkt å gjøre det.

Erling: Du ble litt gira når du så at det var dokumentarer.

Anders: Ja! Det visste jeg ikke om.

Erling: Kanskje du hadde blitt en Dagbladet-kunde, selv etter den slakten du ga dem introen.

Anders: En liten observasjon her, på den siden kjøp pluss, så er så tittelen på siden, title-taggen «kjop» med små bokstaver bindestrek «pluss» bindestrek «dagbladet». Så de har ikke en menneskelige måte å skrive ut den tittelen på. Vi avslutter tastaturnavigasjonen. Vi går videre til neste vurdering, som er din vurdering, Erling. Værsegod! Nå skal du få snakke om kodekvalitet. Kjør show.

Kode

Erling: Jeg har sett på koden på forsiden på dagbladet.no. Jeg har inspisert litt. Jeg har søkt etter element som kan gi meg en indikator på hvor bra dette er, hvor bra det står til. Jeg må si at jeg er positivt overrasket. De har brukt masse landemerker. De har header, de har nav, de har main, de har footer. De har tilogmed article på artiklene sine. Dette ser veldig bra ut. Jeg inspiserte søkefeltet og det er ekte form med input og button og hele pakken. De har h1 på alle artikkeltitlene, som er bra. Spesielt siden de er inne i en article, for da indikerer du at det er den øverste headernivået i det landemerket, altså article.

Anders: Jeg synes det er bra at du sier det er bra, for det er omdiskutert. Noen gamle SEO-hoder mener at du kun skal ha én h1 per side. Jeg er enig med deg. Slik Dagbladet har løst det er tipp topp.

Erling: Og så har de nav, landemerke for navigasjon. Så har du ul og li, som er bra. Jeg sjekket òg det innholdet som du gikk gjennom, for å se om det var noe som var skjult før du klikket på det, eller om det allerede var en del av DOM>-en. Da kan jeg bekrefte at det allerede var en del av DOM-en. Når jeg sier DOM-en, så mener jeg en del av koden, HTML-en, som òg er bra. At det er et element som du kan legge noe på, for eksempel aria-live. Eller haspopout eller hva det heter. Så det var bra. Jeg slet litt med å finne noe som var dårlig, rett og slett. Det er enormt med div-er. Jeg forstår hvorfor de må ha det, når de har denne typen design. De har gjort en god jobb med å skrive semantisk kode. Kudos til Dagbladet. Det tar oss videre til neste, som er den automatiske testingen. Den kan jo fort avsløre mer enn det jeg har gjort i min overfladiske evaluering. Hva sier den?

Automatisk testing

Anders: Jeg har tatt en automatisk test, og der har jeg brukt, som forrige gang, verktøyet Accessibility Insights. Det verktøyet fant syv feil. Det er veldig lite. Spesielt når en ser det er kun tre typer feil. Det er tre typer feil som totalt har feilet syv ganger. De feilene er ganske ubetydelige. De tre type feilene er iframe uten title-attributt. Det er noe reklamebannere som er puttet inn i en iframe. Det er to bilder uten alternativ tekst. Det er bilder som ikke har en kilde, som ikke har source. Det er rett og slett pixel-bilder. Og så har de òg tre lenker uten tilgjengelig navn. Det er en stor hesteskoreklame, som går rundt hele innholdet. En kan løse det, men det går under bagateller. Dette er bra. Til å ha så mye kode som Dagbladet har på forsiden sin. De er mye der, et lite tivoli.

Erling: Et så komplekst grensesnitt.

Anders: Det er det, mange kolonner. Innhold.

Erling: Det er mye som skjer.

Anders: Animasjoner. Og siden er så enormt lang. Av antall kodelinjer, så er syv feil veldig lite. Men det jeg gjorde – hvis vi har tid til litt til, Erling, så har jeg flere kommentarer til dette med automatisert testing.

Erling: Gjerne.

Anders: Av ren nysgjerrighet. Nå har jeg brukt dette verktøyet Accessibility Insights litt i det siste, og jeg har blitt ganske glad i det. Så er det slik at en får spørsmål om hva som er de beste verktøyene. Så jeg kjørte òg automatisert testing i tre andre verktøy. Et verktøy som har vært mye på radaraen min i det siste er Deque sitt verktøy som heter Axe Pro, som jeg enda ikke har kjøpt, men jeg er inne i en prøveperiode. Det er de som har laget denne Axe-motoren som de fleste testverktøyene baserer seg på, så når vi hadde han Kristian som gjest i Universelt Utformet, så sa han at de fleste, som for eksempel Google sin Lighthouse, bruker Axe i bunn. Så nå har Axe et eget verktøy, de har òg et eget tillegg til Chrome, som Accessibility Insights er. Det er veldig mye interessant i Axe Pro, det kunne nesten vært en egen episode. Den finner 10 feil automatisk. Den ene feilen de påpeker er at Dagbladet bruker aside i en article, og at aside skal ligge i et toppnivå. Jeg sjekket spesifikasjonen på aside, og jeg klarte ikke å komme frem til grunnen til at det ikke var lov, eller at det ikke var en god praksis.

Erling: Men jeg husker at det var en del skriverier om akkurat det aside-elementet, hva du skulle bruke det til. Jeg husker at de tingene der ble diskutert, hvor kan du legge en aside. Det er tolkning.

Anders: Nå er vi litt nede i detaljene. Uansett er det ikke en grov feil. I tillegg har de funnet to diver som ligger utenfor landemerker. Det er langt innenfor min akseptansegrense.

Erling: Det er ikke verdt et notat i en rapport.

Anders: Da skal jeg i så fall være ute på krigsstien. Jeg kjørte også gjennom Lighthouse, som er en del av Chrome. Der ble det for mye for Lighthouse på desktop, så den stoppet opp, men han fant ingen feil på mobil. Det kan jeg tro på, for de feilene som Accessibility Insights fant, er relatert til reklameting som blir skjult på mobil. Så det kan godt stemme. En liten pluss til Lighthouse er når den desktoptesten tok så lang tid, så under lastingen så har de artige fakta. Kjempekjekt. For eksempel at 70 % av alle nettsider tar 7 sekunder å laste på mobil, som selvfølgelig er alt for mye.

Erling: Kjempelenge.

Anders: Kul idé av Google. Det blir litt kjekkere å vente på at testen skal bli ferdig, når du kan følge med på det.

Erling: Du sa at du hadde prøvd tre til. Hva er det siste verktøyet?

Anders: Det siste er Siteimprove, som er et ganske stort verktøy. Dette vurderer jeg å kjøpe nå, fordi jeg har kun brukt Chrometillegget til Siteimprove tidligere. Denne finner enormt mange feil, faktisk 198. Og da har jeg skrudd av de som er reviewfeil, hvor du må gjøre en manuell vurdering i tillegg. Den finner mange flere feil enn de andre. Men flere av dem er diskuterbare. Men den fant for eksempel at Dagbladet ikke har skiplenke. Og det gjorde ikke de andre.

Erling: Interessant.

Anders: Faktisk skal jeg nå gjøre en uu-evaluering av en del avanserte PDF-er. Og det har jeg ikke gjort før. Der vet jeg at Siteimprove har funksjonalitet for. Ikke i Chrometillegget, men i programmet sitt. Men et lite stikk til Siteimprove. Jeg gikk til dem med lommeboken åpen, fant ingen kjøpsmulighet, måtte registrere meg. Fikk mail om at jeg ville bli kontaktet for en manuell demo innen to dager. Og jeg var solgt av teksten deres på nettsidene. De skrev at de var ganske flinke på PDF-evaluering.

Erling: Det er for dårlig det altså.

Anders: Dette skulle ikke handle om – vi skal holde oss til Accessibility Insights, det er et av mine foretrukne verktøy. De har veldig kul visualisering av tabrekkefølge. De har en ganske bra evalueringsopplegg som er en blanding av automatisert, assistert og manuell. Jeg liker den godt, og vi holder oss til den i denne podden. Nå fikk jeg ånden over meg og gjorde en litt større evaluering denne gangen.

Erling: Veldig kjekt å høre. Veldig god innsikt og erfaring. Men summar summarum. Accessibility Insights fant kun syv feil, som er veldig lite tatt i betraktning at de har enormt med kode.

Anders: Og feilene var i mine øyne ubetydelige.

Erling: Nesten neglisjerbare.

Anders: Nå åpnet jeg kildekoden til Dagbladet. Forsiden til Dagbladet har 3500 kodelinjer.

Erling: Så til neste. Da skal vi gå til rangering.

Rangering

Erling: Har Dagbladet lykkes? Har de feilet? Nå skal vi vurdere det. Meg og deg. Vi gjør som vi alltid skal gjøre, som vi har gjort én gang før. Vi rangerer fra -1 til +1, tre nivå, -1, 0 +1. Måten vi gjør det på er at vi har skrevet tre lapper hver, som vi ikke ser. Så sier vi én, to, tre, og løfter opp den scoren vi gir. Vi har ti kategorier, og skal gå gjennom alle. Er du klar, Anders?

Anders: Jeg er veldig klar.

Erling: Kategori 1 er generell vurdering, den kjører vi først, og så kjører vi den helt på slutt, så tar vi den siste verdien, men det er kjekt å se dem sammenlignet.

Anders: Du skal ikke tenke så mye på denne. Det er litt magefølelse.

Erling: 1, 2, 3!

Anders: Erling, du har alt for liten lapp, jeg klarer ikke å se den. Du hadde 0, jeg hadde én. Jeg legger ikke denne inn i regnearket, for vi skal gi generell vurdering til slutt òg. I dag hopper vi over skjermleserkategorien, av tekniske grunner.

Erling: Vi går rett til tastatur. Er du klar?

Anders: Klar, ferdig, gå! Ja, der var vi enige. Begge to var 0. Jeg hadde nok gitt den 1, dersom det ikke hadde vært for den modalen.

Erling: Det var den som stoppet for meg òg, fordi det var generelt greit, det var du som gjorde det?

Anders: De hadde fokusmarkering på alt. Inne på AID, så var den ganske svak. De hadde ikke skiplenke på dagbladet.no. Den er òg ganske stygg. Nei, jeg står på 0. Det er mye å forbedre, men vi kom oss godt i mål.

Erling: Hadde de lagt inn skiplenke og fikset den modalen, så hadde det jo stått veldig bra til. Det neste er det visuelle og sånn. Er du klar? Klar, ferdig, gå! Jeg har +1, du har 0.

Anders: Jeg vurderte å gi minus 1, men så tenkte jeg at mine subjektive vurderinger ikke måtte ødelegge.

Erling: Det er jo en visuell vurdering av tilgjengeligheten. Og der følte jeg at de hadde gjort mye rett. Med kontrast, tydelig språk, ikke tekst på bilder og sånn. Så kan du jo argumentere med at rotet skulle har trukket ned.

Anders: Det er derfor jeg trekker dem ned, fordi jeg kjenner at den kognitivie belastningen er for stor. Jeg blir stresset av dagbladet.no. På NRK får jeg ro i sjelen. Jeg får ro til å lese det og ta inn informasjon. Dette handler om tilgjenglighet. I aller høyeste grad.

Erling: Ok, jeg er overbevist. Jeg går til 0.

Anders: Så skal vi huske på det, at jeg klarte å overbevise deg, for vi skal jo gi og ta litt i denne serien vår.

Erling: Så til nummer fem, som handler om automatisert. Er du klar? 3, 2, 1. Den er ganske clear cut. +1.

Anders: Bra, Dagbladet.

Erling: Så er det nummer seks. Enkelt språk.

Anders: Ja, jeg har bestemt meg.

Erling: Jeg må tenke litt. Klar, ferdig, gå.

Anders: +1. Jeg kan argumentere mot at det var litt uforståelig dette med at jeg måtte tillate Aller Media, jeg skulle tillate noe som jeg ikke skjønte hva var jeg skulle tillate. Det språket var ikke tydelig. En vet jo det at nettavisene skriver enkelt for å få lesere, de er veldig opptatt av språk. En må jo tenke litt på det redaksjonelle. Det var dårlig at de ikke fortalte meg hva AID er, og at de ikke forklarte meg at de kastet meg over i Nets. Det er likevel en +1. Ja, jeg står for den.

Erling: Enig. Da går vi til neste som handler om navigasjon. Vi må tenke litt. Vi har ikke testet så mye.

Anders: Vi har ikke søkt.

Erling: Basert på det vi har gjort. Jeg er klar.

Anders: Jeg har +1. Du har 0.

Erling: Jeg var på nippet til å si én. Det som dro det ned var altså mangel på skiplenke og at den megamenyen ikke hadde escape.

Anders: Ja!

Erling: Det var ikke så mye mer enn det.

Anders: Så tenker jeg på navigasjon. Tror du navigasjon blir mye brukt på nettaviser? Hvordan er bruksmønsteret?

Erling: Jeg tror det er artiklene som blir besøkt, de som ser interessante ut.

Anders: Jeg gir meg.

Erling: Ikke gir deg. Du hadde +1, sant?

Anders: Ja.

Erling: Rekkefølgen var fin. Det var aldri problematisk å bruke noe. Det var litt pirk, den skiplenken.

Anders: De to feilene som du peker – escapetasten som ikke funket, og skiplenken som ikke fungerte, det er jo noe vi har straffet dem for på tastaturpunktet. Så vi gir dem dobbelt straff nå.

Erling: Ja, men det er fordi det er en del av navigasjonen å bruke tastaturet. Hmm. OK. Hvem ga seg sist? Meg?

Anders: Det var du som ga deg sist. Hvis jeg gir meg nå …

Erling: Du kjenner ganske godt at det var +1?

Anders: Nei. Vi fant pluss fort. De har et menyvalg som heter innhold. Det er jo dårlig, men jeg forstår òg hvorfor. Fordi Dagbladet har vanvittig mye innhold. De har et gigantisk arkiv. De har vært på nett i sikkert 25 år. At de velger å ha tre hovedvalg, og avslutte med en megameny, synes jeg er bra. De har sport der for at du ikke skal måtte åpne en megameny for så å komme til sporten. Sport er sikkert superviktig for dem. Jeg tror de har gjort en ganske god strukturering av innholdet sitt. Uten å vite det.

Erling: Jeg gir meg på den. Du får denne.

Anders: Får +1 der òg.

Erling: Bilde og video? Nå har vi ikke sett noe video. Bilde?

Anders: Hoppet vi ikke over kodekvalitet nå? Din. Skjerp deg.

Erling: Sorry. Jeg ble litt ivrig. Kodekvalitet. Klar, ferdig, gå.

Anders: +1!

Erling: Så, bilde og video (som vi ikke har sett).

Anders: Vi har ikke sett på noe video.

Erling: Nå er jeg usikker på hvordan jeg skal vurdere bilde.

Anders: Det er forventet at nyhetssaker har bilder. Det er jo én av hovedoppgavene til Dagbladet som avsender å bruke illustrative bilder som faktisk fungerer noe om saken. De putter ikke bare inn stockbilder i øst og vest.

Erling: Enig.

Anders: De brukte lite bilder i bli abonnent-prosessen. Det ene bildet de hadde der. Nå har det menyvalget forsvunnet, siden jeg er kunde. De hadde et bakgrunnsbilde.

Erling: Med tekst på.

Anders: Kontrasten er ganske god der. De har på bli kunde-siden, så har de en video som vi ikke har sett, som sier «Dette får du med Dagbladet Pluss». Dette synes jeg er bra at de har, og de har teksting på YouTube-videoen sin.

Erling: Og hvis vi går lengre ned, så er det noen bilder med tekst på, ikke med like god kontrast. Skal vi stemme og diskutere etterpå?

Anders: Ja, det er sånn vi skal gjøre det.

Erling: 3, 2, 1. Begge to ga 1. Da er vi enige. Alt kan alltid forbedres.

Anders: Hvis jeg var en ekte potensiell kunde, så hadde jeg uten tvil sett den filmen om hva jeg får som plusskunde. Å bruke video som et virkemiddel i en kjøpsprosess, det er veldig bra for konvertering. Så til skjemakvalitet. Klar, ferdig, gå! +1.

Erling: Jeg forventet at du skulle si 0.

Anders: Hvorfor?

Erling: Dropdownmenyen som manglet label.

Anders: Ja!

Erling: Og mangel på oppsummering av feil.

Anders: Jeg ble så slått i bakken av den fine fokusanimasjonen.

Erling: Begge ga +1.

Anders: Ja, det er ikke vits å diskutere det.

Erling: Siste, generell vurdering. Er du klar? Klar, ferdig …

Anders: Vent! Hva ga vi sist?

Erling: Husker ikke. Klar? Klar, ferdig, gå!

Anders: +1 på begge.

Erling: Selv om det er definitivt forbedringspotensial. Men hvis ikke disse får 1, så er vi ganske harde.

Anders: Dette var bra.

Erling: Jeg var veldig postivt overrasket.

Anders: Det er det jeg er litt redd for, at de nå får bra fordi vi er så positivt overrasket. Det kan være at vi er litt farget av det. Men, sånn får det være. Nå har vi et så avansert regneark her, det har regnet ut resultatene for oss. Maks score er 100 %. Sandnes kommune i forrige episode, første episode, fikk 45 %. Vi har nå Dagbladet sin score. Legger du på en trommevirvel? Det kan du gjøre i etterkant, Erling. 89 % til Dagbladet.

Erling: Shit, det er bra altså. Gratulerer til Dagbladet.

Anders: Dere er en veldig dårlig kandidat til Ubrukelighetsprisen.

Erling: På den skalaen der, så leder Sandnes kommune.

Anders: Så vi kan si at det er bra at de er dårlige.

Erling: De var ikke nødvendigvis dårlige, de var bare verst av to. Bra. Har du noen høydepunkt?

Anders: Nå angrer jeg at vi ikke straffet dem mer for den svake fokusmarkeringen i hovedmenyen. Og at du hoppet ned til personvern først.

Erling: Og modalen.

Anders: Vi får stå for dette, vi kan ikke dvele for mye. Vi må stå inne for de valgene vi tar her i livet, Erling.

Erling: Men må vi ikke være villige til å endre, hvis vi ser at vi gjør feil? Vi lar den stå.

Anders: Høydepunktet når du kom inn i kjøpsprosessen, at du kom inn i et veldig rent bilde. Det var riktignok mange steg, ikke nødvendigvis feil. Det var litt mangel av forventningsstyring, men det at det var så rent. Det var tydelige skjemafelter. Knappene var gode. Nei, det var høydepunktet mitt.

Erling: Det kjentes godt ut å bruke skjemaet?

Anders: Ja.

Erling: Mitt høydepunkt var når jeg gikk inn i koden for å ta dem, og så klarte jeg det ikke. Det var veldig bra.

Anders: Det var kjekt å finne godt håndverk. Jeg må si at gjennom den første sesongen vår, med Universelt Utformet, så fant vi mye dårlig håndverk, så her er det gøy at Dagbladet har gjort en solid jobb.

Erling: Her var det mye godt håndverk. Kjekt å se. Vi vil som vanlig ha tips til sider som vi kan teste. Send det til hei@ubrukelig.fm. Vi vil òg ha andre tilbakemeldinger. Innspill, kommentarer, forbedringer og så videre. Vi kan òg nevne at det er kun norske løsninger. Én til ting du må huske hvis du tipser, det er å gi oss en kjerneoppgave. Hva skal løses? Hvis vi må inn å trykke rundt for å finne ut av ting, så ødelegger det litt av konseptet. Bra. Det var det vi hadde for i dag. Dette funket jo nesten tipptopp dette.

Anders: Takk til deg som lyttet på. Kjekt å snakke med deg, Erling.

Erling: Deg òg Anders. Adjø.