Uu-podcasten: Ubrukelig

Introduksjon

Erling: Hallo.

Anders: Hei Erling.

Erling: Går det bra, Anders?

Anders: Det går godt. Har hatt en dag med mye skjermtid på mitt hjemmekontor. Men jeg er ikke lei enda.

Erling: Nei, vi skal jo sitte her en liten stund og spille inn en ny episode av Ubrukelig.

Anders: Velkommen til Ubrukelig, ja. Episode nummer?

Erling: Jeg har mistet tellingen. Er det fire eller fem?

Anders: Hehe.

Erling: Dette er episode fem.

Anders: Bra. Vi skal snakke om Digitaliseringsdirektoratet etter tips fra Remi i fra Boost, som lager det som de kaller en personlig agent, men som de fleste andre kaller en chatbot.

Erling: En virtuell agent.

Anders: Hva var det jeg sa?

Erling: Personlig agent.

Anders: Ja, selvfølgelig. Virtuell agent.

Erling: Jeg vet ikke om begrepet kommer til å feste seg, det er litt vanskelig å huske.

Anders: Han tipset oss om «Du, Digitaliseringsdirektoratet, nå skulle jeg finne frem der, men har de kontroll på sysakene sine?» Nei, det kan vi finne ut sa jeg, vi lager en episode på det. Kult.

Erling: Er de skomakerens sønn?

Anders: Ja, det skal vi finne ut av. De var det før. Jeg har gjort en evaluering av dem for noen år siden.

Erling: På en blogg vi prøvde å få gang på, det er ganske mange år siden.

Anders: Vi fant mye feil, og de var enige i noen av dem, og litt uenige i noen, og vi fikk en fin dialog.

Erling: De var profesjonelle og motakelig, og var villige til å gå inn i diskusjonen. Det liker vi godt.

Anders: Så skal vi se hva vi kommer frem til i dag. Kjerneoppgaven vi har blitt enige om, uavhengig av hva Remi har sagt, er at vi skal finne ut hvordan vi lager en såkalt snarvei, eller en hopplenke, en skiplenke.

Erling: Hopp til innhold.

Anders: Tastatursnarvei. Kjært barn har mange navn.

Erling: Og det er litt fordi det er så mange som mangler det. Det er ganske enkelt. Litt bevisstgjøring av at denne typen ting finnes på uu.difi.no. De het Difi før, så det ligger på difi.no, ikke på Digitaliseringsdirektoratets URL. Har du nettstedet åpent og klart? Skal vi gå i gang med første evalueringspunkt?

Anders: Jeg har egentlig lyst å spore litt av før vi begynner.

Erling: Kjør på.

Anders: Fordi jeg har hatt en litt god uu-dag. For et godt år siden laget WebAIM en rapport over de én million største nettstedene i verden. Nå har de kjørt den på ny, oppdatert og sett på utvikling og kategorisert, og har ganske mange fine funn. Den anbefaler jeg alle å studere litt. Den dårlige nyheter er at det nå er over 98 prosent som feiler på automatisk testing. Du nevnte den marquee-elementet, og det var over 1000 nettsteder i denne testen som fortsatt bruker den. Nei, ikke over 1000, rett under. Så rett under én promille. Men en annen kjekk nyhet, som jeg ser på som ganske revolusjonerende. Nå bruker jeg store ord. Det er Chromium som har oppdatert fokusmarkering.

Erling: Har de det?

Anders: Ja. Jeg har tidligere vært en forkjemper for at nettleserprodusentene skal ta litt mer ansvar for det som vi strever med. Det har de nå gjort. De har innsett at den blå, svake ringen, eller rammen, er ganske utydelig. Og du kan være uheldig at den havner på en farge som har veldig dårlig kontrast mot blå. Det de har gjort nå er å bytte den til en sort kantlinje med en hvit outline, slik at den fungerer på både mørke og lyse bakgrunner. Det er fremdeles eksempler der den ikke vil fungere så bra, for eksempel hvis du har en helt sort knapp på en hvit bakgrunn, så funker den ikke.

Erling: Den fungerer ikke like bra?

Anders: Nei. Det betyr egentlig at mange designere og kodere nå kan glemme fokusmarkering fordi den vil fungere så bra ut av esken, som standard.

Erling: Når du sier glemme så mener du at de ikke trenger å lage sin egen? De kan beholde standard. Men de må ikke overstyre slik at den forsvinner. De må ikke ta den vekk.

Anders: Nei, de må ikke nullere den ut. Men nå kan en slappe av, så kommer det til å gå mye bedre med standardinnstilling. Men selvfølgelig, de som vil gjøre det lille ekstra kan fortsatt få mulighet til det.

Erling: Det er jo strengt tatt det beste, å gjøre det skikkelig på egenhånd.

Anders: Jeg anser dette som en god nyhet for alle som bruker tastatur. Alle som har litt problemer med å finne ut hvor man er på en nettside.

Erling: En seier for alle som navigerer med tastatur. Og siden du fikk en avsporing, så vil jeg òg ha en avsporing. På uu.difi.no så er det en liten video, med Solveig Kloppen som står og presenterer. Der presenterer hun noen tall. Og det hun sa var at én tredjedel har en form for funksjonsnedsettelse. Og så sier hun senere at det er én million brukere i Norge som har en form for funksjonsnedsettelse. Jeg regner med at hun mener en tredjedel av den voksne befolkningen. Så da har vi fått et tall som Digitaliseringsdirektoratet bør stå inne for. Og det er høyere enn de tallene som jeg har brukt før.

