Uu-podcasten: Ubrukelig

Intro

Erling: Er du klar, Anders?

Anders: Jeg er veldig klar.

Erling: Hvordan går det med deg?

Anders: Det går bra i dag. Familien har vært syke. Mistanke om korona, men nå er de friske. Nå er vi på rett kjøl igjen. Og deg?

Erling: Veldig bra. Jeg har ingen sykdom, har ikke vært så frisk på mange år. Slik er det når du vasker hendene og spriter alt. Du har en liten oppklaring fra forrige episode. Skal du ta den med én gang?

Anders: Det kan jeg hvis jeg husker det. Det er ikke alltid hukommelsen spiller på lag.

Erling: Du skulle bruke rotoren.

Anders: Jeg gjorde noen tabber i en tidligere episode òg, så jeg blander litt med dem. I forrige episode, ja. Det var Høyskolen Kristiania. Der lurte jeg litt på hovedinnhold i rotoren til Voiceover. Jeg klarte ikke å navigere etter den. Jeg visste ikke om det var min manglende kompetanse med Voiceover eller om Kristiania hadde gjort noe feil.

Erling: Hva var det?

Anders: Det var en tom div som ødela dette, den heter stickyheader. Den lå inne i header. Den tullet til tabrekkefølgen. Da jeg slettet den tomme diven, så funket det.

Erling: Er ikke det veldig rart? Hvorfor skulle en div som i utgangspunktet ikke har en semantisk verdi, med en CSS-klasse, tulle til rotoren og landemerkene. Har du en forklaring? Hva fikk deg til å ta vekk den?

Anders: Fordi selve headeren ligger i header, men diven som er tom, som heter stickyheader, ligger etter main, den har nok noen javascriptforbindelser med den faktiske headeren. Jeg gikk ikke dypere enn det, men det var den som var årsaken.

Erling: Så stickyheader lå i main?

Anders: Ja. Så når du gikk til main så havnet du likevel i header.

Erling: Skjønner. Godt du fant ut av det. Hva skal vi evaluere i dag?

Anders: I dag skal vi evaluere Byggern. Det er etter tips fra … husker du? Roy Halvor? Vi har et lite knippe tipsere.

Erling: Vi antar at det er Roy Halvor.

Anders: Takk for tips. Veldig kjekt. Har du et forhold til Byggern?

Erling: Nei. Jeg kjenner igjen logoen, men jeg har aldri handlet der. Er det en fysisk Byggern i området?

Anders: Det vet jeg ikke. Jeg kjørte forbi en Byggern forrige helg, det var på vei til Jondal. Det ligger en Byggern rett utenfor Jondal.

Erling: Vi finner kanskje ut av det i dag, om det er en i nærheten. Hva er oppgaven?

Anders: Vi har i oppgave å finne et kjøkkenpanel, om det finnes lokalt. Da finner vi jo ut om det er en lokal butikk. Eventuelt bestille og finne leveringstid og åpningstid i den eventuelt lokale sjappa. En god oppgave. Det er jo litt interessant, vi skal teste med skjermleser. Det kan være kunstig. Vi må erkjenne at vi ikke er blinde selv, og vi kan ikke forstå hvordan en blind ville oppført seg i en slik situasjon. Er det naturlig at en stoler på gode beskrivelser av et kjøkkenpanel, og er trygg på å gjøre en slik beslutning når du skal ha deg et kjøkkenpanel. Eller vil du lene deg på noen som ser, når du skal kjøpe den type produkter. Det vet jeg ikke.

Erling: Den øvelsen vi gjør er å sjekke hvor bra løsningen er, hvor tilgjengelig den er.

Anders: Det var kjerneoppgaven. Vi pleier å begynne med det visuelle, selv om vi skal teste skjermleser etterpå. Vi kan snakke om det vi ser.

Visuelt

Erling: Hva ser du?

Anders: Nå har Byggern to forskjellige løsninger. De har en nettside og en nettbutikk. Det er ikke samme greie.

Erling: Åhh. Jeg har bare evaluert nettsiden.

Anders: Det kan være at er greit. Det er nok den jeg òg har sjekket. Når du kommer inn i nettbutikken så er det en annen løsning, som er mer utdatert. Vi kommer til å havne innom begge.

Erling: Absolutt, men kodeevalueringen har jeg gjort på nettsiden.

Anders: Det vi ser er en toppmeny med fire-fem valg, dersom vi inkludererer søkefeltet. Det er ganske ryddig. De har et covid-banner.

Erling: Jeg får opp at Byggern vil vite lokasjonen min. Får du opp det?

Anders: Nei, men det kan være fordi jeg vært der før.

Erling: Byggern wants to know your location. Spør meg nå om det når det er relevant, ikke med en gang.

Anders: De har et covidbanner som ikke ser særlig interaktivt ut, selv om det står «Dette gjør vi». Det ser mer ut som ren informasjon. Så går de rett på kampanjer og tilbud. Jeg må si i dag, at jeg er den minst nevenyttige personen på denne planeten. Jeg er utrolig lite praktisk anlagt.

Erling: Det visste jeg ikke.

Anders: I dag kommer det til å være mye som jeg ikke forstår. Nå ser jeg en drill her, og jeg har brukt en drill kun 50 ganger i løpet av livet mitt og jeg er snart 40 år. Dette er ikke mitt domene.

Erling: Nå skal ikke jeg påstå at det er 100 prosent mitt domene, heller, men jeg tror kanskje jeg er over snittet i befolkningen. Jeg får til ting med verktøy.

Anders: Da vil jeg sitere Ari Behn, som en gang sa «Jeg liker ikke å bli påminnet om min egen udugelighet». Derfor gjør jeg det ikke.

Erling: Det gir veldig mening.

Anders: Det vi ser er kampanjer og tilbud. Det første produktet skjønner jeg nesten ikke hva er. Det står laminatk grand alu. Det koster 329 kroner kvadraten. Jeg ser på bildet at det er laminat, men jeg vet ikke hvorfor de kaller det laminatk.

Erling: Jeg tipper det er en skrivefeil.

Anders: Nei, for de skriver det i et produkt lengre nede òg.

Erling: Bra sett.

Anders: Disse produktnavnene sier ikke meg noe. Det betyr ikke at de er dårlige, det kan jo være at de gir mening for mange andre enn meg.

