Uu-podcasten: Ubrukelig

Introduksjon

Erling: God morgen Anders. Jeg føler nesten at jeg må si hva klokken er. Vi trenger ikke det.

Anders: Folk bryr seg ikke.

Erling: Ikke vi heller. Har du det bra?

Anders: Jeg har det bra. Hadde en utrolig fin dag i går. Var på Jørpeland og syklet. Var veldig sen hjem, så det ble lite soving. Sånn sett er det ikke så bra. Ligger litt bakpå, generelt om dagen. Ikke krise. Utover det har jeg det veldig bra. Og du?

Erling: Jeg har det helt ypperlig. Jeg har det som regel ypperlig. For første gang på mange år var jeg ikke 10 av 10, jeg var på 8 av 10. Det var litt kjipt på jobb. Nå er det blitt ordnet, så nå er jeg på 10 av 10 igjen.

Anders: Det er ikke mange som har det 10 av 10. Det skal du sette pris på.

Erling: Jeg burde nok blitt preget av black lives matter, korona og sånn, men det er bare når jeg tenker på det. Når jeg ikke tenker på det har jeg det tipp topp. Hva skal vi gjøre i dag?

Anders: I dag skal vi sjekke ut jobbmesse.no, en tjeneste for de som er på jakt etter drømmejobben.

Erling: Det er aktuelt i dag.

Anders: Det er høy arbeidsledighet, eller relativt høy. Høyeste siden lenge.

Erling: Den vil nok bli høyere. De som er permittert kan miste jobben. Det er litt vanskelig nå, for du kan ikke gå på en messe med mange folk. Dette er da en løsning som skal gjør det online, en jobbmesse online.

Anders: Så det er ingen fysisk jobbmesse? Fordi jeg har oppfattet at de har begge deler, både fysisk og digital jobbmesse.

Erling: Jeg har bare plukket opp den digitale delen.

Anders: Det skal vi snakke om, jeg skal fortelle hvorfor jeg trodde det, men det skal vi ta på første del av evalueringen.

Erling: Skal vi hoppe rett i det?

Anders: Ja, men vi kan jo bare si at dette er en podkast om universell utforming, som heter Ubrukelig, vi er på episode 11. Vi har sagt at 15 er målet. Nå kommer sommeren, så skal vi lage noen episoder over sommeren, så skal vi dele ut en Ubrukelighetspris. La oss kjøre på.

Visuell evaluering

Erling: Det første vi ser på er den visuelle evalueringen. Hva tenker du, Anders? Hvorfor tenkte du at det var fysisk òg?

Anders: Fordi det er et stort bakgrunnsbilde som treffer meg med én gang, på jobbmesse.no. Med tanke på universell utforming er det litt mørkt, for å få frem en tekst som ligger over. God nok kontrast, men det er mørkt nok til at det blir uklart.

Erling: Noe av teksten har en bakgrunn.

Anders: Stemmer. Overskrift og hovedknappen.

Erling: Når du sier det, alt her indikerer jo at det er fysisk.

Anders: Fordi de har et bilde av en messe, et stort futuristisk bygg.

Erling: Veldig prominent.

Anders: Siden det er mørkt, og har litt lav oppløsning, så er jeg ikke sikker på om det er et bygg eller om det er en 3D-visualisering. Jeg tror det er en 3D-visualisering.

Erling: Det tror jeg òg.

Anders: Selv om det er en 3D-visualisering, så opplever jeg at de skal fortelle meg at det er noe fysisk.

Erling: Logoen deres jobbmesse.no står stort rett over inngangen.

Anders: Der ser ut som om det er deres bygg, ikke bare en messe som arrangeres i det bygget.

Erling: Jeg tviler på at det er det som er realiteten.

Anders: Det tviler jeg òg på. Derfor har jeg tenkt at dette er fysiske og digitale messer.

Erling: Det er ingenting her, i den øverste delen som indikerer at dette er digitalt. Det er en liste i heroen – Drømmejobben er her, søk i dag! Besøk ulike messer og stands. Chat med utstillerne. Delta på ulike jobbmesser og få drømmejobben. Søk på jobber over hele verden 24/7.. At de bruker ordet chat er den første indikatoren på at dette er digitalt. At du kan gjøre det 24/7 over hele verden er òg et hint om at dette er digitalt. Jeg ble usikker når du sa det, men jeg er ganske sikker på at det kun er digitalt.

Anders: Det vil vi finne ut. Oppgaven i dag er at vi skal finne en messe som vi kan delta på. Vi skal finne en ny jobb. Er du misfornøyd med jobben din i Okse, Erling?

Erling: Jeg er kjempefornøyd.

Anders: Så dette blir et spill i dag?

Erling: Stemmer det.

Anders: Samme her. Vi ser at de har en blå profil. Helt ok kontrast. Vi har ikke målt. Magefølelsen min sier at kontrasten er akseptabel.

Erling: Der det er solid bakgrunn.

Anders: Ikke på teksten som ligger over bildet. De har unormalt liten tekststørrelse.

Erling: Det kjennes litt gammeldags ut. Litt tidlig 2000 blandet med konvensjonene i dag.

Anders: Helt riktig. Da var det slik at innen faget webdesign så var liten tekst ansett som finere enn stor tekst.

Erling: Litt som med kroppen. I gamledager var stor kropp sett på som fint, det var et tegn på rikdom. Nå er det motsatt. Nå er det ansett som fint med store fonter.

Anders: Jeg har hørt at nå er det finere blant ungdommen å være blek.

Erling: Er det?

Anders: Solariumene går en tøff tid i møte. Jeg er enig. Hoveruttrykket er litt umoderne.

Erling: Rett og slett. Og så har de en slider under heroen, med mange logoer. Jeg kjenner igjen noen av dem. Færre enn jeg burde, når de velger ikke å ikke skrive navn i tillegg.

Anders: De viser kun logo. Jeg får en følelse av at dette er en tillitsfull tjeneste med disse logoene.

Erling: Det bygger definitivt opp tilliten. De har Fjord1, KLP, Equinor.

Anders: Men så ser jeg en logo her til Ericsson. Er ikke Ericsson historie?