Anders: Jeg vet ikke hvor mange slike tall jeg har lest, så det er derfor jeg aldri … men det er veldig greit å ha med seg det.

Erling: Det setter ting litt i perspektiv. Skal vi komme i gang?

Visuell vurdering

Anders: Vi er på Digitaliseringsdirektoratet. Vi skal finne ut om de er brukelige eller ubrukelige.

Erling: Det første vi skal begynne med er en visuell vurdering, snakke om det vi ser.

Anders: Både form og farge, men òg tekstlig innhold. Så da har begge to åpnet uu.difi.no. Her må jeg si at jeg har vært en del ganger. Så dette er ikke nytt for meg. Hva skal jeg si? Det er ganske traust. Mildt sagt.

Erling: Ja? Jeg vet ikke om jeg hadde brukt mildt sagt. Ganske traust hadde jeg vært enig i. Det er ikke direkte umoderne.

Anders: Men det er litt samme stil som den koronastudien.

Erling: Det er ganske teksttungt, litt bilder og en video. De har piler på overskriftene, for å indikere at de er klikkbare.

Anders: Det er litt rart at de bryter en konvensjon.

Erling: Forsåvidt.

Anders: Er det egentlig éntydig at den pilen betyr at de er klikkbare? Jeg er ikke i tvil, jeg sier ikke at det er feil å gjøre det.

Erling: Du kan argumentere for at de lener seg på konvensjonen om at overskrifter satt i en struktur som dette, er klikkbare. Men ellers er det ingen tekst på bilder, for eksempel. Det er jo bra.

Anders: De har en ryddig meny. De har en toppmeny helt øverst med veldig liten tekst. Det står english og kontakt oss. Og så har de et søkefelt som er plassert der det pleier å være plassert. Så har de en hovedmeny med fire menyelementer.

Erling: Hvis jeg skulle sagt noe jeg savner her, så vil det være en forklaring på hva de holder på med, hva gjør de? Her står det i logoområdet, «Digitaliseringsdirektoratet» med undertekst «Tilsynet for universell utforming av IKT». Og så er jeg litt sånn, hva betyr det? Hva gjør de?

Anders: Og hvorfor har de skrevet IKT med små bokstaver? Det kan godt være at det er lov? Men jeg leser ikt.

Erling: Enig. Jeg stusset på det tidligere.

Anders: Og lengre nede på siden, i første nyhetssaken, det er veldig nyhetstungt dette, i første nyhetssaken har de liten IKT og i tredje nyhetssaken så har de stor IKT. Så de er òg inkonsekvente. Men nå gikk vi litt inn i pirkemodus. De har litt duse farger. Den fargen som er høyest kontrast og høyest blikkfang er denne lilla pilen på disse overskriftene, som jo er bra. De vil ha oppmerksomheten mot disse overskriftene.

Erling: Eller det er en kontrastfarge som indikerer at noe er annerledes. Med den lilla fargen.

Anders: Så har de en video, den blir jo jeg nysgjerrig på. Den har jo du allerede innrømmet at du har sett. Der tenker jeg at det er veldig riktig å ha den.

Erling: Men jeg kan røpe med én gang, at de ikke har closed captions, de har open captions.

Anders: Nei!

Erling: Du kan kanskje forklare hva det betyr?

Anders: Closed captions, det er altså teksting som du kan skru av og på. Open captions er ikke nødvendigvis teksting i selve filen, mens om regel, som gjør at du ikke kan skru dem av og på, som gjør at teksten ikke kan leses programmatisk. Som er en dårlig praksis. Så det er bra at du nevnt, det hadde jeg ikke tenkt på.

Erling: Men det er ikke en del av kjerneoppgaven.

Anders: Men vi tar med oss litt her og litt der. Jeg ser at de har masse nyhetssaker. Litt rotete strukturert. De blander litt høyre og venstre kolonne. Og så har de noen rapporter. Tilsynsrapporter. Der har de tilsynsrapport fra Dagbladet. Jeg lurer på om de har kommet frem til det samme som oss. Det skal vi ikke se på nå.

Erling: Det som slår meg er at de har på én måte skapt en konvensjon øverst, hvordan artikler skal se ut. Så kommer du ned til nyeste rapporter og undersøkelser, og en blogg plutselig, så ser det helt annerledes ut. Ikke så konsekvent. Ikke noe big deal. De har brukt en annen pil på overskriftene der.

Anders: De har brukt en dobbelt apostrof.

Erling: Det ser nesten ut som om de har tatt dette fra et annet system, rett og slett. Det ser litt fremmed ut. Skal vi si oss ferdig med det visuelle?

Anders: Nei, fordi jeg vil òg kommentere at etter disse rapportene så har de tre blogger, der de har et miniatyrbilde og det er litt på alle de tre siste bloggsakene. Det er fordi det viser bilde av forfatteren, Malin Rygg, og jeg tenker at det er bedre å vise et bilde som illustrere hva artikkelen handler om?

Erling: De har alt-tekst hvertfall.

Anders: Ganske tradisjonell bunntekst. Så jeg synes alt i alt at dette er vel helt greit.

Erling: Det er ikke ubrukelig, tørr jeg påstå.

Anders: Skal vi gå videre?

Tastatur

Erling: Tastaturnavigasjon.

Anders: Vi har jo gått litt nøye til verks. Jeg har nesten tenkt at vi har laget en podkast om tastaturnavigasjon, og det har ikke vært meningen. Vi skal prøve å være litt mer effektive i dag.

Erling: Og vi skal prøve å nevne høydepunktene, i stedet for å snakke om absolutt alt.

