Uu-podcasten: Ubrukelig

Erling: God morgen Anders.

Anders: God morgen, Erling for tredje gang.

Erling: Første gang vi prøvde å spille inn var klokken fem på halv sju. Nå er den kvart over sju. Rett og slett litt teknisk krøll.

Anders: Det må vi akseptere, for det har ikke vært så mye av det.

Erling: Hvordan har helgen vært?

Anders: Bra. Jeg har vært på fjellet og lekt i snøen. Det er jeg jo glad i.

Erling: Og så er vi på slutten av mai.

Anders: Det er mye snø i fjellet.

Erling: Trekket er fortsatt åpent?

Anders: Det var avslutning denne helgen. Og du?

Erling: Veldig bra. Jeg har hjulpet mor med å lage bed. Det var jo spennende. Grave i steinete jord er ikke like gøy.

Anders: Du er en snill sønn.

Erling: Det må til.

Anders: Så kan jeg skryte litt. Nå var det nettopp Global Accessibility Awareness Day.

Erling: GAAD, er det det de kaller det?

Anders: Ja. Den dagen fikk jeg beskjed at jeg hadde bestått min andre IAAP-sertifisering. Nå har jeg mange bokstaver å skryte av, som sikkert ingen bryr seg om.

Erling: Husker du hvilke bokstaver du har fått nå?

Anders: Nei. Jo. Jeg vet at den første jeg tok heter WAS.

Erling: WWAS?

Anders: Nei. WAS. Web Accessibility Spesialist. Det er ikke noe mønster her. Den andre heter … nå later jeg ikke som om jeg er usikker. CPACC tror jeg. Når du har de to, så får du en tredje forkortelse. Kombinasjonen utgjør en ny forkortelse. Den husker jeg ikke hva heter.

Erling: Veldig tilgjengelig. Kult. Gratulerer. Var det tilfeldig at du fikk det på den dagen?

Anders: Det tror jeg ikke. De bruker én måned på å vurdere testen. Selv om det er flervalg, så bruker de én måned på å kverne dataene. Det er ingen fritekstsvar.

Erling: De kunne gitt det svaret på sekundet.

Anders: Jaja, slik som alle andre gjør.

Erling: Veldig rart.

Anders: Men før vi begynner. Jeg holder på å arrangere et løp. Så skulle jeg ha en logo til det løpet. Så er jeg påvirket av reklame, så jeg skulle lage den logoen i Wix Logo Maker. Wix er jo kjent for å kunne lage nettsider. Wix er visstnok én av de tjenestene av den typen som er ok med tanke på tilgjengelighet. Så laget jeg en logo. Det er superenkelt. Du setter inn en tekst, og et ikon eller illustrasjon. Du får velge i en bank. Så skulle jeg laste ned logoen, og det kostet 20 dollar. Det synes jeg er en fin pris. Tjenesten er enkel nok. Jeg sparer tid. Så skulle jeg betale, men hadde ikke med meg kortet til fjell. På helgetur, jeg bruker kun telefonen å betale med, det funker over alt. Siden de hadde brukt autocomplete=off i betalinsskjemaet sitt, så klarte jeg ikke å betale. Mitt kort ligger i nettleseren min. Wix sier nei, nettleser, du får ikke lov å fylle inn disse feltene!

Erling: Du må skrive det inn manuelt.

Anders: For sikkerhetskoden kan jeg i hodet. Jeg kan ikke de to andre, utløpsdatoen. Så det vil si at jeg måtte lage logoen på en annen måte. På grunn av ett attributt, så tapte Wix de pengene. Og det attributtet er jo én av nye WCAG, at du skal muliggjør autoutfyll. Dette var jo en situasjon der de tapte inntekter, tapte salg.

Erling: Hvorfor har de skrudd det av?

Anders: Min teori på det er at det er så mange rammeverk som har det på som standard.

Erling: Hvorfor er det så mange rammeverk som har det på som standard?

Anders: Fordi jeg ser autocomplete=off overalt.

Erling: Hvorfor? Hva gir det? Hva hindrer det?

Anders: Jeg vet ikke. Tror bare det er sånn resett-greie. Når du lager noe skal du starte med så blanke ark som mulig.

Erling: Høres helt banan ut.

Anders: Alle liker jo autoutfyll når det funker. Og her hadde jeg ikke mulighet å betale for meg.

Erling: Og så er det for de som har motoriske utfordringer eller kognitive utfordringer, som skal plotte inn, hvor mange siffer er det?

Anders: 16 pluss 4 pluss 3.

Erling: I forskjellige format, på forskjellige steder på kortet. Interessant.

Anders: De hadde heller ikke et alternativ med Paypal. Da hadde jeg òg kommet i mål. Da kunne jeg brukt Paypal-kontoen min, der er kortet mitt lagret.

Erling: Sendte du en mail for å si ifra?

Anders: Nei, for jeg er ikke slik som deg. Jeg gir dem fingen, så hopper jeg videre på min reise.

Erling: Deres tap.

Introduksjon

Anders: Nå må vi snakke om Widerøe. Vi fikk inn tips fra Roy Halvor Frimanslund. Han tipset oss òg om Prisguiden, forrige episode. Han sier at Widerøe har fått ny side. Jeg vet ikke når de fikk den. Han ga oss ikke en kjerneoppgave, så den har vi laget selv. Vi skal bestille en flybillett fra Stavanger til Sogndal. Det er den eneste strekningen jeg har brukt Widerøe på, jeg har flydd med dem én gang. Jeg har flydd til Ørsta òg. Nå har jeg bare tatt mikrofonen her. Har du noe på hjertet, Erling?

Erling: Nei, jeg synes det er kjekt å høre på dine ting. Jeg kommer ikke på noe. Skal vi gå igang med Widerøe?

Visuelt

Anders: Vi har gjort lite forberedelser. Vi holder avstand, og åpner Widerøe på hver vår maskin.

Erling: Du skrur på Nora?

Anders: Nei, først det visuelle.

Erling: Hva ser vi?

