Uu-podcasten: Ubrukelig

Introduksjon

Erling: God morgen, Anders.

Anders: God morgen Erling.

Erling: Da er vi tilbake fra sommerferie.

Anders: Har du hatt en bra sommer?

Erling: Jeg har hatt en bra sommer, til tross for situasjonen vi er i. Har ikke reist så langt. Det lengste jeg har reist er Randaberg. Det var fordi posten hadde sendt en pakke ut til Bunnpris på Randaberg, i stedet for Bunnprisen med meg. For å sette det i perspektiv, så er Randaberg to mil omtrent.

Anders: Hva var det i pakken?

Erling: Husker ikke. Jo, det var en sekk til dattera mi som nettopp fylte året, som jeg kjøpte for hennes farmor, altså min mor.

Anders: En skolesekk eller en tursekk?

Erling: Ingen av delene. En hverdagssekk. En Fjellräven. Du da?

Anders: Har hatt en veldig bra sommer. Har reist mye mer enn deg. Kjørt på kryss og tvers.

Erling: Du hadde kjørt 100 mil?

Anders: Det var bare på hjemturen. Fra svigers er det 100 mil. Det gikk det.

Erling: Det er en stund siden vi har spilt inn nå. Når var det?

Anders: I slutten av juni.

Erling: Og nå er vi i begynnelsen av august. Dette er episode 13.

Anders: Hvis du sier det så.

Erling: Jeg opprettet nettopp prosjektet i Adobe Audition, så da måtte jeg skrive inn hvilken episode det var. Hvem skal vi sjekke?

Anders: Høyskolen Kristiania. Jeg har lyst å si Høyskolen i Kristiania, men det er ikke det den heter.

Erling: Og det var litt rart at du sa, for jeg har gitt filnavnet Høyskolen i Kristiania. Det er feil. Interessant. En spesiell grunn til at vi har valgt dem?

Anders: Ja, det var et tips fra Roy Halvor. Vi har et knippe med superfans. Han har vært ivrig på tipsene. Tror han hadde 10 tips i én e-post.

Erling: Setter veldig pris på engasjementet.

Anders: Kjempekjekt.

Erling: Ikke bare kommer han med tips, han kommer med innspill og perspektiv. Takk for det. Hva skal vi løse på Høyskolen Kristiania?

Anders: Vi skal søke på Bachelor i Biomedisin i Oslo. Grunnen til at det blir biomedisin er fordi jeg fant ut at det var én av de mest populære studiene. Et studie som kom i fjor, som har blitt veldig populært. Jeg skal ikke si meg veldig trygg på hva biomedisin er.

Erling: Det er derfor du må studere det, for å lære det. For å studere det må du melde deg opp, og det skal vi prøve på i dag. Skal vi hoppe rett i det?

Anders: Vi hopper i det!

**** Visuelt

Anders: Vi skal snakke om det vi ser. Skal vi ta forsiden, eller komme oss inn til biomedisin?

Erling: Jeg har evaluert forsiden.

Anders: Da gjør vi det. Vi kommer inn og ser et bakgrunnsbilde av to smilende ungdommer, som er klar for studiestart.

Erling: Sannsynligvis studenter. Eller stock.

Anders: Tror du? Ser ikke så stock ut.

Erling: De hadde litt hvite tenner. Ofte et signal på at det er stock.

Anders: De har en fargeprofil som består av rød av ulike nyanser, og mørkeblå. Så bruker de hvit tekst på lyserød bakgrunn. Det ser ut som kontrasten er god nok.

Erling: Det slo meg ikke at det var vanskelig å lese.

Anders: Hvis vi legger vondviljen til, så vil vi nok finne grensetilfeller vil jeg tro.

Erling: Nå sjekker jeg på direkten her, og 5,75 er det minste jeg finner.

Anders: Når du legger tekst på bakgrunnsbilder, slik de har gjort, så skal du teste på det lyseste punktet i bildet.

Erling: Jeg leter etter det lyseste punktet, og det ser bra ut. De har, som du nevnte, tekst på bilde. I følge WCAG er det et brudd.

Anders: Nei.

Erling: Er det ikke.

Anders: Det er et brudd å ha tekst i bilde, ikke på bilde.

Erling: Ahh, slik er det ja.

Anders: Dette har du lov til, så lenge kontrasten er god nok.

Erling: Da lærte jeg noe nytt. Det er bare meg som ikke er helt påskrudd.

Anders: De bruker ikoner. Det tenker jeg er bra. Det er alltid litt vanskelig med ikoner. Du finner aldri det perfekte. De har en liten handlepose under min søknad. Er det bra eller dårlig?

Erling: I hovedmenyen har vært punkt et ikon ved siden av seg. I seg selv gir det ikke så mye verdi. Det er teksten som er det essensielle her. Men det gjør noe med det visuelle. Estetisk sett ser dette moderne ut, dette er noen som har holdt seg oppdatert innen det siste nye i webdesign.

Anders: Gjenkjennelseseffekt er viktig for ikoner. Selv om du ikke forstår ikonet, for eksempel lagreknapp som er en diskett …

Erling: Det blir spennende å se om søknad blir et handlenettikon senere.

Anders: Så har de en litt utradisjonell meny. De har fire menyelementer og det femte er «meny». Altså en hamburger. Min umiddelbare tanke er at det er bra. De har trukket frem de viktigste elementene fra hamburgeren. Jeg tipper at de forsvinner jo mindre vinduet blir. Og så har de resterende navigasjon bak en meny. Det jeg ser nå er at hovereffekten på hovedmenyen er et tydelig brudd på kontrast. Det går fra hvit til middels grått, og det blir veldig vanskelig å lese det.

Erling: Men i WCAG så gjelder ikke hover?

Anders: Joda.