Anders: Nå skal vi navigere. Jeg begynner med den magiske tastene tabulator. Det som skjer er at jeg kommer til «Hopp til hovedinnhold», altså det vi skal snakke om i dag. Dette har de heldigvis på plass.

Erling: Jeg hadde blitt veldig overrasket hvis de ikke hadde det.

Anders: Når det er sagt så vil jeg si at denne implementasjonen er veldig uheldig.

Erling: Veldig faktisk?

Anders: Nå overdriver jeg. Her har de ikke prøvd å få det til å bli visuelt lesbart og visuelt ryddig. De har klemt den med null padding oppe i venstre hjørne. Den går over to ulike bakgrunnsfarger. Outline er helt klemt i teksten. I tillegg har de en understrek som er bare et par piksler fra outline. Det ser virkelig ikke godt ut. Det er ikke godt å lese for den krasjer nesten med logoteksten og de har ikke satt en bakgrunnsfarge. Jeg vil si at det kunne neste ikke sett verre ut.

Erling: Teksten kunne vært mindre. Den virker jo da og det er det viktigste.

Anders: Veldig merkelig tabstopp nummer to. Der dysser de ned logoen. De minsker kontrasten. Det er jo det motsatt vi ønsker å gjøre. Hensikten med fokus er jo å fremme hvor du er.

Erling: Sette fokus på det. Utenom det er det ikke noe overraskende.

Anders: Jeg tabber meg frem til søkefeltet. Vi skal bruke søkefeltet, for det har vi glemt litt i de andre. Jeg skriver skip jeg i søkefeltet, og trykker på enter. Håper på det beste. Jeg kommer til et søkeresultat og nå må jeg virkelig bruke hodet mitt for her er det mange elementer.

Erling: Her er det mye som krangler.

Anders: De har nullet ut søkefeltet. Så har de lagt til et nytt søkefelt lengre nede, der det står skip. Så har de to nedtrekksmenyer, selecter, der de har labelen som første option. Det er dårlig praksis. Så har de en filtermeny i høyre kolonne. Visuelt bra, for det er sekundært. Så har de en lenke som sier «Fant du ikke det du lette etter? Prøv nettstedskartet i stedet.» Det første treffet er en PDF som er på engelsk fra 2014. Fordi den har sikkert en skiplenke. Men heldigvis er treff nummer 2 «Snarveier, hurtigkommandoer, navigasjon». Metateksten der er veldig dårlig. Den er automatisk hentet ut.

Erling: Ikke helt ubrukelig. For det står «hopp til hovedinnhold» inni mellom.

Anders: Jeg begynner å tabbe meg, får opp hopp til hovedinnhold. Det vil jeg jo gjøre nå. Det funket veldig bra.

Erling: Hvor havnet du?

Anders: Da havnet jeg inn i det nye søkefeltet, som har helt annen utforming enn det første søkefeltet.

Erling: Og søk-knappen står under til høyre for nedtrekksfeltene.

Anders: Det er en veldig utradisjonell måte å fremlegge det på.

Erling: Jeg kan òg røpe at jeg inspiserte nedtrekksmenyene for å se om det var label. Det er en skjult label, men den har de satt til display none utropstegn important. Så skjermleserene vil ikke få den med seg i det hele tatt.

Anders: I tillegg har de to selectene der nesten usynlige fokusmarkeringen. Den er veldig svak. Søkknappen har god fokusmarkering, men jeg tabber med ned, veldig inkonsekvent. Den lenken som sier «Fant du ikke det du letet etter?» har supertydelig fokusmarkering.

Erling: Hele bakgrunnen endrer seg til en mørkere farge. Der er det ikke tvil.

Anders: Men den vi skal til, den har nettleserstandard, som kommer til å bli mye bedre, men det de ikke har gjort, de har ikke noe padding, så det ser ikke bra. Greit, vi kom frem til der vi skulle. Jeg trykker enter. Nå har vi fått opp en ny layout. Der har vi en navigasjon på venstre side. Nå begynner det å bli ganske komplisert. Nå har vi to horisontale menyer, én vertikal, i tillegg til navigasjonsstien som er en horisontal navigasjon.

Erling: Det er mye rundt innholdet her.

Anders: Men jeg tar hopp til hovedinnhold, og det fungerte. Jeg tabber meg ned til anbefalinger. Jeg blir usikker nå. Nå er vi inne på en lang side. De har en ingress og en innholdsfortegnelse. Det tenker jeg er bra. Med ankere videre ned i teksten. Med de som to punktene i denne innholdsfortegnelsen er, er «Løsninger som møter kravene i forskriften» og «Anbefalinger utover kravene i forskriften». Her forutsetter de at jeg kjenner til forskriften.

Erling: Det står ingenting om hvilken forskrift du er på.

Anders: Nei.

Erling: Det har nok noe med snarveier og hurtigkommandoer. Her tipper jeg de antar at du kommer fra et sted som forklarer konteksten. Som vi ikke har.

Anders: Nå blir jeg skikkelig forvirret. I ingressen sier de «snarveier skal kunne brukes med tastatur. Hopp over faste blokker med informasjon.»

Erling: Veldig relevant.

Anders: Jeg vet at jeg er på riktig sted. Men så ser jeg på innholdsfortegnelsen at det valger som heter snarveier, er under «Anbefalinger utover kravene i forskriften». Og jeg vet jo at forskriften har et krav om slike snarveier. Skal jeg gå ned til den snarveier, som egentlig ligger på feil plass?

Erling: Prøv det.

Anders: Jeg gjør det. Veldig fint, jeg ruller ned til snarveier. Det første jeg leser er «snarveien til innholdet er påkrevd». Da er det jo en del av forskriften? Hva er det de tøyser med?