Anders: Det første jeg ser er et bilde av et kjærestepar som står på toppen av et fjell og kikker utover. Tipper det er Lofoten. De ser veldig glade ut, det ser veldig arrangert ut. Dette kan kalles en hero. Det er et utradisjonelt design. Førsteinntrykket er veldig bra, dette ser moderne ut. De har en tekst på bildet, heldigvis med en bakgrunn som er delvis gjennomsiktig, slik at de har god kontrast. Så har de en grønn knapp som sier bestill nå, med god kontrast. Veldig tydelig at det er en knapp. De har to knapper av samme type, den ene er mye større. De har en tydelig prioritering. Den andre knappen heter søk, og det er i billettsøket sitt, som jo er kjernefunksjonen som vi skal bruke i dag.

Erling: Og den er veldig prominent, som er bra.

Anders: Superbra. Her har de en veldig fin balanse mellom oppgaven og reklamebudskapet 2 for 1. De har menyen kollapset. Megameny. De bruker både hamburgerikonet og tekst, det gjør de på ikonene sine, veldig bra. Jeg ruller litt ned. De har en aktueltseksjon, litt reisetips, nyhetsbrev. Ganske interessant her er at det prominente billettsøket animerer seg ned til en miniutgave når du ruller nedover. Det er litt hakkete, ikke så veldig elegant.

Erling: Jeg skjønner ikke hvorfor.

Anders: Når du fokuserer på det blir det større igjen.

Erling: Litt rart at de har brukt tid og plass på å lage det.

Anders: Her er det òg noe uvanlig, at hele venstre kolonne og toppen er fast.

Erling: Det er jo faktisk òg en cookievarsel i bunn, som er innrammet. Det minner meg litt om gode gamle frames. De faste vedvarer når jeg gjør vinduet mindre. Ikke overlapp.

Anders: Når du først skal ha noe fast, er det nok lurt å ha bestill flybilletter til venstre.

Erling: Ja, men det tar jo opp veldig mye plass. Kontinuerlig.

Anders: Det er ryddig. Det er pent, moderne. Jeg liker fargene.

Erling: Det er ikke så mye å ta dem på, bør jeg påstå.

Anders: De bruker bilder fra plasser i Norge. De spiller på Bergen og fjell og Lofoten.

Erling: Det er ingen lenker som er underlinet, men i footeren er det en pil foran, så det er ikke tvil om at det er klikkbart.

Anders: Det ser bra ut, skal vi hoppe videre?

Tastaturnavigasjon

Erling: Tastaturnavigasjon.

Anders: Da slår vi to fluer i én smekk, som sist. Skjermleser og tastatur i én. Det vi da gjør da er at jeg åpner Safari, for skjermleseren fungerer best der.

Erling: Jeg må bare si én ting som plaget meg litt er at herobildet, hvor det står 2 for 1, reis sammen med én du bor med, hele den er klikkbar. Når jeg klikker på det hvite rundt, så har jeg gått inn på den tre ganger nå, ved et uhell. Det er ikke bare bestill nå-knappen som er klikkbar, hele bildet er det.

Anders: Og mye luft rundt bildet.

Erling: Vanligvis pleier vi å si at du skal ha et stort klikkbart område.

Anders: Fitts lov.

Erling: Men her har de tatt litt hardt i.

Anders: Jeg er ikke så streng som deg her.

Erling: Jeg klikker for å flytte fokuset mitt, når jeg skal tabbe. Da klikker jeg på noe jeg tror ikke skal være klikkbart.

Anders: Da fyrer jeg opp Nora. Trykker tre ganger på den linjen min. Da er vi igang. Som alltid begynner vi med tab-tasten.

Skjermleser: Lenke. Skip to main content.

Anders: Skip? Jeg skal fly. Har jeg havnet på en skip-side nå?

Erling: Dette er det en forklaring på.

Anders: Ja, de har prøvd, men feilet.

Erling: Hva har de prøvd på?

Anders: De har prøvd å ha snarveilenke, hopplenke, men den har de ikke tatt med i oversettelsen sin. Nå har jeg valgt at siden er på norsk. Det er et norsk flagg opp i menyen. De vet jeg er norsk. Det er sannsynligvis hardkodet uten å ta hensyn til språkendringer.

Erling: Og det er på én måte et godt tegn, fordi siden er satt til norsk og de bruker lang-attributtet.

Anders: Hun snakker norsk fordi de har kodet det riktig, som du sier.

Erling: Teksten er på engelsk.

Anders: Men her ville en jo klart å bruke det.

Erling: Ja, det er ikke big deal. Men de har hopp til lenke, som er bra.

Anders: Men den skal vi ikke bruke nå, for vi skal bestille billett.

Skjermleser: Trip type gruppe.

Anders: Her gjør de samme feilen. Her bruker de metadata på engelsk. Trip type. Her er jeg inne i et radiovalg som er bestill flybilletter tur-retur. Egentlig bra.

Erling: De har jo fieldset og legend og greier.

Anders: Har de det?

Erling: Ja. Det er der de får trip type fra.

Anders: Så det står trip type i legend?

Erling: Ja!

Anders: Som de har skjult visuelt. Samme feilen, de har glemt å oversette.

Erling: Det du ikke ser har de glemt å oversette.

Anders: Dette ville fungert bra på engelsk, men her blir det megaforvirrende. De har jo en bra label, tur/retur og én vei. Labelene blir overstyrt av de metadataene de har.

Erling: Akkurat det forstod jeg ikke helt. Jo, de har lagt til aria-label som er på engelsk.

Anders: Her ville det vært bedre å ikke brukt aria-label. Her trenger du ikke aria-label, fordi de har tekst på radiovalget som jeg håper er knyttet til radiovalget.

Erling: Så kan jeg òg si at i aria-label for radiovalget, så har de skrevet feil. De har skrevet on way, i stedet for one way. Skrivefeil på engelsk på en norsk side, på en aria-label.

Anders: Nå blir det ganske vanskelig å bruke for meg. Nå skal vi legge godviljen til. Jeg er på et radiovalg, og jeg skal én vei. Da trykker jeg pil høyre.

Skjermleser: Trip type radio button onw way markert.

Anders: Nå hørte vi det du sa. Dette ville jo blitt vanskelig òg på engelsk. Tastaturmessig så fungerte det.

Erling: Det er litt synd at de har bommet på det, for her er det mye bra.

