UU-podcasten:Universelt utformet

Introduksjon

Anders: Dette er to entusiaster som i løpet av 26 episoder skal diskutere 78 suksesskriterier på en forståelig måte. Dette er universelt utformet.

Erling: Da er du klar, Anders? Har du spist opp kjeksen?

Anders: Jeg har spist opp kjeksen.

Erling: I dag skal vi snakke om WCAG 4.1, i nest siste episode. Det er snart over.

Anders: Vemodig og samtidig, det skal jo føles litt godt å gjøre det komplett.

Erling: Akkurat det skal vi snakke om i neste episode, som blir den siste. I dag skal vi snakke om robusthet og kompatibelhet, hvis det er et ord vi kan bruke, for vi snakker om WCAG 4.1.

Anders: Det er jo de ordene vi brukte sist, så da må vi holde oss til det.

Erling: Være konsekvente. I dag, hvilke suksesskriterier skal vi snakke om dag.

Anders: I dag tar vi kun én. Det er 4.1.2, den heter «navn, rolle, verdi», som kanskje litt intetsigende. Navn handler om tilgjengelig navn. Navn som ikke nødvendigvis er visuelt navn.

Erling: Prorammatisk navn?

Anders: Ja, navn som oppfattes av assisterende teknologi. Nettlesere og lignende. Rolle er hvilken type komponent det er. Vi snakker om interaktive komponenter. Og hvilken verdi den har, hvilken tilstand. I dag skal vi snakke om komponenter, for eksempel skjemaelementer og lenker, at de har navn og roller. Og vi snakker i dag kun om komponenter som er skreddersydde eller egenutviklede, som ikke er standard HTML. Det er en viktig avklaring i dag. Du skal kun forholde deg til denne når HTML ikke strekker til. Når du bygger noe der du bygger det selv.

Erling: Når du må ha noe som ikke eksisterer i HTML, så må du fylle dette kriteriet. Bare for å presisere, og det kommer vi til å presisere jevnt og trutt, og helt på slutten, prøv å unngå å lage egne element. Men hvis du må, så må du passe på dette.

Anders: Et veldig godt eksempel på hva dette er, er søkeforslag. Der du i et søkefelt, det er en vanlig input, men hvis du skal ha forslag som kommer opp under, så må du bygge det selv. Eller, du kan få det av et bibliotek, men du ikke kan ikke bruke standard HTML-elementer på det. Et annet eksempel er accordion eller trekkspill.

Erling: Der viste det seg at det finnes et HTML-element, eller et sett med HTML-element. Details og summary, som vi bruker på universeltutformet.no. Så ikke lag egne trekkspill, kan vi si, for det finnes egne element for det.

Anders: For eksempel søkeforslag er et så godt hjelpemiddel, at en skal ikke unngå å bruke det, bare fordi det ikke finnes i HTML.

Erling: Selvfølgelig. Hvis det står mellom å bruke et eksisterende HTML-element, og lage et helt eget ikke-HTML-element, så bruk standard.

Anders: I dagens aside skal du snakke litt, Erling.

Erling: I Okse kjører vi ut UX i Norge-undersøkelsen hvert år. Nå er det tradisjon, nå har vi gjort det tre år på rad. Det vi har gjort er å gå inn i dataen og se hvor mange som nevner uu. Så det skal vi snakke om i dagens aside.

Anders: Og jeg putter gjerne uu under UX-paraplyen.

Erling: Det synes jeg du gjør veldig rett i.

Anders: Jeg vet det er noen som er uenige. De om det.

Erling: Jeg er ikke én av dem. I dagens ris og ros, hva skal vi snakke om da?

Anders: Da skal vi snakke om matvarer. Matvarer i form av kolonialvarer på nett.

Erling: Kjøp matvarer på nett.

Anders: Det har jeg aldri gjort, kjøpt matvarer på nett.

Erling: Det har jeg gjort, via morgenlevering, men de skal vi ikke snakke om i dag.

Hvorfor?

Erling: Hvorfor har vi dette suksesskriteriet?

Anders: Det er for å støtte ulike nettlesere, eller det som kalles brukeragenter, det er Difi sin oversettelse av user agents.

Erling: Som egentlig betyr nettlesere og sånn. Skjermlesere og lignende.

Anders: Programvare som tolker og formidler innhold på nett.

Erling: Som prosesserer og presenterer resultatet av HTML.