Erling: Generelt så ser det ganske streit og kjedelig ut. Ikke så mye sjel i dette.

Anders: Nå skal vi ikke snakke om designtrender, men vi gikk jo fra skeuomorfisme, hvis det er det det heter på norsk, eller om jeg har anglifisert det, til helt flat design for noen år siden. Alle trendene nå peker mot en subtil blanding.

Erling: Som de har valgt å kalle neumorfisme.

Anders: Her er det ingenting av det. Her er det helt flatt. De bruker ingen skygger. Du får ingen dybder.

Erling: Når du hovrer så får du litt skygge. Nede er det litt skygger på noen bokser. Kanskje litt feil å si det i en podkast om universell utforming, men det kjennes uinspirert litt streit ut. Det kjennes ikke designet ut.

Anders: Det kjennes uferdig ut.

Erling: Enig.

Anders: Men det er ikke et krav å følge trender, det er ikke det jeg sier. Men det er nå engang slik at det som er trenden, føles som normalen, og når det avviker fra normalen, så kjennes det litt feil ut.

Erling: Men kontraster er bra.

Anders: Ja! De kjører jo gult på sort, og sort på gult. Den miksen fungerer veldig bra. De har jo gul og sort i logoen sin. De bruker rød òg i logoen sin. Dette er jo farger som kommuniserer lavpris.

Erling: De bruker òg roterende bannere, en hel del. Det første elementet med kampanjer og tilbud, er roterende. Produktene er roterende. De neste under der er roterende.

Anders: Det er de glad i.

Erling: Da får de inn så mye mer.

Anders: De har ikke vært innom shouldiuseacarousel.com.

Erling: Stemmer det. Hva står der?

Anders: Du får gå inn og se, kjære lytter. De har produkter og en karusell med … jeg vet ikke hva det er. Kampanjer det òg?

Erling: Høres litt stygt ut, men er det markedsavdelingen sin karusell?

Anders: Det er det.

Erling: Der får de inn de tingene som de vil ha inn. Så har de en karusell med tjenester.

Anders: Er det òg en karusell? Ja! Men pilene ligger utenfor mitt vindu, så jeg så ikke at det var en karusell.

Erling: Produktene på toppen òg.

Anders: Ja, men der ligger pilene innenfor. Pilene til tjenestene ligger utenfor.

Erling: Ååå.

Anders: Det er ikke helt responsivt.

Erling: Den i midten der bruker slike små prikker under. Litt inkonsekvent.

Anders: Ja, men det synes jeg er greit, fordi det er ulike typer karuseller. De pilene drar jo produkt for produkt.

Erling: Det som gjør dem ulike er at den med sirklene er full bredde. De andre er ikke det. Det er jo et designvalg. Det står ikke og faller på det.

Anders: Men det er gode kontraster. De bruker ikke bilder med tekst i.

Erling: De bruker bilder med tekstbokser, som er bra.

Anders: Der har de tatt hensyn til lesbarhet. Så bra. Skal vi klikke på nettbutikk òg, for å ta en visuell vurdering der òg?

Erling: Det kan vi godt gjøre. Da kom det en popup. «Velg din butikk for å se priser og lagerstatus NB. Butikker merket med stjerne tilbyr ikke netthandel.». Kjekt du ville ha meg på besøk. Dette var jo veldig fiendlig. Jeg klikker den vekk. Det var jo en bra start. Denne ser jo annerledes ut.

Anders: Jeg vil jo si at å velge butikk for å se priser og lagerstatus, lagerstatus kjøper jeg, men spør meg om dette når det er aktuelt, når jeg lurer på lagerstatus. Jeg blir stresset av å vite at ulike butikker har ulike priser. Det betyr at hvis Byggern finnes i Sandnes, og jeg finner produktet mitt i Sandnes – bør jeg sjekke Stavanger òg? Bør jeg slette cookien min og så velge Stavanger? Og så sjekke samme produktet?

Erling: Hehe. Du er redd for å bli lurt.

Anders: Jeg er enig i at dette er en dårlig start på besøket.

Erling: Ja. De undervurderer hvor mange som går inn bare for å sjekke pris og om dette er en plass de ønsker å handle. De antar at de som kommer her kommer for å kjøpe noe. Det er en feil antagelse.

Anders: Så skal jeg ikke akseptere cookies for å se om det spørsmålet dukker opp neste gang.

Erling: Og om ting fungerer.

Anders: Her har de en nettbutikk, og der er det mer detaljer. Mer skygger og …

Erling: Gulere.

Anders: Ja, det ser litt mer gjennomarbeidet ut. Fortsatt gode kontraster.

Erling: Kjennes fortsatt umoderne. Vet ikke om det er vits å nevne det.

Anders: Men her bruker de bilder med tekst, som er dumt, for da kan du ikke forstørre teksten. Og hvis du forstørrer bildet blir teksten uklar, som ødelegger lesbarheten. Så de store klubbtilbudene sine – de har en Dewalt drill, som er et stort bilde.

Erling: Og her kan jeg røpe at de har en image uten alt-tekst i det hele tatt.

Anders: Helt utilgjengelig informasjon.

Erling: Så viser de ting på forskjellige måter. De har en som heter Byggern kampanjeprodukter, som viser produktet på én måte med pris under, så kommer det «Noe for deg?» som vises uten pris. Våre bestselgere er uten pris. Litt inkonsekvent. Er vi ferdige med den visuelle? Er det noe mer vi vil si?

Anders: Nei.

Erling: Da kan vi gå videre.

Anders: Vi kan jo si litt om bildebruken, om den er bra? Jeg synes produktbildene er tydelige. De har litt stock, men ganske lite. Bildene ser generelt sett ganske bra ut.

Erling: Jeg er enig. De får nok tilsendt bilder fra leverandørene, at de ikke tar dem selv.

Anders: Det er en dame som leser i en katalog, i en Byggernkatalog.

Erling: Hvor er du nå? På forsiden?

Anders: Ja, jeg er på forsiden, i den karusellen.

Erling: Jeg så bare på nettbutikken, helt nederst så er det «Nå kan du betale med Vipps», et lite bilde som er skalert ned. Der var det dårlig, tre bilder med tekst på. Med tom alt-tekst. Da kan vi gå videre, tastaturnavigasjon med skjermleser.

Tastatur og skjermleser

Erling: Skrur du på?