Erling: Men det vi diskuterte i den episoden var kontrastforskjellen fra vanlig state til hoverstate. Men det skal være god nok kontrast på hoverstaten i seg selv. Bra. Vi blar litt nedover. Litt lenker. Velkommen til studiestart. Nyheter. Kunnskapsmagasinet Kristiania. Siste nytt. Øy. De har nyheter og siste nytt? Og kunnskapsmagasinet Kristiania.

Anders: Som jeg ikke vet hva er. Det er en slags nyhet det òg.

Erling: Jeg er nysgjerrig på hvor mange som klikker på disse nyhetene, hvor mange går inn på kristiania.no for å lese nyhetssaker.

Anders: De har ikke førsteprioritert. Vi har kritisert andre for å bruke nyheter, for eksempel Vergemålsportalen. Der var nyheter fremtredende. Her kan det godt være at det er på sin plass, det er litt farlig å uttale seg om. Og så har de et kontaktskjema i bunn. Eller helt i bunn har de navigasjon og kontakt, så har de kontaktskjema over det.

Erling: Nå måtte jeg trykke litt på det skjemaet. Se om det fungerer som det burde. Men generelt visuelt så ser det ganske bra ut.

Anders: Jeg må si at den toppen som ligger på en lysrød bakgrunn, den endrer seg til å bli sticky, at den står fast når du går videre ned. Da bruker de sort tekst på hvit bakgrunn.

Erling: Det med å ha sticky meny er litt risky med tanke på tilgjengelighet. Hvis noen har zoomet inn på denne siden, så kan stickyen dekke over alt.

Anders: De har jo tre ting som er sticky. De har oppdatering koronavirus, som ligger helt i toppen. Så har de hovedmeny, og så har de advarsel om informasjonskapsler.

Erling: De har en annen hoverstate på søk, som òg ligger i hovedmenyen, enn de andre.

Anders: Det var rart. Men vi må jo diskutere, før vi slipper det visuelle, logoen.

Erling: Hva er det du ønsker å diskutere med den?

Anders: Det er jo vanskelig å la være. De har skrevet Kristiania veldig kreativt. De har brukt former, rektangler, trekanter og halvsirkler til å skrive Kristiania. De har ikke brukt bokstaver. De har brukt, hva heter den type figurer?

Erling: Vet ikke hva du skal frem til.

Anders: Det kommer snart.

Erling: Geometriske figurer. Men de har jo skrevet Høyskolen Kristiania på siden. Hva vil du si om den, Anders? Er det viktig at du skal kunne lese den?

Anders: Nei. Det er mye, det er travelt.

Erling: Jeg liker den litt. Det virker ikke som om du er begeistret.

Anders: Det er min tidligere arbeidsgiver som har laget den.

Erling: Er det det ja? De bruker jo formene andre steder òg, i bakgrunnen og sånn.

Anders: Ja, men jeg synes ikke den står i stil med resten.

Erling: Noe spesielt du vil peke på?

Anders: Ja, den står i kontrast til for eksempel til de ikonene, som har en helt annen utforming enn disse bokstavfigurene.

Erling: Jeg synes det funker veldig bra. Jeg ser hva du mener med ikoner med runde kanter.

Anders: Det er nok minimalisten i meg som synes det er litt voldsomt. Det er veldig usymmetrisk.

Erling: Ja, men jeg liker den. Det er tydelig gjennkjennelig, det er unikt. Anvendelige siden de kan dra ut noen av de geometriske formene, å kjenne igjen logoen i andre flater i andre størrelser. Men det er ikke det vi skal snakke om i dag. Det er ikke noe du kognitivt må prosessere.

Anders: Men visuelt fra et uu-perspektiv, organisering, så vil jeg si at det er jo bra. Vi snakket ikke så mye om bildebruken, det må vi kanskje gjøre. De bruker veldig mye bilder. Store, fine bilder. Mye mennesker som smiler. De har òg de klassiske bildene av to som peker på en skjerm. De har nok en blanding av reelle og litt stockbilder.

Erling: Som selvfølgelig ikke gjør noe. Tilgjengeligsmessig så skader de ikke. De står ikke i veien.

Anders: De gjør noe som jeg savner andre steder. De er veldig tydelige på hva som er primær- og sekundærknapper. De bruker primærknappen kun én gang. Det er veldig tydelig hva de har prioritert som sin handlingsdriver her. Det er «Se vårt studietilbud». La oss gå videre. Dette er bra.

Erling: Skal vi gå gjennom tastatur? Skru på skjermleser.

Tastatur og skjermleser

Anders: Vi skrur på skjermleser. La oss høre hva hun har å melde.

Skjermleser: Voiceover på Safari. Høyskolen Kristiania vindu. Høyskolen Kristiania nettinnhold har tastaturfokus.

Anders: Nå skal vi først navigere oss frem til det studiet som vi skal søke på, bachelor i biomedisin. Vanligvis begynner vi å trykke på tab. Skal vi gjøre det nå, eller skal vi ta en annen variant?

Erling: Hva er den andre varianten?

Anders: Vi kunne ha brukt landemerker for å se om de har en navigasjon.

Erling: Vi tar kjapt med vanlig tab, og så hopper vi til landemerker etterpå.

Anders: Det er en slags hellig tast for tastaturbrukere. Da begynner vi med det.

Skjermleser: Studier i Oslo og Bergen. Ikke markert avkrysningsrute. Ønsker du nyhets brev? Ønsker du nyhets brev? Gruppe.

Anders: Det som skjedde nå var at vi hoppet rett til en avkrysningsrute, og det var min feil. Jeg hadde jo klikket rundt i det skjemaet som lå lengre nede. Da flytter jeg fokuset.

Skjermleser: Nettstudie. Ikke markert avkrysningsrute. Ønsker du nyhets brev? Voiceover av.

Anders: Jeg går tilbake. Beklager denne tabben.

Erling: Det vi kan kommentere der var at de hadde fieldset og legend.

