Uu-podcasten: Ubrukelig

Intro

Anders: God morgen, Erling.

Erling: God morgen, Anders. Går det bra?

Anders: Ja. Det er godt å være her igjen. Vi har hatt en pause. Og nå skal vi snart ha en ny pause, for vi skal ha sommerferie. Ikke så relevant, siden denne blir sluppet etter sommerferien.

Erling: I dag er trolig årets fineste dag i Sandnes, det er meldt 30 grader. Det er helt sykt.

Anders: Ganske relevant for dagens episode.

Erling: Ja, og hva skal vi teste?

Anders: Yr.

Erling: Ikke bare Yr, men nye Yr. De har gjort noe uvanlig, de har både den gamle og den nye samtidig. Vet du hvorfor?

Anders: Ja. Eller, jeg vet ikke, men jeg har noen tanker. Det er fordi en tjeneste som Yr, som er så mye brukt, hvis du bare bytter den ut over natten, så vil du oppleve mange negative tilbakemeldinger, fordi folk frykter jo forandring. De finner ikke frem. Det ligger dypt i våre vaner å bruke yr. De som er nysgjerrige nok, sjekker den nye, og så følger de nok nøye med på dataene, når nok folk er over på den nye, til at de tørr å bytte.

Erling: Tror du det handler om brukervaner, eller teknisk?

Anders: Jeg tror og håper det er brukervaner. Det jeg har lyst å si i dag, er at jeg har gjort en liten ufrivillig brukertest av nye Yr.

Erling: Ufrivillig?

Anders: Ja, for i det siste har det vært mye gresspollen, og jeg er plaget av det. Eller, jeg er ikke sterkt plaget, men når det er veldig mye, som nå, så fungerer jeg ikke så bra. Jeg googlet «pollenvarsel», og så fikk jeg Astma- og allergiforbundet på første plass, og Yr på andre plass. Og jeg har aldri brukt Astma- og allergiforbundet, og det vet jo Google. Men det at de presenterte det på førsteplass burde få meg til å forstå at jeg burde prøve den likevel. Men jeg gikk inn på Yr, fordi det er der jeg er best vant. Da fikk jeg opp et rutenett med forskjellige farger som viste hvor stor spredning det var. På min telefon, som er sort-hvit, så forstod jeg ingenting, fordi jeg kunne ikke se.

Erling: Fordi de belaget seg kun på farge?

Anders: Ja, og hvis du belager deg kun på farge, og likevel bruker nyanser som blir mørkere og mørkere, så er det mulig å danne seg et bilde, men her klarte jeg ikke det heller.

Erling: Det neste naturlige spørsmålet er jo hvorfor du har telefonen sort-hvitt?

Anders: For å gjøre den mindre interessant. Jeg liker ikke å sitte å trykke på den.

Erling: For å holde deg selv i tøylene?

Anders: Ja. Litt av grunnen er òg at jeg har en gammel telefon. Men det som skjedde var at jeg ikke fant ut av det. Så fikk jeg et banner som het «Prøv nye Yr». Da tenkte jeg at kanskje den er mer universelt utformet, og jeg skal jo snart teste Yr på podden, så jeg gikk inn på nye Yr. I salgsteksten stod det blant annet «tilgjengelig for alle». Tilgjengelig er jo et vagt begrep, så det er ikke sikkert at de brukte tilgjengelighet med samme betydning som vi gjør nå. Jeg kom inn på nye Yr, på forsiden. Og jeg forstår at de ikke har det teknisk på plass, at de forstår at jeg er på en pollenvarsel og at de skal sende meg til den nye pollenvarselen. Men jeg ble møtt av et stort søkefelt. Der søkte jeg etter «pollen». Hva skjer da?

Erling: Ingen plasser i Norge som heter Pollen?

Anders: Veldig mange plasser i Norge som heter Pollen! Så jeg fant været til mange plasser som heter Pollen. Jeg trykte meg tilbake noen ganger, kom meg til Astma- og allergiforbundet og fant svaret lett som en plett, selv uten farger på skjermen. Der tapte Yr så det sang. Jeg vet ikke om de har lagt pollenvarsel på den nye versjonen. Så det var en liten oppvarmingshistorie. Det var reelt. Jeg klarte ikke å bruke tjenesten fordi den ikke var universelt utformet.

Erling: Selv om det ikke er så mange som har satt mobilen sin til sort-hvitt, som deg, så er det folk som er fargeblinde.

Anders: Jeg kunne jo ha satt på fargene, og klart å bruke tjensten, men det er ikke alle som kan det, og det er derfor vi er her, Erling. Nye Yr er tilgjengelig for alle. Det skal vi finne ut i dag, om det stemmer.

Erling: Hva er kjerneoppgaven i dag?

Anders: I dag skal vi finne ut været i Sandnes i morgen. Vi sitter i Sandnes nå, og lurer på om været er like bra i morgen. Nå har det vært stabilt bra vær lenge. Ikke sikkert det stemmer lengre når du lytter på, kjære lytter. Men dette er en podkast om universell utforming, og vi skal sjekke forskjellige området, og vi begynner med det visuelle området.

Visuelt

Anders: Nå går vi inn på nye yr.no. Vi blir møtt av en stor modal.

Erling: Du gjør det du?