Anders: Og disse agentene, de skal da klare å få denne informasjonen, som ligger der. Den skal klare å aktivere informasjonen, altså interagere å med den, og den skal klare å hente ut verdien, tilstanden til informasjonen. Om en knapp er av eller på. Eller om en toggle er av eller på. Eller om en slider står på 100 eller 200. Hente ut det. Så det er disse tre – navn, rolle, verdi. Det skal alle nettlesere og tilsvarende klare å hente ut. Det er intensjonen. Det hjelper da de som bruker tastatur. Hvis du ikke har rolle på alt, så vil du ikke kunne bruke det med tastatur. Det hjelper de som trenger en skjermleser eller forstørringsprogramvare. Altså de som har nedsatt syn eller ikke ser. Og det hjelper òg når en skal bruke stemmestyring. For hvis du henviser til et komponent som ikke har et programmatisk navn eller et tilgjengelig navn, så får du ikke fatt i det.

Erling: Du klarer ikke å henvise til det, for du vet ikke hva du skal henvise til.

Hvem?

Erling: Hvem må forholde seg til dette?

Anders: Vi sier kodere, punktum. Punktum.

Hvordan?

Anders: Hvordan gjør vi dette, Erling?

Erling: Veldig mye her er snakk om aria.

Anders: Dette er den store aria-episoden.

Erling: Det er navn, rolle, verdi.

Anders: Der kan vi jo nevne, som du funnet i dag, ingen aria er bedre enn dårlig aria.

Erling: Nettopp.

Anders: Og der hadde vi jo den WebAIM-undersøkelsen, det prosjektet med de 100 største nettstedene i verden, der så de at nettsteder som bruker aria, har dårligere tilgjengelighet. Det er ikke fordi aria er dårlig, det er fordi de har brukt det feil.

Erling: De har slengt på aria og tenkt at det er godt nok. De har ikke gjort det skikkelig. Hvis vi skal gå litt ned i materien og komme med noen spesifikke eksempler og teknikker på dette? Hva med søkeforslag, som vi har nevnt allerede.

Anders: Det er den jeg har fokusert på i ris og ros. Den kan vi nevne i teknikker òg. Det er jo en funksjon som veldig mange bruker. Både apper og nettsider, den vil jeg si er relevant. Der er egentlig en teknikk at du skal skrive i label at det kommer forslag, for å forberede brukeren på det. Det har jeg aldri sett.

Erling: Hvordan kunne det ha blitt vist? Søk med søkeforslag? Er det en type label en kunne ha hatt.

Anders: Søkeforslag kommer. Det er kanskje mer relevant å ha som en skjult label. Det er mer relevant for folk som ikke ser.

Erling: Hva mener du med skjult label?

Anders: At du har aria-label, en label som kun brukes mot skjermlesere. Så du kan skrive søk med søkeforslag. Og du bør legge til et aria-attributt som heter aria-haspopup, for å fortelle skjermlesere at her dukker det opp noe. Og du bør òg bruke aria-live, fordi dette er et dynamisk element under. Med aria-live skal vi snakke om mye i neste episode. Den sier at du skal lese opp dynamisk innhold som endrer seg. På et søkeforslag ville jeg brukt verdien polite. Det betyr at brukeren får skrive ferdig før han blir avbrutt. Hvis du søker h a v, og det kommer opp et forslag med havremelk, så leses ikke det opp før brukeren har skrevet ferdig og tatt en liten pause.

Erling: Hvilke andre verdier har en på aria-live? Nå er du på tynn is.

Anders: Nei. Assertive. Assertive. Nå har vi ikke slått det opp, men det høres riktig ut.

Erling: Det er forskjellige verdier. Assertive, i motsetning til polite, sier ifra med én gang det skjer.

Anders: Det kun disse to.

Erling: La oss gå videre. Det er noen ganske vanlige element, hvor dette bør brukes. Altså element som vi finner på ganske mange nettsted nå i dag. Du har nevnt dette med søkeforslag, vi har datovelger, vi har popup og overlay. Vi har nevnt trekkspill, men det har vi òg sagt at det finnes HTML-element for, så det er egentlig ikke vits. Men for å ta datovelgeren.

Anders: Der er det slik at du kan bruke standard HTML og få opp en datovelger. De fleste nettleser har en datovelger.

Erling: Er den tilgjengelig?

Anders: Ja, den er bra. Men den har jo ikke funksjonaliteten du ønsker. For eksempel hvis du i en datovelger skal velge startdato og sluttdato i samme interaktive komponent, så kan ikke en standard datovelger gjøre det. Når jeg ser en datovelger, så er 9 av 10 skreddersydde eller egenproduserte. Fra et bibliotek, jQuery eller noe sånn.

Erling: Det handler òg om å ha kontroll på designet, det visuelle.