Anders: Ja, det la jeg ikke merke til.

Erling: «Gruppe, ønsker du nyhetsbrev», sa hun.

Anders: Ja, megabra. Vel observert.

Skjermleser: Voiceover på Safari. Høyskolen Kristiania. Vindu. Ny fane. Knapp har tastaturfokus. Opprett ny fane. Forlater Høyskolen Kristiania. Går inn i Høyskolen Kristiania. Nettinnhold.

Erling: Får du det til, eller?

Anders: Jada.

Skjermleser: Oppdatering koronavirus. Høstopptaket går som normalt. Knapp banner.

Anders: Ja, det første vi kommer til er en knapp som ligger i et banner som heter Oppdatering koronavirus. Høstopptaket går som normalt. Det bryr jeg meg ikke om. Vi trykker ikke på den knappen, vi går videre.

Skjermleser: Lenke. Go to main content.

Anders: Yes.

Erling: Hva hørte vi der, Anders?

Anders: Første blemme. Vi fikk en lenke, «Go to main content». Der har de laget en fin hopplenke, men de har glemt språket. Det har vi sett flere ganger. Det skal vi ikke gjøre nå. Vi skal navigere oss frem.

Skjermleser: Lenke. Høyskolen Kristinia logo.

Anders: Fin alt-tekst på denne. Kunne vært «Forsiden Høyskolen Kristinia».

Skjermleser: Lenke. Min side. Navigering.

Anders: Her hører vi at hun sier «navigering». Det betyr at hun har brukt sannsynligvis nav i den menyen.

Skjermleser: Lenke. For studenter.

Anders: Det er ikke for oss enda, vi er ikke blitt studenter.

Skjermleser: Søk. Lokalknapp. Minimert knapp.

Anders: Jeg vil søke, så det er en knapp. Den er minimert.

Erling: Jeg kan si at det er standard fokusmarkering. Det var en fokusmarkering før «Go to main content», som var skjult, sannsynligvis en knapp inni den koronavirusgreiene, bare som en liten kommentar. Hva søker du på?

Anders: Jeg trykket på knappen, og det skjedde noe visuelt, men ikke i skjermleseren. Så det vil si at det skjedde to feil. Fokuset ble ikke flyttet til søkefeltet. Hvis jeg begynner å skrive nå så funker ikke det, fordi jeg er fortsatt på knappen. Og jeg fikk ikke beskjed om at lokalmenyen nå var åpen. Det siste vi hørte var at den var minimert, men nå er den ikke det lengre. Det vet ikke vi.

Erling: Det la jeg merke til i kodegjennomgangen, at de har aria-haspopup="true" på den knappen, og aria-expanded="true" og "false", altså den er false når den er lukket og true når den er åpen. Burde ikke det ha gjort noe? Hvorfor hjalp ikke det i denne situasjonen?

Anders: Fordi hvis jeg nå hadde gått tilbake til forrige elementet og så til dette elementet når det stod åpent, så ville jeg blitt informert om det.

Erling: Ja, om den var åpen eller lukket?

Anders: Ja. Ikke at det var en god forklaring.

Erling: Det er en intensjon her. Men hvordan skulle de ha løst det? Hadde det holdt å gitt fokuset?

Anders: Ja, å flytte fokuset.

Erling: Da hadde den lest opp hvor den står. Da måtte den ha en label?

Anders: Ikke nødvendigvis. Den ville brukt det tilgjengelige navnet til fokusfeltet, uavhengig om det var en label eller ei.

Skjermleser: Lenke søk.

Anders: Det som hadde skjedd var at vi hadde hørt «søk redigerbar tekst».

Erling: Det som er placeholder.

Anders: Eller en aria-label.

Erling: Jeg ser her at det er placeholder.

Anders: Hvis de kun bruker placeholder, så funker det. Det fungerer i Voiceover, men det er ikke godt nok som et tilgjengelig navn.

Erling: De har label òg.

Anders: Da er det good. Hvis de hadde flyttet fokuset til feltet.

Erling: Automatisk.

Anders: Her er et eksempel på at de har gjort det etter boken, men ikke helt. De har ikke testet det. Nå tok jeg shift tab, fordi feltet dukket opp før knappen. Det ser vi visuelt.

Erling: For en som ikke ser noe, så ville det vært vanskelig.

Anders: Stemmer. Poenget er at det ikke feiler på tastatur, det feiler kun på skjermleser. Vi skiller jo på de to kategoriene i rangeringen vår. Da skriver jeg «biomedisin».

Skjermleser: b i o m e d i s i n biomedisin.

Erling: Inputtfeltet har heller ikke fokusmarkering, bare så det er sagt.

Anders: Nå hørte vi et lite pling, en indikasjon på at vi har kommet til en ny plass.

Erling: En sidelasting. Det er ikke alle som har. Noen sider er ikke bygget opp slik.

Skjermleser: Oppdatering koronavirus. Høstopptaket går som normalt. Knapp banner.

Anders: Hadde jo vært fint å kunne lukke den banneren.

Erling: Hva hvis du her navigerer etter landemerker. Nå har vi navigert oss litt i menyen. Nå vil jeg gå til main.

Anders: Det synes jeg vil skal gjøre. Nå vet vi at det er en hopp til main her, så jeg har jo egentlig lyst å teste om den fungerer.

Erling: Gjør det kjapt.

Skjermleser: Lenke. Go to main content. Biomedisin. Innhold markert. Søk. Redigerbar tekst. Artikkel.

Anders: Det som skjedde nå var veldig interessant. Jeg hoppet først til hovedinnhold, main content. Så tabbet jeg, og nå er fokuset mitt bak stickymenyen. Visuelt sett kan jeg ikke bruke det. Uten skjermleser nå, så hadde jeg ikke visst hvor jeg er. Men her funker skjermleser.