Anders: Takk for at du utforsker de nye nettsidene. Den har kanskje du klikket bort en gang? Et stort bilde av en jente som slikker regn. Det regner og hun ser opp med tungen ute. Egentlig ser hun ikke så glad ut, men hun er nok det siden hun oppfører seg på den måten. De skriver «Nye Yr er tilgjengelig for alle og tilpasser seg automatisk ulike skjermstørrelser.» Det burde være unødvendig å skrive i 2020, men de gjør nå det. «Du får det samme presise værvarselet som før, servert enklere og mer oversiktlig. Vi er ikke helt ferdige med arbeidet ennå, men det aller meste er på plass.» Egentlig en fin tekst. Så har de en knapp som heter Vis meg som lukker modalen. Jeg synes at en modal brukt som dette, selvfølgelig hvis det tekniske er på plass, passer bra. Da har jeg litt mer tålmodighet.

Erling: Det gjør noe med forventningene.

Anders: Det styrer forventningene litt ned.

Erling: Får du lukket den med escape?

Anders: Ja! Veldig bra. Vi skal gjøre en visuell vurdering. Hva ser du, Erling?

Erling: Det er fint og lyst. De har brukt nesten skyfritt himmel-blått. Litt skyer øverst til høyre. Det står «Værvarsel for over 10 millioner steder over hele verden». Det står søk etter sted med en knapp Finn sted i nærheten. Det ble jeg litt forvirret av. Visuelt, generelt, fint og tydelig. Lite fjas. De har brukt mye plass til siste tweets.

Anders: Veldig mye plass! Og blikkfang, for alle siste tweets har et bilde i seg. De skriker etter oppmerksomheten her.

Erling: Det er fra twitterfeeden. Det er litt siste nytt-syndromet. Samtidig så kan det være interessant å se.

Anders: De har jo nyheter under.

Erling: Værsaker frå NRK står det, selv om jeg har på bokmål.

Anders: Det er søkefeltet som får fokus.

Erling: Det jeg stusser over er søkeknappen som en skulle tro er en submitknapp for søkefeltet, men på knappen står det Finn sted i nærheten, og i placeholderen står det Søk etter sted. Er de egentlig koblet?

Anders: Jeg tror ikke det.

Erling: Litt forvirrende.

Anders: En uvanlig måte å gjøre det på. Jeg er enig.

Erling: Det ser ut som om de hører sammen.

Anders: Selv om det er litt luft og …

Erling: Det er ikke nok som skiller dem.

Anders: Men den Finn sted i nærheten har jo mest blikkfang, så det er kanskje den de vil vi skal bruke. Så har de puttet navigasjon bak en menyknapp, med et hamburgerikon. Men de bruker òg teksten meny. Det blir en mer og mer vanlig praksis. Da vi startet med hamburgere, så var det kun på mobil. Nå er det vanligere å gjøre slik som Yr. Og for Yr sin del så tenker jeg at det er bra. Når skal du inn i en meny på Yr?

Erling: Jeg har lyst å si at det ikke er bra.

Anders: Få høre!

Erling: For det du får presentert nå er et værvarsel, søk etter sted. Og så en meny oppe til høyre. De eksponerer ikke brukeren for alt det andre de har. For hvis du klikker på den menyen, så har du badetemperaturer, snødybder og som du nevnte tidligere, pollen. Hvis de hadde hatt det som tre menyelementer i toppen, så ville det vært mer sannsynlig at folk hadde oppdaget at de òg har dette.

Anders: Du har ikke pollen.

Erling: Jeg har ikke pollen. Det var bare det du nevnte. Det ville vært naturlig å ha der oppe. Det er lettere for folk å oppdage. Hva ser du på?

Anders: Jeg ser bare på forsiden. De bruker en sterkere blåfarge på knappen enn i logoen sin. Det er nok av uu-hensyn tror jeg.

Erling: Blåfargen i logoen har ikke sterk nok kontrast mot det hvite.

Anders: Det er kanskje en diskusjon de har hatt. Skal vi oppdatere hele fargeprofilen vår slik at den har god kontrast, eller som her, å bruke de interaktive elementene med annen blåfarge.

Erling: Som kanskje er viktigere.

Anders: Ja. Jeg synes de to blåfargene står dårlig i sammen. Jeg synes det er litt rart at de har valgt et blått tema når de har en annen blåfarge i logoen. Det er veldig subjektivt. Jeg tenker ikke at jeg kommer inn på noe nytt og friskt. Det er bra at de har valgt en veldig subtil bakgrunn som ikke forstyrrer noe, men jeg synes det ser uferdig ut, uten at det skal ha så mye å si for denne vurderingen.

Erling: Jeg synes det ser mer moderne ut enn den gamle.

Anders: Det gjør kanskje det.

Erling: De har jo fokus på oppgaven her, som er å søke i det søkefeltet. Men det andre de har, badetemperatur og snødybder, pollen og sånn. Kanskje det skulle vært de første elementene under søkefeltet, i stedet for siste tweets. Det er en annen diskusjon.

Anders: Jeg tenker at det å ha badetemperaturer nå, i disse dager, og da tenker jeg ikke på korona, men i disse varme dagene, det ville nok vært mer relevant.

Erling: Jeg ser under på værsaker frå NRK – Sydenvarmen fortsetter i Nord-Norge.

Anders: Det står «Værsaker frå NRK», men over står det «Tweets fra meterologoene». De veksler litt på bokmål og nynorsk. «Veldig» forstyrrende.

Erling: Jeg forstår nesten ingenting (sies med ironi).

Anders: På alle nyhetssakene har de skrevet klokkeslett og dato, og da våkner pedanten litt i meg. De skriver dato uten punktum, altså 25 juni 2020 klokken klokken.

Erling: Hehe. kl. kl. Dette er sikkert Twitter sin feil, men det er Yr sitt ansvar.

Anders: Tror du?

Erling: Det er kortene fra Twitter, er det ikke det?