Anders: Ja. Da må vi minne om oppgaven vår, vi skal finne et kjøkkenpanel. Da skrur jeg på skjermleseren VoiceOver.

Skjermleser: VoiceOver på Safari. Forsiden vertikal linje Byggern.no. Ny fane knapp har tastaturfokus. Opprett ny fane.

Anders: Det var bra det, så langt. Jeg har to kommentarer der. Vertikal linje, det tror jeg ikke vi har nevnt tidligere. Det er jo noe vi hører mye, det er vanlig å ha i tittelen på en side. Det er en generell beste praksis innenfor søkemotoroptimalisering (SEO) at du har innholdet på siden, så vertikal linje (en pipe), og så navnet på nettstedet.

Erling: Det trenger ikke å være en pipe? Eller skal det være pipe spesifikt?

Anders: Ja, det er mest brukt.

Erling: Ikke bindestrek?

Anders: Nei. Men med tanke på skjermlesere ville nok bindestrek vært bedre. Men jeg kan ikke klandre dem. Men jeg vil si at det er dumt, ikke veldig dumt, nå flisespikker jeg, men det er dumt å bruke Byggern.no som halen i tittelen, fordi tittelen, fra et SEO-perspektiv, er jo viktig, og du bruker tre unødvendige tegn der, som du kanskje vil bruke til noe annet.

Erling: .no altså.

Anders: Ja. Det er forskjellige fremgangsmåter å bruke en skjermleser på. Vi har testet ulike. I dag tar vi den vanligste, som er å bruke tab-tasten. Da hørte vi en blupp. Det er min feil. Jeg flyttet skjemleserteksten, og da får den fokus.

Erling: Én gang til.

Skjermleser: Forlater forsiden byggern.no. Går inn i forsiden byggern.no nettinnhold. Lenke. h t t p s kolon skråstrek skråstrek v v v bygging.no navigering. Mal huset før høststormene kommer. Maling av beste kvalitet. Vi leverer varene hjem til deg. Flyttet inn i ny bolig? Vi har det du trenger.

Erling: Hva er det som skjer nå, Anders?

Skjermleser: Voiceover av.

Anders: Det kan jeg forklare. Dette er litt interessant. Det vi hørte var at den banneren, den karusell nummer to, som vi ikke helt visste hva var, den vi lurte på om var markedsavdelingen sin plass. Hver gang den skifter side, den skifter automatisk, så overtok fokuset til skjermleseren, ikke tastaturet. Tastaturfokuset står fortsatt på logoen. Vi hørte at logoen ikke har alternativ tekst, derfor hørte vi hele adressen. Veldig irriterende. Det fikk vi ikke hørt ferdig, fordi banneret tok over. Det er litt interessant fordi det er det samme som skjer visuelt, som med skjermleseren. Når du har en karusell som automatisk oppdaterer seg, så stjeler du oppmerksomheten vår. Det skjedde jo nå. Vi ble forvirret. Det er kanskje den effekten de ønsker å oppnå. Som skjermleserbruker så stopper vi her.

Erling: Nei, nå går vi ikke videre.

Anders: Dette kommer til å skje igjen.

Erling: Og svaret på hvorfor dette skjer er fordi de bruker aria-live="polite" på den karusellen.

Anders: Å, de bruker polite?

Erling: Ja, så den ble ferdig med logoen.

Anders: Da hadde jeg feil.

Erling: Den oppfører seg helt rett, den skal lese opp endringene.

Anders: Da vil jeg være så streng å si at de ikke vil ha meg som skjermleserbruker, for det orker jeg ikke.

Erling: De har nok ikke testet med skjermleser.

Anders: Det som jeg ble veldig nysgjerrig på nå, er at WAI-ARIA har jo det de kaller designmønstre for komponenter som ikke er standard, blant annet karuseller. De har anbefalinger på hvordan du skal kode en karusell. Nå er jeg nysgjerrig på om de sier noe om aria-live eller ikke.

Erling: Jeg ser òg at de bruker en slider som heter Slick slider. Den husker såvidt at det var en ganske vanlig slider i sin tid.

Anders: Jeg har aldri hørt om den, men det betyr ikke så mye.

Erling: «The last carousel you'll ever need». Vi jukser litt nå.

Anders: Vi er dypt inne i jukseland.

Erling: Men de kan ikke anbefale å ha aria-live. Det er rart at de har lagt det inn.

Anders: WAI skriver at du kan bruke aria-live="polite" hvis karusellen automatisk ikke oppdaterer seg. Så de følger ikke anbefalingene.

Erling: Nei. Men jeg mistenker at dette er innstillinger på Slickslideren, den har mange innstillinger. De har nok satt på begge de to.

Anders: De har nok det.

Erling: Det er nok ikke standardinnstillinger.

Anders: Nå avslutter vi skjermleseren.

Erling: Den feilet, det vil ikke være brukende.

Anders: Vi fortsetter med tastatur. De har tydelig tastaturfokus rundt logoen sin.

Erling: Standard fokusvisning.

Anders: Jeg kommer til første valg i menyen som heter nettbutikk. Jeg vil si at de har bra padding. Du kan bruke standard fokusvisning men med liten padding rundt. Da blir ikke visuell fokus så bra. Det jeg lurer på når jeg kommer til en lenke som heter nettbutikk, hva er jeg da på? Hva er det å gjøre her? Jeg ser at de har noe som heter butikker.

Erling: Veldig rart at de har valgt å ha en egen side utenfor nettbutikken. De har butikker på nettbutikken òg. De har proff på nettbutikken òg. De har til og med tips og råd, de har de samme valgene i nettbutikken. Spørsmålet er om det sender oss tilbake her. Dette er snodig. Og så kommer den popupen hver gang jeg går til nettbutikken. Forsett med tastatur.

Anders: Nå klikket jeg på nettbutikk. Det er der jeg vil inn. Da fikk jeg modalen …

Erling: Men du, vi skal ikke skru på skjermleseren her? For å se hvordan den popupen funker.

Skjermleser: Voiceover på Safari. Forsiden. Close og to til. Nettdialogrute.

Anders: Min første opplevelse på nettbutikken er close og to til. Nettdialogrute. Vi avslutter her, det er ikke vits.

Erling: Det som var bra her er at vi vet at vi er i en dialog. Det som er vanlig er at den ligger i bunn av DOM-en, slik at vi ikke får beskjed om det.