Erling: Nei, jeg tror bare det er mobildelen? Jeg vet ikke.

Anders: Nå må vi passe oss. I den heroen har de en liten tekst som står og gynger, som heter «rull ned».

Erling: Hva synes du om det, Anders?

Anders: Det kan de bare ta vekk.

Erling: Jeg må bare si at innholdet skaleres til vinduet, så den slideren med logoer, den er alltid i bunn. Det er nok derfor de har lagt den inn. Det er et unødvendig mønster, å fortelle at man skal rulle ned. Men de har skrevet «rull ned», ikke scroll.

Anders: Det kan jeg like. De har stillinger under der. En ganske ryddig liste. Men de har tre filterknapper som er skrevet på engelsk.

Erling: Det var rart.

Anders: Det er sikkert fordi de har en tredjepartsløsning her.

Erling: Eller en utvikler som ikke snakker norsk, som har glemt å oversette.

Anders: Så har de en video av hvordan dette fungerer, den spilles automatisk. Det er vel ikke helt bra. I bunn har de en liste over de fem nettleserne som støttes best. Veldig uvanlig. Med versjonsnummer. For eksempel Opera 31.0 og oppover.

Erling: Veldig rart.

Anders: For vi vet at folk flest har ikke et bevisst forhold til hva nettleseren heter eller hvilken versjon det er.

Erling: Jeg henger ikke med på versjonsnummer.

Anders: Ikke jeg heller. De sier at dette funker med Google Chrome 39 og oppover. Jeg vet ikke hva jeg har. Totalen er at …

Erling: Det kjennes gammeldags ut, og litt rotete. Mange element, litt lite luft. Litt dårlig struktur.

Anders: For å ikke gjør disse episodene for like, Erling, så vil jeg si at jeg gikk inn på tilgjengelighetsinnstillinger og så sa jeg reduser bevegelighet. Bevegelighet er jo et tilgjengelighetstema. De respekterte ikke mitt valg. Det bør en gjøre i CSS når en legger på animasjoner, så bør du legge på den CSS-egenskapen som heter prefers-reduced-motion. Slik at de som ikke vil ha bevegelse, som jeg, jeg blir sjøsyk, ikke får bevegelse.

Erling: Hvor mange er det som gjør dette.

Anders: Ikke mange. Til deres forsvar, så er det gjerne ikke her en begynner. Det er de som gjør seg ekstra flid med universell utforming, som gjør dette.

Erling: Det er ikke i samme ende som «hopp til innhold». Det er i andre enden av skalaen.

Anders: Det er jo greit å vite om. Det er jo noe vi tok opp i den første podden vår, Universelt utformet. Har vi noe mer å si om det visuelle.

Erling: Vi har sagt nok. Vi hopper videre til navigere med tastatur.

Tastatur

Erling: Er Nora med oss i dag?

Anders: I dag skal vi kjøre kombinert tastatur- og skjermlesernavigasjon. Vi skal finne en jobbmesse. Da åpner jeg opp Safari og skrur på Voiceover. Denne uken har jeg jobbet litt med uu sammen med en annen, en Windows-mann. Det er lenge siden jeg har brukt Windows. Vi prøvde noe i hans skjermleser som heter Narrator. På norsk heter den bare Skjermleser.

Erling: Det er den som følger med?

Anders: Ja. Den har hatt et dårlig rykte. Den har fått et bedre rykte. Da vi testet denne uken var den bedre, det den sa var mer intuitivt. Den informasjonen han leste opp. Det virket som om den hadde bedre støtte for noen aria-attributter.

Erling: Bedre enn Apple sin Voiceover?

Anders: Ja!

Erling: Interessant.

Anders: Apple er generelt flinke. Da skrur jeg på jeg Erling.

Skjermleser: Voiceover på Safari. Jobbmesse vindu. Jobbmesse har tastaturfokus.

Anders: Tidligere har vi begynt å tabbe. Det er en normal ting å gjøre. I dag skal vi navigere oss på siden. Jeg vil se om de har navigasjon eller om de har overskrifter jeg kan bruke som knagger.

Erling: Du vil få et generelt overblikk først, før du går i gang med oppgaven?

Anders: Ja. Da åpner jeg rotoren.

Skjermleser: Lenke meny.

Erling: Hva er det?

Anders: Det er en funksjon i Voiceover som gjør at du blant annet kan hente ut ulike lister, du kan liste ut alle lenkene, alle overskriftene, alle landemerkene, alle skjemaene, alle tabellene og så videre.

Erling: Et hjelpemiddel som gir deg en strukturert oversikt over innholdet.

Anders: Jeg går først til landemerker. Så går jeg ned.

Skjermleser: Banner.

Erling: Den har vi hørt ofte.

Anders: Dette er litt forvirrende, dette med banner. Det er ikke et reklamebanner. Det betyr at et header-element har den tilgjengelige rollen banner. Så alt som er gjentakende i toppen av en side skal puttes inn i et header- eller banner-element. Litt forvirrende, siden vi har så sterke konotasjoner til ordet banner.

Erling: Eller assosiasjoner.

Anders: Konotasjoner er jo et ord du bruker, som ikke jeg bruker. Men du har jo en etymologisk ordbok her på veggen, som sikkert har 2000 sider. Det er forskjellen på meg og deg.

Erling: Tematisk kategorisert.

Anders: Så trykker jeg ned.

Skjermleser: Innholdsinformasjon.

Anders: Det er òg litt forvirrende. Men de som bruker dette, kan det. En footer har en rolle contentinfo som her nå heter innholdsinformasjon. Så det kan være footeren. Ikke nødvendigvis.

Skjermleser: Navigering.

Anders: Ja! De har noe som heter navigering. Da går jeg til den.

Skjermleser: Kontakt oss. Klikkbar.

Anders: Det som skjedde var at vi kom til navigeringen i footeren. Nå jukser vi litt, fordi jeg ser jo dette òg.

Erling: Aha.

Anders: Men det jeg ikke. Jeg trykker tabb.

Skjermleser: Lenke. Google Chrome 39,0 og oppover. Innholdsinformasjon.