Anders: Men de kan ha implementert det med API fra Twitter?

Erling: Det vet jeg ikke om er mulig eller lov lengre, men det er lenge siden jeg har implementert noe fra Twitter.

Anders: Men et uu-brudd, hvis jeg skal kunne si det, så har alle lenkene fra Twitter lenketekst «Se på Twitter», «Se på Twitter», «Se på Twitter». Det vil vi kanskje få se i skjermleseren. Denne vil funke dårlig med en lenkeliste, så sant de ikke har metadata på den.

Erling: Stemmer.

Anders: Er vi ferdige med det visuelle, Erling?

Erling: Det er vi. La oss gå videre til neste, som er tastatur og skjermleser.

Tastatur og skjermleser

Erling: Skal vi hente inn Kari?

Anders: Er det Kari?

Erling: Nora! Hvorfor sa jeg Kari?

Anders: Nå bytter jeg over til Safari og starter Voiceover.

Skjermleser: Voiceover på Safari. Yr. Mine steder. Nettinnhold har tastaturfokus.

Anders: Jeg forstår ikke hvorfor de har «Mine steder» i tittelen.

Erling: Det høres ut som om de hadde en god idé, som de begynte på uten å bli ferdige.

Anders: Jeg er jo ikke innlogget. De har ikke noe historikk på meg.

Erling: Nettopp.

Skjermleser: Lenke. Meteorologene krøllalfa meteorologene. Hoved.

Anders: Dette var min feil fordi jeg var lengre nede på siden med tastaturfokuset mitt.

Skjermleser: Én. Forlater Yr Mine steder.

Anders: Beklager dette.

Skjermleser: Lenke. Gå til innholdet.

Anders: Der hørte vi «Gå til innholdet», så der har de en snarvei. Det vil jeg jo ikke gjøre nå.

Erling: Nei, du vet ikke hva som er hvor.

Anders: Jeg må kartlegge litt.

Skjermleser: Lenke NRK. Lenke Meteorologisk Institutt.

Anders: Hva skal vi si om de to lenkene? Det er ikke brukerfokusert å presentere en lenke til NRK som den første lenken. Grunnen til at vi fikk dette opp er at de står helt i toppen, og forteller hva dette er, en tjeneste fra NRK og Meteorologisk Institutt. Jeg mener at det er for få som bruker en slik beskrivelse av hva det er. Denne teksten kan jeg lese med skjermleseren òg, men nå hørte vi kun interaktive elementer. Vi kan diskutere om det er vits å lenke NRK og Meteorologisk Institutt her. Det er litt naturlig, men òg litt unaturlig.

Erling: Jeg kan òg nevne at de ikke ser ut som lenker, de ser ut som en del av teksten.

Anders: Godt observert, Erling.

Erling: De har god fokusmarkering, det er standard.

Anders: Den har blitt veldig bra i Chrome, den standard.

Erling: Det ser vi her nå. Bakgrunnen er helt lys, da blir det en blå fokusmarkering. Vi vet at hvis det hadde vært mørk bakgrunn, så hadde vi sett hvit òg. Jeg vil òg kommentere at her står det «En tjeneste fra Meteorologisk institutt og NRK». De kunne ha spandert på seg «En værvarslingstjeneste».

Anders: Ja, og det har de nok diskutert frem og tilbake. «Vi er jo så mye mer enn en værvarslingstjeneste!»

Erling: Hehe. Det er så typisk.

Anders: Vi er jo alt.

Erling: Vi har pollen og vi har badetemperatur og vi har snødybder.

Anders: Byggmester Bob skryter alltid av hvor mange hustak de har skiftet, men alle skjønner at de kan mer enn hustak. Finn det du er best på, og Yr er best på værvarsel, si at det er det du driver med. Så enkelt. Vi går videre.

Skjermleser: Brukte lenke Yr banner.

Anders: Sa ikke intensjonen, kunne gjort det.

Erling: Sa ikke at det var en logo, sa bare Yr.

Anders: Vi legger godviljen til og så forstår vi det. Det er en konvensjon at logoen kommer først.

Skjermleser: Meny knapp navigering.

Anders: Det vil si at de har to semantiske elementer, de har menyen som en knapp, som er riktig, og den ligger i et nav-element, sannsynligvis, som er bra. Jeg kan åpne den.

Skjermleser: Snødybder. Lenke og fire til. Nettdialogrute og et objekt til. Gruppe.

Erling: Hva var det?

Anders: Der bommet de litt, for de sier snødybder lenke og fire til. Jeg vet ikke helt hvorfor hun sier fire til, men det er nok Yr som har gjort noe lurt der.

Erling: Jeg mener det er en liste, så den leser første elementet i listen.

Anders: Ja, men jeg forstår ikke hvorfor han gjør det. Pleier ikke å gjøre det. Men, fokuset mitt står på lukkeknappen, ikke på snødybder. Der er en mismatch der. Hvis jeg trykker enter nå, ut fra hun sa, så kommer jeg til snødybder, men jeg tror jeg lukker boksen. Ingenting skjedde.

Erling: Ingenting? Hos meg lukket den seg.

Anders: Det var ikke fokus noe sted.

Erling: Jo, hele har fokuset. Hvis du tabber én gang til, så får du fokus på lukkeknappen.

Skjermleser: Lenke badetemperatur. Escape meny knapp.

Erling: Bare for å si det, det er mye som fungerer her.

Anders: Ja! Det som skjedde nå var ikke en feil. Det tar jeg litt på min kappe.