Erling: Og her har vi en potensiell fallgruve med en stickymeny. Jeg anbefaler generelt å ikke bruke det. Det er noen fallgruver vi vet om, og så er det mye som kan oppstå, som vi ikke kan forutse.

Anders: Jeg er enig, og jeg ser ikke helt de store fordelene, brukervennlighetsmessig.

Erling: Jeg ser de små, ikke de store.

Anders: Folk kan rulle.

Erling: Det er ikke så vanskelig å komme seg til toppen.

Anders: Aldri. Det er svært sjelden at du trenger en «gå til toppen»-lenke i bunn.

Erling: Bruken av sånne lenker er nesten null.

Anders: Jeg har aldri lest noe statistikk om det.

Erling: Ikke jeg heller.

Anders: Nå er vi på en lenke, som jeg ikke vet selv hvilken er.

Erling: Er det ikke et søkefelt?

Skjermleser: Biomedisin. Redigerbar tekst.

Anders: Jo. Jeg er i et søkefelt.

Erling: Et inputfelt.

Anders: De har òg gjentatt søkefeltet sitt lenger ned på siden.

Skjermleser: Lenke biomedisin.

Anders: Det er en lenke som heter biomedisin.

Erling: Det høres jo relevant ut.

Anders: Da gjør vi det som du sa, vi prøver rotoren. Det jeg vil si her er at visuelt så har de en filtermeny i høyre kolonne. Jeg mener at det er et riktig designvalg. Det er sekundærinformasjon. Vi har sett eksempler på filter som ligger før søkeresultatene, som gjør at du må jobbe deg gjennom filtrene. Hvis du finner for mange treff, så kan du bruke filtrene. Hvis søkefunksjonen er bra, så er jo et filter noe du trenger å bruke …

Erling: Nå har jeg en idé som jeg vil sjekke med deg. I slike filtermenyer er det mange valg, og du vil helst ikke hoppe gjennom dem med tastatur, men du vil se det visuelt. Kunne det vært en idé å vise det visuelt, men du måtte aktivere det for å navigere det med tastatur? Det vil være behjelpelig for skjermlesere, at du aktiverer filter for å åpne det. Som med en hamburgermeny. Da vil du ikke kunne tabbe det hvis du visuelt ser det. Skjønner du hva jeg mener?

Anders: Det tror jeg vil bli bra.

Erling: Det blir samme mønster som i en hamburger, bare at den er synlig hele tiden.

Anders: Jeg har ikke sett det før.

Erling: Jeg tror egentlig det er en dårlig idé, fordi det er ikke en konvensjon.

Anders: Så lenge det ligger i riktig rekkefølge i DOM-en (koden) og du har et landemerke. Du har en section som har en label som heter filter, slik at du raskt kan hoppe til dersom du får for mange søketreff, så har du løst det godt for en skjermleser.

Erling: Det er nok en mye bedre løsning.

Anders: Jeg åpner rotoren, da kommer jeg rett inn i landemerker. Jeg trykker pil ned.

Skjermleser: Banner.

Anders: Banner. Der skal vi ikke.

Skjermleser: Navigering.

Anders: Det skal vi ikke til.

Skjermleser: Hoved.

Anders: Det skal vi til.

Skjermleser: Overskriftsnivå 1 søk.

Anders: Det er fint.

Erling: Søkeresultat hadde vært bedre?

Anders: Ja. Visuelt sett har de hovedoverskrift, så har de søkefelt, så har de en underoverskrift som heter viser 12 av 29. Jeg ville nok hatt Søkeresultat viser 12 av 29 i hovedoverskriften.

Erling: Enda finere.

Anders: Slått de to sammen. Nå er det noe rart. Jeg kommer meg ikke videre fra søkefeltet.

Erling: Er det din kompetanse?

Anders: Ja, jeg mistenker at jeg gjør noe feil. Men jeg forstå ikke hva det kan være. Har ikke lyst å arrestere dem. Nå tok vi en omvei, for å se hvordan det fungerte.

Erling: Hvis du bare hopper deg ned på biomedisin.

Anders: På biomedisin, den lenken som vi fikk opplest. Visuelt sett så ser jeg at det er riktig plass, men det vet jeg ikke med skjermleseren.

Erling: Hvordan ser du det?

Anders: De har metainformasjon. Dersom jeg hadde skrudd på sekvensiell lesning for å vite mer, men de har metainformasjon som sier at dette er et studie og det heter biomedisin.

Erling: Er det noe de kunne ha lagt inn i en aria-label?

Anders: Ja, det er det. Veldig godt forslag. Så kan vi si at de har en ingress, som er litt rar, som er automatisk generert. Den heter «venteliste moderne medisin baserer seg på vitenskapelige tilnær minger». Rar ordbryting.

Erling: Nå er jeg spent på innholdet på den siden, hvor har de hentet teksten fra.

Anders: Vi går til den siden som heter biomedisin. Nå skjedde det noe rart igjen. Vi hørte at siden lastet. For meg så ser fokuset ut til å være flyttet til hovedoverskriften.

Erling: Åhh?

Anders: Det kan være at voiceoveren har fått en liten hikke. Ellers kan det være intensjonen.

Erling: Nå skulle jeg faktisk bruke tastaturet på å komme meg ned litt her. Hamburgermenyen, den må du tabbe deg gjennom for å komme deg ned.

Anders: Kjempeblemme. Det må fikses.

Skjermleser: Voiceover av.

Erling: Skrudde du henne av?

Anders: Ja, fordi jeg får ikke dette til. Nå ser jeg det samme som deg. Det skjer ingenting visuelt, så hvis du ikke har skjermleser så har du ikke peiling. Da er det per definisjon ødelagt. Det er en gigantisk meny de har der.

Skjermleser: Voiceover på Safari. Biomedisin bachelor vertikal linje Høyskolen Kristiania. Vindu lenke.