Anders: Den neste lenken, som ligger visuelt sett over kontakt oss-lenken. Her har de en feil rekkefølge i tastaturet sitt. Den heter Google Chrome 39,0 og oppover, den skjønner vi ingenting av, fordi vi skjønner ikke konteksten. Og jeg vet ikke hva jeg skal gjøre.

Erling: Gikk du videre nå? Du gikk fra kontakt til Google Chrome. Veldig rart, fordi neste element er jo FAQ. Visuelt sett.

Anders: Det er en navigasjonslinje som heter Kontakt oss, FAQ, Betingelser og vilkår og så videre. Over det er det et ganske stort seksjon, med disse nettleserne. Nå er vi ute og kjører. Jeg gir opp. Jeg åpner rotoren min igjen.

Skjermleser: Landemerker meny.

Anders: Jeg vil gå til overskrifter, for å se om de har noen overskrifter til det jeg skal gå til.

Skjermleser: Overskrifter meny. Overskriftsnivå 2 2 objekter. Nyeste stillinger. Overskriftsnivå 2 Slik fungerer det.

Anders: Egentlig gode overskrifter.

Erling: Hvor mange overskrifter sa hun at det var?

Anders: Det har de ikke sagt?

Erling: Sa hun ikke to to?

Anders: Jo, og jeg vet ikke hvorfor.

Skjermleser: Overskriftsnivå to to objekter. Nyeste stillinger.

Anders: Jeg vet ikke hvorfor hun sier «to objekter» der. Det gjør hun ikke på neste.

Skjermleser: Bli headhunted.

Anders: Ingen av disse ga meg deg jeg ville ha, for jeg skal jo på en messe.

Erling: Nå gikk du gjennom landemerker. Dette illustrer hvor viktig landemerker er, for vi kan jo røpe at det er en annen meny. Det er en meny i toppen, men den er tydeligvis ikke kodet med landemerker, for da hadde den dukket opp her, da hadde den dukket opp som en nav.

Anders: Det er rart at de har kodet en mindre viktig meny i bunnen mer korrekt.

Skjermleser: Escape knapp. Lenke Google Chrome. Jobbmesse.png.

Anders: Da fikk vi opp «jobbmesse.png». Det har vi hørt mange ganger. Det er nok et tegn på at de har en logofil som ikke har alternativ tekst. Vi går videre.

Skjermleser: Brukte lenke.

Erling: Jeg må nevne at det ikke var noe «hopp til» her.

Anders: Vi kom til en lenke som ikke har noe navn. Visuelt er det en pil opp. Det ser ut som en pil opp, altså noe som skal ekspandere, men det skal være et bilde av et hus. Det er hjemlenken. De har valgt et litt uvanlig husikon.

Erling: Jeg trodde det var feil, jeg trodde det var en pil med en feil, en liten apostrof som hadde sneket seg inn.

Anders: Nei, den lille apostrofen er pipen på huset.

Erling: Vises kun deler av ikonet eller er det bare veldig minimalistisk?

Anders: Jeg tror det er meningen.

Erling: Morsomt.

Anders: Du kan si noe om tastaturfokuset på pipen.

Erling: Du, jeg tror jeg har fått den nye til Chrome.

Anders: Ja, den kom nettopp.

Erling: For jeg har både blått og hvitt rundt.

Anders: De skrev i dev-bloggen sin at det skulle være sort og hvit. De har tydeligvis ikke våget å tatt steget helt ut, men det er en viktig oppdatering.

Erling: Da har de default styling her.

Anders: Dette er et ypperlig eksempel på at Google har gjort et bra valg, for hvis de hadde brukt den gamle fokusmarkeringen her så hadde vi ikke sett den, fordi det er blått på blått. Siden de har blå og hvit, så funker det bra. Da så vi at husikonet ikke hadde alternativ tekst det heller. Jeg skrur på Nora igjen.

Skjermleser: Lenke Arrangementer.

Anders: Det er bra. Det er det vi skal.

Erling: Vi vet at en messe er et arrangement. Hva skjedde nå?

Anders: Det skjedde ingenting. Visuelt sett så skjedde det mye.

Erling: Jeg hørte ikke plinget som indikerer sidelasting.

Anders: Ingen pling. Det kan tyde på at dette er en javascriptapplikasjon.

Erling: En SPA.

Anders: Meg som skjerleserbruker vet jo ikke hva som skjer.

Skjermleser: Lenke om oss.

Erling: Når du bruker skjermleser så trykker du på et aktivt element, og du ikke hører noe, antar du da at det har skjedd noe?

Anders: Jeg antar at du antar det, ja.

Erling: Du antar at jeg antar at du antar det?

Anders: Det skal jeg ikke uttale meg om. Når det står så dårlig til som det gjør, så må jo de som bruker disse hjelpemidlene jobbe litt ekstra hardt for å få det til. Det er ingen unnskyldning for å gjøre det dårlig.

Erling: De som bruker dette hver dag gjør nok dette mye fortere, og de har nok en prosedyre antar jeg. De går først gjennom overskriftene, så gjennom landemerkene, slik at de får en rask oversikt over hvordan de skal navigere på denne siden.

Anders: Det synes jeg er bra at du sier. Nå trykket jeg tabb til Om oss. Men det som en en bedre måte å finne ut om jeg har havnet på en ny plass, hvis jeg er usikker, det er jo å åpne overskriftene nå.

Skjermleser: Overskrifter meny. Overskriftsnivå 2 Kommende messer.

Anders: Veldig bra. Da trykker jeg enter på den.

Erling: Jeg reagerte med at jeg syntes det var litt rart, for visuelt sett så er det ikke den første overskriften.

Anders: Det er den første som er kodet som en overskrift.

Erling: Jeg kan røpe at den første overskriften er kodet som div class title.

Anders: Oi, en klassiker. Jeg kan òg røpe at denne overskriften her er skrevet med liten forbokstav. Uvanlig.

Erling: Slurvete. Det er ikke et stilistisk grep, for det er ikke gjennomgående.

Anders: Da tar jeg enter på den.

Skjermleser: Overskriftsnivå to. Kommende messer.

Anders: Da tabber jeg.

Skjermleser: Brukte bilde. Jobbmesse.png banner.

Erling: Hva? Nå er jeg nysgjerrig.