Erling: Når jeg trykker så åpner den seg, og når jeg tabber så tabber den inni uansett. Hvis jeg trykker esacpe så lukker den seg og fokuset forblir der det var, slik en overlay skal oppføre seg. Her har de gjort veldig mye riktig.

Anders: Kanon. Jeg går videre.

Skjermleser: Søk etter sted. Redigerbar tekst. Tom.

Anders: Det er jo det vi vil. Visuelt sett så dukker det opp et felt under som heter «I nærmheten». Det fikk vi ikke beskjed om, så da bruker vi ikke den.

Skjermleser: S A N D N E S. Sandnes. Søk etter sted.

Anders: Samme her, de annonserer ikke autoforslagene mine. Mitt valg er å trykke enter, fordi jeg ikke har noe annet valg.

Erling: Hvordan kunne de ha løst det?

Anders: De kunne ha løst det med …

Erling: Aria-live?

Anders: Nei. Jeg tenker.

Erling: Du tenker som det knaker.

Anders: De kunne ha løst med role="combobox" på selve inputfeltet. Du har en kombinasjon av et innskrivningsfelt og en liste. Så har du en rolle på den listen òg, som jeg ikke husker hva heter (det heter listbox).

Erling: Hva ville det ført til.

Anders: At den forhåpentligvis ville blitt lest opp.

Erling: Ville den ha lest opp alle alternativene? Spør jeg vanskelig?

Anders: Du spør bra. Her har WAI-ARIA kodeeksempler.

Erling: Hva skjedde når du trykket enter?

Anders: Det har jeg ikke gjort enda. Jeg gjør det nå.

Skjermleser: Overskriftsnivå 1 2 objekter. Du søkte etter Sandnes. Hoved.

Anders: Kjempebra! De har flyttet fokuset til overskriften som er riktig nivå. Litt forvirrende at hun sier «Overskriftsnivå 1 2 objekter», hun burde hatt mer pause mellom. Og jeg forstår ikke hvorfor hun sier to objekter. Fordi det har ingenting med antall søketreff å gjøre.

Erling: En liten kommentar her. Jeg sjekker koden. Det er en h1 som har tabindex -1. Tabindex -1 på et element som ikke er interaktivt.

Anders: Det er bra, for det er en SPA-teknikk. Du flytter jo fokus med javascript, men du vil ikke at det skal være mulig å komme til det hvis du tabber.

Erling: Stemmer.

Anders: To objekter, hvorfor sier hun det?

Erling: Det har ikke noe med at hun har en em inne i h1-en?

Anders: Ja, kanskje. Men det var forvirrende.

Erling: Hvis det var forvirrende for deg, så var det forvirrende for meg òg.

Anders: Jeg vet ikke hvordan de kunne ha løst det.

Erling: Det var jo litt det samme i menyen. Snødyber og fire objekter til.

Anders: Vi går videre.

Skjermleser: Lenke Sandnes by Rogaland 1 meter over havet.

Anders: All informasjon vi hørte var bra informasjon. Jeg er så sikker på at jeg har truffet rett. Ingenting som gjør meg forvirret.

Erling: Litt kult her er at det ikke står «meter over havet», det står moh. Skjermleseren forstår at det betyr meter over havet.

Anders: Er det takket være abbr-taggen? Er det det?

Erling: Det er de som har lagt det inn bevisst. Veldig bra, jeg fikk litt frysninger jeg.

Anders: Jeg òg, fordi det er et så lite brukt element, som har vært der nesten siden tidenes morgen.

Erling: Da fikk vi et eksempel på hva som skjer.

Anders: Det funket jo megabra.

Erling: Fordi hun leste ikke m o h.

Anders: Men hun viser moh i den visuelle delen av skjermleseren. Bra.

Skjermleser: Sandnes knapp banner.

Anders: Der ble vi forvirret.

Erling: Trykket du på enter?

Anders: Ja. Da er jeg på en knapp som heter Sandnes, og jeg aner ikke hva den gjør.

Erling: Visuelt ser det ikke ut som en knapp, det ser ut som en heading.

Anders: Ja, det ser ut som en heading. Det kan være knappen er at det er en stjerne ved siden av, som gjør at du kan favorittmarkere den.

Erling: Det kan jeg bekrefte.

Anders: Her har de prøvd å være smarte, fordi de har flyttet fokuset til det første objektet, men det som hadde vært bedre her, var å ikke flyttet fokuset nå, for da hadde du havnet på starten, og da hadde du kommet til hopp til hovedinnhold ved å trykke tab, og det er er jo det vi vil gjør nå. Vi vil jo ikke navigere på en knapp som heter Sandnes, vi vil høre været. Jeg vet ikke hva denne knappen gjør, jeg trykker enter bare fordi jeg er nysgjerrig.

Skjermleser: Informasjon om dette stedet. Nettdialogrute. Informasjon om dette stedet. Gruppe.

Erling: Visuelt får vi en popout.

Anders: Noen har kalt den, i metadataene sine, «informasjon om dette stedet». Det er jo inforasjon om dette stedet, men det er òg et valg om å legge til i mine steder.

Erling: De bruker en div med en aria-label som sier «Informasjon om dette stedet». Samme informasjon som står før du åpner den, så er det en knapp inni, som er en favorittgreie, hvor det står «Legg til i mine steder». Så det var faktisk ikke informasjon om dette stedet.

Anders: Det kan tenkes at denne menyen her skal få flere ting i seg, og at det ikke gir mening fordi tjenesten er uferdig. Men som den står den nå, så burde stjernen vært en knapp, uten å ha en knapp på selve teksten.

Skjermleser: Sandnes knapp tom banner nåværende side lenke.