Anders: Det var bra, men knappen heter Close. De har ikke satt tittelen på modalen. Det er òg et tips, følg WAI-ARIA sine anbefalinger om modaler. Da er vi tilbake med tastatur. Jeg ser en modal. Første tastaturstopp er den x-en, den lukkeknappen, som vi hørte. Der har de valgt en svakere fokusmarkering. De har overstyrt nettleserens standard, og så har tonet den litt ned, et teit grep. Men jeg skal ikke lukke denne.

Erling: Jeg har en mistanke som kan være feil. De har opacity 0.2. Det kan være at fokusmarkeringen arver den opacityen.

Anders: Vi kan velge fylke og gjøre det de ber oss om her. La oss være litt flinke gutter.

Erling: Det funket å lukke boksen med escape.

Anders: Jeg går ned til fylke, det har bra fokusmarkering. Den funker bra med tastatur. Jeg velger Rogaland. Enter. Da fikk jeg beskjed om at det er Byggern på Karmøy og på Moi. Da var jeg sannsynligvis i Hordaland i helgen.

Erling: Ingen i Sandnes eller Stavanger eller omegn.

Anders: Nei. Jeg må nå velge Karmøy eller Moi. Hva tror du er nærmest?

Erling: Du må ikke spørre meg om slikt, jeg er så dårlig på geografi og lignende.

Anders: Jeg tar Moi. Byggern Moi. De har en tydelig fokusmarkering på velg, men bruker kun farge.

Erling: Hvorfor er det litt dumt?

Anders: Hvis du ikke vet hva fargen var i utgangspunktet, så vet du ikke hvor fokuset er. Hvis vi nå ser litt bort og ser tilbake, og lurer på hvor du er, så klarer du ikke nødvendigvis å se det. Da må du vite hvordan den så ut før du begynte.

Erling: Og det kan òg være et problem for fargeblinde.

Anders: Ja. Vi tar velg på den. Nå er jeg på Byggern Moi. Åpent i dag. Starter å tabbe. Jeg kom rett til en som heter Hopp til hovedinnhold. Bra! En uvanlig måte å presentere den på. Det er bra at de har den.

Erling: For de med skjermleser så er det ubetydelig hvordan den ser ut.

Anders: Ja, men for oss med tastatur så betyr det litt.

Erling: Jeg må bare si, jeg prøvde å tabbe rett etter at jeg lukket den modalen, da vet jeg ikke hvor jeg er. En usynlige fokusmarkering et sted. Hopp til innhold er der, men det er noe med fokusrekkefølgen der.

Anders: Ja, fordi jeg kommer fra Hopp til innhold, så kommer jeg til bytt butikk i toppen, som står med veldig liten skrift, som har veldig svak fokusmarkering. Etter det går jeg til butikkinfo. Hvor faller du av?

Erling: Jeg får ikke Hopp til innhold på første tabb. Jeg trykker escape, trykker tabb, så scroller den helt til bunn. Tabb én gang til. Da er det nettleseren som får fokus, altså chromen til nettleseren. Det er sannsynligvis siste elementet som får fokus.

Anders: Da får vi det ikke likt.

Erling: Det er fordi jeg trykket escape på velg butikk.

Anders: Du er ikke inni en butikk, nei.

Erling: Nå er jeg det. Nå er jeg inne i en butikk.

Anders: Det var jo et funn det, at du må velge butikk for at det skal få …

Erling: … en naturlig fokusrekkefølge. Du skal jo finne kjøkkenpanel.

Anders: Jeg tabber meg fra logo, logg inn, produkter. Da trykker jeg … skal jeg søke eller gå inn på produkter?

Erling: Gå inn på produkter, vi pleier jo å søke. Hva skjedde nå?

Anders: Nå kom jeg ned til noe som heter vårt produktutvalg, jeg hoppet bare lengre ned på siden. Toppen ble kollapset til en hamburger og et søkefelt. Det synes jeg er helt greit. Tastaturfokuset ble flyttet til hamburgeren, som ikke er greit, for jeg har jo valgt et valg i menyen. Ikke la meg åpne menyen på ny.

Erling: Prøv å tabb nå.

Anders: Det gikk ikke. De flytter meg ned, og når jeg tabber blir jeg flyttet opp igjen. Det som skjedde nå var jo at produkter forsvant fra hovedmenyen. Det får tastaturfokus, men jeg får ikke se det. Hamburgeren kan jeg ikke åpne med tastatur.

Erling: Nå har jeg prøvd å tabbe, for jeg blir scrollet ned. Jeg må forbi mange, mange, mange produkt.

Anders: Dette gidder jeg ikke. Nå er jeg i søkefeltet. Jeg skriver kjøkkenpanel. Her åpner det seg en modal mens jeg skriver. Det er veldig mye som skjer. På godt og vondt. For det første så står det artiklar med a. Jeg vet ikke hva de mener med artiklar, eller, jeg forstår jo. I bunn er det kanskje en knapp. Ja, Vis alle søkeresultater. Det ble 404.

Erling: 404?

Anders: Ja, jeg mener ikke at siden ikke er funnet. Det var tilfeldig at det var 404 artikler som ble funnet.

Erling: En liten observasjon her, jeg hadde åpent inspektoren, så den gikk over litt av den autosuggest-greien, så da så jeg ikke hva som skjedde. Dersom noen har et vindu som er lavere enn modalen, så vil de ikke få med den informasjonen.

Anders: Når jeg skriver «Kjøkkenpane» så får jeg 31 produkter. Det ligger i en kategori som heter kjøkkenplater, med underkategori bad- og våtromspanel. Hvis jeg skriver «kjøkkenpanel» så forsvinner alle treffene. Det er ingen treff på «kjøkkenpanel», derfor må jeg søke etter «kjøkkenpane». Mitt kriterie til kjøkkenpanel er at det ikke er noe som etterligne noe. Jeg vil ikke ha et panel som ser ut som skifer.

Erling: Ikke noe som ser fake ut. Hva gjenstå da?

Anders: Jeg har søkt etter kjøkkenpanel, jeg trykker tabb én gang. Da forventer jeg å komme til første artikkel, det de kaller artikkel, som jeg kaller produkt. Da lukker modalen seg.