Anders: Da jukser vi litt.

Skjermleser: Karrieresenter. Søk i Oslo. Knapp artikkel.

Anders: Nå kom jeg til første interaktive element på biomedisinsiden, søk i Oslo. Da sier vi ja til det, fordi oppgaven var jo å søke.

Erling: Jeg vil bare kommentere. Den teksten vi så i søkeresultatene, det utdraget, det begynte med venteliste, så var det «moderne medisin baserer seg på». Det som er snodig her er at de har en rød boks, hvor overskriften er «Venteliste». Det er noe tekst i den boksen som ikke er «moderne medisin», men «moderne medisin» kommer i første avsnitt i teksten under. Her har de plukket ut en rar kombinasjon av tekst til utdraget i søketreffene.

Anders: Jeg ser det.

Erling: Det var litt snodig. Søk i Oslo, du.

Anders: Her har jeg lyst å kommentere det visuelle. Dette er fint og informativt.

Erling: Hva da? Generelt?

Anders: Ja. De har en overskrift, de har en liten tekst som forklarer hva studiet er, så har de en brødsmulesti under et stort bilde. Bildet er òg informativt.

Erling: Det er tydelig fokus på toppoppgaven. Det er tydelig hvor du er, du får en liten intro, så er toppoppgaven å søke. Her har de gjort en god jobb. Men søk du, jeg trykket på den med et uhell. Den har ikke fokusmarkering. Det er tatt helt vekk. Oi, nå kommer det noen andre på jobb her. Det må være Roland. Det er tysk punktlighet.

Anders: God morgen Roland.

Erling: Nå må du søke i Oslo, Anders.

Anders: Det er mye uu-mat på denne siden. De har mye metadata om studiet. De har en trekkspill i bunn. De har dette skjemaet. Det er mye snacks. Vi søker i Oslo, vi. Det som skjedde …

Erling: For nå gjorde du noe.

Anders: Ja. I skjermleseren skjedde det ingenting. Men visuelt sett så kom det opp en boks, det som kalles en toast eller snackbar, som varte veldig kort. Jeg fikk ikke med meg hva det stod, fordi jeg var litt mer opptatt av å se på deg. Jeg vet egentlig ikke hva som har skjedd.

Erling: I skjermleseren skjedde det ingenting.

Anders: Løsningen for skjermleseren er å bruke role="alert" på toastmeldingen. Jeg så faktisk denne uken en diskusjon om en bør bruke toast. Det er sterke meninger begge veier.

Erling: Eventuelt hva du skal bruke de til.

Anders: Her har de sagt at «Status koronavirus. Høstopptaket går som normalt» står statisk, men det som skjedde nå med min knapp, det forsvant.

Erling: Etter noen sekunder.

Anders: Visuelt sett så ser jeg at det har dukket opp en runding …

Erling: Det som stod i toasten var «Biomedisin er lagt til i din søknad», eller noe slikt. Her har de gått for en slags netthandeltilnærming at du legger studiet i handlekurven. Det forklarer ikonbruken. Jeg forstå ikke hvorfor.

Anders: Jeg liker det. Sluker det rått.

Erling: Liker du det? Jeg liker det ikke i det hele tatt, jeg. Sett vett fra dette med role="alert". Jeg har ikke gått på skole, så jeg har ikke vært gjennom denne prosessen. Men jeg ville tenkt at «søk i Oslo» skulle sendt meg til en ny side som tar meg gjennom den prosessen du må gjennom for å søke i Oslo. Skal jeg liksom legge til fire bachelor her? Skal jeg legge til 14 forskjellige retninger? Jeg skal ha én. Jeg skal studere biomedisin? Skal jeg studere masse annet her? Svaret kan være ja, altså. Jeg vet ikke om du legger til mange forskjellige studier.

Anders: Det er hvis du ikke kommer inn på det du vil. Her må vi jukse litt …

Erling: Nå har vi feilet skjermleser. Nå er det full stopp. Nå har vi mistet kontekst og tilstand.

Anders: Ja, vi kan skru av og si at det var feil.

Skjermleser: Voiceover av.

Anders: Nå får vi bruke øynene våre. Da ser vi at det er en liten runding på min søknad. Da får jeg tabbe meg opp der. Det er jo et mareritt å komme seg opp, fordi mellom den knappen vi har trykket på og den knappen som heter «Min søknad», så er det en hamburgermeny med 100 elementer, som …

Erling: Det er i underkant av 40 element faktisk. Det er mange. Det er i 100-kategorien.

Anders: Dette orker vi ikke. Nå bruker jeg musen. Jeg går til «Min søknad». Vi sier at tastatur feilet. Nå har jeg jo litt lyst å skru på skjermleseren igjen, men det skal vi ikke gjøre. Nå har de plutselig litt engelsk tekst her som er «for international applicants».

Erling: Jeg kan sjekke den. Jeg må grave meg ned i divene her. Der har de ikke noe lang, nei.

Anders: Den vil bli lest opp ned norsk aksent.

Erling: Ganske uforståelig for de fleste.

Anders: Vi har fire steg i dette skjemaet vårt. Det er tydelig.

Erling: «Søknandsskjema, Personopplysninger, Oppsummering, Bekreftelse»

Anders: De har en tydelig stegindikator. Vi kan legge til tre studier.

Erling: De har ikke god nok kontrast, de inaktive stegene. Det er en typisk felle å gå i. Du vil at de inaktive element skal se inaktive ut, men samtidig ha god nok kontrast, som gjør at de ikke ser like inaktive ut.

Anders: Jeg trykker neste. De har òg et valg «Fjern» som har lav kontrast.

Erling: Det er ganske tydelig.

Anders: Ja. På én måte er det ganske kjedelig. Det er lite farger.

Erling: Det er bra. Her skal du fokusere på en veldig spisset oppgave.