Anders: Ja! Det var ganske interessant. Visuelt sett forventet jeg å havne inn i en søkeknapp, i menyknappen, fordi de ligger til høyre for Sandnes hvor jeg er. Jeg havnet rett ned til værvarsel.

Erling: Hvordan ser det ut – værvarsel?

Anders: Det har en strek under seg. Værvarsel er en fanemeny som ikke er kodet som en fanemeny.

Erling: Hvordan vet du det?

Anders: Fordi hun sa ingenting om at hun var på en fane. De burde hatt role="tablist". Men hun sier nåværende side, som jeg tipper er fordi de har brukt aria-current.

Erling: Det stemmer. Jeg kan òg nevne at denne ligger i en nav.

Anders: Ja! Det sa hun. «Tom navigering». Tom? Hvorfor sa hun det? Jeg vil komme meg videre. Det jeg tror skjer nå er at jeg kommer til historikk.

Erling: Som er neste punkt.

Skjermleser: Lenke historikk.

Anders: Det er derfor dette burde vært kodet som faner, for da endrer du tastaturoppførselen, for i en fanemeny bruker du piltastene til å navigere deg i, fordi du vil hoppe forbi de fanene som ikke er av interesse. Historikk her er jo nedprioritert. Når vil du lese det? Det må jo være en smal oppgave.

Erling: Jeg synes det er interessant med historikk.

Skjermleser: Lenke kart.

Anders: Oi, jeg fikk opp en liten melding i bunn. «Nyhet, nå kan du sjekke pollenvarselet på Yr». Men hun annonserte ikke det.

Erling: Nei, der var det ikke noe aria-live.

Anders: Nå er jeg spent.

Skjermleser: Gruppe tom hoved.

Anders: Ja! Hva er det?

Erling: Hva skjedde visuelt?

Anders: Visuelt så er jeg i en rute som gir meg værvarselet nå. Jeg ser en stor sol, jeg ser en temperatur. Jeg er jo ikke interessert i hva været er nå, det er i morgen jeg skal finne ut. Men hun må fortelle meg det, at dette er været nå.

Erling: Når jeg nå tabber, så får jeg fokus. Den boksen får en fokusmarkering, men det går ikke an å klikke på den. Den er interaktiv uten å være interaktiv. Hvordan og hvorfor? Diven har tabindex 0. En div, et ikke-interaktivt element. Er det det som fører til at jeg får tak på det med tastaturet?

Anders: Ja, det er det.

Erling: Fordi de har satt tabindex på et ikke-interaktiv element. Men i kontekst av skjermleser, så ville vi hoppet videre, fordi det ga oss ingenting.

Anders: Nå er vi på jakt etter noe som sier at vi vil se morgendagen.

Erling: For en som bruker skjermleser, er det naturlig å fortsatt navigere med interaktive elementer? Når du er på en side som har informasjon.

Anders: Perfekt innspill.

Erling: Takk.

Anders: Da går vi tilbake, fordi jeg er helt enig. Nå vet vi at vi er på værvarsel. I lys av det du akkurat sa, så skrur jeg på sekvensiell lesing. Control option A.

Erling: Du går ikke til header, eller?

Skjermleser: Lenke historikk. Lenke.

Anders: Se der.

Erling: Hva skjedde?

Anders: Hun hoppet ned til nyheten om pollenvarselet. Der var det noe som skjedde, som gjorde at hun ikke klarte å fortsette.

Erling: Det var jo veldig rart.

Anders: Jeg vet ikke forklaringen.

Erling: Det er bare en div med noen buttons i. Hun leste dem ikke opp heller. Det er nok det siste elementet med innhold. Det har ikke noe med tabindex å gjøre?

Anders: Nei, fordi nå er vi ikke på tab lengre. Nå er jeg forvirret. Jeg har ikke fått svar på hva været blir. Da bruker vi andre hjelpemidler. Vi bruker rotoren. I overskrifter … Nå er voiceoveren så fintet av den nyhetsboksen at hun leser ikke opp det som skjer på skjermen. Det kan være en feil hos meg. Nå sier hun ingenting. Jeg laster på ny.

Skjermleser: Voiceover på Safari.

Anders: Nå er vi på værvarsel igjen, og jeg gjør det som jeg gjorde i sted, jeg leser sekvensielt.

Skjermleser: Værvarsel. Historikk, lenke. Kart. Overskriftsnivå 2 Været nå. Overskriftsnivå 3 2 objekter. Klokken 08 09. Klarvær bilde. 22 grader celcius. Føles som 22 grader celcius. Nedbør null millimeter. Vind 5 meter skråstrek slett bris fra sørøst. Overskriftsnivå 3 nedbørvarsel. Åpne informasjon knapp. Det blir opphold neste 90 minutter. Tabell og ett objekt til. Fanegruppe. Tabell markert. Fane 1 av 2 graf. Fane 2 av 2 tabell. Fanepanel. Overskriftsnivå 2 Værvarsel for neste 9 dager. Lenke i dag 26. juni morgen klarvær bilde. Ettermiddag delvis skyet bilde. Kveld delvis skyet bilde. Maksimum skråstrek minimum temperatur. Temperatur 29 grader celcius skråstrek temperatur 22 grader celcius. Vind 7 meter skråstrek s. Lenke Lørdag. Escape knapp. Voiceover av.

Anders: Det ble en ganske lang sekvens. Her vil jeg jo si at det var veldig mye bra.

Erling: Mye god informasjon.

Anders: Veldig lett å fokusere på det som ikke fungerte her, flisespikket. Men her fikk vi svaret. Vi fikk vite at i morgen får vi klar sol.