Erling: De tøyser bare. Tull og tøys. Men ga det deg det du vil ha?

Anders: Det vet jeg ikke enda. Jeg leser.

Erling: Det er én paragraf.

Anders: Nei, for her snakker de ingenting om snarveier som brukes av tastatur og som hopper over faste blokker. Her har de brukt snarveier en spesifikk funksjon, den vi leter etter, og noe som er mer generelt. Ser jeg videre på neste avsnitt, så er det snakk om hurtigkommandoer som ikke er det vi skal ha. Her bryter de faktisk et annet prinsipp, de bruker accesskeys, og generelt sett ønsker en aldri å bruke accesskeys høyere enn null, men det har de gjort her. Jeg skal ikke gå inn på den. Jeg må opp igjen. Selv om ingressen sier «snarveier som lar brukere som navigerer med tastatur hoppe over faste blokker», som er akkurat det jeg vil lære, så kan jeg ikke gå på den snarveien som heter snarveier. Nå ble det meta. Men det er faktisk feil snarvei.

Erling: Feil type snarvei?

Anders: Jeg må gå til den som heter løsninger som møter kravene i forskriften. Men her finner jeg det jeg skal ha. Her finner jeg et kodeeksempel som gjør snarveilenke synlig ved fokus, med et CSS-eksempel og et HTML-eksempel.

Erling: Hvordan ser eksempelet ut? Position aboslute. Minus 2000 piksler fra venstre.

Anders: Det er dette jeg skal ha. Dette kan jeg nå sende til mine utviklere, og si at dette er slik vi vil ha det. Det ser ut som et skikkeig søndagstriks, siden de bruker position aboslute med left minus 2000 pikser. Men det er kanskje den beste måten å gjøre det på.

Erling: Jeg tror det er én av mange måter å gjøre det på. Det handler om at du ikke skal ta display none, for da eksisterer det ikke for en skjermleser.

Anders: Vi skal bare dytte det ut av vinduet.

Erling: Klarte vi det da?

Anders: Jada, vi klarte det.

Erling: Glimrende.

Anders: Skal vi si oss ferdige? Skal vi si at vi er i mål? Eller skal vi bruke navigasjonen òg? Nå brukte vi søkefeltet som tilfredsstilte oss veldig bra. Andretreffet var akkurat det vi skulle ha. Jeg var positivt overrasket, for vi søkte jo bare etter «skip».

Erling: Jeg har testet med litt andre fraser som har gitt dårligere treff. Jeg søkte på «hopp til innhold». Tenkte at det må være bankers. Null treff.

Anders: Null treff?

Erling: La meg bruke den frasen de selv har brukt, «hopp til hovedinnhold». Det må gi treff? Hopp til hovedinnhold. Det gir null treff. Altså ingen treff i det hele tatt. Dette må jeg da forenkle. Søkte etter «hopp». Da kom det veldig relevant «WCAG suksesskriterie 2.4.1, hoppe over blokker». Så det er ganske dårlig søk, selv om du fikk en god opplevelse.

Anders: Jeg var heldig. Eller så er jeg bare bedre å søke enn deg.

Erling: Kjeften.

Anders: Alle interne søkemotorer i hele verden er dårlige.

Erling: Det er synd, det handler òg om universell utforming, for det går ut over alle som ikke evner å tenke så langt at de må tilpasse søkefrasen sin til systemet.

Anders: Selv begynner jeg alltid med søkeboksen.

Erling: Jeg er òg en søker. Jeg prøver det først og så vurderer jeg kvaliteten på søkeresultatet, om jeg gidder å prøve igjen. Hvis det feiler så begynner jeg å lete i strukturen. Prøv å kom deg frem til noe relevant gjennom hovedmenyen.

Anders: Jeg kan gjøre det fort. Jeg kan si at søkeikonet, det lille forstørresesglasset har veldig dårlig fokusmarkering. Hovedmenyen har veldig god fokusmarkering.

Erling: Den endrer bakgrunnsfargen og inverterer tekstfargen.

Anders: Jeg har fire valg. Jeg føler ikke at noen er perfekte. Jeg skal ha kodeeksempler. De valgene er «Kva er universell utforming?», «Krav og regelverk», «Tilsyn» og «Om oss». Ingen av de er innertier. Nå så jeg at de ligger under «Krav og regelverk».

Erling: Gå til den da, du har jo denne informasjonen nå, du har blitt eksponert for den tidligere. De hadde aktivt uthevet menyelementet da du var på den.

Anders: Nå fungerer det ganske bra. Nå kommer jeg ned til. Nå har jeg i tillegg en ny navigasjon, som ligger i hovedinnholdet. Så jeg har fire valg. «Kva seier forskrifta», «WCAG-standarden», «Løsningsforslag på web», og det er jo der jeg vil. Så er det «Hopp til hovedinnhold». Så har de et sånn temafilter. Der tar jeg navigasjon. Nå filtrerer jeg ut den og tabber meg nedover. Etter langt om lenge kommer jeg til den artikkelen jeg vil ha – «snarveier og hurtigkommandoer». Det fungerte veldig bra.

Erling: Ingenting som stoppet deg der. Godt. Skal vi gå videre?

Anders: Det var tastatur. Så er jo det tanken at vi skal bruke skjermleser. Men på grunn av …

Erling: … vi er koronafast.

Anders: … så vi skal komme tilbake til skjermleser med god lyd og god teknikk. Værsegod Erling. Du sa innledningsvis i dag, før vi trykket på opptak, at du synes det har blitt så kjekt å vurdere kode.