Anders: Når du bruker en slik, så bør du tenke på at den bør lages i henhold til progressive enhancedment. Du kan skrive inn, inputfeltet fungerer som et vanlig inputfelt. Du må passe på alle piltaster fungerer. Alle retninger, og sørge for at det blir en logisk måte å bruke piltastene. For eksempel hvis du står på 31. januar, og trykker pil høyre, at du da faktisk kommer til 1. februar, ikke 1. januar igjen.

Erling: Det høres ut som om det er en del fallgruver her.

Anders: Det er en del fallgruver, og slik er det med én gang du skal lage noe som allerede eksisterer.

Erling: Men du nevnte at på akkurat denne, så har Difi gjort et stykke arbeid.

Anders: Ja, de har en veldig god artikkel om hvordan en datovelger bør fungere. Den er fin.

Erling: Men hva med andre type skjemakomponenter?

Anders: Når du bruker et skjemaelement som ikke finnes. Når du lager et skjemaelement. Et skreddersydd. Da må du passe på at det har et navn. Da for eksempel en label. Eller et title-attributt. Aria-label eller aria-labeledby. Altså et programmatisk navn. Det er jo typisk at du setter på, det går litt tregt her, det er sent på kvelden. Hvis du bruker en div for å lage noe, så setter du på en rolle på den. Det kan være, det er mange roller å ta av, de kalles aria-roller selv om ikke alle har aria i navnet. Du har for eksempel tre, tree og treeitem. Hvis du skal vise et mappehierarki. Du har en egen rolle som heter search, du har dialog, sjekkboks, menuitem …

Erling: Sjekkboks, men det finnes jo i HTML? Hvorfor er det en aria.

Anders: Hvis du skal lage en sjekkboks med en div, så må du ha en rolle erlik sjekkboks.

Erling: Og hvorfor skal noen finne på å gjøre det?

Anders: Det var vanligere før, før CSS3 så syntes folk at det var for vanlige sjekk- og radio. Jeg er enig. Blant annet var det vanskelig å øke størrelsen på dem, og de var veldig små, så da kunne du faktisk argumentere fra uu-perspektiv at du burde skreddersy dem. Men når du gjør det, må du fortelle hvilken rolle denne diven har.

Erling: Betyr det at i aria-listen over alle rollen, så finnes alle interaktive HTML-element. Der finnes en aria-ekvivalent?

Anders: Jeg vet ikke om det er 1 til 1. Det vet jeg ikke. Listen er lang, men jeg vet ikke om den er lang nok. Godt spørsmål.

Erling: Knapper da?

Anders: Da bruker role=button.

Erling: En presisering. Det er ikke snakk om at du har en lenke som ser ut som en knapp.

Anders: Det er snakk om knapper som sender inn et skjema eller lignende. Så knapper som er en a, som bare ser ut som en knapp, som tar det deg til et annet sted, der trenger du ikke role=button, for det er jo en lenke.

Erling: Men input type=submit, skal du ha role="button" på den?

Anders: Neida, da får du det implisitt.

Erling: Bra. Du har nevnt slider her.

Anders: De har noen aria-verdier, for å fortelle skjermleseren maks og min er, og hvilken verdi slideren har. Vi nevnte sjekkboks og dialog. I tillegg til at du skal si at det er en sjekkboks eller dialog, så må du òg si, du kan ikke bruke checked-attributtet direkte på en div, så da må du si at …

Erling: Kan du det hvis du setter rolle på den?

Anders: Nei, det tror jeg ikke.

Erling: Men du høres ikke helt sikker ut.

Anders: Nei, det er jeg ikke. For egentlig bør det gå an.

Erling: Skulle ha gått an, det.

Anders: Men uansett bør du bruke aria checked i tillegg.

Erling: Nå lager vi masse nye element, interaktive element. Hvordan får en tak på dem? Får de fokus når du navigerer med tastaturet?

Anders: Det er det du får av å sette en rolle på. En div uten rolle, får ikke nødvendigvis mulighet til tastaturfokus. Men den får ikke visuell tastaturfokus, nødvendigvis.

Erling: En div har ingen default focus styling.

Anders: Nei, ingenting.

Erling: Det må du legge på det nye interaktive elementet ditt.

Anders: Og det er spesielt med tanke på universell utforming, men du bør òg legge på andre typer tilstander. Hover-effekt for eksempel, det får du heller ikke automatisk.

Erling: Var det alle?

Anders: Nå har vi snakket om litt smalere, men en veldig vanlig aria-attributt er aria-expanded. På nett i dag, så bruker vi veldig ofte ting som kollapser eller kan ekspanderes. For eksempel en hamburgermeny.