Anders: Nå er jeg spent, for jeg kan røpe at neste felt har det som ser ut som en placeholder, som jeg ikke vet om er en label. Det kan være at de bruker den Google Material-teknikken, at placeholderen hopper opp som en label. Tabb, og det skjedde.

Skjermleser: Fly fra. Meny med liste. Lokalmeny Nettprogram 197 press key two traverse.

Anders: Her snakker hun òg blanding av norsk og engelsk. Det er fordi de har metadata på engelsk. Det kommenterer vi ikke mere. Jeg skal fly fra Stavanger, da skriver jeg Stavanger.

Skjermleser: Stavanger. Pil opp og pil ned.

Anders: Så ser jeg at de har autoforslag, og det oppgir skjermleseren, så det er bra.

Skjermleser: Slutten av teksten. Stavanger.

Anders: Det gikk ikke bra. Hun sa at jeg kunne bruke pil opp og pil ned. Jeg trykker pil ned og det skjer ingenting.

Skjermleser: Slutten av teksten. Stavanger.

Anders: Jeg kommer ikke ned til Stavanger.

Skjermleser: Stavanger, SVG.

Anders: Jeg trykker enter. Det var automatisk markert. Første valget i autoforslaget er automatisk markert, så hvis du bare har ett, kan du ikke klikke deg ned til det. Visuelt sett har du markøren i innskrivningfeltet. Ok, da skal jeg til Sogndal.

Erling: Jeg kan òg si at fokusmarkeringen er ganske bra.

Skjermleser: Feilstavet Sogndal.

Anders: Feilstavet Sogndal? Nei, jeg har skrevet det riktig!

Erling: Hvorfor sier hun feilstavet?

Anders: Jeg vet ikke.

Skjermleser: Sogndal sok utreise knapp. Klikk kalender for å åpne kalender.

Anders: Nesten et dikt. Det feltet fungerte foreløpig helt topp.

Skjermleser: Mai juni 2020 utreise og et objekt til og et objekt til. Nettdialogrute lenke. 24. mai 2020 søndag. Nettprogram.

Anders: Nettprogram forstår jeg ikke hvorfor hun sier.

Erling: Hun sier veldig mye korrekt der.

Anders: Ja, dette er tilgjengelig. Jeg skal til juni, jeg vil ta meg en tur den 5. juni. Så da prøver jeg pil eller tab. Jeg prøver pil.

Skjermleser: Lenke 25. mai 2020 mandag. Lenke lenke lenke. 31. mai 2020 søndag.

Anders: En liten detalj her er at de ikke har skrevet 31 mai med punktum. Det er Nora som er smart her, som ikke sier 31 mai. Hun skjønner at når det er et tall og en måned, så leser jeg det som trettiførste mai. Her kunne de har skrevet det med punktum.

Erling: Ordentlig.

Anders: Nå er jeg på 31. mai. Nå er jeg spent på om jeg kommer til juni når jeg trykker pil.

Skjermleser: Slutten av nettprogram.

Anders: Det forstår jeg ikke.

Erling: Hjelper fint lite.

Anders: Men det kan godt være at det ikke er Widerøe sin feil her. Fordi jeg vet ikke om det er nettprogram som en funksjon i Voiceover.

Skjermleser: Next month. Tom gruppe. Juni 2020.

Erling: Hva var det?

Anders: Det var pil til høyre.

Skjermleser: Nettprogram.

Anders: Er det noe i koden som heter nettprogram?

Erling: Dette er en Angular-applikasjon, så det er enormt med datafelter her.

Skjermleser: Tir ons tor lenke 1. juni 24. mai lenke 24. mai. Nettprogram.

Anders: Tror dette blir ganske rotete å høre på. Det som skjedde nå er at hvis jeg tabber, uansett hvilken dato jeg står på i mai, så tabber den til 1. juni. Jeg forstår ikke hvorfor, jeg synes ikke det er logisk, men jeg vil ikke …

Erling: Jeg oppdaget òg det, men det jeg lurer på er om du klarer å komme deg tilbake til mai? Med shift-tab. Det gjør ikke jeg.

Anders: Nå er jeg i første juni, og jeg skal tilbake. Da hoppet jeg til dagens dato.

Erling: Med shift tab?

Anders: Ja.

Erling: Det funker ikke i Chrome. Shift tab tar meg til lukk-ikonet oppe til høyre. Ny shift tab tar med til legg til rabattkode osv.

Skjermleser: Meldinger. Linn Therese Andersson. Masse med smuler i sofaen. Ansikt med gledestårer.

Anders: Linn Therese Andersson sender meg nå tekstmelding og anklager meg for å ha spist knekkebrød i sofaen uten tallerk, før jeg stakk på podd.

Erling: Kjenner hun deg?

Anders: Jeg har ikke gjort det.

Erling: Kanskje det var i går?

Anders: Nei, da var jeg i Røldal. Nå sporer jeg av, men en liten fun fact om min svigerfamilie. Når de spiser frokost bruker de ikke tallerk. Alle spiser maten sin på bordet.

Erling: Hæ? Går det an? Hva legger de skiven på da?

Anders: Rett på bordet.

Erling: Hva? Hva er dette for noen huleboere? I alle dager.

Anders: Argumentet er at det alltid havner litt utenfor tallerken, så du må vaske bordet uansett, så da er det ikke vits å bruke tallerk.

Erling: Nå som jeg har fordøyet det litt, så tror jeg at jeg liker det. Mindre oppvask.

Anders: Tilbake til kalender. Detter et et komplekst interaktivt element. Her gjør de mye riktig. Og vi har ikke testet kalender før, så vidt jeg husker.

Erling: Du klarer å tabbe deg eller pile deg frem til en dato nå.

Anders: Ja, det gjør jeg.

Skjermleser: Utreise. Klikk eller enter for å åpne kalender. Juni 2020.

Anders: Jeg tabber meg til rett dato. Dette funker når jeg har forstått det.

Skjermleser: Lenke 5. juni 2020 fredag.

Anders: Oi, nå er jeg veldig nysgjerrig. Det jeg sa nå 5. juni 2020 fredag. I cellen som jeg er i, som jeg håper og tror er en tabell.

Erling: Det er korrekt.