Erling: Ja, jo mer jeg evaluerer koden, jo flinkere blir jeg til det. Og jeg lærer ting hele veien. Folk løser ting på forskjellige måter. Er det greit å gjøre det på den måten. Så må jeg google. Det er ganske gøy.

Anders: Take it away, som de sier.

Kodekvalitet

Erling: Det jeg ofte ender opp med å sjekke først, er om de har landemerker. De har alle de forventede landemerkene, altså header, footer, nav og article. Men de har ingen main.

Anders: Hæ?

Erling: Det var litt rart. Det viser seg at de har en div med id main. Det føles nesten ut som en liten glipp. Hvilke konsekvenser har det?

Anders: Du kan hoppe til main med rotoren.

Erling: Stammespråk.

Anders: Beklager. Det er en funksjon i skjermleseren Voiceover, som gir deg ulike lister, der kan du få opp alle landemerkene. Den er super for de som bruker main, men som ikke har skiplenker. Da kan brukerne hoppe til main uten de skiplenkene. Det er flere veier til mål kan du si.

Erling: Overraskende, fordi de hadde alle de andre. Vi skal komme litt tilbake til strukturen rundt article. Men den andre tingen jeg sjekker med én gang er om de lang. Det har de. Men så ble jeg litt nysgjerrig, for jeg vet ikke om du la merke til det, når du leste hovedmenyen. Det er én som heter «Kva er universell utforming». Jeg gikk inn på den og sjekket lang der. Den har lang nn.

Anders: Ahh.

Erling: Alle undersider har nb. Igjen stammespråk. nb er norsk bokmål. nn er norsk nynorsk. Dette er veldig snodig. Hvorfor har alle sider norsk bokmål, men den ene som i hovedmenyen er på nynorsk, men teksten ellers er på bokmål.

Anders: Åja! Jeg trodde de hadde gjort det riktig nå.

Erling: Innholdet på «Kva er universell utforming» er på nynorsk, så det er riktig.

Anders: Da har de gjort det som de skal?

Erling: Men jeg synes det var så rart å bytte mål. Men det er sikkert et krav om at 20 % skal være nynorsk.

Anders: Men jeg er inne på «Kvifor universell utforming av IKT», en nynorsk side, med feil lang-attributt. nb.

Erling: Der var det nb ja. Så her har vi inkonsekvent bruk av lang.

Anders: Sannsynligvis null konsekvenser.

Erling: Er det skjermleserstemmer på både nynorsk og bokmål?

Anders: Det vet jeg ikke.

Erling: Jeg tørr påstå at det er en feil. Og så har logoen, det er bare en div i header-elementet. Der tenker jeg å spør deg, hva tenker du om det? Det er en div class subportal. Så er det en a href, og så er det en p under tittelen.

Anders: Jeg har ikke et godt svar.

Erling: Det er jo det første interaktive elementet, den a-en. Jeg klarte ikke å komme på noe konsekvenser det kan ha. Men som en liten observasjon er at de har Difilogoen der enda, de har bare skjult den. De har tatt en kjappis. De har tenkt at de skal bli Digitaliseringsdirektoratet, vi må gjøre siden om kjapt. Og så har noen gjort det kjapt. Det er ikke en feil i seg selv. De har display none, så den er borte for alle.

Anders: Det kunne kanskje vært en nav, for det er jo en slags navigasjon. Nei, det er ikke det heller. Nei, gå videre.

Erling: Og så pleier jeg å gå gjennom overskriftsnivåene. Det er ingen h1. Det er ingen h3. Men det er masse h2. I seg selv er dette en indikator på at de bare har puttet h2 på alt. Men samtidig er det et dårlig tegn at de ikke har h1. Kanskje burde mange av disse h2-ene burde vært h1, for de er artikkeloverskrifter.

Anders: Men det er en direkte feil at tilsynsrapportene har h2, når de har en overskrift som heter «Nyeste undersøkelser og rapporter».

Erling: Veldig bra. Den «Nyeste rapporter og undersøkelser» er òg h2. Det er litt h2-galore.

Anders: De har puttet det på alt. Samme med bloggen.

Erling: Mens jeg søkte på h2, så fant jeg et merkelig mønster. På søkefeltet øverst, så har den h2, altså de har en skjult label. Den er skjult med at de har gjort elementet så lite at det ikke går ann å se det.

Anders: Hæ? Hva sier du?

Erling: De har en label. Som er skjult. De har satt bredde og høyde til én piksel. Og margin til minus én. Det er en teknikk jeg ikke har sett før.

Anders: Ikke jeg heller. Og så klipper de den. De beskjærer den òg.

Erling: Ja. Det de gjør i praksis er å gjøre den usynlig uten å ta den ut av DOM-en. Det er litt som den metoden minus 2000 piksler.

Anders: Jeg skulle likt å visst dette. Det virker så spesielt at det er nok en grunn bak..

Erling: At de har brukt den teknikken? Jeg så den flere steder. Den tilhører klassen invisible. Det er teknikk de bruker når de ønsker å skjule ting. Det er en ganske vanlig å ha en klasse for å skjule ting, på den måten de ønsker å skjule ting. Men over det, så er det en h2 som heter søkeskjema. I utgangspunktet tenker jeg at det kan være fint. For da får du det opp i rotoren. Hadde ikke jeg et spørsmål til deg her?

Anders: Det vet jeg ikke, du har ikke stilt det.

Erling: Det var en fin observasjon, at det var en h2 over søkefeltet. Det er en teknikk jeg ikke har sett før, men det føltes ikke så veldig feil ut.