Erling: Eller en vanlig megameny. Eller noe som kommer ut fra høyre siden. Eller chatbotgreie.

Verktøy

Erling: Hvilke verktøy snakker vi om i dag?

Anders: For å teste om disse skreddersydde komponentene dine fungerer, så kan du inspisere koden og se om det er noe aria her og der. Men det aller beste er å gå gjennom med tastatur og skjermleser, og se om det er mulig å bruke det.

Erling: Kan du bruke det du har laget? Tastatur og skjermleser.

Anders: Og det er det vi skal gjøre i dagens ris og ros.

Må du?

Erling: Må du?

Anders: Enkelt svar i dag. Denne er enkel A.

Erling: Enkelt svar, enkel A.

Aside

Erling: Så til dagens aside, den skal handle om en spørreundersøkelse vi i Okse sender ut hvert år. Det vi har gjort er rett og slett er en metaanalyse, å se om folk nevner universell utforming i forbindelse med UX.

Anders: Du må skryte litt mer av denne undersøkelsen UX i Norge som nå har gått over tre år. Dette er jo en nasjonal sak, som har fått god oppslutning.

Erling: Vi sender ut en spørreundersøkelse som spør, vi har valgt å kalle den UX i Norge, men det er jo snakk om designbransjen, i designbegrepet vide forstand. Vi spør om hva som er viktig for deg, hvilke verktøy de bruker, hva som er bra med det de holder på med, hva som er drit og så videre.

Anders: Og lønn.

Erling: Og utdannels, og hvor de holder til og så videre. Så vi har fått et godt bilde av hvordan det står til med UX i Norge nå. Vi har kjørt den i tre år. Jeg åpnet datagrunnlaget, altså excel-arket, og søkte på uu og universell utforming. Hvor mange har nevnt det i et eller annet svar én eller annen plass. Jeg kan begynne med 2019, i år. Vi har 300 respondenter til nå. Den er fortsatt ute, så det kommer til å komme flere. Av de 277 er det to som har nevnt det. De har nevnt det under spørsmålet «Hvilken egenskap eller kompetanse er viktigst hos en flink UX-er?». Den ene svarer uu, og enkelhet og fremtidsrettet. Og han/hun andre skriver «forståelse av business design og universell utforming». Av 277 er det to som har nevnt det. Og så kan vi velge hva vi skal dra ut av det. Skal jeg gjette, før jeg sjekket, så hadde jeg gjettet noe slikt. Det er en UX i Norge-undersøkelse.

Anders: Spørsmålet inviterer jo heller heller ikke til å nevne universell utforming.

Erling: Nei det er akkurat det. Dersom vi hadde hatt et spørsmål der de skulle rangerer viktigheten av uu på en skala fra 1 til 10, i ditt arbeid, så hadde vi kanskje fått et mer reflektert svar.

Anders: Det er jo ikke en statistisk signifikant aside i dag.

Erling: På ingen som helst måte. Så sjekket jeg òg 2018 og 2017. I 2018 hadde vi 171 respondenter. Da var det bare én som nevnte uu og universell utforming. Det var under spørsmålet «Hva er mindre kjekt med jobben din?». Da hadde han kun skrevet én ting, uu. Det er noen som synes uu er drit.

Anders: Da har jeg en …

Erling: Er det deg?

Anders: Tror ikke det er meg. Jeg tenker at det selvfølgelig er litt trist, men at det kanskje er fordi personen kan det for dårlig. Det du kan for dårlig er mindre kjekt.

Erling: Helt enig.

Anders: Men det er spekulasjon.

Erling: En kan snu på det, er at det en kan godt, synes en ofte er kjekt. Det som var litt snodig er at i 2017 fikk vi 141 svar, bare for å gjenta, i 2019 er vi snart oppe i 300, i 2018 fikk vi 171, i 2017 141. Da var det fem som nevnte universell utforming, og tre av dem uu eller universell utforming under spørsmålet «Hvilken egenskaper eller kompetanser besitter en flink UX-er?». Og to andre nevnte det under hvilke bøker de har lest, og hvilke verktøy de bruker. Det var faktisk litt mer fokus i 2017, i følge UX i Norge. Men igjen, på ingen måte statisitisk signifikant.

Anders: Men på det spørsmålet der, som dere har endret ordlyden på, fra 2017 til 2019, «Hvilken kompetanse besitter en flink UX-er?», er endret til «Hva er viktigst?». Jeg vil si at spørsmålet i 2017 inviterer mer til svaret om universell utforming.

Erling: Ja, kanskje. Ja, jeg kjøper den. Det legger litt mer føringer enn det siste.