Erling: For du va fortsatt i den autosuggest-greien? Jeg trykket enter og kom til enter og kom til resultatet.

Anders: Ok, da gjør jeg det. Jeg hadde tenkt å gi opp, siden jeg ikke kom meg ned til modalen. Godt poeng. Jeg har nå søkt etter «kjøkkenpane», for jeg vet at jeg ikke kan søke etter «kjøkkenpanel». Trykker tabb og kommer til Hopp til innhold.

Erling: Til deres forsvar så har de ikke noe som heter kjøkkenpanel, så det er naturlig at vi ikke får noen resultater på kjøkkenpanel.

Anders: Jeg synes ikke det er forsvar, hvis det er det folkelige begrepet, noe jeg ikke vet fordi dette er ikke mitt domene.

Erling: Her bruker de kjøkkenplate, for det er det som er begrepet.

Anders: Hvis noen andre enn oss gjør det samme, så bør de legge inn kjøkkenpanel som søketerm.

Erling: Nå søkte jeg etter «kjøkkenpanel» i Google og fikk opp Monter med hovedtittel kjøkkenpanel, men alle produktene heter kjøkkenplate. De har da gjort det som du sier, at de har tatt hensyn til at noen sier kjøkkenpanel. Dette handler òg om universell utforming.

Anders: Absolutt. Det som skjedde nå var at jeg har søkt på kjøkkenpane, og gikk til Hopp til hovedinnhold. Da ble jeg rullet ned, men toppen står igjen som fixed. Nå er jeg et sted som er skjult. Jeg trykker på tabb og jeg ser ingenting. Jo, tabfokuset ligger nå bak den fiksede toppen.

Erling: En klassiker.

Anders: Ja. Jeg vet ikke hvor jeg er nå. La oss legge godviljen til. Jeg ser at jeg er på en lenke som heter «kjøkkenplate skifer», den vil jeg ikke ha. De har to tastaturstopp per produkt, ett på bilde og ett på tittelen. Unødvendig. Bruk samme a-en på begge. Kjøkkenplate sement, den vil jeg ikke ha. Kjøkkenplate sement fiskebein, sandstein, kjøkkenplate børstet alu.

Erling: Det er jo ikke etterligning?

Anders: Ikke? Da kan jeg kjøpe! Greit. Jeg vil jo si at produktnavnene er ganske krise. De har noen ganger metainformasjon, eller produktinformasjon i produktnavnet. For eksempel, dette er et produktnavn: «fibo tresbo». De har en annen som heter «kjøkkenplate børstet titanium slett» og en annen som heter «fibo tresbo kjøkkenplate 4091 km99 sl», det er sikkert varenummeret, «1162058 mm» som er dimensjonen.

Erling: Ganske unyttig.

Anders: Ja, men jeg er på den som heter «allok kjøkkenplate 1940 250 børstet alu». Går inn på den. Går til Hopp til hovedinnhold. Det samme skjer, jeg hopper ut av det jeg ser.

Erling: Og her er det egentlig ganske mye.

Anders: Ja, her er vi på en produktside. Vi har bilder til venstre. Veldig mange bilder, i utgangspunktet bra. Nå er vi inne i lite tiltalende grensesnitt.

Erling: Bare for å ta det, vi er i en nettbutikk for å kjøpe noe, men det er ikke noen kjøpknapp eller noe som indikerer at en kan kjøpe dette. Det har blitt erstattet av «Dette er ikke en normal lagervare. Omkonstninger kan forekomme og kan derfor ikke forhåndsbetales. Kontakt butikken for bestilling». Vil de at jeg skal handle hos dem eller?

Anders: Og med rød tekst, her er det noe feil, kom deg vekk.

Erling: Produkteksten starter med «Aluminium 120 x 60 3,00 PLA X60… » og så kommer det noe generisk tekst og så kommer nobbnummer 45098854 leverandør Alloc. Det virker ikke som om de ønsker å selge. De har bare tatt inn den teksten de har fått som beskrivelse til deres varelagersystem eller noe slikt. Denne kan vi ikke kjøpe, tydeligvis.

Anders: Da går vi tilbake, vi finner et annet produkt.

Erling: Men jeg tror ikke vi skal gå gjennom et helt kjøp. Det har vi ikke tid til.

Anders: Men vi skal prøve litt til. Kjøkkenplate hvit snø. Her kom jeg inn på et produkt. Jeg vil jeg gi dem litt kudos, fordi de har et produktbilde som selvfølgelig ikke viser noe for det er en hvit kjøkkenplate og det er begrenset hvor mye du kan vise av det på hvit bakgrunn.

Erling: Det er hvitt på hvitt.

Anders: Men de har et miljøbilde, og det er det jeg er interessert i nå. Jeg vil se hvordan dette vil se ut ferdig montert. Hopper til hovedinnhold, og så tabber jeg meg forbi brødsmulestien. Synes det er litt kjekt at de blander store og små bokstaver i brødsmulestien. Det første tabbstoppen etter brødsmulestien … etter brødsmulestien har vi to kolonner, en med bilder og én med produktinformasjon. En stor kjøpknapp som av en rar grunn er sort. Første tabbstoppen er Del på Facebook.

Erling: Er det der den er?

Anders: Ja. Det er en blå knapp, så det er vanskelig å se den. Denne er under kolonnene, så tabbrekkefølgen er helt feil.

Erling: Og hvor mange er det som bruker slike delingsikoner?

Anders: Ingen. Dersom du er på en side på internett og ønsker å dele den, så forstår du hvordan du skal gjøre det, uten den knappen.

Erling: Du gjør det på andre måter.

Anders: Videre til Tweet. De ønsker at jeg skal tvitre om dette før jeg skal kjøpe det. Nå tror jeg at jeg er på Pinterest, men nå er jeg ute av det.

Erling: Du er på antall. Nei. Du er på enhet, du kan velge enhet. Stk, pall, m2.

Anders: Jeg skal se et miljøbilde! Jeg får det ikke til.

Erling: Jeg må bare kommentere denne enheten som du skal velge. Jeg tror det er lagerarbeiderne som har laget denne nettbutikken. Her kan du velge stk, pal, m2. Hva i alle dager er det de forventer at brukerne skal være i stand til å vurdere her? Hva betyr pal? Er det antall paller?

Anders: Ja. Det er for proffmarkedet.

Erling: m2.