Anders: Og det gjør de.

Erling: Videre til personopplysninger. Der er det et skjema. Her ser jeg et mønster som jeg òg så på forsiden. Hvis du klikker på labelen til et felt, så klikker du på labelen til et annet felt rett etterpå, så får du opp en valideringsbeskjed. «Dette feltet er påkrevd» med rød border rundt. En kontinuerlig validering av skjema. Og der lurer jeg på hva din holdning til det er.

Anders: Her er det alt for påtrengende.

Erling: Hvorfor?

Anders: Jeg har ikke gjort en feil enda. Ro deg ned. Jeg har feilet før jeg har prøvd.

Erling: Jeg sjekker koden fordi jeg mistenker at de ikke har noe aria-live. Dette vil ikke blitt lest opp i en skjermleser.

Anders: I første feltet, telefonnummer, står det 47. Der steiler jeg litt. Vi bruker aldri 47, vi bruker enten +47 eller 0047, det er det som er prefikskodene. Her har jeg lyst å skrive + foran. Det som skjer da er at de to nullene kommer etterpå. Jeg får lov å skrive 4700, men ikke 0047.

Erling: Det var rart. Pluss da? Nei, du får ikke lov å skrive +47. Den tar ikke i mot det. I tillegg er det autocomplete="no".

Anders: Den kommer vi tilbake til. Det jeg ser nå er tre feilmeldinger.

Erling: Jeg vil ikke slippe telefonnummer helt. De har autocomplete="tel" på hovedfeltet. De har to felt. Det første er 47, landskoden. Det som sannsynligvis hadde skjedd her, ved autoutfylling … det hadde faktisk fungert. Jeg trekker meg tilbake.

Anders: De har jo autocomplete="no". Intensjonen er god, men det er ingenting som heter autocomplete="no". Det heter autocomplete="off".

Erling: Ja! Hehe.

Anders: Det er ikke noe no og yes her.

Erling: Det kan jo være en bra ting, fordi da er det ikke sikkert at det fungerer. Eller, det burde ikke vært autocomplete i utgangspunktet? Da er jeg med.

Anders: Her vet jeg ikke. Det som hadde skjedd her, hvis jeg hadde hatt et utenlandsk nummer, så hadde autcomplete fyllt ut det svenske nummeret med prefiks i hovedfeltet, så da hadde det stått 47+46 blabla.

Erling: Det hadde kanskje feilet. Ikke gyldig telefonnummer hvis jeg kun trykker inn tre siffer. Nå er jeg spent på om den tar hensyn til forskjellige land osv. Har du et svensk nummer?

Anders: Nei. Nå brukte jeg autocomplete, og den fyllte ut riktig telefonnummer, etternavn og navn. Dette er kult, men feilmeldingene står fortsatt.

Erling: Åhh.

Anders: Jeg har fyllt ut ut Anders, men det står at feltet er påkrevd. Der forsvant det.

Erling: Hvorfor? Hva gjorde du?

Anders: Valideringen skjer når du mister fokus.

Erling: På hele skjemaet?

Anders: Nei. Jeg stod i telefonfeltet og så brukte autocomplete funksjonen og fyllte ut de underliggende feltene som var feilvaliderte, men de ble ikke validert. Valideringen skjer når du mister fokus.

Erling: Det er òg en felle å gå i, ved den type validering.

Anders: Her skal jeg skrive inn e-post. Jeg begynner å skrive a n d, og jeg får feilmelding.

Erling: Åhh.

Anders: Du må la meg få muligheten her!

Erling: Nå prøvde jeg å gjøre det samme, på et felt som allerede hadde feilet. Jeg prøvde på et felt som ikke hadde feilet, og da dukket ikke den opp.

Anders: Så bra. Så har de gjenta e-post. Ta det vekk, det har ingen hensikt.

Erling: Det lærte vi på begynnelsen av 2000-tallet. Det er lenge siden folk innså at det var feil. Men de har ikke samme validering på gjenta epost.

Anders: De har ikke?

Erling: Ikke samme hissige validering på gjenta e-post, som om det ikke er påkrevd.

Anders: Skal vi se. Jeg skriver inn fødselsnummer. Åhh. «Vi tar godt vare på kontaktinformasjonen din. Ja, jeg samtykker til at Høyskolen Kristiania kan oppbevare den informasjonen jeg har oppgitt» bla bla bla. Jeg trykker på teksten «Ja, jeg samtykker» og får feilmelding!

Erling: Feilmelding når du klikker på teksten?

Anders: Ja!

Erling: Jeg får valideringsfeilmelding om at det er påkrevd.

Anders: Ja!

Erling: Det får jeg når jeg skrur den av, det får jeg når jeg skrur den på. Du trykket på label, som sannsynligvis er koblet til inputfeltet, nei til sjekkboksen.

Anders: Ja! Jeg gjør det jeg skal gjør. Jeg skal kunne trykke på label. Er det en label? De har sikkert brukt legend som label, mikset det.

Erling: Det ser greit ut. Det er en label. Der tok du feil.

Anders: Hmm. De bruker en firkant i sjekkboksen sin, som markert.

Erling: Det er en input type="checkbox" som de har stylet om. Da har de brukt en teknikk der de egentlig skjuler selve inputen, og så belager de seg på inputen, så har de en before på labelen som endrer seg ved checked og ikke checked.

Anders: Jeg trykker på neste. Du har valgt biomedisin. Personopplysninger.

Erling: Nå er jeg litt utav det, så jeg må komme og se hos deg.

Anders: Nå lurer jeg på om jeg skal sende inn denne.

Erling: Skal du søke?

Anders: Ja, jeg søker jeg. Det jeg lurer på, jeg har jo ikke skrevet inn noe mer enn primærinformasjon. De har sannsynligvis alle karakterer i et register?

Erling: Du skrev inn personnummeret ditt?