Anders: Men som du sier, jeg er ikke overrasket. Det er lite fokus på det, heldigvis et økende fokus. Vi ønsker jo å bidra til et økende fokus.

Erling: Det er jo derfor vi sitter her.

Anders: Det er jo det.

Erling: Det var dagens aside, det er ikke så mange som nevner det i forbindelse med UX. Kanskje burde det har vært flere?

Ris og ros

Erling: Så til dagens ris og ros. Til matvarebransjen og sånn. I dag er det du som har gått gjennom. Hva har du gått gjennom, Anders?

Anders: Jeg har sett på Kolonial, Spar og Meny. Og så vidt jeg vet så har ikke Kolonial noen fysiske butikker. Det er en ren nettbutikk. Spar og Meny som, hvis jeg har forstått det riktig, så er det de fysiske butikkene som er store på netthandel. Det er kanskje andre òg, men det var de som dukket opp på radaren min. Og det jeg vil si her. Jeg har tatt utgangspunkt i autoforslag. Jeg gikk ikke hele veien til mål, jeg bestilte ikke noen produkter, men i prosessen har de òg en del skreddersydde elementer, så det er mer å kikke på. Jeg fokuserte på autoforslaget. Det som går igjen er at alle tre bruker autoforslag og snubler på de samme tingene. De er circa like gode og like dårlige. Det er små nyanser.

Erling: Tror du det er representativt for andre bransjer òg?

Anders: Ja.

Erling: Det er typiske ting å snuble i?

Anders: Yes! De funnene jeg skal nevne nå, de er representative for søkeforslag generelt sett. Det hadde vært morsomt å teste Google. Jeg har ikke gjort det.

Erling: Å ja.

Anders: Om de har kontroll på dette. Da begynner vi litt på ris. Da begynner vi med Kolonial, og tar Spar og Meny i samme åndedrag. Faktisk virker det som om Meny har samme tekniske løsning som Spar. Ikke helt likt, men for mye likt til at det er tilfeldig. Så, det som skjer, er at skjermleser annonsere ikke at det kommer søkeforslag.

Erling: Som vi nevnte innledningsvis, at veldig få gjør.

Anders: Det er kjipt, for da gir du ut en hjelpende hånd til noen, med ikke alle. Men du ekskluderer ikke nødvendigvis, for det er jo mulig å søke likevel. Men det er jo et veldig godt hjelpemiddel.

Erling: For hvis du ikke annonserer at det er søkeforslag, og hvis du i tillegg ikke har brukt aria-live, så har du ingen mulighet til å vite at det kommer forslag under. Du blir ikke gjort oppmerksom på det i det hele tatt.

Anders: Det som heller ikke skjer på noen av dem, at når du piler ned, det fungerte på alle, du kunne bruke pil ned.

Erling: Det er ikke alle det fungerer på, sånn generelt?

Anders: På ingen som helst måte.

Erling: Så det fungerte på alle, det var jo bra.

Anders: Men det ble ikke lest opp noe, så de forslagene har ikke name, altså et tilgjengelig navn.

Erling: Hvilken verdi skulle name hatt. Navnet på produktet?

Anders: Ja. Navnet på produktet.

Erling: For da hadde det blitt lest opp når vi piler ned.

Anders: De mangler aria-live, og de har ikke rett rolle på forslagene.

Erling: Hvilken rolle skulle det vært?

Anders: Husker ikke. Men der tror jeg òg Difi har en fin artikkel. Som spesifiserer hvordan du kan kode et søkeforslag.

Erling: For det holder ikke at det bare er lenker?

Anders: Jo, det hadde holdt. Hvis det hadde vært lenker.

Erling: Men det var ikke bare lenker?

Anders: Nei. Der ga du egentlig svaret. Det er jo en liste med lenker. Hadde du brukt ul li med lenker inni li-en, så hadde det blitt lest opp.

Erling: Så der har de faktisk gjort det unødvendig komplisert, eller? Unødvendig skreddersydd.

Anders: Og så er det et lite ekstra ris til Spar, for de har prøvd å være litt ekstra behjelpelig. De har puttet en fieldset og legend rundt søkefeltet, der de sier «søk i varer, oppskrifter, artikler og butikker på Spar», som kommer i tillegg til mye annet. Og de har noe trøbbel med tegnsettet sitt, så det skal vi få høre. I tillegg til at det blir smør på flesk, så blir det veldig kryptisk.

Erling: Du sier at de har prøvd å gjøre det bedre, men det blir verre.