Anders: Det som skjedde nå var at jeg havnet tilbake til …

Erling: Nå leste den opp logoen igjen, altså det første interaktive elementet. Er det du som har gjort noe feil?

Anders: Jeg mistenker at det er en SPA-sak her, at de overstyrer fokusen, men jeg er usikker, for fokuset var på kommende messer.

Skjermleser: Forlater jobbmesse. Sidepanel knapp. https kolon skråstrek.

Anders: Nei, det er ingenting i hovedbildet som er fokuserbart.

Erling: Men det ser fokuserbart ut. Jeg kan fortelle litt om hva jeg ser. Vi ser en liste med kommende messer. 9 oppførte messer. Navnet på messen har understrek.

Anders: Den første etter overskriften heter «Framtidsfylket digital jobbmesse». Skrevet på en rar måte. De har glemt noen mellomrom her og der.

Erling: Det ser ut som det er en bindestrek mellom framtidsfylket og digital. Jeg kan røpe at den er kodet med u. Som er i slekt med b og i. U for underline. Et blast from the past.

Anders: Det er jo ikke en del av HTML 5 (her har Anders feil. u er fortsatt med i HTML-standarden). De har ingen interaktive elementer.

Erling: Jeg må si at du havnet jo på den første kodede overskriften, Kommende messer. Over den så er det en messe som har interaktive element, som ligger under «Delta på vår onlinemesser hvor som helst i verden», så det er en messe som det går an å klikke seg inn på, men den ligger over kommende messer.

Anders: Javel.

Erling: Javel hva?

Anders: Jeg får ikke fatt på den.

Erling: Du kan klikke på den med musen, og det er en a inni der. Når jeg inspiserer er det en a.

Anders: Men er det en href i den a-en? De bruker a-er uten href, som er tomme lenker. Derfor tolker skjermleseren dem som ikke interaktive. All interaktiviteten er lagt på med Javascript. Akkurat dette her har jeg akkurat sett en fin video om, fra Google. Det er en tysk kar som heter Krill (han heter Martin Splitt). En fargerik person som snakker om tomme lenker. Det er ikke en video om universell utforming, det er mer om god kodepraksis og SEO. Det vil si at ingenting på denne siden når du med tastatur.

Erling: Det stopper her.

Anders: Du kommer deg til hovedmenyen, og du kommer deg til alle de hovedelementene i toppmenyen. Det siste elementet der heter «For arrangører» og så havner du en skjult plass.

Erling: Nei. Plutselig havner jeg i nettleseren. Oi. Og den logg inn-lenken i toppen er en div. Registrer deg er sikkert òg bare en div. Oioioi. Til og med lenken «Godta informasjonskapsler» er en a uten href.

Anders: Da er det bare å avslutte tastatur og skjermleser. De er 100 % utilgjengelige.

Erling: Rett og slett. Total feil.

Anders: Vi kan ikke legge godviljen til og komme ned der.

Erling: Vi kan ikke hoppe over alt skvipet slik vi har gjort tidligere, for det er ikke tilgjengelig. Du må bruke mus. Eller touch.

Anders: Da legger vi den død. Da går vi faktisk bare videre til din vurdering av kode.

Evaluering av kode

Erling: Jeg kan begynne på toppen av listen. De har lang, det er bra.

Anders: Vi hadde ingen språkproblemer med skjermleseren.

Erling: Når du skifter språk til engelsk, så byttes lang til en, så det er bra. Som vi har vært innom, så har de landemerker. Det er tydelig i rotoren at de ikke har landemerker på alt. De har en header, de har en footer, de har en nav, men de har ikke nav i header i menyen, som vi har nevnt. Det ligger en nav, som jeg er litt overrasket at ikke ble plukket opp av rotoren, det ligger en nav rett etter headeren, til mobilnavigasjonen. Hvorfor den ikke dukket opp i rotoren, det vet jeg ikke. De har ikke main. De har heller hopp til innhold. Hadde de hatt main, så kunne det vært et måte å hoppe til innhold, hvis du bruker rotoren.

Anders: Helt riktig. Det er noe jeg ser igjen og igjen. Selv om folk bruker landemerker, så har de ikke main, og det kan jeg ikke forstå. På webstep.no, der jeg jobber, der har vi ikke main.

Erling: Rart. Husk main folkens! Over til headingstrukturen. Som vi merket i skjermlesertesten så har de ikke h1 eller h3, kun h2. Så har de visuelle titler som ikke er kodet som overskrifter, kun div.title. De har òg h2title. Den generelle HTML-kvaliteten kjennes rufsete ut. Det ligger mange customelementer som avatar og slikt. Så fant jeg en ul og li, hvor de hadde en avsluttende div før en avsluttende ul, som ikke hadde startet. Kjennes ut som litt dårlig håndverk. Så gikk jeg litt videre fra forsiden og så på skjema. Der hadde de ikke label på input. De har feil inputtype, de har e-postfelt med type="text".

Anders: Ikke krise.

Erling: Men autocomplete funket ikke på den. De har tekst i span der det burde vært p. Samme med tekst i div der det burde vært p. Og så har de u, underline-elementet. Og så søkte jeg på forsiden, der fant jeg 87 imagetagger og kun én av dem hadde alt.

Anders: Veldig mange av de er nok de logoene.

Erling: Korrekt. Den ene som hadde alt var en trackingpiksel fra addform. Da stoppet jeg der.

Anders: Det forstår jeg godt.

Erling: Det var dårlig. De hadde elementer mat-tab-group, mat-tab-header. De har laget customelementer. Kanskje du kan si noe om hvorfor det er dumt?

Anders: Å lage custom uten å ha roller? Hvis du lager noe som skal se ut som noe som allerede finnes, for eksempel tabber/faner, så vil de ikke oppføre seg likt som … hvis du lager de selv uten å bruke roller eller semantiske elementer, så må du òg definere hvordan de skal fungere med tastatur, mens du bruker tablist, tab og tabpanel som roller, så vil de automatisk få de tilgjengelige egenskapene som brukerne forventer. (Dette er feil. I dette eksempelet må du ha javascript i tillegg for å få riktig tastaturinteraksjon).

Erling: Jeg kan røpe at de role="tablist" og role="tab".