Erling: Gjorde vi det?

Anders: Nei, vet du hva? Jeg misforstod hele greia. Hun leste i dag 26. juni. Og det neste hun sa var «morgen klar sol». Men det er jo i dag på morningen.

Erling: Ja.

Anders: Det har jeg aldri tenkt på før, at morgen er tvetydig. Jeg satt her og tenkte at jeg kan været for i morgen. Det stemte ikke.

Erling: Vi kan si at dette ser ut som en tabell, men det er ikke kodet som en tabell. For én ting jeg stusset på var at hun sa «29 grader skråstrek 22 grader». Og jeg kan forstå det, men i det som visuelt ser ut som tableheaderen, så står det maks skråstrek min temp.

Anders: Men hun sa jo at det var en tabell.

Erling: Gjorde hun?

Anders: Så det er en tabell. Nå har ikke jeg sjekket koden.

Erling: Jeg finner ingen table.

Anders: Da må det være rolle tabell.

Erling: Role tablist, role tab.

Anders: Det er den tabell og graf.

Erling: Vi kommer tilbake til det når vi går gjennom koden, men det er ganske mye diver her. Uten at det gjør noe, nødvendigvis. Jeg finner ikke noe som indikerer … nå ser jeg jo veldig fort gjennom koden.

Anders: Du har rett. Åkei.

Erling: For å nevne det òg. Alle dagene er kodet, med en lenke og en header. Så hvis du hadde tatt opp rotoren og bladd gjennom headingene, så hadde du sansynligvis fått dagene listet opp nedover. Det hadde vært enkelt å finne dagen i morgen. Men det funket veldig bra.

Anders: Hadde ikke jeg blitt fintet av den morgen-greiene, så hadde vi fått svaret, da hadde vi fortsatt å lest på lørdag.

Erling: Nettopp. Her er det mye bra. I første episoden av Universelt utformet, da så vi på Yr eller Pent.no, at skjermleseren sannsynligvis ikke hadde lest opp det. Det manglet alt. Vil vi gjøre noe mer?

Anders: Nei, det vil vi ikke. Vet du hva jeg lurte på noe. I klokkeslettet sitt. I dagens værvarsel, så har de brukt rett tegnsetting. De har skrevet 08 tankestrek 9. Det er riktig, for da sier du fra klokken til klokken. Men skjermleseren tolket ikke det riktig. Hun overså at det var en tankestrek og ikke en bindestrek.

Erling: Hva sa hun?

Anders: Hun sa bare «8 9» tror jeg. Hun sa ikke 8 til. Det var dumt. Der skylder jeg på Apple. Vi fant svaret. Eller. Kunne de ha løst dette med morgen? Visuelt sett så gir det mening. For det står «natt, morgen, ettermiddag, kveld», så du skjønner at det handler om tidlig på dagen. Det skal sies at i kolonnen natt, i inneværende dag, der har de ingen ikon, for det har jo passert. Det at jeg ble satt ut av morgen hadde ikke skjedd dersom vi hadde sett dette på en annen dag. Da hadde vi jo hørt «natt, morgen».

Erling: Dette er deg, det er du som er nabb her, det er ikke Yr.

Anders: Det er jo uansett interessant at morgen kan betyr to ting i værvarselsammenheng.

Erling: De kunne jo hatt en aria-label som sa spesifikt.

Anders: Det ble dagens lille detalj. Vi er ferdige med tastatur. Så skal vi hoppe videre til koden, som du har kikket på. Værsegod, Erling.

Evaluering av koden

Erling: La oss begynne med toppen. De har lang. Veldig bra. Vi har ikke hørt noe engelsk. Det jeg så de har, kanskje du kan svare på hvorfor. Jeg har jukset litt og googlet òg. De har en lenke med en hreflang-attributt. Hjelper det noe på tilgjengeligheten, eller er det kun SEO?

Anders: Jeg har kun kjennskap til den med SEO. Det er jo én jeg bruker, men jeg vet ikke hvilken praktisk effekt det har. Skjermleseren kunne jo ha sagt nå kommer du til en engelsk side, men jeg tror ikke hun gjør det. Kult at de bruker den, de bruker den riktig. Men jeg vet ikke om det har noe praktisk betydning.

Erling: Logoen er en inline SVG, men den har ikke title. Dette har de løst med en aria-label rundt, som vi hørte i skjermleseren, bare har «Yr». Det funket fint. De har header-landemerket. Den er dog syv div-er dypt. I seg selv, ikke et problem.

Anders: Er de div-ene tomme, kun brukt til styling?

Erling: Det er type app, app-main. Page, page-header. Det er strukturelle stylingelement, så det er bra. De har nav, som vi òg har hørt i skjermleseren. Jeg finner ikke en main. Litt overraskende. Jeg har kun sett på forsiden. Jeg finner heller ikke noe article, selv om det er artikler, ting vi kan definere som eget innhold. De har footer på plass i bunn. De har brukt mye inline SVG. Av de jeg har sjekket har ingen title. Jeg har tillit til at de har løst det på en annen måte, type aria-label eller lignende. Søkefeltet mangler en label. Så har de òg en input type="submit" med tabindex="-1". Den er skjult. Det handler nok om at når du trykker enter så skal de trigge noe. Tror ikke jeg har sett den måten å løse det på. Det som var veldig snodig var at de har en knapp, som har display: none i CSS-en som heter «avbryt» i forbindelse med søkefeltet. Den er jeg veldig nysgjerrig på. Hva gjør den? Så har jeg skrevet litt om den tabellen som vi har snakket om. Det er divorama. Begrepet som du myntet. Det ser ut som en tabell, men det er ikke kodet som en tabell. Men det er tydelig at de anser det som en tabell, fordi klassen heter heading-day-cell. De har tenkt på dette som en tabell.