Anders: Det blir verre. Betydelig. Det skal vi få høre. Og så er det Meny som òg har et problem, og det er at de har to tilstander på søkeforslagene sine. Før du begynner å skrive noe som helst, så dukker det opp populære søk. Som jeg tenker at intensjonen er god. Men det som skjer er at når fokuset forsvinner, hvis du tabber deg videre, så forblir de populære søkene stående der. De forsvinner ikke. Og det er forvirrende, for de får da tastaturfokus senere.

Erling: De blir en del av DOM-en.

Anders: Og det er jo ikke så gøy. Det er veldig tydelig når du tabber deg gjennom Meny sin løsning, at de har implementert populære søk dårlig.

Erling: Det er sannsynligvis enkelt å teste, så hvis de hadde testet med tastatur, så hadde de sannsynligvis oppdaget det og fikset det.

Anders: Dette er nettbutikk som absolutt bør fungere for alle.

Erling: Denne typen nettbutikker, å kjøpe matvarer på nett, gjør jo matvarer veldig tilgjengelig. Du får matvarer hjem, du slipper å reise på butikken å handle.

Anders: Det er jo gjerne folk med funksjonsnedsettelser som har størst problemer med å komme seg til en butikk.

Erling: Det var det som var poenget mitt, jeg var kanskje ikke tydelig nok.

Anders: Joda, du var tydelig nok.

Erling: Skal vi rose dem litt òg?

Anders: Ja, Kolonial har en skjult label i søkefeltet. Og jeg synes det er greit å ha en skjult label i et søkefelt. Fordi det er litt kjøtt på flesk når du har ett felt i et skjema, som søk jo er, å ha en label i tillegg. Det er implisitt at du skal søke her, for du har mange indikasjoner på at det er et søkefelt.

Erling: Men er ikke det strengt tatt et brudd?

Anders: Jo, det er det, men vi sa det òg i den episoden som handlet om det, at det er et akseptert avvik. Men de har en skjult label, som er bra, for de som trenger det. De sier «søk i varer og kategorier». Supert.

Erling: Er det her du kunne lagt hint om forslag.

Anders: Ja. Men her hadde det ikke vært vits å lage hint, for forslagene blir ikke lest opp, så hvis du hadde sagt at det kommer forslag, så hadde det blitt enda mer forvirrende. Men ros til alle tre egentlig, at jeg klarte å bruke søkeforslagene riktignok visuelt, med tastatur. Kolonial.no har så lite tastaturfokus at det er vanskelig å se det med det blotte øyet. En lys, lys, lys gråfarge. Spar og Meny, som jeg mistenker har samme løsning, har samme fokus, så jeg klarte å legge en vare i handlekurven uten å utføre et søk, kun fra søkeforslaget. Det er er bra, det virker med tastatur, men de har en liten vei å gå. Så da skal vi ta en liten skjermleserdemo.

Erling: Konge, det er alltid kjekt.

Anders: Og da skal jeg prøve. Det er jo en del hurtigtaster som trenger to hender, og vi har ikke stativ i dag, så da kommer det en hjelpende hånd her.

Erling: Jeg kan være stativet ditt i dag.

Anders: Skal vi se. Da er vi her. Jeg starter skjermleseren.

V: Voiceover på Chrome. Hjem vertikal linje Spar Google Chrome Webstep vindu spar dott no. Innhold markert adresse søkefelt. Redigerbar tekst har tastaturfokus.

Anders: Nå skal jeg faktisk skru henne av igjen. Oi.

V: Voiceover av.

Anders: Nå startet jeg Voiceover med Chrome, og Voiceover fungerer bedre med Safari.

Erling: Kan du si hvordan da?

Anders: Nei, hun oppfører ikke på samme måten, jeg har ikke konkrete eksempler.

Erling: Det er på generell basis.

Anders: Det er anbefalingen. Da begynner vi på ny.

Erling: Godt vi kan klippe.

V: Voiceover på Safari. Hjem vertikal linje Spar nettinnhold har tastaturfokus.

Anders: Da starter jeg, som vi ofte gjør, med å trykke tabb. Det som er saken nå, er at Spar har logoen sin oppe til venstre. Det neste elementet, visuelt sett, er søkefelt. Det har ingen ledetekst, men det har en placeholder som heter «søk på spar.no». Jeg ville hatt en litt bedre tekst der, for eksempel søk etter varer og butikker, eller hva er det du kan søke etter. Det er litt implisitt at du kan søke i spar.no. Du er jo på spar.no, hvor ellers kan du søke? Stor, fin, grønn knapp som heter søk. Da trykker jeg tabb.

V: Kobling. Hopp til hovedinnhold.

Anders: Yes! De hadde hopp til hovedinnhold. Bra, Spar. Jeg trykker tabb én gang til.