Anders: Hva?

Erling: De har et HTML-element som heter mat-tab-group.

Anders: Er det mat som i at de bruker material?

Erling: Det kan være, jeg vet ikke.

Anders: Det er material.

Erling: Inni der har de en mat-tab-header. Inni der har de mange diver, og en div med role="tablist".

Anders: Det er bra.

Erling: Og så har de role="tab" inni der igjen. Så der har de gjort noe rett.

Anders: Det har de fått av Angular.

Erling: Du kjenner den igjen, det er noe som kommer fra Angular?

Anders: Det er komponenter fra Angular, og så har heldigvis Angular ivaretatt de tingene.

Erling: Bra. Det var det på koden. Du da med resultat fra automatisk testing?

Automatisk testing

Anders: Der er det slik at vi har brukt tillegg til Chrome som heter Accessibility Insights, som kjører en automatisk test. Der fant verktøyet 116 feil.

Erling: 116? Men jeg fant jo 87 image-tagger.

Anders: Ja, sant. Vi har aldri hatt så mange før.

Erling: Det må være ny rekord. Hva slags feil er det?

Anders: 64 av disse, altså omtrent halvparten, forstår jeg ikke. Det handler om aria-hidden på fokuserbare element. Løsningen for å ikke gjør noe fokuserbart er jo tabindex="-1", som alle disse logoene har. Så jeg er litt redd for at det er feil i rapporteringen. Kodemessig har de sagt at alle disse logoene skal ignoreres av skjermlesere, men likevel rapporterer verktøyet at dette er feil. De har ikke lenker, de har kun diver som er interaktive. Jeg tolker det som om de har gjort det riktig, så kan vi diskutere om det er riktig å ekskludere dem. For hvis jeg vil vite hva Ericsson har brukt Jobbmesse til, så får jeg ikke det til. Og jeg får jo ikke bygget opp den troverdigheten som jeg fikk visuelt sett, som en skjermleserbruker. Og vi skal være veldig forsiktige når vi ekskluderer innhold for skjermlesere.

Erling: Absolutt.

Anders: Et eksempel på det er at vi i Universelt Utformet, der sa jeg i en episode at du kan skjule emojis med aria-hidden. Det fikk jeg kjeft for. Svaret var at det er greit at de ikke alltid gir mening, men jeg vil få med meg den samme opplevelsen.

Erling: En liten avsporing. Hvordan ville du ha kodet disse 64-logoene? Det er litt dumt å havne inn på 64 interaktive element, som du må jobbe deg forbi.

Anders: Det jeg tenker er at de logoene som er skjulte, kan òg være skjulte fra DOM-en.

Erling: De bruker en slider, en karusell, det er et dårlig mønster i seg selv. Kanskje rådet her ville vært å dra frem de du ønsker å fremheve?

Anders: Ja, dra de frem, og gjerne ha en lenke som heter se alle referanser. Det ville kanskje være bedre og enklere. De har òg 27 eksempler på dårlig kontrast.

Erling: Det plukket vi ikke opp i den visuelle gjennomgangen.

Anders: Nei, jeg har heller ikke notert meg hvilke det var, jo … ehm.

Erling: Er det teksten på bildet?

Anders: Vet du hva, nå er jeg svak her. Er det rett og slett blåfargen? Hvit tekst på blå bakgrunn? Nå er jeg nødt til å jukse litt. Jeg må åpne verktøyet mitt, så jeg ikke sier noe feil.

Erling: Nå testet jeg kjapt, med mitt lille verktøy. Kontrasten mellom den blå og hvit er 5,53, altså innenfor.

Anders: Cookies, registrer deg nå.

Erling: Kan det være de nettleserlogoene i bunn?

Anders: Nei, verktøyet sier at hvit tekst på blå bakgrunn er 4,43 i kontrast. Det som jeg innledningsvis sa var godt nok.

Erling: Det var interessant, for jeg driver å plukker, jeg har et lite verktøy i MacOS som heter contrast, som er et lite verktøy oppe i toolbaren hvor jeg kan plukke farger fra hele skjermen. Når jeg plukker den blå og den hvite …

Anders: Men plukker du den blå fra headeren?

Erling: Ja.

Anders: Men den er god. Men de bruker forskjellige blåfarger, det er små nyanser.

Erling: Aha.

Anders: Nå ser jeg det. Under Nyeste stillinger, så er det en liten ingress, den har for lav kontrast. Alle filtervalgene på nyeste stillinger …

Erling: Alt jeg plukker her har god nok kontrast.

Anders: Har det det? Helt i bunn for eksempel. Der er det tydelig med de to blåfargene, en mørk og en lys. Den lyse har dårlig kontrast med hvit tekst.

Erling: Den får jeg 4,66 på her.

Anders: Der sa jeg òg feil, fordi teksten er ikke helt hvit, den er litt grå.

Erling: Der ser du.

Anders: De bruker #f2f2f2 som farge.

Erling: Nå fikk jeg det til. Det er én av fordelene med automatisk testing, som vi ikke hadde plukket opp med en manuell gjennomgang.

Anders: Og når jeg sa at kontrasten var god, så baserte jeg jo det på fargen i toppen.

Erling: Bra øye! Hadde du sett det på den i bunn?

Anders: Nei. Det handler ikke om hva jeg synes, det handler om hva som er god kontrast.

Erling: Det var bare hvor fintunet mitt øye er.

Anders: Så har vi mange manglende alt, det har jo du kommentert. Så har vi syv eksempler på lenker uten navn.

Erling: Hva betyr det?

Anders: Det betyr at de ikke har et tilgjengelig navn, de har ingen innholdsknagger som sier hva lenkene gjør. Jeg kan ta et eksempler på en slik lenke. Det er logoen som ikke har noen alt-tekst. Det er hjemikonet som vi har sett på. De bruker noen fontikoner som er lenker, noen piler. I hver ledig stilling har de en pil. Da er det generelle rådet, unngå fontikoner. De kan gjøres tilgjengelige, men SVG er alltid bedre, ikke bare med tanke på tilgjengelighet. Det var resultatene fra den automatiske testen.

Erling: Er det da rangering?