Anders: Men skjermleseren sa jo noe om tabell? Eller husker jeg feil?

Erling: Jeg vet ikke. Jeg bet meg ikke merke i at hun sa noe om tabell.

Anders: En grunn til at det ikke er kodet som en tabell kan være at tabeller med så mange kolonner er lite mobilvennlige. Det er vanskelig å skalere ned så brede tabeller.

Erling: Jeg tipper det jeg òg.

Anders: For du endrer ganske radikalt oppsettet når du kommer ned til mobil. De putter mer informasjon inn i starten. Det kan være det som er grunnen, og det kan være en gyldig grunn.

Erling: På forsiden har de en h1 med tabindex="-1" og forside, som ikke er veldig beskrivende for hva det er. Jeg sjekket òg badetemperatur, og der hadde de «Badetemperaturer i Norge». På forsiden er h1-en skjult visuelt, med den klassen du oppdaget, nrk-sr. På undersiden badetemperaturer er den synlig. Dette er bra, de har et bevisst forhold til dette. En bitteliten digresjon. På badetemperatursiden, så er det en liten inforsirkel på siden av headeren, den fungerer nesten helt fint. Du åpner den ved å trukke enter, lukke ved å trykke escape, men det er en lenke inni der som du ikke kan nå med tastaturet.

Anders: Hvordan kunne de ha løst det?

Erling: Jeg lurer på hvordan de har fått til at den lenken ikke er en del av tab. Når du tabber så veksler du mellom fokus på hele og lukkikonet. Det er ingen måte å komme bort fra denne uten å lukke den. Det er noe her som gjør at den lenken ikke er tilgjengelig med tastatur. Men det var en liten avsporing. Artiklene på forsiden er kodet som ol li, altså en ordered list. Det er greit på et hvis. Men, så har de ingen article, som er litt snodig. Men de har brukt en figure. Det har vi snakket om i en annen episode, så nå vet vi litt mer hva det er. De har en figure med et bilde og en figcaption. Dette virker litt snodig. I følge definisjonen på figure-elementet, så skal caption beskrive bildet eller det andre innholdet. Her er det bildet og navnet på en artikkel. Det kan være at det blir semantisk riktig, og at det gir mening i en skjermleser, men det er et mønster jeg ikke har sett før. Har du noen tanker?

Anders: Jeg støtter deg, det ser litt rart ut.

Erling: Det virker som at det er gjort med vilje, at de har en tanke bak.

Anders: Men du, du sa at de ikke hadde main?

Erling: Fant du?

Anders: Ja, de har div role="main".

Erling: Ahh.

Anders: Ikke like ryddig, men likevel et landemerke.

Erling: I footeren ser vi logoen til NRK og Meterologisk institutt til venstre. Så er det tre kolonner. Visuelt sett er det tre kolonner uten overskrifter. I koden er det skjulte h2-er over hver kolonne som beskriver hva det er. Her har de òg brukt klassen nrk-sr for skjule det. Det jeg lurer på nå er hvorfor de har skjult det. Hvorfor er dette relevant for skjermleser, men ikke de som ser. Den første er «Kontakt og hjelp» som sier noe om konteksten til lenkene under.

Anders: Det er fordi at på en skjermleser så trenger du ekstra hjelpemidler, fordi det er vanskeligere å skumlese. Nå vi ser så gir de grupperingene mening uten overskrifter.

Erling: Jeg kjøper den.

Anders: De kunne godt hatt overskrifter her. Kanskje det hadde blitt for mye støy.

Erling: Det er nok enklere når du ser det å skjønne vesenet til lenkene, at de hører sammen. Jeg tror det ville vært enda enklere dersom de var synlige, disse overskriftene. Det var det. Mye bra, og noen snodige ting.

Automatisk testing

Anders: Jeg gjorde en automatisk test med Accessibility Insights. Jeg fant tre feil, fordelt på tre typer. Det er lite feil. Det ene var en syntaksfeil. Du kan ikke bruke aria-expanded på input. Det var på hovedsøkefeltet.

Erling: Du kan ikke bruke aria-expanded på input?

Anders: Nei, det er ikke et gyldig attributt på input, det bruker du på en knapp. Du ekspanderer ikke et inputfelt.

Erling: Dette inputfeltet ekspanderes, når du trykker på det så popper det opp.

Anders: Men det er feil mønster. Men det er lov å bryte reglene dersom det blir en bedre opplevelse. I åpningsmodalen så har ikke lukkeknappen tilgjengelig navn. Button har ingen metadata. Modalen i seg selv, ja, vi klarte å lukke den med escape, men den kunne hatt et tilgjengelig navn. Søkefelt har ikke label. Det er ingenting utenom plassholderen som sier at det er et søkefelt. Vi klarte å bruke det. Det er fordi at VoiceOver bruker plassholderen, men det er ikke godt nok. Her kunne de nok ha brukt en aria-label eller en slik skjult nrk-sr. Altså en skjult label. Akkurat den ble jeg litt overrasket over, fordi de har gjort så mange tilplasninger for skjermlesere.

Erling: De har gjort så mye bra, og så feiler de på noe så elementert. Det var de tre?

Anders: Ja.

Rangering

Anders: Da går vi over til rangering.