V: Kobling. Hopp til hovedmeny.

Anders: Yes. De har to skiplenker. Det har de gjort fordi de skjønner at de har et stort nok nettsted til at vi vil gi to snarveier.

Erling: Ville det ikke vært mer logisk om hovedmeny kom før innhold?

Anders: Nei.

Erling: Folk vil først hoppe til innholdet?

Anders: Ja, jeg tenker det er en logisk rekkefølge.

Erling: Men det er ikke det vi skal snakke om.

Anders: Jeg trykker videre.

V: Kobling: Gå til forsiden sparlogo banner.

Anders: Tipp topp. De har god alt-tekst på logoen. Det skal vi ikke snakke om i dag. De hadde både intensjonen og hva det er. Litt overflødig å si logo, men det er helt greit. Videre.

V: Søkeord. Tekstsøkefelt. Søk på spar.no si inn m t sq ts 2 halv k i varer og oppskrifter, artikler og m t sq ts 2 halv k oppskrifter m t sq ts 2 halv k varer gruppe.

Erling: Nå hørte jeg veldig godt etter, og jeg forstod noen ord inni der, og så var det noe kryptiske greier.

Anders: Her gjør en to feil. En legger på en legend.

Erling: Det er her bjørnetjenesten kommer inn.

Anders: … som er i tillegg til en label, så de får dobbelt opp med informasjonen. I tillegg har informasjonen feil tegnsett. Det vil si at her har en erstattet ø med tre tegn, og ikke de vanlige tegnene som vi vanligvis erstatte ø med, men en i med tødler over.

Erling: Med to prikker over.

Anders: Og et spørsmålstegn oppned og et halvttegn. Og det tolker skjermleseren bokstavlig.

Erling: Det var det vi hørte.

Anders: Det er fordi de har en teknisk feil på nettsiden.

Erling: Det har ikke plukket opp, for ingen har testet det vi gjør nå. Det ligger sannsynligvis skjult i koden. Det treffer deg i fleisen.

Anders: Det som skjer visuelt sett.

Erling: Jeg ser ikke hva som skjer.

Anders: Nei, du har ikke dette åpent. Det har dukket opp et felt under som heter populære søk, der det er jul, Jakobs, juleøl, pinnekjøtt og ribbe. Det vet ikke Siri noe om. Ikke Siri. Skjermleseren. Hun har et navn. Nora, er det ikke det? Jeg skal søke nå etter …

V: H A V R havre.

Anders: Det fungerte bra. Hun sa bokstav for bokstav, og når jeg tok en pause leste hun opp det jeg hadde skrevet. Og nå dukker det opp en ganske fint søkeforslag, der det er tre lenker, og så fire produkter.

Erling: Men jeg som ikke ser skjermen din vet jo ikke dette, jeg vet jo ingenting.

Anders: Jeg kan trykke pil ned én gang. Nå har jeg markert havregryn, men det vet vi jo ikke.

V: Kobling. Havre. Innhold markert. Tøm knapp. m t sq ts 2 halv k oppskrifter, artikler og butikker m t sq ts 2 halv k.

Erling: Skjer dette fordi du gikk opp og fokuserte på den igjen?

Anders: Det som jeg gjorde, var at jeg gikk ett hakk videre. Jeg ville tabbe meg videre til søk-knappen, for å utføre dette søket. Da kom jeg til denne knappen som heter tøm. Og det er …

Erling: Tøm?

Anders: Jeg skulle akkurat til å si at det er et veldig godt navn, men du forstod det ikke? Derfor er det ikke et godt navn.

Erling: Hva er tøm her? Det er å x-e ut?

Anders: Det er en konvensjon, du har alltid en liten x inne i et skjema.

Erling: Å den ja!

Anders: Den heter tøm.

Erling: Det koblet jeg ikke i det hele tatt.

Anders: Du kunne hatt tøm skjemafelt. Så fikk vi det kryptiske dritten i tillegg. Det er fordi dette ligger inne i et fieldset som har en legend, så det vil vi få repetert hver gang vi er inne i dette fieldsettet.

Erling: Må du ut av den først, og gå inn igjen?

Anders: Nei.

V: Søk knapp. m t sq ts 2 halv k i varer, oppskrifter, artikler og butikker m t sq ts 2 halv k Spar.

Anders: Dette er jo ufattelig.

Erling: Det er jo irriterende, men det stopper deg ikke.

Anders: Det stopper oss ikke. Så jeg trykker enter.

V: Hopp til hovedinnhold.

Anders: Ja, hopp til hovedinnhold, det er det vi vil gjøre.