Anders: Ja, men nå er det jo slik at vi ikke har kommet oss inn i løsningen.

Erling: Det er jo sant.

Anders: Vi ga jo opp fordi tastaturet ikke virket. Men vi kan jo smake litt på hjertet, på indrefileten av løsningen.

Erling: Skal vi hoppe bukk over hele prosessen nå, at du lager deg en konto nå? Så kan vi klippe vekk det?

Anders: Det kan vi godt. Jeg kan registrere meg uten at vi tar opp det.

Erling: Så kan du snakke generelt om hvordan det var, i stedet for at vi tar lyttern gjennom det.

Anders: La oss gjøre det.

Erling: Da er vi inne på min bruker faktisk, jeg har laget en bruker tidligere. Jeg kan røpe at jeg gikk gjennom ganske mange steg, de ville ha avatar, de ville ha presentasjonsvideo, de ville ha masse greier før jeg fikk lov å lage en bruker. Nå er vi inne på profilen min. Der er det en messe som jeg nok har meldt meg på som heter Jobbmesse NAV Vestfold Telemark. Jeg kan røpe med én gang, at dersom jeg prøver å nå den med tastatur, så havner jeg ute i det ukjente. Vi ser ikke fokus. Jobber videre. Jeg ser nede til venstre at jeg er på et annet interaktivt element. Vi ser det ikke. Det samme som vi opplevde tildligere, ikke tilgjengelig med tastatur. Jeg jukser litt og bruker musen og trykker på knappen søk messe.

Anders: Vent litt nå. Vi er inne i et ganske informasjonstungt grensesnitt her. Det er mange bokser, felter, tre kolonner. Det er mye informasjon å ta inn over seg. De har to interessante valg. De har et eldorado av navigasjonsmuligheter, men de har en meny oppe til høyre som har blant annet «høykontrast», «skriftstørrelse» og «om oss» og «språk». Det er jo litt interessant.

Erling: Og de er jo ironisk nok ikke tilgjengelige med tastatur. Dette er da profilsiden. Vi trenger ikke å grave oss ned i den, jeg er nysgjerrig på hvordan det er når du kommer helt inn.

Anders: Du har en messe som er 10. juni, som er i dag. Den begynner nå klokken 12.

Erling: Men jeg kan besøke den.

Anders: Der er det tre firmaer, med alt for dårlig kontrast.

Erling: Vi har en knapp som heter «Besøk messe». Den er kodet som en a. Den er tilgjengelig. Men den har ikke fokus. Trykker meg inn på den. Dette forklarer nok forvirringen om det er fysisk eller digitalt. Hva ser vi nå, Anders?

Anders: De simulerer en fysisk messe, digitalt.

Erling: Vi ser på en 3D-rendering.

Anders: Vi er i en resepsjon. Der sitter en NAV-dame bak en svær skranke.

Erling: Vi ser NAV-logoen overalt her.

Anders: Nå er jeg på en jobbmesse som NAV arrangerer. Det er tre selskaper som er på denne messer.

Erling: Jeg regner ikke med at noe av dette er tilgjengelig med tastatur. Her det så mye som ligger bak. Nå har jeg trykket 40 ganger på tabben.

Anders: Du har tre valg her. Denne resepsjonen ligger tydeligvis i første etasje. Hele denne messen ligger i andre etasje.

Erling: Tydeligvis.

Anders: Du kan gå trappen til venstre, da kommer du til messen. Du kan ta trappen til høyre, da kommer du til messen.

Erling: Hehe.

Anders: Eller du kan ta trappen rett frem, og det er litt fristende for der er det to stykker på vei opp. Da kommer du til auditorium.

Erling: Hva er det? Vi prøver.

Anders: Nå er vi i auditorium. Her er det en illustrasjon. Det kan være NAV som har lagt inn den. Den har et helt annet uttrykk enn alt annet vi har sett frem til nå.

Erling: Nå kommer vi til en side som ikke er 3D lengre. De har ikke rendret et auditorium i 3D. Det er en liste over noe. Det står bare tom liste. Kudos for at de har skrevet tom liste. Det å kommunisere at det ikke er noe, er òg viktig.

Anders: Når du kommuniserer at noe er tomt kan du òg kommunisere hvorfor. Er det tidspunktet som er feil?

Erling: Her er det kommende og arkiv. Vi vet ikke hva det er for noe.

Anders: Vi er inne på et auditorium, og der er det et arkiv.

Erling: Og «kommende». Kommende hva da? Vi går tilbake.

Anders: Da tar vi den andre trappen, Erling.

Erling: Høyre eller venstre?

Anders: Jeg er venstregutt.

Erling: Den lignet på auditoriumet, på sett og vis. Nå ser det ut som en nettside igjen. Nå ser jeg nede at det er tre stands. Det er thumbnails av tre 3D-rendringer og alle viser en skranke og en person. Litt forskjellig stil. Alle med NAV-logo på. Skal vi klikke oss inn på én av dem?

Anders: Da har vi Tønsberg Ferder, Skien, Notodden.

Erling: Hvilken vil du besøke?

Anders: Jeg vil gå til Sandefjord. Men, der var det plutselig en mann. Sist var det en kvinne i skranken.

Erling: Jeg må bare si at dette gir flashbacks til tidlig 2000 og Second Life. Det føles som et virtuelt møte, men det er ingen animasjoner. Det er kun 3D-rendringer, statiske bilder. Her er det noen interaktive element, som vi ikke regner med er tilgjengelige med tastatur. Du kan hovre og klikke på.

Anders: Dette grensesnittet er helt annerledes enn hva jeg har sett før.

Erling: Dette bryter mange konvensjoner på mange måter og er et lite effektivt grensesnitt. Dette gir ingen verdi.

Anders: Fra et uu-perspektiv så bruker de mye bilder av tekst, som er helt uleselig. Jeg har på meg linser nå og jeg klarer ikke å lese disse tekstene her.

Erling: De har lenker med tekst, hvor teksten ikke er en del av koden. De har ikon som ikke sier noe om hva som skjer når du klikker på dem. Det er mange forstyrrende element.

Anders: Men jeg er glad i video jeg Erling. Bak mannen som sitter smilende bak skranken, så er det en video. Jeg har litt lyst å se den.