Anders: Ja. Det står fortsatt bare 47 i telefonnummeret.

Erling: Ser du har cookiepopupen enda.

Anders: Den har jeg ikke tatt bort. Jeg bruker jo skjermleser, jeg har ikke fått beskjed om den. Jeg vet ikke at den finnes. Takk for din søknad! Innen et døgn? Jeg har søkt på biomedisin i Oslo.

Erling: Nå blir Linn fornøyd.

Anders: Ja, nå er det noen hjemme som blir overrasket.

Erling: Da er vi der. Skal vi gå videre? Da kan vi ta kode.

Evaluering av kode

Erling: Er du spent? Eller du har jo kjørt automatisk testing, så du vet jo litt. Det første som slo meg da jeg så på koden var at her er det veldig mye bra. Det fikk jeg bekreftet, fordi de har lang som endrer seg når jeg endrer språk. Så har vi snakket om det søket med aria-expanded som endrer seg, som ikke funket. Den koronainformasjonslinjen har ikke noe aria. Når du klikker på den så popper det ut en knapp med les mer. Jeg vet ikke hvorfor det må poppe ut noe her. Det kunne vært at du kom til den siden når du klikker på det banneret. Den har kun CSS og hidden visibility. På den så jeg at de har brukt en CSS-egenskap som heter will-change. Kjenner du den?

Anders: Nei, aldri sett.

Erling: Den har veldig bred støtte. Mangler kun i gamle IE. Det den gjør er å fortelle nettleseren hvilke element som kommer til å forandre seg, slik at de kan optimalisere for animasjon. Den har jeg aldri sett. Det lærte jeg i dag.

Anders: Kult.

Erling: De har SVG som logo, uten title, med aria-label på a-en. Det er bra. Det hørte vi òg i skjermleseren. Som vi kommenterte, de har ikke med intensjonen, kun hva det er – Høyskolen Kristiania logo. Headingstrukturen er nesten bra. Det er ett eksempel hvor den ikke er helt på plass. Det er den ene nyheter-greien, hvor overskriften Nyheter er h2, men overskriften i selve nyheten er òg h2. Det skulle helst vært h3. Menyelementene bruker ikoner, som vi òg har snakket om. Der har de brukt en SVG-sprite. En gangske interessant teknikk.

Anders: Ja!

Erling: Men her er det ikke title. Men jeg er usikker på om du kan bruke flere titler på én SVG-fil. Jeg mistenker at det ikke går.

Anders: Her vil du ikke ha title, for det står jo sammen med tekst.

Erling: Du har beskrivelsen i teksten. Men de har den samme spriten i footeren, hvor det kun er sosiale medier-ikoner. Nå kan jeg ta de på det. Det har de løst med en skjult span. Løst korrekt.

Anders: Noen har tenkt.

Erling: De har «Go to main content», skip-lenke, som er på engelsk. Én ting de har gjort, som jeg ikke har sett tidligere er at de har brukt picture og srcset. Det har ikke nødvendigvis noe med tilgjengelighet å gjøre, det er en veldig fin teknikk til å levere riktig størrelse på bilder. Det bør flere bruke. I cookiepopupen er den ene knappen kodet som en button og den andre som en a. Visuelt ser de like ut. Det er greit, fordi den som er kodet som en knapp er «Jeg godtar». Den kunne hatt en mer beskrivende tekst, «Jeg godtar cookiebetingelsene». A-en «Les mer» skjønner vi er en lenke.

Anders: Da skal det være en a og en button.

Erling: Der burde de skrevet «Les mer om cookie». Det var det. Jeg fikk en god følelse av koden. Landemerkene er på plass, det glemte jeg å si. header, main, footer, nav og så videre. Bra. Hva sier den automatiske testen?

Anders: Den sier òg at det er bra. Det er kun to feil. Det er dette med autocomplete="no", som vi jo har sett. Og så har de ingen label på telefon i kontaktskjemaet i bunn.

Erling: Feilen på autocomplete er at det skulle være off i stedet for no.

Anders: Eller er det false? Nei, det er off. De har en visuell label på telefonnummeret, men den er knyttet til prefikset. Så egentlig er det to inputfelter som ligger ved siden av hverandre.

Erling: Landskode.

Anders: Ja, men det hadde det ikke vært plass til. Hvorfor er det viktig å ha landskode i et eget felt? Går det på datakvalitet?

Erling: Som er et ansvar vi ikke bør legge på brukeren, det kan vi løse programatisk.

Anders: Jeg tenker òg det. I elevdatabasen, når de får inn en søknad, så har noen skrevet med prefiks, og noen uten. De som har skrevet uten, da legger vi det til automatisk, så sant det er et norsk nummer.

Erling: Jeg mistenker det er ganske vanskelig, hvis du skriver inn et svensk telefonnummer – jeg vet ikke hvor mange tall det er i et svensk telefonnummer …

Anders: Men da begynner du med +46.

Erling: Men hvis du ikke skriver inn det.

Anders: Den kjøper jeg ikke.

Erling: … så ligner det på et norsk telefonnummer. Da har du ingen måte å programmatisk skille dem. Så er spørsmålet, hvis du ringer og det er feil, da klarer du kanskje å lese fra resten av dataen at dette er en svenske. I de ytterst få tilfellene der det er problematisk.

Anders: Det var det. Det ene er jo lett å fikse. Det var automatisk testing av siden biomedisin.

Erling: Du tok den, ja. Jeg tok forsiden. Skal vi rangere?

Anders: Allerede?

Rangering

Erling: Måten dette fungerer er at vi har 10 kategorier, hvor vi rangerer fra -1, 0 til +1. Den første er generell vurdering, som ikke er med. Til slutt tar vi generell vurdering som blir tatt med. Vi tar først generell vurdering. Den er vanskelig. Klar, ferdig, gå. Begge ga 0. Det betyr helt greit. Skjermleser. Minus, siden vi feilet. Det betyr ikke at den er helt søppel, det var mye som fungerte. De har jo tomme alt-tagger som vi ikke har nevnt.