Erling: Der kunne det strengt tatt sagt hopp til søkeresultat. Hadde det vært greit? Da bryter du jo mønsteret.

Anders: Da måtte du hatt mer logikk.

Erling: Ganske enkel logikk.

Anders: Jeg gjorde det, og vi hører ingenting. Nå beveger vi oss litt ut av dagens tema. Vi har gitt poenget vårt. Det som skjedde var at jeg trykket hopp til hovedinnhold, og visuelt sett scrollet vi ned til det aktuelle området, men det leses ikke opp noe. Hvis jeg tabber.

V: Hjem. Navigering.

Anders: Så har de ikke flyttet tastaturfokuset. De har bare flyttet det visuelle, så det vil si at hopp til hovedinnhold-lenken er implementert dårlig.

Erling: Nettopp. Den var litt rar.

Anders: Så hvis jeg trykker …

V: Varer. 61. Knapp. Hoved.

Anders: Vi skrur av …

V: Voiceover av.

Anders: Her fikk vi et eksempel et søkeforslag som var implementert dårlig. Skal vi teste Google, bare for å se?

Erling: La oss gjøre det.

Anders: Litt på direkten, jeg ble nysgjerrig.

Erling: Jeg har ganske høy tillit til Google.

Anders: Nå er jeg på Google.no. Jeg fyrer på Voiceover.

V: Voiceover på Safari. Google. Vindu. Søk. Kombinert rute har tastaturfokus.

Anders: Nå sa hun kombinert rute, de har brukt en combobox på søkefeltet sitt. Det har de gjort semantisk riktig. Da skriver jeg.

V: H A V R havre.

Anders: Og det har dukket opp masse søketreff, og ingen indikasjon på det.

Erling: Selv Google kan feile.

Anders: Ingen live der.

V: Rapporter upassende forslag.

Anders: Jeg trykket pil ned. Gikk ikke til første søketreff som nå var havregrøt. Jeg kom på …

Erling: Rapporter upassende forslag, en lenke under.

Anders: Jeg ser ikke den lenken, så jeg vet ikke hvor jeg har havnet nå.

Erling: Sikkert under autoforslagene?

Anders: Ja, sikkert under der.

V: Escape knapp.

Erling: Så giganten Google kan òg feile på dette. Det er et eksempel på at selv om de store gjør det, så er det ikke nødvendigvis greit.

Avslutning

Erling: Det var dagens episode. Tre ting, hva skal en huske fra i dag?

Anders: Det er jo at, skal du lage noe som er litt utenom det vanlige, sjekk om det eksisterer noe allerede, det var krøkkete forklart. Ikke lag egne elementer, hvis du ikke absolutt må.

Erling: Det var den ene. Og den andre?

Anders: Test med tastatur, som vi har gjort nå.

Erling: Og den tredje?

Anders: Test med skjermleser. Da får du svar på om det du lager har navn, rolle og verdi.

Erling: Og når du tester med tastatur får du svar på om det kan brukes, det du lager. Neste episode, hva skal vi snakke om da?

Anders: Vi skal holde oss i samme land. Vi skal se på statusbeskjeder. På en måte kan du se på et søkeforslag som en statusbeskjed. Altså suksessmeldinger, fremdrift, feil. Den typer beskjeder som dukker opp i grensesnittet ditt, som du bør ta stilling til, eller bli informert om, uten at du nødvendigvis har gjort noe for at det skjer.

Erling: Det blir den siste episoden. Spenende. Jeg gleder meg. Som vanlig, vi ber om kommentarer. Nå kommer vi til å spille inn den siste episoden før vi får kommentarene. Det vi har veldig lyst å få kommentarer på, er hva vi skal gjøre etterpå. Hva har dere som lytter på lyst å høre på at vi gjør.

Anders: Hvis dere vil høre mer. Kan være at de har fått nok.

Erling: Drit i det. Vi lager for det om, så får noen andre hører på hvis de som hører nå ikke vil høre på.

Anders: Jeg lurer på om vi har bikket et døgn.

Erling: I lyttetid?

Anders: Hvis du plusser alle episodene.

Erling: Ja, totalt lyttetid. Det var det jeg mente. Jeg tror ikke vi gjør det.

Anders: Vi har noen veldig lange og noen korte.

Erling: Det er flere korte enn lange. Det var det. Takk for oss.

Anders: Takk for i dag, Erling. Takk for at du gidder å sitte med meg.

Erling: Takk for at du gidder å sitte med meg. Veldig kjekt. Jeg er Erling fra Okse.

Anders: Jeg er Anders fra Webstep. Hadebra!