Anders: Jeg legger godviljen til, så forstår jeg det.

Erling: Hvis det er for proffmarkedet, så kjøper jeg det. Til deres forsvar. Da jeg valgte pal, så kom det opp en tekst ovenfor: En pal inneholder 28,8 kvadratmeter. Men er dette for proffmarkdet? Det er en egen proff i menyen.

Anders: Men det kan jo være at det er noen som er mer bevandret enn oss, og vil kjøpe en palle.

Erling: Ja, men det skulle jeg likt å brukerteste.

Anders: Jeg kjøper at du kan velge mellom stykk og kvadratmeter. Det står jo at dette koster 579 per kvadratmeter og ett panel er 0,72 kvadratmeter. At jeg får valget mellom stykk og kvadratmeter, det kjøper jeg. Men skriv det ut, og la det være ledetekst på nedtrekksboksen.

Erling: Og jeg må si at jeg har jobbet med nettbutikker som har denne typen varer, og dette er vanskelig. Både for brukeren å forstå, og å ta et valg om hva som skal være i fokus. Hva skal være den enheten du har som standard.

Anders: Jeg har valgt kvadratmeter. Kjøpknappen får jeg ikke fatt på. Det kan være fordi det er null stykk på lager. Det de har gjort – kjøpknappen er egentlig sort, men deaktivert så er den mørkegrå. De har endret en liten nyanse i å fortelle meg at den …

Erling: Men jeg har null på lager, og min er sort, og jeg kan trykke på den. Jeg valgte stykk.

Anders: Ja! 1 stykk får jeg kjøpe, men jeg får ikke kjøpe 1 kvadratmeter. Hæ?

Erling: Du må kjøpe en hel pakke.

Anders: Du har nok rett.

Erling: Jeg har en mental modell om hvorfor du ikke fikk lov.

Anders: Men det at de visualiserer en deaktivert tilstand med bare bittelitt lysere farge, det er ikke godt nok. Jeg får kjøpe en stykk kjøkkenplate. Nå er jeg på kjøp. Der bruker de gul som tastaturfokus. Jeg trykker på Kjøp. Forventet leveringstid for varer som mangler på lager er 7 til 10 dager mellomrom utropstegn. Det kommer opp i en modal. Jeg trykker OK på den. «Produktet ditt er lagt i handlevognen». Jeg har ikke fått muligheten til å se bilde av det.

Erling: Jeg trykket escape på den og fikk ikke beskjed om at den var lagt i handlevognen.

Anders: Forventet du det?

Erling: Ja, jeg har fått med meg den beskjeden.

Anders: Men nå har de en tastaturfelle. Det som skjedde nå var at de har en modal som ser annerledes ut enn de andre modalene vi har sett. Og den har ikke tatt tastaturfokuset mitt, og fokuset mitt er på baksiden av modalen, og jeg kommer meg ingen vei nå.

Erling: Uansett hvor mange ganger jeg tabber, så får den aldri fokus.

Anders: Dette er en tastaturfelle, og det er jo et WCAG-kriterie. Det er veldig sjelden at jeg ser.

Erling: Men er det egentlig en felle? Er ikke en felle at du havner inn i noe som går i sirkel? Du kommer ikke inn i den.

Anders: Godt poeng.

Erling: Jeg vet ikke om poenget var så bra.

Anders: Nå er jeg her. Jeg har ingen mus, fordi trackpaden min er ødelagt. Jeg får ikke kjøpe dette med tastatur. Jeg har ikke sjans. Ferdig med tastatur.

Kode

Erling: Da er det kode. Kjører kjapt gjennom den. Jeg har da evaluert forsiden. Nå ser jeg at jeg burde ha tatt nettbutikken òg. De har lang. De har landemerker. Tips og råd-artiklene har ikke article, det kunne de hatt. Headingstrukturen er ganske grei. Det jeg fant var at produktene går fra h2 til h4, og det mangler et nivå inni der. De har alt på imagetaggene, men det er 169 imagetagger, men jeg ser ikke så mange på forsiden. Det er fordi de er i karusellen. Det er 169 produkter i karusellen. Jeg lurer på hvor mange som ser produkt nummer 169 i den karusellen der. Det kan ikke være mange. Så sjekket jeg søkefeltet. Der har de feilet ganske godt. Det er kun et inputfelt, ingen form rundt, ingen label. Det som fremstår som placeholderteksten er en p med HTML-attributtet color erlik #000000. Et attributt som er utgått for mange år siden. Det føles veldig gammeldags ut. Inputfelt for butikksøk har samme mønster, men uten colorattributtet.

Anders: Men jeg har aldri sett det før, at de bruker en p som en placeholder.

Erling: Og koden endrer seg ikke hvis du trykker på søk, heller. Det var det. Det var ganske greit, utenom det søkefeltet. Vel og merke på forsiden, ikke nettbutikken.

Automatisk test

Erling: Hvordan gikk den automatiske testingen?

Anders: Jeg gjorde samme tabben som deg, jeg tok kun forsiden. Og det er jo ikke kjernen i løsningen. Der var det 16 feil fordelt på 7 typer. I kulissene her har jeg tatt nettbutikken òg. På forsiden så er det mye aria og det er karusell, det er konklusjonen. Vi vet det at vi bruker aria med gode intensjoner, men vi feiler. Det er litt mange fallgruver å gå i. Det ser vi på den store undersøkelsen gjort av WebAIM, de sidene som bruker Aria, som bør være tilgjengelige, er mindre tilgjengelige enn de som ikke gjør det.

Erling: Det er snodig og interessant.

Anders: Det kan jo være at de som bruker Aria har flere avanserte komponenter. Jo flere avanserte komponenter, jo lettere er det å feile. De har prøvd. De bruker aria-selected på en li, som ikke er lov. Jeg vet ikke hvilke praktiske komplikasjoner det har.

Erling: De bruker aria-live, det har vi jo opplevd.

Anders: Her er det nok et eksempel på at vi trenger en karusell, en tredjeparts karusell, de sjekker ikke tilgjengeligheten på karusellen, bare plugger den inn. Klikker seg gjennom, den funker, markedsavdelingen er fornøyd, men de har ikke forstått hvilke implikasjoner det har.

Erling: Jeg tipper at den Slick carousel har en innstilling som heter accessibility yes/no, eller noe slikt, så har de satt yes på den, og på automatic.