Anders: Der står det bare tallet 5. Hun sier 5. juni 2020 fredag. Hun gir meg mer informasjon enn det jeg ser. Enten har de lagt inn aria-label på denne cellen. Eller så henviser hun til kolonneoverskriften som det står fre på, og så har de kanskje en abbreviation-tag på den. Resultatet er, uansett hvordan de har løst det, er jo veldig bra. Hun sier akkurat det jeg vil høre. Bare det at hun sier fredag og årstall. Alt er mega.

Erling: Jeg kan røpe at det er en aria-label som har alt, 5. juni 2020 fredag, så det får den ønskede effekten. Den har òg en kolonneoverskrift hvor det står fre, med en title på span fredag – så her er det gjort veldig mye bra, selv om det nok er aria-label som blir lest opp. Her kunne faktisk effekten vært at det ble smør på flesk. Det ble det ikke. Godt jobbet.

Anders: Og hvis de hadde løst det uten aria-label, så hadde de ikke fått med seg årstallet. Så metoden med aria-label er helt mega, bare at de kunne tatt med punktum etter tallet.

Erling: Nora er lur.

Anders: Jeg trykker enter.

Skjermleser: Utreise 05 jun 2020. Knapp. Nettprogram. Klikk eller enter for å åpne kalender. Select passenger. 1 voksen knapp.

Anders: Hehe, passenger.

Erling: Har de basseng her?

Anders: Selv om det står passasjerer i det visuelle grensesnittet, sier hun passenger.

Erling: Fikk du valgt retur nå?

Anders: Nei, jeg har valg én vei. Skal jeg reise alene, eller vil du være med?

Erling: Jeg er med.

Skjermleser: Passasjerer.

Anders: Nå sier hun passasjerer. Nå fikk vi opp et ganske komplisert grensesnitt. Her er det mange interaktive elementer. Det er lukkeboks, det er fem ikoner, det er pluss- og minus-knapper. Reduser voksen én knapp. Men det er ikke det jeg skal gjøre, jeg skal legge til den voksen, så jeg trykker tabb.

Skjermleser: Øk voksen én knapp.

Anders: Da trykker jeg enter igjen.

Skjermleser: 2.

Anders: 2! Ja, og greit. Kunne sagt 2 voksne. Dette er en slags modal. Nå trykker jeg på escape.

Skjermleser: Escape knapp. Select passenger 2 voksne knapp.

Anders: Ja, det funket ganske bra. Trykker tabb én gang til.

Skjermleser: Søk knapp.

Anders: Klar, ferdig, gå.

Skjermleser: Loading, please wait.

Anders: Hun sa finn flybilletter. Nå har det skjedd noe rart her, for det står loading please wait, selv om siden er lasted.

Skjermleser: Skip to main content.

Anders: Nå vil vi jo skipe.

Erling: Vi vil hoppe til innholdet.

Skjermleser: Hoved. Log in opens modal.

Anders: Det funket ikke.

Erling: En god intensjon, men den havnet ikke der den burde. Jeg må si hva som skjedde. Vi havnet i toppmenyen. Nå er jeg spent på hvor langt jeg må tabbe for å komme til innholdet.

Skjermleser: Change language skråstrek språk norsk opens popup minimert knapp.

Anders: Så her har de gjort mye gjort. Opens popup. De har at logg inn åpner en undermeny. De har nok mange aria-attributter her, og det virker som om de er korrekte. Men, selvfølgelig fortsatt på feil språk.

Skjermleser: Bla til venstre knapp.

Anders: Og det som skjer her er at det første interaktive elementet i søkeresultatene våre er en venstreknapp. Venstreknappen tar oss én dag før, hvis vi er misfornøyde med prisen som vi har fått foreslått. Dette gir ikke mening. Her burde alternativ tekst være «Gå til torsdag 24. juni».

Erling: Du har ikke kontekst.

Anders: Det var et funn i forrige episode òg, vi fikk opp mye informasjon uten kontekst. Dette er i henhold til WCAG. De har en alternativ tekst på pilen, en automatisk test vil godkjenne dette. Grønt lys, bra jobbet Widerøe, men her er det vanskelig å bruke det, fordi en vet ikke hva en blar til venstre i. Ok, dere forstod. Jeg skal ikke bla til venstre, fordi jeg vet ikke hva venstre gjør, så jeg tabber.

Skjermleser: Lenke datert på onsdag 3. jun 2349.

Anders: Her fikk vi opplest en pris, 3. juni, og det er jo litt rart, for det er jo ikke den datoen vi har søkt etter.

Erling: Vi forstår jo.

Anders: Vi forstår.

Skjermleser: Lenke datert på torsdag 4. jun 2349. Lenke datert på fredag 5. jun 2399.

Anders: Det var litt dyrere på fredag, men det var bare en femtilapp, så det aksepterer jeg.

Skjermleser: Lenke datert på lørdag 6. jun.

Anders: Det som skjer nå er at hun leste opp lørdag 6. juni. Visuelt sett er det feltet utgrået, bør ikke være klikkbart, fordi det er ikke ledige billetter. Det burde hun ha sagt.

Skjermleser: Lenke datert på søn 7. juni 2887.

Anders: Oi, det var dyrt. Jeg skal reise på fredag jeg, sammen med deg Erling.

Skjermleser: Bla til høyre. Ingen lokalknapp.

Anders: Perfekt eksempel.

Erling: Hæ? Ingen lokal knapp? Det vi ser nå er at fredag 5. juni er valgt.

Anders: Og det sa ikke hun.

Erling: Så vi vet ikke hvilken kontekst vi er i, for å komme videre. Det naturlige her vil være, dersom vi ikke har det visuelle å støtte oss til, var jo å trykke enter på 5. juni.

Anders: Kjempegodt poeng. Løsningen er å kode dette som et tabpanel. Der har WAI-ARIA gode eksempler med rollene tab, tabpanel og tablist. Det er tre roller som vi kan bruke for å kode dette riktigere.

Erling: Jeg kan røpe at de har kodet det som en ul li.

Anders: Men det er ikke en liste. Den listen sier noe om hva som vises under. Det er mer semantisk å …

Erling: Enig. Ingen lokalknapp.

Anders: Det som er kjekt her, er at for meg som bruker, så gir den knappen ingen mening.