Erling: La oss trykke på den. Min er ikke koblet til lyd, så da blir det ikke lyd. Arbeidsplassen står det. En helt vanlig embeddet video som viser på en tv-skjerm bak mannen. Det er som å være tilstede, er det ikke det Anders?

Anders: De har teksting på videoen, men videoen er så liten at jeg ikke klarer å lese teksten. Dette er NAV sin video.

Erling: Fikk den opp i full skjerm. Interessant.

Anders: De brukte ikke closed captions. Det kunne de ha gjort.

Erling: Bra at de har teksting. Jeg må òg si at det var et interaktivt element som lå over videoen, som gjorde at det var vanskelig å få tak i fullskjerm-ikonet.

Anders: De kjemper litt om oppmerksomheten. Når vi først er her, så er jo han mannen her er jo ikke tilgjengelig. Jo, videosamtale! Jeg kan snakke med ham på video.

Erling: Tror du det er han du snakker med?

Anders: Eller en NAV-fyr.

Erling: Jeg tror ikke NAV-fyren ser slik ut, fordi han her ser ganske stockfoto ut. Skal vi gi oss her? Jeg ble fascinert. Som vi snakket om på det visuelle, dette er et blast from the past. Dette minner om tidlig 2000-tall.

Anders: Men er det feil?

Erling: Nei, det er veldig lett å dømme fordi det ikke ligner noe som vi preker er god design. Så jeg har lyst å slakte det, men kanskje det òg er feil.

Anders: Vi kan si at det bryter konvensjoner, men det er òg en unik tjeneste.

Erling: Når det gjelder universell utforming, så er det jo veldig mye som feiler her. Det må tas tak i dersom de skal satse og treffer alle. Det er fascinerende, det er ikke ofte vi ser noen som går så langt utenfor konvensjonene og prøver nye ting. Forhåpentligvis tar de tak i det som har med universell utforming å gjøre, å lager det mer tilgjengelig.

Anders: Og det må jeg si, vi varsler jo de vi skal teste. Her var det gründeren selv som svarte og han var interessert i tilbakemeldingene.

Erling: Veldig godt utgangspunkt.

Anders: Da er det en liten sjanse for at det blir gjort noen tiltak, som gjør at de som er arbeidssøkende får en bedre og mer inkluderende opplevelse.

Erling: Veldig bra. Skal vi da gå til rangering?

Rangering

Erling: Vi har 10 ting vi rangerer på. Vi rangerer fra -1, 0 til +1. -1 er dårlig, 0 er greit, +1 er bra. Den første tingen vi vurderer er generell, og den skriver vi ikke ned, det er kun for å si litt om magefølelsen. Så går vi gjennom de 10 andre, så får vi snittscore. Er du klar? Første er generell vurdering. Klar ferdig gå. Begge minus. Over til skjermleser. Begge minus.

Anders: Det er ikke vits å diskutere, vi klarte ikke å gjøre noe på denne siden.

Erling: Feilet 100 %. Tastatur. Minus. Fokusstylingen var borte. Fokuset var skjult. Det var element du ikke kunne få tak i. Det var kodet slik at du ikke kunne få tak i det. Det er ikke ofte en feiler så hardt.

Anders: Det er første gang vi ikke kommer oss forbi menyen.

Erling: Et klart minus. Farge og visuelt. Minus på den òg.

Anders: Det var mye mangler på kontrast. De bruker tekst på bildebakgrunn, som er en dårlig designpraksis. Nå har vi ikke en egen kategori for tekst, men at teksten er liten er òg dårlig.

Erling: Automatisert test. Minus på den òg. Det var den med flest feil.

Anders: 116 feil. Dersom min mistanke er riktig, de burde kanskje ikke fått feil på disse referanselogoene sine, så ville det fremdeles vært mye.

Erling: Det hadde fortsatt vært rekord?

Anders: Ja.

Erling: Språk? Det er alltid et godt tegn at vi ikke har kommentert det. Samtidig var det veldig uklart om dette var fysisk eller digitalt. Grunnkonseptet ble ikke kommunisert.

Anders: De hadde ikke en payoff, de skrevet ikke hva de var.

Erling: Og de hadde engelske tekster inni mellom. Jeg har lyst å dømme dem på liten k, på kommende messer.

Anders: Men du leste jo opp disse punktene i heroen uten at vi reagerte på dem.

Erling: Det eneste var «chat», anglifisering, et engelsk ord inni der.

Anders: Den spiser jeg. Klar ferdig gå. Null på begge.

Erling: Navigasjon. Vi må minne oss selv på at vi har straffet dem for tastatur og skjermleser. Jeg må jukse litt. De mangler søk. De har kun én navigasjonstype, det er meny.

Anders: De mangler søk, ja. Det er jo … De har en custom search som en del av filtermenyen til nyeste stillinger. Men det er jo veldig utydelig.

Erling: Er du klar du?

Anders: Jeg er klar. Null på begge. Jeg gir dem null fordi, i lys av kjerneoppgaven, så var Arrangementer det første elementet, sett bort fra Hjem som var litt forvirrende. Vi kom oss dit vi skulle, og det var ikke overlesset med en stor megameny hvor du må ta stilling til mye. Men det er et helt klart svakhetstegn at de ikke har søk. Og fra et uu-perspektiv, der vi sier at vi skal ha flere veier til Rom, altså at vi skal kunne komme frem til samme type innhold på minimum to måter. Der feiler de jo. Vi er gjerne litt snille. La gå.

Erling: Neste er kodekvalitet. Minus. De feilet ikke på alt.

Anders: Det var noen lyspunkter.

Erling: Generelt så var det veldig dårlig.

Anders: Det vi ser mye er at det er lite fokus på semantikk.

Erling: Bruk de elementene vi har. Hvor mange er det?

Anders: Jeg har sagt 150 mange ganger. Kanskje jeg har løyet litt. Noen av dem er utgåtte i HTML5. Men det jeg kan si er at nå er vi i juni, det er ikke sikkert det er juni når du hører på … Hver måned i webmagasinet Smashing Magazine så har de skrivebordsbakgrunner for den inneværende måneden. I juni så har de en periodisk tabell over alle HTML-elementer. Den er ganske fin. Der var det flere elementer som jeg ikke hadde hørt om, som jeg ble nysgjerrig på, så jeg lærte av den. Den er visuelt sett fin og god å ha for å minne oss på at span og div er siste utvei.