Anders: Nei, jeg ville nok brukt en legend til det. Som jo er en overskrift som brukes i skjema. Som hører til et fieldset.

Erling: Bra.

Anders: Det er litt rart å bruke fieldset når du kun har ett felt.

Erling: De har noe som de kaller for sekundær meny, som jeg har notert. Den lille menyen helt oppe til høyre, kalles for sekundærmeny. Den har òg en h2, men der har de feilet, fordi de har satt den med display none, med important, bare i tilfelle.

Anders: Hørte du at det nettopp var en første aprilspøk, at det skulle komme en not important. Jeg gikk fem på.

Erling: Jeg òg, i et par sekunder.

Anders: I år gikk jeg på alle første aprilspøkene jeg ble eksponert for.

Erling: Jeg gikk òg på et par, jeg skal innrømme det. Det var litt snodig at de hadde h2 over der òg. Og h2 over søkefeltet. Men over søkefeltet har de brukt invisible-klassen sin. Som gjør at den blir usynlige. Men denne h2-en har de tatt display none. Litt inkonsekvent bruk av h2 og usynliggjøring av h2. Dette bygger òg opp under det inntrykket av at de har puttet h2 på alt. Ingen h1, ingen h3. h2 på alt. Siste ting som jeg så var at i footer. Der har de brukt landemerke footer. Rett inne i footer. I en div class separator-greie, så bruker de address som et eget element. Det er fint, men det de har gjort feil er at alt innholdet i footer ligger i address. Det er ikke bare kontakt. Ikke bare telefon og e-post, men det er òg lenke til nettstedkart. Lenke til informasjonskapsler. Dette var noe jeg lærte, for jeg var litt sånn hmm, dette virker feil, men jeg vet ikke om det er et regelrett brudd. Jeg måtte google det. Svaret fikk jeg hos Mozilla. Det elementet skal kun inneholde kontaktinformasjon, ikke annen informasjon. Noe annet jeg lærte da, var at eksempelet de brukte var at adresse-element skal ikke inneholde blant annet publiseringsdato og tidspunkt. Det skal ligge i et element som heter time. Det var ikke jeg bevisst på. At det var et element som heter time. Jeg kan huske at jeg har brukt det. Men jeg var ikke bevisst på det. Da kom jeg på at vi ikke bruker det på ubrukelig.fm, det skulle vi kanskje ha gjort. Vi er ikke perfekte vi heller.

Anders: Jeg kan tenke meg til hvorfor de har brukt address der. Det er den de har stylet, så har de bare tatt en snarvei, da kjører vi det på alt.

Erling: Intensjonen var god, så slo latskapen til, så stappet de de ekstra lenkene der. Jeg sa at dette var det siste, men jeg har litt flere ting som jeg har skrevet på siden her. Jeg sa på starten at de bruker article. De bruker det, men de bruker det ikke over alt. Den øverste delen vi snakket om, med de store overskriftene, de store nyhetssakene, som har bra fokus, bra hover og sånn – de er ikke article. De har de valgt å legge i en liste. Et listeelement. Som en kunne ha argumentert for kunne være greit. Eller så er de i en div. Hele blokkene er lagt i en section. Bruken av section kan en argumentere for er greit så lenge innholdet inne i en section er relatert til hverandre. Men der de har article, det er i de artiklene under, nyeste rapporter og undersøkelser, det som ser ut som kommer fra et annet system. Der har de article for hver artikkel og h2 inni der, som kunne vært h1. Og så en p under. Her er det to forskjellige måter å presentere en artikkel på, og forskjellig bruk av landemerker, der den ene er mer korrekt enn den andre, og de kunne gjerne brukt article på de artiklene oppe. Så det er litt feil rett og slett. Det var det, da er jeg ferdig med kodeevalueringen. Noen kommentarer?

Anders: Nei, det var en god gjennomgang.

Erling: Og de bruker ikke time på timestampen. Hva heter det på norsk? Tidsmarkør? Jeg vet ikke. Skal vi gå videre? Resultatet av automatisk testing. Og denne gangen er det ikke en SPA, en Single Page Application, som du har måttet streve litt mer tidligere.

Automatisk testing

Anders: Jeg har testet forsiden og den siden med løsningsforslag. Og ikke overraskende, så fant Accessibility Insights null feil. Så tok jeg en ekstra test på forsiden av difi.no, altså ikke uu.difi.no. Der var det én feil, der de hadde brukt en article rett under ul, som jeg ser på som en lite alvorlig feil.

Erling: Det er bra! Tror du de har brukt dette selv, for å evaluere kvaliteten?

Anders: Ja, ikke nødvendigvis dette verktøyet, men jeg tror at de har brukt en automatisert test.

Erling: Kanskje et akseptansekriterie hos utviklerne.

Anders: Helt sikkert.

Erling: Null faktisk, så bra. Skal vi gå til rangering? Hopper jeg over noe?

Anders: Nei, vi går til rangering.

Rangering

Erling: Første punktet er en generell vurdering. Da må jeg la det synke inn litt. Vi har jo bare kvernet gjennom. Er du klar?

Anders: Vi kan jo ta den korte historien at vi skal gi poeng fra minus én, null og pluss én. Pluss én hvis det er bra, minus én hvis det er dårlig og null hvis det er midt på treet.

Erling: Klar? Du må ikke vise hendene før du viser tegnet, for jeg ser hva du skal gi.