Erling: Det vi ser er ingen og pil ned.

Anders: Visuelt sett er det ikke en knapp, det er en select. Men jeg vet ikke hva den gjør.

Erling: Den må du åpne for å finne ut hva gjør.

Anders: Jeg trykker enter og ingenting skjer. Den funket ikke.

Skjermleser: Alle tider. Lokalknapp.

Erling: Den er kodet som en select option. Den er kodet rett. Så enter funker ikke, prøv pil ned heller.

Anders: Hvis jeg trykker pil ned så funker den. Det er et sorteringsvalg.

Skjermleser: Separator nedtonet. Meny.

Anders: Her fikk vi bevist hvorfor vi bør ha en label på dette.

Skjermleser: Alle tider lokalknapp.

Anders: Alle tiders. Den forstår jeg heller ikke.

Erling: Den er litt lettere å tenke seg frem til. For det står Alle tider. En label hadde gjort det mye mer tilgjengelig.

Skjermleser: Escape knapp.

Anders: Sånn. Jeg vil ikke gjøre noe med tider heller, jeg vil høre hvilke valg jeg har.

Skjermleser: Passenger 2 voksen knapp. Nettprogram. Klikk enter for ny linje.

Erling: Hva skjer nå?

Anders: Glem det jeg gjorde nå, det var jeg som tullet litt. Nå er jeg i alle tider. En lokalknapp.

Skjermleser: Ikonnummer white to sappop pupp informasjon om economy light klass (uforståelig informasjon).

Anders: Nå fikk vi lest opp mye informasjon på engelsk. Det står jo forsåvidt på engelsk, det er navnet på en billettype som heter Economy Light. Her sier de at jeg kan åpne og få en forklaring på det. Det vil jeg ikke. Jeg vil først vite hvilket klokkeslett jeg kan reise på.

Erling: Når vil vi reise? Jeg vil reise tidlig.

Anders: Det vi ser er en tabell, men dette er ikke kodet som en tabell.

Erling: Nei. Jeg kan røpe at det vi ser, Economy Light, er kodet som en button. Inni der er det en span med klassenavn sr-only, altså screenreader only. Det er for å skjule det visuelt, men vi vil lese det opp. Denne har innhold opens a popup contains information of economy light class. Det er litt krøkkete engelsk i tillegg.

Skjermleser: Ikon opens a popup contains information of flex class. Advarsel om tidsavbrudd for bestillingsøkt og tre til. Nettdialogrute.

Anders: Oi!

Skjermleser: Tid igjen. Tid igjen. Tid igjen. Tid igjen. Tid igjen. Tid igjen.

Erling: Det var kult. Dette var interessant. Her gjør de en del riktig.

Anders: De har prøvd.

Erling: Det er kjempebra.

Skjermleser: OK knapp.

Erling: Trykk på OK.

Anders: Jeg har gjort det.

Erling: Jeg ble positivt overrasket at vi fikk beskjed om dette i det hele tatt. Nå fikk vi en popup midt på vinduet, der det stod advarsel om tidsavbrudd eller noe slikt. De ble lest opp. Veldig bra, så begynte de å feile litt.

Anders: De gjorde to ting riktig. De ga oss muligheten til å utsette det. Det er jo faktisk et krav, som folk sjeldent etterlever. Så bra Widerøe. De har lagt inn skjermleser støtte for hele dialogen. Bra. Så hørte vi «Tid igjen. Tid igjen. Tid igjen.» Min teori på hvorfor det skjedde er fordi de har brukt aria-live="assertive" i stedet for aria-live="polite". Hvis de hadde brukt polite, så hadde hun vært høflig nok til å lest ferdig før hun hadde lest igjen. Dette endrer seg oftere enn hun klarer å lese.

Erling: For det som stod var jo sekundene.

Anders: Det er fordi hun begynner på ny hele tiden.

Erling: Den kjøper jeg.

Anders: Det er vanskelig å trigge den. Det var en stressende opplevelse. Løsningen er sannsynligvis superenkel, det er bare å endre verdi på det ene attributtet fra assertive til polite.

Erling: Veldig bra, jeg ble positivt overrasket over mange ting, selv om det var slitsomt.

Anders: Her har de gjort mye riktig, uten å teste det. De har ikke sittet slik vi gjør nå. Eller så har de gjort det, men så ligger det i en backlog, og det kan jo skje. Som ikke-seende bruker nå så vet vi ikke helt hva som skjer. Vi vet at det er ulike typer billetter.

Skjermleser: Lenke bruk av informasjonskapsler på wideroe.no opens i a new window. Hoved.

Erling: Hva gjorde du nå?

Anders: Etter disse billettypene så var neste tabstopp cookiebanneret i bunn.

Erling: Det får ikke jeg.

Anders: Det kan være fordi jeg prøvde å stoppe henne da hun gikk amok.

Skjermleser: Informasjon om rute, knapp.

Anders: Her òg. Helt ute av kontekst. Full flex, så hører vi informasjon om rute. Det jeg ser er at jeg kan åpne informasjon om flyavgangen som går fra Stavanger 18.40. Men, nå har vi hørt veldig mye informasjon og vi har fortsatt ikke fått vite når dette flyet går.

Skjermleser: Economy light class 2649 fem sete r igjen.

Anders: Fem sete r igjen.

Erling: Ville det ikke vært naturlig å klikke på den informasjon om rute, det er jo det du er på jakt etter? Jeg er nysgjerrig på hva som skjer hvis du …

Skjermleser: Close og 20 til. Velg utreise.

Anders: Nå kom det en modal som heter Flydetaljer. De har satt automatisk fokus til lukkeknappen, noe som i dette tilfellet ikke var så naturlig.

Skjermleser: Informasjon om rute.

Anders: Og det går an å tabbe seg ut av modalen.

Erling: Oi.

Skjermleser: Close og 20 til.

Anders: Da er det en gruppe her med 20 lenker? Jeg vet ikke.

Skjermleser: Informasjon om rute Economy Light Class billettklasse 2649.

Anders: Nei, dette er …

Skjermleser: Fem sete r igjen.

Anders: Jeg foreslår at vi skrur av skjermleseren. Jeg gir opp.

Erling: Du er der du?