Erling: Vi rangerer fra -1 til 0 og +1. -1 er dårlig, 0 er greit og +1 er bra. Vi går gjennom 10 kriterier, pluss en generell vurdering nå i starten, bare for å ta temperaturen på det. Vi holder opp hånden vår, og viser hva vi gir, slik at vi ikke påvirker hverandre. Den generelle vurderingen først? 1, 2, 3. Begge ga 1. Neste kriterie er skjermleser. Er du klar? Begge ga 1. Noe å nevne?

Anders: Vi fant jo mye de kan forbedre. Det er jo mat her til å endre på.

Erling: Det er rom for forbedring, så ikke hvis på lauvbærene.

Anders: Den største var nok den når du havner inn på en by, at du havner på en knapp som sier navnet på byen, som vi ikke forstår – hva skal jeg gjøre nå?

Erling: Neste er tastatur.

Anders: Vi fant ingen feller.

Erling: Klar ferdig gå. Begge ga 1. Farge og visuelt er neste kategori. Er du klar? Du tenker. Du ga 0, jeg ga 1. Hvorfor ga du 0?

Anders: Fordi den … jeg er litt farget (haha) fordi jeg synes det ser litt uferdig ut. Det kan jeg ikke bruke. Det er ikke utilgjengelig. De har så mye fokus på Twitter-strømmen sin. Det kan være en utfordring for de med kognitive utfordringer. Hvis du har ADHD og skal inn å gjøre en «jobb», du skal inn å sjekke været, så står det noe interessant om noe greier der, jeg tror de ødelegger litt av kjerneoppgaven sin med å fokusere for mye på tweetene, så jeg tar det på den kognitive kontoen.

Erling: Er det nok til å trekke dem ned til 0. Jeg synes ikke det er nok å ta dem på.

Anders: Jeg gir meg! 1.

Erling: Automatisert test. Klar ferdig gå. Begge ga 1.

Anders: Hadde litt lyst å trekke dem litt her, men greit.

Erling: Neste er språk. Tenke litt. 1 på begge. Går bra dette. Navigasjon. Her er jeg usikker. Klar ferdig gå.

Anders: Egentlig var jo min opplevelse, da jeg søkte etter pollen i det store, store søkefeltet, som ikke aksepterer andre typer søke enn stedsnavn, fordi det er et stedssøk, det søkefeltet kunne vært smartere. Det kunne vært smart nok til å forstå pollen i pollentidene.

Erling: Skal vi stemme først? Klar, ferdig, gå. Du ga 1, jeg ga 0. Grunnen til at jeg gir 0 er at hamburgermenyen er skjult. Dette har jeg nevnt tidligere, at de godt kan vise disse tjenestene de leverer, som handler om badetemperatur og sånn. Det er kanskje litt strengt å trekke dem for det, rent tilgjengelighetsmessig. Det er greit at vi gir 1 på den. Kodekvalitet? Begge ga 1. Jeg prøvde å tenke hva vi kunne trekke dem for, og det var ikke så mye.

Anders: 1 er bra! Det trenger ikke å være perfekt.

Erling: Nettopp. 1 går fra bra til fantastisk perfekt. Bilde og video. Jeg må tenke litt.

Anders: De bruker bilder i værvarselet sitt.

Erling: 1 på den òg! Skjemakvalitet?

Anders: Nei, den dropper vi.

Erling: Generell vurdering. 1 på begge. Ble det full pott?

Anders: I dag trenger vi ikke å sjekke resultatarket vårt.

Erling: Det ble en klokkeklar 100 %. Fy søren. Vi må presisere at det ikke er perfekt. Det er mye som kan forbedres.

Anders: Vi må òg si at dette er en grunn vurdering.

Erling: Ekstrem grunn.

Anders: Vi gjør en vurdering i forkant, på under en time, så snakker vi i en time. Vi kommer opp med 100 %.

Erling: Ikke hvil på lauvbærbladene.

Anders: Det er klart at Yr har tenkt på folk. De får full pott og går dermed inn på en sisteplass i Ubrukelighetsprisen. Dere har ikke sjans å få pris, Yr! Dere blir nok nevnt i talen. I juryens vurdering.

Erling: Kult! Hva var mest minneverdig for deg?

Anders: Jeg må nok ta den «morgen» som ødela hele oppgaven for min del.

Erling: At du misforstod den.

Anders: Det kan jo være at flere enn meg opplever det samme. Til deres forsvar så gir det mening visuelt sett. Det er ikke en feil å skrive morgen.

Erling: Mitt mest minneverdige var hvor bra de har håndtert popups, altså overlays. De funket som de skulle. Det er ikke så ofte vi ser det. Du kan trykke escape, du har fokus i kontekst, du mister ikke posisjonen din og så videre. Kjekt å se. Som vanlig vil vi ha lyttertips. Send til hei@ubrukelig.fm. Vi har begrenset oss til norske nettsteder. Helst store. Send oss en kjerneoppgave. Er det innlogging, så trenger vi det òg. Det var det vi hadde. Takk for meg og takk for deg.

Anders: God sommer. Skal du bade?

Erling: Jeg er ikke en badenymfe. Jeg holder meg på land. Og jeg er ikke så glad i sand, jeg holder meg mest på gress og fjell.

Anders: Der er vi like, det med sand.

Erling: Ja, du har jo en greie med sand mellom tærne.

Anders: Men du har jo hytte på stranden?

Erling: Ikke på stranden.

Anders: Det er ikke langt fra.

Erling: Det er på en holme med mye gress. Så når alle springer ned på stranden, så koser jeg meg på terrassen. Jeg er Erling fra Okse.

Anders: Jeg er Anders fra Webstep. God sommer!