Anders: Jeg prøver å kalibrere meg litt nå, for det er kanskje lett å gi dårlig karakter til Digitaliseringsdirektoratet, fordi forventningene er mye høyere. Litt som vi kanskje brant oss på hos Dagbladet. Der hadde vi dårlige forventninger, så var det mye feil, men de endte opp med veldig bra poeng. Litt fordi de leverte over forventningene. Vi prøver å kalibrere oss. Okei! Generell vurdering.

Erling: Klar, ferdig, gå! Begge ga 0. Skal vi la den henge der?

Anders: Vi vet jo at dette er noe av det beste vi kommer til å se.

Erling: Tror du det?

Anders: Jeg lurer på om jeg gir 0 fordi at det er dem. Nei, jeg skal stå for den.

Erling: Jeg synes det jeg òg. Vi hopper over skjermleser og går videre til tastaturnavigasjon. Klar, ferdig, gå! Begge ga 1.

Anders: Det var bra. Da må jeg skrive det inn i regnearket vårt.

Erling: Det var ikke perfekt, men det var bra. Litt forskjellig karakter på fokusstylingen.

Anders: Nå er det noen lyder i bakgrunnen her, og det er altså hunden min som drømmer. Han snakker når han drømmer.

Erling: Jeg hørte det ikke jeg. Farge og visuelt er neste punkt.

Anders: Nå må jeg tenke, fordi vi skal ikke bli for subjektiv her. Jeg startet med å si at det var traust. Jeg må ikke farge din vurdering.

Erling: La oss tenke tankene og snakke om dem etterpå. Klar ferdig gå. Du ga 0. Jeg ga 1. Da kan du fortsette.

Anders: De hadde dårligere kontrast på logoen ved fokusmarkering. De var ganske inkonsekvente på fokusmarkering.

Erling: Skal vi straffe dem for det her?

Anders: Nei, det synes jeg ikke vi skal. La oss ta 1 der da. Greit. Jeg gir meg.

Erling: Hvis det er noe jeg skal trekke de for, er pilen på overskriftene, det er ikke en innarbeidet konvensjon. De har ikke understrek på den sekundærmenyen, ikke hovedmenyen heller. Kan argumentere for at det ikke trengs. Det er generelt lite understrek. Ikke så opplagt hva som er klikkbart. Likevel så tviler jeg at det er mange som hadde slitt med å forstå hvor de kan klikke. Store områder er klikkbare. Neste, automatisert test. Den er grei. 1, 2, 3. Det var null feil, da blir det 1 på begge. Så til språk. Er du klar?

Anders: Nei, den er litt vanskelig. Vi har ikke møtt på noen problemer med språket. Det var litt denne tvetydigheten med snarveier.

Erling: Og litt tvetydighet i hovedmenyen. Og litt mangel på informasjon.

Anders: Jeg vil ikke trekke dem for at de blander nynorsk og norsk. Eller bokmål. Jeg er klar, ferdig, gå.

Erling: Jeg ga 0, du ga 1. Jeg er ikke vanskelig å be, jeg var på nippet til å gi 1. Overbevis meg.

Anders: Jeg har ikke møtt noen språlige humper i veien. Som kanskje er forventet fra et direktorat. Digitaliseringsdirektoratet i seg selv er jo det vanskeligste ordet vi har kommet over.

Erling: Men så er det tvetydigheten i hovedmenyen. Krav om regelverk og tilsyn.

Anders: Det som går på språk, som vi ikke har snakket om. De forklarer ikke hva IKT er. Verken med abbr-taggen eller …

Erling: Hvis jeg ikke hadde kjent til disse, så hadde jeg trykket på hovedelementet som heter Kva er universell utforming, eller Om oss, men jeg savnet det litt på forsiden.

Anders: Jeg synes det er bra. Løsningsforslag er et godt ord, det er det vi leter etter.

Erling: Det er konkret. Gi dem 1.

Anders: Ja.

Erling: Neste er navigasjon.

Anders: Klar, ferdig gå.

Erling: Begge ga 0.

Anders: Grunnen til det er at vi var usikre på om det var rett menyvalg. Vi brukte elimineringsmetoden, det var det riktigste. Innholdsfortegnelsen fintet meg litt ut.

Erling: Og det at det var så mange navigasjonselementer da vi kom et hakk dypere.

Anders: Ja, du har de to horisontale, du har navigasjonsstien, du har venstremenyen og en hovedinnhold blokkmeny.

Erling: Men likevel så funket det.

Anders: Ja, det gjorde det. Det er ingen fasit på hvordan du skal gjøre en god navigasjon.

Erling: Men det er noen konvensjoner du kan følge. De har ikke brutt noen konvensjoner. Konteksten var tydelig på venstremenyen. Brødsmulestien var opplagt en brødsmulesti. Hovedmenyen var der hovedmenyen skal være. De kan ikke få minus. Vi sa begge 0, så da gir vi dem det.

Anders: Kodekvalitet, Erling.

Erling: Ja, er du klar? Klar ferdig gå. Begge ga 0.

Anders: Den var jeg veldig klar på.

Erling: 0 kjennes rett ut. Den var grei. Bilde og video. Skal vi sløyfe den?

Anders: I det vi skulle finne frem til, var det et kodeeksempel. Jeg synes at de kunne hatt et visuelt eksempel. De kunne ha understøttet informasjonen med bilder. Dette er slik det kan se ut. Det er veldig rart å gi et HTML og CSS-eksempel uten å vise hvordan resultatet blir. Jeg vet de har bilder og illustrasjoner i andre løsningsforslag, men i det vi fant kunne de ha brukt bilder.

Erling: Og så har du de tre bildene av Malin Rygg på forsiden.