Anders: Så har de en selvmotsigende praksis, at de bruker aria-hidden på en li som har en knapp med tastaturfokus, så da mister du den for skjermleseren.

Erling: Ble det plukket opp i den automatiske testen?

Anders: Nei, vi kom aldri så langt.

Erling: Hæ?

Anders: Jo, det ble plukket opp. De bruker role="listbox" på kampanjeprodukter. Denne listboxen har ikke et tilgjengelig navn. Jeg mistenker at det er en misforståelse av hva en listbox er. En listbox er en liste som ofte er under et innskrivningsfelt der du kan velge én eller flere elementer. Det gir ikke mening på kampanjeprodukter. Så bruker de tablist i karusellen, men de bruker ikke tab. Når du skal lage tabber, så består de av tre ting – tablist, tab og tabpanel. De har brukt én av de tre, så puslespillet er ikke komplett. De bruker feil verdi på aria-controls, og på karusell. Jeg skjønner ikke hvorfor. De sier altså at dette elementet her kontrollerer noe annet, men de henviser til noe som ikke finnes, så da vet ikke skjermleseren hva den skal kontrollere. Men, uansett en generell anbefaling, selv om WAI-ARIA ofte anbefaler aria-controls, så er det en kar som heter Heydon, en uu-guru. Han sier aria-controls is poop. Han har en artikkel som heter det. Det handler rett og slett om at det er for dårlig støttet. Verktøyet plukker opp lav kontrast på en knapp, som jeg ikke får opp. «Finn butikker nær meg». Var det den du ble møtt av i starten?

Erling: Nei, men jeg vet at det er en knapp, men den har god kontrast. Den er rød med hvit tekst.

Anders: Tom alt-tekst på logoen. Det gjorde jo at vi hørte H T T P S på logoen.

Erling: Jeg må korrigere meg selv. Kontrasten på den røde og hvite var 4,1, så den var for dårlig.

Anders: Det var 16 feil fordelt på 7 typer. De fleste av disse feilene handler om karusell og er nok fra et tredjeparts komponent.

Erling: Men det er fortsatt Byggern sitt ansvar.

Anders: Jaja! Men så tok jeg en rask sjekk på forsiden til nettbutikken òg. Der er det 30 feil. Der har de 16 feil på noe som heter aria-hidden-focus. Dette er litt faren med å gjøre ting på direkten.

Erling: Du vet ikke hva det er? Må du Google?

Anders: Nei, jeg misforstod. Det betyr ikke at det er et attributt som de bruker feil. Det betyr at de har fokus på noe som er aria-hidden.

Erling: Noe som har aria-hidden som ikke burde hatt det.

Anders: Eller noe som er aria-hidden som ikke bør få fokus. Men det handler òg om denne karusellen. Det er Slick. De har tre knapper uten navn. Det forstår jeg ikke helt, for de har skrevet Søk i en span i søkeknappen sin i en button, som bør være greit. Hmm. Nei! Nå skjønner jeg det. Dette er faren med å gjøre det på direkten. Krever litt mer tenketid. De har gjort et ganske uvanlig grep på søkeknappen. I søkeknappen, som er en button, som er bra, så har de to spaner. Den ene inneholder ordet Søk, og den andre er bare et ikon. De bruker nok det på å skille mobil og desktop. Av og til står det Søk og av og til kun et ikon. Når du er på mobil, får du kun opp ikonet, og ikonet har ikke tilgjengelig navn. Da blir det umulig å søke.

Erling: Hvor mange feil hadde de?

Anders: 30. Tre av dem var på button name.

Erling: Hvor graverende er disse feilene?

Anders: Fire på kontrast. Én duplikat ID. To image alt. Fire lenker uten navn, som er litt samme feilen som button. Ja, de har feil. Vi har nå vært gjennom automatisk testing.

Rangering

Erling: Måten vi rangerer på er at vi gir poeng fra -1, 0 til 1. -1 er dårlig. 0 er greit. +1 betyr at at det er ganske greit. Vi kjører gjennom 10 forskjellige ting. Den første er en generell vurdering, som ikke telles med. Så summerer vi opp til slutt og ser hvordan de ligger ann, i det store bildet. Generell vurdering først, er du klar? Klar ferdig gå. Begge ga minus. Jeg stoppet litt opp, for koden var jo ganske bra. De har bra bildebruk. Men det var mye som feilet. Neste er skjermleser. Minus på begge. Måten vi gjør det på er at vi viser et tegn med hånden slik at vi ikke påvirker hverandre. Tastatur, er du klar? Minus på begge.

Anders: Opplagt.

Erling: Farge og visuelt. Du ga 1, jeg ga 0. Jeg vurderte 1, og tenkte hva jeg kan trekke dem for. Det var ikke så mye. Det jeg havnet på var at det kjentes litt rotete ut, med alle karusellene og slikt. Jeg vet ikke om vi skal trekke det på det visuelle?

Anders: De får så mye pepper for de karusellene i de andre kategoriene.

Erling: Vi kan godt gi 1, de har gjort mye rett. Gi 1. Automatisert test. Minus.

Anders: Det var for mye feil.

Erling: Språk, er du klar? Begge minus. I dag har vi snakket ganske mye om språk. At ting var uforståelig.

Anders: At produktnavnene er litt forvirrende og at de er inkonsekvente er nok et resultat av at de bare får ting fra et baksystem, uten å vaske det. Her handler det om datakvalitet i høy grad.

Erling: Navigasjon. Ikke helt klar? Du tenker. Du ga 0, jeg ga minus. Jeg ga minus fordi hamburgermenyen var utilgjengelig på tastatur.

Anders: Det får du ikke lov til, det har vi straffet for.

Erling: Søket funket.

Anders: Det som jeg trakk dem for, for navigasjonen var ganske bra, det er at de hadde kun produktmenyen sin som et innholdskomponent.

Erling: Ja.

Anders: De hadde ikke den som et globalt element.

Erling: Jeg må inn å sjekke. Hva skjer dersom du trykker på den når du er på en underside? Da dukker den opp som en megameny.

Anders: Åja.

Erling: Samme elementet som de har på forsiden, bare som en megameny. Veldig rart. Men vi skal ikke grave oss ned i det. Vi gir dem 0, ja. Kodekvalitet. Da tar vi kun forsiden.