Anders: Ja, nå vil jeg bare bruke tastatur.

Erling: Hvis vi tar utgangpsunkt i at vi ser.

Anders: Nå har jeg knapp på en pris, og jeg vet ikke tidspunktet. Her blir det for mye prøving og feiling. Hvis jeg trykker enter nå.

Skjermleser: Totalt fare 5298.

Anders: Nå er det fare på ferde her. Nå fikk jeg opplest at totalprisen ble 5298, men jeg vet fortsatt ikke tidspunktet. Og jeg fikk ikke informasjon om noe av det som dukket opp.

Erling: Men kan vi forvente at den informasjonen skal være en del av et interaktivt element?

Anders: Du mener at vi kanskje ikke burde navigert oss med tabtasten og heller brukt sekvensiell opplesning?

Erling: Jeg spør. Når vi får en slik liste … Nå prøve jeg å velge den som går 06.30, jeg trykket enter der. Det toggler kun når jeg trykker enter, så jeg kan ikke sende inn skjema. Jeg tabber meg forbi alle valgene. Jeg kommer til en knapp som heter Neste, som tar meg til bestillingsflyten. Det stopper meg ikke visuelt og tastaturnavigasjon.

Anders: Jeg hører hva du sier. La oss gå helt tilbake, la oss gi dem én sjanse til. Nå skrur jeg på sekvensiell lesing, i stedet for å hoppe mellom interaktive elementer.

Skjermleser: Change language skråstrek språk norsk opens a popup minimert knapp. Overskriftsnivå 1, booking utreise. Avreise fra Stavanger SVG icon plane til Sogndal SOG overskriftsnivå 2 low price flights. Bla til venstre knapp lenke datert på onsdag 3. jun 2349. Lenke datert på torsdag 4. jun 2349. Lenke datert på fredag 5. jun 2399.

Anders: Vi stopper nå og jukser litt.

Skjermleser: (Mye informasjon)

Anders: Jeg blir litt stresset nå, fordi jeg tror det blir vanskelig å følge med på dette som lytter. Jeg har lyst å stoppe her, Erling. Jeg gjør et forsøk til, jeg trykker på control-option-a, starter sekvensiell lesning. Da er jeg etter siste billettype.

Skjermleser: Full Flex knapp. Overskriftsnivå 2 (uforståelig informasjon). Overskriftsnivå 3 (uforståelig informasjon). Avgangstid 18.40 fra SVG. Ankomst tid 21.00 SOG.

Anders: Dette var veldig bra.

Skjermleser: Én flybytte. Informasjon om rute. Select your flight. Tid igjen tid igjen. OK knapp. 056. Neste knapp. Lenke.

Anders: Nå mistet jeg fokusen etter advarselen. Nei, Erling.

Erling: Gir du opp?

Anders: Ja.

Skjermleser: VoiceOver av.

Anders: Her er det veldig mye informasjon som er puttet på de riktige stedene, for skjermlesere. Så det vi ser visuelt, som bare er et tidspunkt fra eller til med et ikon, det leste hun opp veldig bra. Men totalen her blir for forvirrende til at det går an å bruke det.

Erling: Du konkluderer med det altså?

Anders: Ja, uten tvil.

Erling: Jeg stoler på deg.

Anders: Da er vi tilbake på tastatur, uten Nora. Jeg skal velge det tidligste flyet. Det er bra, for det er òg det billigste. Trykker enter på det. Da åpnet jeg det, trykker enter igjen. Da kom jeg gjennom alle de andre prisene. Helt greit. Nå forsvant tastaturfokuset, nå ser jeg ikke hvor jeg er lengre. Det er fordi jeg er bak cookiebanneret tror jeg, ja det er jeg. Når du har valgt en avreise, så kunne det vært en neste-knapp i selve tabellen òg.

Erling: Da hadde vi sluppet å tabbe gjennom alle.

Anders: Jeg går til neste, nå kom jeg til helt nytt vindu. Passasjerdetaljer, skip to main content. Jeg kom meg raskt ned til passasjerdetaljer. Kjønn.

Erling: Her har de selvfølgelig husket valget vårt tidligere, to passasjerer.

Anders: La oss stoppe her, vi skal jo ikke kjøpe dette. Jeg er ikke interessert i å betale 5000 for denne testen. Konklusjonen er at tastatur fungerte mye bedre enn skjermleser. Jeg lukker denne, vi er ferdige med testen.

Erling: Gjør det.

Anders: Har du noe på hjertet?

Erling: Det var en interessant opplevelse.

Anders: Ja, det var mye å ta inn.

Erling: Litt fordi de hadde gjort så mye rett, ble positivt overrasket oftere enn jeg pleier. Gøy.

Anders: Vi har nå vært gjennom visuelt, tastatur og skjermleser. Nå skal vi høre hva du har funnet på kodeevalueringen din Erling.

Kode

Erling: Jeg har kun tatt forsiden. De har lang, som er bra, det har vi snakket om allerede. De har jo engelsk innimellom, som de kanskje burde hatt lang på, dersom det var meningen. Sannsynligvis mener de at det skal være norsk. De bruker landemerker – de har main, footer, main og nav. De har ikke article. De har noen, kunne brukt flere. De har image uten alt. Så har de noen som har alt empty string. Her tipper jeg det er en bug som skulle ha lagt inn tomt alt-attributt.

Anders: En variabel som ikke er deklarert, er det det det heter?

Erling: En fun fact jeg fant var at alle tomme alt-attributter er skjult i koden. De er kommentert ut. De har attributtene, men alle er skjult. Kommentert ut.

Anders: Det forstår jeg ikke. Altså, jeg forstår hva du sier.

Erling: Jeg skal ikke spekulere i hvorfor det er slik. Når jeg søker etter img i koden, og tok en kjapp sjekk, så var alle de med tomme alt-attributt, altså riktig, kommentert ut.

Anders: Hele image-taggen?

Erling: Ja, altså det var del av en kode som var skjult. Det var en javascript-beskjed med en image tagg med tomt alt-attributt. Det var kommentert ut.

Anders: Da bruker de det jo ikke i det hele tatt?

Erling: Nei, de blir ikke brukt, alle er kommentert ut.