Anders: De har tilpasset for skjermleser, men det funker ikke.

Erling: De har gjort noen feil som gjør at det ikke funker. Så har vi tastatur. Litt usikker. Jeg er klar. Begge ga minus.

Anders: Bare den feilen med menyen er nok.

Erling: Noen element hadde ikke fokus. Det var et skjult element før go to main content. Farge og visuelt. Er du klar? Du ga 0, jeg ga 1. Hvorfor ga du ikke 1?

Anders: Det var flere eksempler på dårlig kontrast. Både hovereffekten på hovedmenyen. Du hadde teksten i knappen som heter Fjern. Progressjonsindikatoren.

Erling: Det er sant, det er nok. Alt det andre var bra. Du vil trekke dem for de tre.

Anders: Det var tanken min. Du ga 1, jeg ga 0. Jeg får denne, så ser vi om det jevner seg ut. Vi har fått kjeft for å være for snille.

Erling: Automatisert test. 1 på begge to. Enkelt språk. Når vi ikke har snakket om språket så er det nok bra. Begge ga 1. Vi skøytet til og med av teksten. Navigasjon. Hva skal vi straffe dem for? Klar?

Anders: Ja.

Erling: Du ga 1, jeg ga 0. Jeg gir den til deg. Menyen var tydelig. De har prioritert den.

Anders: Vi har ikke sjekket megamenyen, de 40 elementene.

Erling: De kunne delt det opp i ett til nivå. Noen av dem kunne vært i footeren. De har søk. De har flere innganger. Vi gir 1. Neste er kodekvalitet. Begge ga 1. Ikke perfekt, men veldig mye bra. Bilde og video. Klar? Klar ferdig gå. Begge ga 1. Du ga med litt bismak.

Anders: Her mener jeg at videoformatet hadde vært på sin plass. Å ha en foreleser som fortalte om studiet biomedisin, med innklipp av noen studenter som har gått på det, eller går på det – video er et lite brukt format. Det var feil. Mye brukt format.

Erling: Et format som kunne vært brukt mer.

Anders: Ja, i informasjonsformidling.

Erling: Som kan øke tilgjengeligheten i informasjonen. Noen vil konsumere gjennom video i stedet for å lese.

Anders: Jeg hadde lyst å trekke dem, men nå fikk jeg sagt det.

Erling: Så til skjemakvalitet. Klar, ferdig gå. Jeg ga 0, du minus. Grunnen til at jeg ga 0 var at de hadde kodet mye riktig med fieldset, legend og label.

Anders: Ja.

Erling: Selv om de hadde en custom sjekkboks så var det kodet korrekt. Det var semantisk.

Anders: Jeg gir meg.

Erling: Hvorfor var du tvilende?

Anders: Det var så mye på kort tid. Validering var dårlig. Hvis vi hadde gravd oss ned i skjemaer enda mer så hadde vi sikkert funnet mer.

Erling: Kanskje mer bra. Vi fikk bare opp en validering. Jeg tror 0 er ganske beskrivende.

Anders: For å snakke meg opp igjen – vi fikk sendt inn en søknad til et medisinstudie på null komma niks. Mine forventninger var veldig mye verre. Selv om de per komponent køddet det litt til, så var totalen i skjemaet bra.

Erling: Det var en fin flyt. Vi forstod alt. Vi var ikke usikker på noe. En generell vurdering til slutt. Begge ga 0. Grunnen til at jeg ga 0 var fordi at skjermleser og tastatur feiler. Hvis de hadde lykkes, hadde jeg nok gitt 1.

Anders: Dette er et eksempel på at noen som gjør mye riktig, etter boken …

Erling: Det oser av kvalitet, egentlig.

Anders: … men jeg tipper at de ikke har tatt med personer med funksjonsnedsettelser i utviklingsprosessen.

Erling: Hadde de bare tabbet seg gjennom, så hadde de oppdaget den hamburgeren.

Anders: Litt mer testing!

Erling: De hadde plukket opp «Go to main content». Jeg tror dette med validering i skjemaet er mer inkompetanse.

Anders: Eller er det bare et bibliotek de bruker som er dårlig?

Erling: Da er vi ferdige med evalueringen. Skal du si noe?

Anders: Jeg har gjort feil i min formel her. Ikke krise, jeg må bare justere litt. Nå er vi på episode 13. Vi har Jobbmesse som ligger på topp.

Erling: Altså dårligst poeng.

Anders: Så har vi Yr i forrige episode som jo klarte å klemme inn en 100 %.

Erling: Det er sykt altså.

Anders: Høyskolen Kristiania får 65 av 100 mulige. Det er over middels. Det er ingen på 60-tallet. Omtrent 5. plass.

Erling: Dette er ting som er enkle å fikse. De har et godt utgangspunkt. Det er snakk om en aria-live her og kode litt annerledes der. Dette er en dags arbeid, for noen som vet hva de skal gjøre.

Anders: I dag har jeg en hjemmelekse. Jeg skal finne ut om det var min feil at da jeg brukte landemerker i rotoren for å navigere meg ned, hvorfor ikke tastaturfokuset hang med. I dag trenger ikke folk å sende inn tips til hva vi skal teste, siden vi går mot slutten. Jeg har lyst at folk skal tipse oss om hva vi skal gjøre videre.

Erling: Jeg har mange ideer.

Anders: Og om vi skal fortsette. Send til hei@ubrukelig.fm.

Erling: Han som hadde ubrukelig.no ville ha litt mye penger.

Anders: Han ble for grisk. Takk for i dag, Erling. Ha en riktig god helg. Jeg er Anders fra Webstep.

Erling: Jeg er Erling fra Okse. Adjø!