Erling: Siden vi er inne på det. U-en som vi fant. Hvorfor er det dumt å bruke den?

Anders: Fordi du indikerer at det er en lenke, uten at det nødvendigvis er det, det er forvirrende. Du skal selvfølgelig bruke CSS til det. Det er et utgått element (stemmer ikke).

Erling: Det er et element som kun gjør noe visuelt. Det har ikke en semantisk verdi, eller det har jo det, at det er uthevet. Skjermleseren ville kanskje ha lest det på en annen måte. Eller er det så gammelt at de ikke har tatt det med?

Anders: Tror det er så gammelt. Det som er litt morsomt med u-en. Før webben så ble understrek ofte brukt for å fremheve noe. Du hadde tykk tekst, kursiv og understrek. Det var de tre variantene. Det som har skjedd er at understrek for å fremheve noe har forsvunnet, ikke bare fra webben men også fra vanlig tekstbehandling fordi det er så sterke konotasjoner til at det skal være interaktivt.

Erling: La oss hente oss inn igjen, over til bilde og video. Nå må jeg tenke. Det var en video.

Anders: Det var litt skurrende lyd. Vi har snakket lite om hjertet av jobbmeste.no, de 3D-illustrasjonene inni løsningen. De bør telle med i denne vurderingen.

Erling: Vi må minne oss på at det er snakk om universell utforming. Klar ferdig går. Minus.

Anders: Men under tvil.

Erling: Du var ikke helt sikker.

Anders: Men vi var enige, så la gå.

Erling: Hvorfor under tvil.

Anders: Jeg liker litt at de har prøvd så hardt på å gjøre det som ble gjort da internett var ferskt. Med tanke på tilgjengelighet så går det bare ikke an å få det bra til. De har prøvd å simulere en rollup med reklame for noe som blir helt uleselig.

Erling: Jeg ser for meg noen som har forstørret skjermen, som skal bruke dette.

Anders: Du har enormt mange forstyrrelser.

Erling: Fargeblindhet. Hvordan fungerer dette på mobil? Mye var avhengig av hover. Det var det. Skjemakvalitet. Var vi innom skjema?

Anders: Nei. Det var skjema i registreringsprosessen som vi ikke brukte. Vi hopper over skjema siden det ikke var en del av episoden. Generell vurdering. Minus. Sånn må det bli. Her er det så tydelig at de ikke har hatt gode uu-prinsipper med seg i design og utviklingsprosessen. Nå det er så fraværende så blir det minus. Det jeg ville ha begynt med er å fikse kontrastene og alt-tekstene. Og tatt en liten opprydning i koden.

Erling: Semantikk og interaktive element. Det at det tilsynelatende var så mange interaktive element som var interaktive med mus og ikke tastatur.

Anders: Et musefokusert nettsted.

Erling: Og desktop.

Anders: Det kan vi ikke si, for vi har ikke testet på mobil.

Erling: Det kan være superbra der. Bra poeng.

Resultater

Anders: Jeg har resultatet klar. Dette er den 11. episode. Spennet har gått fra Vergemålsportalen som vi hadde sist, med 35 poeng. I dag får Jobbmesse 13 poeng.

Erling: Jeg kjenner at det er riktig. Det er bittelitt som fungerer. Det hadde vært kjekkere dersom det var NAV eller Altinn eller …

Anders: NAV er jo en viktig bruker av tjeneste, som en arbeidsformidler.

Erling: Dersom inngangen vår hadde vært NAV, og vi skulle finne Jobbmesse gjennom NAV, hvor NAV måtte ta denne støyten, så ville det vært kjekkere.

Anders: Enig i det. Her tenker jeg at vi sitter to hvite gutter, med moderne datamaskiner, godt syn og gode jobber. I en situasjon hvor du kanskje ikke har det så bra, du er på jakt etter jobb, du kan ha vært det lenge, kanskje på grunn av funksjonsnedsettelser i tillegg. Det å møte dette, bidrar ikke til den mestringsfølesles du trenger når du skal inn i en arbeidssøkerprosess. Brukerne fortjener en bedre tjeneste.

Erling: Denne tjenesten ekskluderer mange som allerede har det vanskelig. På flere måter, du har ikke jobb og kanskje funksjonsnedsettelser. I etikkens ånd så krysser vi fingrene for at denne tjenesten tar et ordenlig grep. Og hvis ikke håper jeg at ingen bruker den, for det rammer så mange.

Anders: En liten halleluja på slutten. Det positive her er at når de er positive til dette, så blir det sannsynligvis bedre. Det blir ikke perfekt i morgen, og ingen er perfekte. Men ut fra tilbakemeldingene fra Jobbmesse, så tror jeg at de tar noen grep.

Erling: Det er lett for dem å bli bedre.

Anders: Det er en liten innsats for å øke dette mange hakk. Da går vi mot slutten.

Erling: Mest minneverdige øyeblikk?

Anders: Jeg tar det lille huset.

Erling: Jeg tar at du var så usikker på om det var fysisk eller digitalt, for det hadde ikke slått meg. Jeg tolket med én gang at det var digitalt. Da jeg begynte å lese så skjønte jeg at det ikke står at det er digitalt. Likevel hadde jeg tolket det slik. Interessant og minneverdig. Vi vil ha tips. Norske løsninger. Helst store. Vil ha kjerneoppgave. Send til hei@ubrukelig.fm. Det var det.

Anders: Neste episode skal vi snakke om én av de mest brukte løsningene i Norge.

Erling: Skal vi si mer enn det?

Anders: Nei, det blir hemmelig. Jeg kan si at det begynner på Y og slutter på R. Trenger ikke å si hvem det er.

Erling: Yggdrasiler. Nei. Jeg er Erling Håmsø fra Okse.

Anders: Jeg er Anders fra Webstep. Så vil jeg si takk Erling, det var veldig kjekt å snakke med deg i dag.

Erling: I like måte. Alltid kjekt!