Anders: Det håper jeg vi får en fin forklaring på. Litt som vi fikk med Bulder, vi lurte på hvorfor de hadde så mange bilder, og svaret var veldig godt.

Erling: Og så lurer jeg på om den automatiske testen plukker dette opp, og hva resultatet der blir. Headingstrukturen var òg litt interessant. De har en h1, med klasse sr-only. Screenreader only. Men så har de en synlig hovedoverskrift som er Bestill flybilletter, men den er kodet med h2. Hvorfor er ikke den ikke bare kodet med h1? Sikkert en forklaring.

Anders: Jeg har en teori. Det er fordi det vil gi mening på alle andre sider enn forsiden. Så hvis du er inne på en annen side, så vil den bestill billetter som h2 alltid gi mening.

Erling: Jeg kjøper den. Nå gikk jeg inn på en underside. H1 er hjelp og kontakt. h2 er bestill flybilletter. Det er jo en litt rar struktur, ettersom Bestill flybilletter jo ikke hører til under Hjelp og kontakt. Men det er en forklaring. Det virker som om de har tenkt på dette. I artiklene følger h4. I footer har de h2 som øverste, som vi har nevnt kunne vært h1. I artiklene kunne de brukt h1 og h2, isolert i article-landemerket. Jeg tenkte først at de brukte disse taggene visuelt, som mange andre gjør, for å få det til å se riktig ut. Her er det en intensjon bak, så jeg er positivt overrasket over at de har såpass struktur på headingene. Ellers ser det ganske bra ut, semantisk sett. Det er noen klikkbare element som er klikkbare, men er kodet som div-er, med h4 inni. Det er under aktuelt nå, så er det noen foreslåtte flyturer, som er klikkbare, men du når dem ikke med tastatur, fordi det er div. Det er såpass mye bra kode, så kommer det plutselig noen klikkbare div-er.

Anders: Det kan jo tenkes at det er hentet fra et annet system.

Erling: Eller skrevet av en annen utvikler. Skjemaet har form rundt. En liten kuriositet, som kanskje henger sammen med at dette er en Angular-applikasjon, er at det er ingen action eller method til formen. Det var det. Oppsummert, veldig mye bra. Mange gode intensjoner. Lite å ta dem på. Jeg tipper du får opp en del feil på manglende alt og sånn. Da kan vi gå over til resultatet av den automatiske testingen. Hvordan står det til der?

Automatisk test

Anders: Verktøyet Accessibility Insights fant tolv feil, fordelt på fire typer feil. Den første er veldig smal, at de har brukt et aria-attributt som heter aria-activedescendant. Det er ikke et jeg kan så mye om. Her måtte jeg finne ut hvordan det fungerer. Det har sannsynligvis ikke noen store konsekvenser, men de bruker dette tomt og det skal ikke brukes på autocomplete. Når vi bruker aria-activedescendant, så skal det alltid være synlig på skjermen, fikk jeg en forklaring på.

Erling: Dette var jo veldig sært.

Anders: Ja, la oss hoppe videre. De har manglende alt på hovedbildet. Da jeg gjorde testen så jeg et annet bilde enn det vi så i dag. Det bildet hadde et veldig langt filnavn. Det har ganske kjipe konsekvenser, at en potensielt får lest opp det. Ikoner mangler alt-attributt. Så mangler de alt på én av tre nyhetssaker, da jeg sjekket det. Det er en redaktørfeil. Hovedbildet er nok en utviklerfeil. Det er ingen alt-tekst på sosiale medier-ikoner. Ikke så store konsekvenser. Det er slike feil jeg liker å fikse fort, fordi de ikonene går igjen på alle sider, så uansett hvor du kjører en automatisk test, så vil du få mas om det. Det er digg å få det vekk. Det er ikke så viktig for brukerne.

Erling: Så må jeg òg nevne, for jeg inspiserte dem nå, er at de ikonene ligger i p, med class icons. Så har de en span med role="listitem". Det forstår jeg ikke, jeg vet ikke hvilke konsekvenser det har. Videre.

Anders: En feil jeg ikke tror vi har hatt før, er et object som mangler alternativ tekst. Det er en segmentpiksel, en div med helt forferdelig kode. Merkelig span med masse text – «the quick brown fox» blablabla, den teksten fra typografien. Dette er jo en tredjepartspiksel. Kanskje burde dette vært løst med aria-hidden. Kanskje har de ikke kontroll over koden.

Erling: Jeg prøver å finne denne brown fox, men jeg finner den ikke. Jo, der var den.

Anders: Det var mye rot der.

Erling: Nå sporer vi litt av, men i den spanen med «the quick brown fox jumps over the lazy dog», den har da style med font-family, font-size, til og med med utropstegn important.

Anders: Jeg tror ikke det er mange i Widerøe som vet at de skriver om en rask brun rev på forsiden sin.

Erling: Som hopper over en lat hund. Jeg ser ikke hva det er en piksel for.

Anders: Det husker jeg ikke.

Erling: addnxs.com. Vannari.

Anders: Da har vi snakket om ganske mye. Skal vi gå til rangeringen?

Rangering

Erling: La oss gå til rangeringen. Vi må forklare det først. Vi rangerer fra -1, 0 til +1, tre nivå. -1 er dårlig, +1 er at det står bra til. Vi tar en generell vurdering først som ikke brukes. Det er bare for å ta temperaturen før vi går i gang. Til slutt tar vi en ny generell vurdering som gjelder. Nå må jeg tenke litt, prosessere litt, la det synke litt. Jeg er klar. Klar, ferdig, gå. Begge ga 1. Har vi hatt det før på den første?

Anders: Tror ikke det.

Erling: Så til det andre punktet. Vi har 10 punkter vi skal gå gjennom. Den første er skjermleser. Er du klar? Klar ferdig gå. Jeg tenkte du kom til å gi minus. Jeg ga 0, selv om det feilet. De hadde løst mye riktig, og det hadde jeg lyst å gi dem kudos for.

Anders: De har utvilsomt utviklet dette med et formål om at det skal fungere i skjermlesere.

Erling: Det å få hele datoen i kalenderen, for eksempel. Det kjennes litt feil ut å gi minus. Du står på minusen? Bastant, fordi det feilet?

Anders: Ja.