Anders: Akkurat da du snakket om kodekvalitet så hørte ikke jeg etter, for jeg var opptatt med den automatiserte testen. Jeg var en dårlig medvert. Du gir 1 i kodekvalitet? Det er litt gøy. Kodekvaliteten er generelt bra, men at de likevel klarer å snuble og feile så mye.

Erling: Det meste var bra. Det er to ting jeg husker på sparket, og det var fra h2 til h4, og det er ikke en stor deal, og så var det søkefeltet som feilet totalt. La oss ta bilde og video. Klar?

Anders: Ja, og da gir jeg ikke trekk for at jeg ikke klarte å få opp det miljøbildet med tastatur.

Erling: 1 på begge. Ingenting å trekke dem for. Bildene var fine. Det var jo en del tekst på bilde, da? I nettbutikken. Skulle vi ha trukket for det? Det var ganske mye.

Anders: Var det det?

Erling: Helt øverst på forsiden, og på kampanjebilder.

Anders: Veldig godt poeng. Hmm.

Erling: Det er jo én av kardinalfeilene når det kommer til bilder.

Anders: Jeg er med. Det blir 0.

Erling: Så til skjemakvalitet.

Anders: Vi var innom to skjemaer.

Erling: Den første var velg butikk.

Anders: Vi har jo sagt tidligere at selv om søk teknisk sett er et skjema, så ser vi på det som navigasjon.

Erling: Er du klar? Hva var det andre skjemaet?

Anders: Stykk og pall og kjøp.

Erling: Klar, ferdig, gå. Begge ga minus. Jeg vurderte null.

Anders: De mangler ledetekster.

Erling: Den dropdownen i butikkvelgeren funket ikke i første forsøk, jeg måtte jukke den til litt. Til slutt, den generelle vurderingen. Hmm. Klar, ferdig, gå. Jeg visste at du kom til å gi minus. Jeg vurderte 0. Jeg visste at du trakk for skjermleser og tastatur.

Anders: Jeg skal erkjenne det, at skjermleser og tastatur ikke er alt.

Erling: Du får en dårlig følelse, vi kan ikke si at det er OK, når det feiler på det. Det må bli minus. Nå har du kjørt gjennom en voldsom formel, så nå har vi et resultat.

Anders: Først vil jeg si at vi har jo vært i kontakt med Byggern. Vi varsler jo de vi skal teste. Som alle, veldig positive, og ønsker å forbedre seg. Kjekt at folk har den innstillingen.

Erling: Enig! Før vi begynte med denne sesongen, var jeg litt redd for at folk skulle reagere negativt. At de ikke ville bli eksponert for sine feil. Alle har vært positive. Hva ble scoren?

Anders: Skalaen går fra 0 til 100, der 100 er best. Vi har gitt 100 til Yr.

Erling: Det betyr ikke at de var perfekte.

Anders: Å nei. Men ut fra denne grunne evalueringen kunne vi ikke gi dem dårligere. Men dette er ikke en fullstendig evaluering. Byggern fikk 30 poeng. Det er langt nede. Det er på 2. plass. Jobbmesse fikk 13, for noen episoder siden. Dette er 14. episoden. Neste episode skal vi ta Finansportalen. De har jeg òg fått svar fra, de gleder seg til å høre. De er litt flaue, for de vet at de burde være så mye bedre, så de var litt flaue, men òg positive.

Erling: Er ikke det ganske vanlig i svarene, at de vet at de ikke er så gode?

Anders: Jo, og den bevisstheten er et godt utgangspunkt.

Erling: Men det er òg et lite tankekors. Hvis de vet at de er dårlige, hvorfor tar de ikke grep?

Anders: Det er ganske lett å svare på. Jeg opplever at alt som går på utvikling av digitale tjenester i dag, har blitt et så uoversiktelig landskap, med komplikasjoner og arv. Det er sammensetning der vi ikke klarer å fikse ting på en enkel måte. Det burde ikke være slik.

Erling: Det er en forklaring, men ikke en unnskyldning.

Anders: Nei, på ingen måte.

Erling: Universell utforming er så grunnleggende. Mye handler om god kodekvalitet og design. Det er ikke noe ekstra, det handler om kompetanse. Det handler om bevissthet. Gjør det riktig fra starten. Ikke tenke når du er ferdig, oi, vi skulle gjort noe med uu. Da gjør du det vanskelig for deg selv.

Anders: Selvfølgelig helt enig. Det jeg vil si er at det er stor forskjell på teori og praksis. Jeg har vært på prosjekter der en bruker tre uker på å endre farge på en knapp. Det er realiteten dessverre. Vi har malt oss inn i et hjørne.

Erling: Det er helt sant. Vi får bare fortsette med det vi gjør, så blir det bedre etterhvert. Vi gjør så godt vi kan. Da er vi ferdige. Har du noen minneverdige øyeblikk?

Anders: I dag vil jeg ta frem den deaktive knappen som var mørkegrå. Den gikk fra sort til mørkegrå. Der er det noen som har tatt et valg. Hvis det ikke er mulig å bestille dette produktet, så må vi visualisere det, vi må kommunisere det med en effekt. Hva skal vi velge? Grå! I paletten vår har vi kun én gråfarge, og den er mørke mørke grå. Vi tar den! Ditt minneverdige øyeblikk, Erling?

Erling: Kanskje at de har to sider. To system. To CMS, men som egentlig er det samme.

Anders: Vet du at det er to CMS? De brukte jo Slick-karusellen på begge.

Erling: Det vet jeg ikke, det så bare så forskjellig ut, at jeg antok det. Ikke sikkert.

Anders: Nå skal jeg passe meg litt, men jeg mener at i svaret fra Byggern så sa de at forsiden var nylig oppdatert … De sa at de nettopp har lansert byggern.no. At de ønsker å være tilgjengelig for alle. Er ikke helt i mål, men på vei. Nettbutikken er en eldre installasjon og fra en annen leverandør. De har planer om ny, så de funnene fra i dag, vil de nok ta med seg videre. Da har kanskje meg og deg, Erling, forbedret livet til noen i fremtiden som skal handle kjøkkenpanel i børstet stål.

Erling: Og vi har kanskje hjulpet Byggern til å selge litt mer? Takk for oss. Jeg er Erling fra Okse.

Anders: Jeg er Anders fra Webstep. Hadebra!