Anders: Og så har vi ikke nevnt det hovedbildet på forsiden. Der er det et bilde av en blond jente som skriver på en PC. For meg gir det verken en stemning eller mening. Det er helt intetsigende.

Erling: For meg så økes den visuelle estetiske kvaliteten, for det er et fint bilde. Men alt-teksten er «finn løsningsforslag for web».

Anders: Men det er fordi de har intensjonen med bilde som …

Erling: Men dette er et dekorativt bilde, så de kunne ha hatt tom alt-tekst.

Anders: De burde det, for nå får en jo opplest løsningsforslag for web to ganger. Tom alt-tekst på den, Difi.

Erling: Skal vi vurdere bilde og video? Klar ferdig gå. Begge gir 0. Det er greit. De bruker ikke tekst på bildene.

Anders: De hadde ikke teksting på videoen.

Erling: De hadde teksting, men ikke closed.

Anders: En annen ulempe med å tekste det slik de har gjort, er at du ikke kan spør Youtube om å oversette det til engelsk. Det kan du dersom du gjør det på den skikkelige måten.

Erling: Og du kan ikke be om å få større tekst, uten å blåse opp hele videoen. Hva med skjema?

Anders: Vi hadde filter i søkefunksjonen. Vi hadde selve søkefunksjonen, som jo er et skjema.

Erling: Jeg har lyst å dem karakter. Klar ferdig gå.

Anders: Oi! Erling er på minus.

Erling: Dagens første minus. Kanskje litt slemt. Jeg skal innrømme det. Søkeresultatsfiltreringen trekker ned. Det kjentes så feil ut, alt. Labelen var satt til usynlig, både for skjemleser og for seende. Ingen labels på noen av feltene. Søk-knappen ligger til høyre for nedtrekksfeltene. Søkefeltene ser ikke ut som søkefelt. Det ser bare ut som en firkant. De kunne godt hatt et søkeikon, brukt det de har skapt i headeren. Det var så lite som var rett med det skjemaet.

Anders: Skal jeg fortelle noe annet om det skjemaet? De har en skjult label for det nye søkefeltet, altså det store søkefeltet som dukker opp. Der labelen er «spørring». Så her har vi en databasefyr som har bestemt hva dette skal hete.

Erling: Hehe, det kan du trygt si. En databasespørring. Skal vi gi så slemme at vi gir dem -1 for dette skjemaet.

Anders: Vi er inne i en litt slem steam. Du skal få lov å bestemme.

Erling: Vi er på krigsstien. Fordi det var så lite skjema vi var innom, så bør vi ikke straffe dem for hardt på det lille vi var innom.

Anders: Så må vi skille mellom det som er litt dårlig og det som er ubrukelig. -1 skal være når det er en full showstopper.

Erling: Greit. Vi gir dem 0.

Anders: En svak nuller.

Erling: Det var mye som var feil, selv om det faktisk fungerer med tastatur. Bra. Siste generell vurdering. Klar ferdig gå. Null på begge.

Anders: Var det vi startet med òg?

Erling: Det var det.

Anders: Det var dårligere enn forventet, altså.

Erling: Jeg er enig. Jeg tenkte at det grunnleggende var på plass. Hadde jeg vært dem, hadde jeg tenkt at dette skal vi ha på plass, vi skal gå frem som et godt eksempel her. Vi må løse dette på en skikkelig god måte.

Anders: De har jo hatt disse sidene i mange, mange år. De driver tydeligvis ikke med kontinuerlig forbedring, som jo jeg er en forkjemper for. Ok, la oss bli bedre hver uke. Du, jeg ser noe. De har faktisk en main som du har oversett. Hvertfall på den siden jeg er på nå. Men de har den som en section som har role til main, som ligger ett hakk dypere enn div erlik main. Litt uvanlig praksis, men det er kanskje en tanke bak den òg.

Erling: Den overså jeg ja, det er jo ikke en inngående evaluering av koden. Du sa?

Resultat

Anders: Jeg tror ikke det hadde påvirket resultatet. Vi har et resultat. Digitaliseringsdirektoratet fikk, av 100 mulig, 72 prosent.

Erling: Det er jo egentlig ganske bra! Det var mye 0. Hvertfall på slutten.

Anders: Da vinner ikke Digitaliseringsdirektoratet noe ubrukeligspris. De ligger på nest sisteplass. Det betyr jo nest best.

Erling: Skal vi ta hele listen, eller skal vi spare den?

Anders: Vi sparer den.

Erling: Hva var høydepunket i dag, Anders?

Anders: Det var nok søket som hadde et rotete interaksjonsdesign.

Erling: Da tenker du på søkeresultatet med skjema og sånn? Ja, enig. Jeg må igjen si koden.

Anders: Skal høydepunkt være positivt?

Erling: Jeg tror vi skal kalle det, det mest minneverdige, det vi husker best. Det jeg husker best var faktisk den address i footer. Jeg vet ikke hvorfor. God intensjon, prøver å gjøre det skikkelig, og så feiler de. Det var minneverdig for meg. Kanskje fordi jeg måtte google og undersøke nøye, slik at jeg ikke sa noe feil. Vi vil veldig gjerne ha tips om løsninger vi kan evaluere. Vi vil òg ha en kjerneoppgave vi kan løse på den løsningen. Send tips til hei@ubrukelig.fm. Det er kun norske løsninger. Fikk jeg med meg alt da? Takk og farvell.

Anders: Tusen takk for at du hørte på. Jeg gleder meg til neste gang.

Erling: Det gjør jeg òg. Jeg er Erling fra Okse.

Anders: Jeg er Anders fra Webstep.