Erling: Jeg skal gi meg jeg.

Anders: Du må det. Den første tabben, da var det jo skip. Altså de kan ha prøvd så hardt de vil, men der får de minus.

Erling: Jeg gir meg. Tastatur, er du klar? 1 på begge. Kult.

Anders: Det er jo litt morsomt, at det som henger så tett sammen.

Erling: Helt enig. Det var tydelig fokusstyling, det var god fokusrekkefølge.

Anders: Det eneste var hopp til innhold som hoppet til toppmenyen, som kan være intensjonen.

Erling: Nei, det var ingenting vi bet oss merke i.

Anders: Disse har testet med tastatur.

Erling: Vi kunne trykke escape for å komme oss ut. Det var mye bra. Over til farge og visuelt. 1 på begge. Det så bra ut. Automatisert test, der må jeg tenke litt. Klar? Du ga 1, jeg ga 0.

Anders: Jeg gir meg på den. Det som er litt dumt er at de bommet på helt elementære greier. Det er 12 feil, det er noe flisespikk. Det vi skal tenke på er at de bruker langt flere avanserte komponenter enn andre ting vi har testet. Når du skal lage et billettsøk, så kan du ikke bare plukke fra verktøykassen og finne billettsøkkomponenter.

Erling: Men jeg mistenker òg at det er en del kode som har gått den automatiske testen hus forbi. For eksempel kalenderen som blir lastet inn.

Anders: Det kan vi ikke spekulere i nå.

Erling: Du ga deg fort. Det var mye som handlet om alt. Det var egentlig det det handlet om, og så hadde vi noen sære. Skal vi ta dem fra 1 til 0?

Anders: Bestem du Erling.

Erling: Jeg gir dem 1. Språk. Da kan vi ikke gi dem feil på grunn av det engelsk-norsk-greiene, det var utelukkende for skjermleser. Klar ferdig gå. Begge ga 1. Det er et godt tegn når vi ikke kommenterer det. Det eneste må være at pakkene heter Economy Light og sånn, men mer enn det kommer jeg ikke på. Navigasjon, den må jeg tenke på.

Anders: Den vil jeg at vi skal hoppe over, for vi har ikke navigert.

Erling: Ehm. Det er jo litt hva du legger i navigasjon. Vi har tenkt på det som hovedmeny og søk. Vi har jo søkt etter billett.

Anders: Det er ikke navigasjon. Vi har ikke åpnet menyen.

Erling: Vi har ikke søkt. Vi hopper over.

Anders: Blank.

Erling: Kodekvalitet. Begge ga 1.

Anders: Det er nok det beste vi har sett. Og igjen, disse har flere utfordringer enn en tradisjonell forside.

Erling: Ingenting er perfekt, men dette var veldig bra. Over til bilde og video. Hoppe over den òg?

Anders: Nei.

Erling: Nå er jeg spent på argumentet.

Anders: Vi kommenterte bildebruken og ikonbruken som en del av den visuelle vurderingen. De har stort bilde på forsiden som er med å sette stemningen.

Erling: Skal vi stemme. Begge ga 1 på den.

Anders: Både fordi de bruker bildet sammen med budskapet, altså 2 for 1, to mennesker, sannsynligvis et kjærestepar, på toppen av en fjelltopp. Det er sommer. De vet at nordmenn skal oppleve Norge, de bruker Lofoten.

Erling: De har lite tekst på bilder. De har en bakgrunn på hovedbildet.

Anders: Det òg taler positivt.

Erling: Så har vi den som heter skjemakvalitet, den kan vi ta i dag.

Anders: Absolutt.

Erling: Jeg må tenke litt. Klar, ferdig, gå. Begge ga 1, men du dro litt på det?

Anders: Fordi de bruker jo felter som ikke ser ut som felter, i siste steget, på kredittkort.

Erling: De har brukt fieldset og legend. De har brukt rett kode.

Anders: De har jo ikke label på disse sorteringsmenyene.

Erling: Det er sant.

Anders: Og valget Ingen ga jo ikke mening.

Erling: Men det kjennes feil å gi dem mindre enn 1 når de gjør så mye rett.

Anders: Ok, generell vurdering.

Erling: 1-er! Nå er jeg spent på resultatet, dette må være én av de beste?

Anders: Jeg kan røpe at det blir ingen ubrukelighetspris til Widerøe.

Erling: Ikke overraskende. Hvem er på bunn av listen nå?

Anders: Og med bunn mener du?

Erling: Det som har gjort det best.

Anders: De som er mest tilgjengelige? De som har gjort det best er Dagbladet med 89 %. Jeg kan røpe at Widerøe òg får 89 %. Kult!

Erling: La oss gå rett til oppsummeringen.

Oppsummering

Erling: Hva er det mest minneverdige? For meg handler det om alt de hadde gjort riktig. Når vi fikk den overlayen, så fikk vi beskjed om det i skjermleseren. At de har brukt fieldset og legend. God fokusmarkering, mye kjentes riktig ut. Ikke perfekt, men veldig mye bra.

Anders: Widerøe kan brukes som et eksempel, som knuser mange myter. Nå dro jeg det litt langt. Når folk lurer på hvem som er flinke på universell utforming, så har jeg ikke så mange kjente norske løsninger i banken, som jeg kan dra frem. Politiet bruker jeg. Men politiet har jo enkel funksjonalitet. Her er det kjekt å bruke Widerøe.

Erling: Spesielt siden SAS har fått så mye pes, så er det kjekt at noen i bransjen har gjort det mye bedre. Nå ble jeg litt nysgjerrig på Norwegian, men det skal vi ikke ta i dag.

Anders: Mitt mest minneverdige øyeblikk, det var dette med tidsbegrensningen – tid igjen tid igjen tid igjen. Det kommer jeg til å huske.

Erling: Vi vil gjerne ha lyttertips. Gi oss tips til hvem vi skal teste og gi oss en kjerneoppgave knyttet til den tjenesten. Send til hei@ubrukelig.fm.

Anders: Jeg kan røpe at neste gang skal vi teste vergemal.no, eller Vergemålsportalen.

Erling: Det er Finn André Breivik som har tips.

Anders: Takk for tips! Takk for i dag, Erling.

Erling: Takk for i dag. Hade.