13

WCAG 2.4.4, 2.4.9, 2.4.5Forståelig lenketekst

Når man ikke kan se nettstedet eller applikasjonen er det veldig nyttig å navigere på lenker, sidekart, søkefelt, toppnavigasjon og så videre.

Varighet: 69 min Slippdato: 20. september 2019

Tekstversjon

Erling: Da er jeg klar, jeg har satt på opptak, Anders. Ja, i dag skal vi snakke om flere suksesskriterier innen 2.4. Som vanlig, to, hva står det for?

Anders: Mulig å bruke.

Erling: Fire står for?

Anders: Navigerbart. Mulig å finne frem.

Erling: Og mye av dagens episode handler om lenker og lenketekst. Hva kriterier er det vi skal gå gjennom i dag?

Anders: Vi tar 2.4.4 og 2.4.9 litt i sammen, fordi de er så tett relaterte.

Erling: Det er et vanlig format i WCAG, de har én som er litt løsere, og én som er strengere. Det er typisk trippel A og dobbel AA. Og den siste?

Anders: Det er 2.4.5 som heter flere måter, eller alternativer å finne frem på. Mange veier til Rom.

Erling: I dagens aside har vi en spennede dame som har skrevet en mastergrad om universell utforming, stemmer ikke det?

Anders: Jo, det stemmer. Hun har skrevet om universell utforming med et litt annet perspektiv enn det vi vanligvis snakker om. Veldig langt fra WCAG hvertfall. Hun har snakket om undertrykkelse av spesifikke brukergrupper.

Erling: Det er jo enormt interessant.

Anders: Ja, og hun åpnet, hun fikk meg til å tenke så mye at det var vanskelig å snakke når jeg snakket med henne. Hun satt meg faktisk litt ut.

Erling: Hun heter da Rannveig A. Skjerve. A-en står for Alette. Så Rannveig skal vi høre fra i dagens aside. Veldig kjekt å få et ny perspektiv på det vi prater om her. Og i dagens ris og ros? Hva skal vi snakke om da?

Anders: Nettbutikker. Har vi sett på det før, Erling?

Erling: Nei. Nå er det så mange episoder at det begynner å bli litt grumsete bak i tid.

Anders: Vi begynner å gå tom for bransjer, så der kan vi òg få tips. Hvis du har noen bransjer vi skal ta for oss. Gi innspill!

Erling: Hvorfor har vi disse suksesskriteriene?

Anders: Dette med lenker og formål med lenker, lenketekst, det har vi fordi noen bruker lenkelister. I skjermlesere er det funksjoner for å få lest opp alle lenker på en side.

Erling: Jeg blander ordene lenkeliste og leseliste som to helt forskjellige ting. Lenkeliste er noe du får opp på skjermen. En leselist er en fysisk leselist.

Anders: Du får den ikke nødvendigvis opp på skjermen. Du kan få opp en lenkeliste på en leselist. Leselisten er det fysiske hjelpemiddelet som …

Erling: … blinde kan bruke med blindeskrift. Hvilke andre grunner har vi disse kriteriene for?

Anders: Ikke offisielt uttalt, men dette med kognitive begrensninger og litt i Steve Krug sin ånd, Don't make me think, la det være tydelig hva en lenke gjør, hva den går til. Når du skumleser en side, og vi skumleser, det gjør vi på nett, ikke la meg måtte tenke hva en lenke gjør, la det være så overtydelig som mulig. Og det får du ikke til dersom du ikke følger disse suksesskriteriene. Dersom ikke formålet med lenken står der, så klarer du ikke å skumlese.

Erling: Dette er suksesskriterier som igjen gir verdi til alle.

Anders: Ja, jeg synes det.

Erling: Ikke bare de med funksjonsnedsettelser.

Anders: Og dette med flere måter, det er det veldig enkelt å svare på, har vi fordi mennesker er forskjellige, folk foretrekker å finne informasjon på forskjellige måter.

Erling: Når du sier flere måter, refererer du da til 2.4.5, flere måter å komme frem til innholdet på.

Anders: Det mest åpenbare eksempelet der er søk, sidesøk. Hvis du har mye informasjon på siden, så må du la brukerene finne frem til det med et søk. Hvis du i tillegg har navigasjon, så har du to måter, og det er nok. Da er du i tråd med 2.4.5.

Erling: Hvem må bry seg om dette?

Anders: Av oss som lager digitale tjenester, så må designerne tenke på alle tre helst. De må tenke på hvilken tekst lenker skal ha i seg, og hvilke alternative navigasjonsmåter det skal være. For eksempel hvis du skal ha et sidekart, som er definert som en alternativ måte, hvor skal dette ligge, og hvilket ikon skal det ha hvis det skal ha et ikon. Det ligger ofte i bunn. Men hvis en designer ikke tegner det som en del av bunnfeltet, så …

Erling: … glemmer fort koderne det ut. Og det tar oss over til koderne. Må de tenke så mye ekstra her?

Anders: Ja, fordi dersom lenker isolert sett ikke beskriver formålet så må en legge inn støtteinformasjon eller metadata på det, og det må kodes. Hvis du har en lenke som krever mer forklaring, men du ikke har mulighet til å skrive det direkte i teksten, så kan du legge til et title-attributt og du kan òg bruke aria-verdier som vi skal snakke om i teknikk-segmentet vårt.

Erling: Nå er jeg kanskje på tynn is, men kanskje den viktigste er nettredaktører.

Anders: Ja, enig, hvertfall for lenketekst og formål med lenke. Det finnes redaktører som skriver, hvis du har tre lenker i én setning som sier dette kan du lese om her, her eller her. De tre her-ordene er tre ulike lenker. Det er et soleklart brudd på disse to formål med lenke-kriteriene. Det er ikke noe en designer eller koder kan …

Erling: … styre uten å si det til dem.

Anders: Så soleklart, skriver du tekster på nett, og du lenker frem og tilbake, så er det innholdsansvarlig sin jobb å få gode tekster.

Erling: Så til hvordan?

Anders: Den enkleste teknikken på denne formål med lenker er at det er samsvar mellom tittelen på målsiden og lenketeksten.

Erling: Kan vi si det på en annen måte?

Anders: Jeg kan lage et eksempel.

Erling: Enda bedre.

Anders: Hvis du skriver om, beklager at jeg bruker eksempel med tannkost, det brukte jeg òg som eksempel i forrige episode.

Erling: Sånn blir det når vi spiller inn tidlig på morgenen.

Anders: Hvis du skriver om en tannkost, og skal lenke til Wikipedia-siden om tannkost. Ser du at Wikipedia kaller dette for en tannkost, da kaller jeg lenken min òg for tannkost. Da er det samsvar mellom mål og lenke. Det som skiller disse to, den strenge og den litt mer tilgivende suksesskriteret er dette ordet kontekst, som kan være vanskelig å forklare. Derfor skal jeg forklare det med et eksempel. Eksempelet jeg bruker er fra våre egne nettsider, universeltutformet.no. Nå skal jeg åpne den. Og så skal jeg åpne en episode, for eksempel episode 4. Da ser vi at inne på en episodeside, så har vi en firkant der det står spill av episode 4 kolon Itunes, Spotify og Soundcloud. Dette er ok formål med lenke fordi lenken er bare iTunes, men teksten spill av episode 4 står rett foran med en kolon, så konteksten er spill av episode 4, og da forstår en at det er Itunes, Spotify eller Soundcloud.

Erling: I dette tilfellet er konteksten definert av en heading. Altså lenkene ligger ikke inne i den sammen kodeblokken som spill av episode 4. Spill av er en heading, og ettersom de følger den naturlig, så er konteksten tydelig.

Anders: Men dette er et brudd på den strenge varianten fordi lenken i seg selv ikke sier at det er episode 4 på iTunes du kommer til. Og på den siden her så har vi to lenker som heter det samme. Den ene i toppen vår, det er en global, som ligger i alle malene, den går til vår kanal på iTunes.

Erling: Bare for å ta den 2.4.9, den strenge varianten. Vi har ikke snakket spesifikt om hvorfor vi har den. Hvorfor har vi den?

Anders: Jeg sa jo at i en lenkeliste så må det gi mening.

Erling: Det var det jeg måtte snu hodet rundt, hvordan skal vi tenke på det hvis vi skal være i henhold til 2.4.9. Se for deg at du ber om å få en liste over alle lenkene på en side, så skal du forstå hver eneste lenke. I dette tilfellet vil du få Spotify og Itunes, og så vil du få Spotify, iTunes og Soundcloud isolert sett, som ikke vil gi mening. En vil ikke forstå hva de forskjellige tingene leder til.

Anders: Nå var jeg litt frekk, for nå avbrøt jeg deg med Voiceover. Beklager, det var stygt å avbryte deg.

Erling: Men jeg var ferdig.

Anders: Men jeg hørte ikke etter, det var respektløst.

Erling: Da kan jeg heller akseptere beklagelsen.

Anders: Det som skjer her er at jeg åpner Voiceover, jeg åpner det som heter rotoren til Voiceover.

Erling: Rotoren?

Anders: Det er egentlig forskjellige lister, da kan vi gå frem og tilbake mellom disse listene med piltastene, her har vi en som heter koblinger. Den lister fra topp til bunn alle lenkene på siden. Den første lenken vår heter hopp til innhold. Den snakket vi om forrige episode.

Erling: Den, i konteksten, gir mening.

Anders: Men vi ser to stykker som heter Spotify. Det er to stykker som heter iTunes. Det er jo forvirrende. De to første gir mening, at det bare står Spotify og iTunes, så forstår en gjerne at det går til vår podkast på Spotify og iTunes.

Erling: Men en kunne argumentert med at ettersom konteksten her er én episode, så er det ikke tydelig om det går til selve podkastsiden eller en faktisk episode, som jo de to andre gjør.

Anders: Der vil jeg faktisk si at her kunne de lenkene i toppen enten vært skjult på hver enkel episode, eller endres avhengig av hvor du er. Slik at inne på en episode så går alltid lenkene til Spotify, mot den episoden på Spotify.

Erling: Interessant.

Anders: Nå håper jeg at jeg fikk eksemplifisert det, at disse lenkene vår, de er i henhold, fordi de ut ifra konteksten gir mening, men i en lenkeliste så vil de ikke gi mening, derfor har vi den strenge varianten. Jeg vil jo si at her bør vi gjøre et tiltak.

Erling: Her hadde det ikke hjulpet med et title-attributt eller lignende, fordi det vil ikke komme som en del av lenkeliste.

Anders: Nei.

Erling: Det må ikke være synlig, for du kan skjule det med CSS, men det må være en del av selve lenketeksten, for å være i henhold til 2.4.9, altså den strenge varianten.

Anders: Da skal jeg lukke den.

Erling: Fikk vi forklart kontekst skikkelig?

Anders: Jeg håper det. Siden de lenkene står etter en overskrift som heter spill av episode 4, så er konteksten tydelig.

Erling: Bra!

Erling: Title-attributtet?

Anders: Det er noe vi kan bruke dersom vi skal legge til mer informasjon enn det som står i lenken. For eksempel hvis du har plassproblemer, du har ikke plass til så mye, så kan du legge mer informasjon, eller hvis det er repeterende informasjon, så kan du bruke title-attributtet. Litt slik som her, så ville det vært spill av episode 4 på Spotify, spill av episode 4 på Itunes, spill av episode 4 på Soundcloud, som title. Det kunne vært at vi hadde flere tjenester òg, og brukt det som title. Det er viktig for å forklare lenkene.

Erling: I det eksempelet der, og du er en dreven bruker av tastatur og skjermleser, hadde det ikke bare vært irriterende hvis den hadde lest opp hele den setningen der i stedet for å bare si Spotify, Itunes, Soundcloud.

Anders: Jo, og her kommer vi tilbake til, kanskje sunn fornuft, at hvis vi mistenker at dette vil være irriterende å høre på, la oss prate med en bruker eller tre.

Erling: Det var her vi skulle fått inn Lars til å teste dette, så kunne han gitt sine innspill på hvordan det oppleves. Hva med aria? Har de noe hjelpemiddel her?

Anders: Det har de. Vi har både aria-label som du kan du bruke, og som vil nok blitt med i den lenkelisten som vi nå hadde hatt åpent. Nå ble jeg usikker, fordi, jeg har ikke prøvd det, så det er litt farlig å påstå det bastant. Vi burde ha prøvd ut det. Og så har vi òg labeled by som du kunne brukt i vårt tilfelle, i stedet for å gjentatt spill av episode 4 som en label, så kunne du henvist til headingen. Denne her er labeled by denne labelen. Du henviser til en ID, ikke en streng av tekst.

Erling: Ikon i relasjon til tekst?

Anders: Der er rådet å, når du har kombinasjonen, å ha tom alternativ tekst, og at bildet er en del av lenken.

Erling: Slik at bildet ligger i a-taggen.

Anders: Jepp.

Erling: Vi har jo snakket litt om det allerede, men teknikker til forskjellig innganger, flere måter.

Anders: Den flere måter, de to beste alternative måtene er sidesøk og sidekart. Sidekart, for å være entydige, det er et HTML-sidekart, ikke et XML-sidekart som du gjerne serverer til Google. Jeg vil anbefale begge to, men det XML-sidekartet har ingenting med universell utforming å gjøre.

Erling: I 2.4.5 så må det være HTML, det er for brukeren, ikke for søkemotorene.

Anders: Men når det er sagt, så anbefaler jo Google å ha begge deler. Så de foretrekker òg et HTML-sidekart. Da får du gratis interne lenker på det. Nå har jeg tilgode å høre at folk savner sidekart på sider som ikke har det, så om det er mye brukt, skal vi ikke spekulere i.

Erling: Altså 2.4.5 sier bare at det må være alternative måter å finne måter, sier ingenting om teknikkene, det er det vi som sier. Og andre som har gjort det. Og da er det søk, sidekart og vanlig navigasjon som er de tre vanligste metodene.

Anders: Og hvis du nå tenker at universeltutformet.no, dere har nettsider, dere har verken søk eller sidekart, nå må dere skjerpe dere …

Erling: Eller meny i toppen. Altså navigasjon. Har vi feilet?

Anders: Vi har ikke feilet. Og det er fordi navigasjonen vår er episodelisten, så forsiden vår er en slags sidekart.

Erling: Den har en dobbel funksjon. De som foretrekker å navigerer å navigere med sidekart, de vil være happy, de som foretrekker en vanlig navigasjon, vil òg være happy.

Anders: Så enkle sider med lite innhold, enkel struktur …

Erling: Da holder det med en liste på forsiden.

Anders: Men hvis vi hadde hatt en blogg i tillegg, og vi hadde hatt en lenke til bloggen i toppen, og innunder den bloggen så lå det forskjellige artikler, da hadde vil plutselig brutt denne retningslinjen, for da kunne vi ikke søkt oss frem til artiklene, vi hadde ikke funnet frem til artiklene på andre måter enn å lete oss frem i navigasjonsstrukturen. Hvis vi kommer til å utvide vårt konsept, universeltutformet.no til å innholde mer enn bare en liste over episode, så må vi tenke på dette.

Erling: Når feiler vi her?

Anders: Vi feiler hvis vi bruker det som kalles nakne lenker, eller det er kanskje mer brukt på engelsk naked links, altså der du skriver ut hele URL-en.

Erling: Det skjer ikke så ofte.

Anders: Du kan argumentere med at det er formålet med lenken, men det er jo bare dårlig brukervennlighet.

Erling: Det gir jo ikke brukeren veldig lite informasjonsverdi. De ser hvilken URL den går til. Oi, en måke utenfor. Det har aldri skjedd før. Det er det som er nakne lenker.

Anders: Ja, det er bare dårlig praksis. Det er kjipt for alle. Ser stygt ut, kjipt med skjermlesere. Helt grusomt for skjermlesere, kjipt med lenkelister.

Erling: Ja, tenk å lese HTTP kolon skråstrek stråstrek www punktum og så videre. Andre feil?

Anders: Les mer og klikk her-lenker.

Erling: De er det en del av.

Anders: De er ikke nødvendigvis brudd på den tilgivende delen. Fordi formålet med lenkene kan forstås fra kontekst, for eksempel hvis lenken er en del av en setning som forteller hvor du havner hen når du klikker på den, eller hvis les mer ligger under en overskrift, slik som det gjør i noen nettaviser der du har en overskrift som sier Dette er terrorskytingen, så står det Les mer. Da er konteksten gitt. Når det er sagt så bryter du da den strenge varianten, fordi Les mer uten kontekst sier ingenting. Derfor har for eksempel nettavisene, trenden der, er at de har sluttet med det. For eksempel NRK bruker ikke disse les mer-lenkene, de har valgt den strenge varianten. Godt er det, fordi det er unødvendig å ha en les mer-lenke på en artikkelliste, på en nyhetsside. Vi vet at dersom vi klikker på bildet, ingressen eller overskriften, så tas vi inn til artikkelen.

Erling: Og tittelen på artikkelen i listen, er jo allerede en beskrivende lenke.

Anders: Det er den beste teksten.

Erling: Det er den teksten de som ser får, dersom du gjør den om til en lenke, så vil òg de med lenkeliste få den i listen.

Anders: Så jeg vil slå et slag for at les mer-lenker og klikk her … les mer er faktisk bedre enn klikk her fordi det er ikke alle som klikker.

Erling: Du klikker ikke på mobil.

Anders: Unngå det.

Erling: Tenk deg om to eller tre ganger før du designer eller implementerer les mer-lenker.

Anders: Og hvis en òg slår et slag for Google og søkemotoroptimalisering, så er de ganske tydelige – beskriv lenker godt. Og da hjelper det ikke med kontekst.

Erling: De vet sikkert mye.

Anders: De vet mye om konteksten, lenker er Googles ryggrad, måten de bygger opp rangeringen på. Og da vi ha gode lenketekster. Og for å gjenta, don't make me think, la det være entydig hva en lenke gjør.

Erling: Hvilke verktøy? Nå har vi nevnt det ene verktøyet.

Anders: Vi har disse lenkelistene. De får du i forskjellige former. Du kan òg bruke Web developer som er en utvidelse til Chrome. Denne viser deg òg alle lenkene. Og alle SEO-verktøy gir deg god informasjon om alle lenkene på en side.

Erling: Må du? Bryter du loven?

Anders: Ja. Det gjør du. Det vil si at det strenge lenkekriteriet er trippel A. Hvis du har les mer-lenker og det går ann å forstå det programmatisk ut fra kontekst, så …

Erling: … er det i henhold til 2.4.4, men bryter 2.4.9. Men utenom det skal du følge dette, flere måter. 2.4.9 gir deg et perspektiv, og det fører til at du lager bedre lenker for alle, hvis du tenker på det og følger det, og unngår les mer. Selv om 2.4.9 er trippel A, så bør du hige etter å være i henhold.

Erling: Og i dagens ris og ros, vi har allerede rist og rost oss selv.

Anders: Det var vel mest ris?

Erling: Det var vel gjerne det? Nei, vi roste at vi hadde lenker på hjemmesiden, vi har to innganger.

Anders: Vi har to lenker på samme side som går til forskjellig mål, som ikke er så bra.

Erling: Dette er noe vi kan gjøre noe med, og gjøre bedre.

Anders: Vi skulle ta nettbutikker, og da får jeg begynne rett på Komplett, en de fleste kjenner til. En nettbutikk vil aldri bryte flere måter, for å si det. Hvis du har en nettbutikk uten søkefelt, så tenker du ikke så mye på brukerne eller det å selge produkter. Vi fokuserer på lenker. Hvis jeg åpner Komplett, og åpner en lenkeliste, så er den første lenken Jeg vil vite mer. Det er all informasjon. Og da vet vi at vi har brutt formål med lenke uten kontekst. Fordi vi vet ikke hva vi skal vite mer om. Og i dette tilfelle bryter vi den òg med kontekst, fordi den lenken står ganske alene. Den har ikke en overskrift. Den har riktignok et avsnitt som omhandler informasjonskapsler.

Erling: Nå røpte du hva den handler om.

Anders: Det handler om informasjonskapsler, så dette cookieaksepten som dukker opp i bunn. Den dukker opp først, fordi den er først i DOM-en, men den er plassert i bunn. Løsningen er jo enkel, jeg vil vite mer om informasjonskapsler eller cookies som lenketekst, i stedet for jeg vil vite mer. Så enkelt. Eller, hvis du vil fikse den på den tilgivende måten, så kunne du ha hatt en overskrift i cookiebanneret ditt som sa at det handlet om informasjonskapsler.

Erling: Da hadde du vært i henhold til 2.4.4, men ikke 2.4.9. Bra. Har vi mer?

Anders: De har mange velg-knapper på produktene sine. I nettbutikker er det vanlig med produktlister. Du er jo veldig flink å lage nettbutikker, Erling. Det har du gjort mye. Har du tenkt på dette?

Erling: Nei.

Anders: Her skjønner jeg at det kan være vanskelig å beskrive lenkenes formål, fordi hvis har en bestillenke for hvert produkt, noe du ofte har. Så er det jo litt vanskelig å gjenta hele produktnavnet i hver knapp.

Erling: Spesielt når det nettopp har blitt nevnt. Du har nevnt det i overskriften.

Anders: I dette tilfellet her så velger man å bare være i henhold til den med kontekst, fordi produktnavnet står i overskriften vår, og det får være godt nok. Så vil det være ganske dårlig i lenkelister.

Erling: Det vil potensielt sett ødelegge lenkelister hvis det står 40 velg.

Anders: Her har vi en god løsning, å legge til metainformasjon. Da har vi som vi nevnte title-attributtet, vi har aria-label eller aria-labeledby.

Erling: Men hvis det var lenke på produktnavnene i tillegg, og en hadde hatt aria-hidden på kjøp-knappen, hadde det funket? Hadde det vært i henhold til 2.4.9?

Anders: Ja, hmm. Nei, det hadde ikke vært i henhold, fordi da hadde du løst det for skjermlesere, men 2.4.9 er ikke spesifikt rettet mot skjermlesere. Så du hadde ikke løst den kognitive delen av det, skumlesing.

Erling: Den delen som ikke bruker skjermleser.

Anders: Et veldig godt forslag, og noe en bør gjøre. Hvis en skal ha de knappene, og overskriften er klikkbar, som den er, og overskriften blir en god lenketekst, så kan en godt skjule den velg-lenken til Komplett for skjermleseren. Du trenger ikke å velge noe, du trykker på produktnavnet.

Erling: Fordi det har en funksjon i nettbutikkverden, at en skal kommunisere at en kan kjøpe det eller hva det måtte være.

Anders: Det har det. Så skal vi komme inn på noen som gjør det på en annen måte, i ros-spalten.

Erling: Skal vi rise flere?

Anders: Ja, vi kan rise Elkjøp. De bruker ikke velg eller bestill, de har Vis produkt som knapper i produktlisten sin. Det er samme felle som Komplett gjør. De har i tillegg gått i en annen felle. Og det er at lenkene ikke er en a-tagg. De bruker ikke semantisk kode. Nå har jeg ikke testet det med tastatur, men vi vet at når du ikke bruker semantisk kode, så blir det ikke en del av tilgjengelighetstreet, så for eksempel med tastatur, så kan det blir vanskeligere hvis de ikke har lagt på tastaturevents i tillegg.

Erling: Da kan jeg jo jeg spør, i kontekst av disse suksesskriteriene, hvis det ikke er en a, et anker. Treffer det disse?

Anders: Ja, det er en lenke.

Erling: Selv om det ikke semantisk er en lenke? Vil det dukke opp i lenkelisten?

Anders: Nei.

Erling: Men vi vil fortsatt treffe …

Anders: Det er en lenke. Du har gjort det interaktivt, du har kodet slik at det blir en lenke.

Erling: Det fungerer på alle måter som en lenke.

Anders: Det er en lenke. Men det de har gjort, som er litt artig, lagt på et title-attributt i tillegg som òg heter Vis produkt. Så teksten er vis produkt, og title-attributtet er vis produkt. Og det bevitner om litt lite kunnskap, fordi da prøver du å gjøre det bedre, men du gjør det verre. Du gjør en bjørnetjeneste for det som potensielt sett skjer er at det leses dobbelt. Vis produkt. Vis produkt. For hvert produkt. Irriterende. Så Komplett og Elkjøp kan veldig gjerne putte på litt mer beskrivende lenketekster, enten rett i teksten eller som meta.

Erling: Ros da?

Anders: Da har jeg lyst å trekke frem både Stormberg og Clas Ohlson.

Erling: De skal roses for det samme?

Anders: Ja, de har brukt samme teknikk. De har gjort det som nettavisene gjør, de har tenkt at produktnavnet i seg selv er godt nok. Vi trenger ikke noe les mer i bunn. Vi trenger ikke noe velg eller vis produkt i bunn. Det er implisitt godt nok at en produktliste er klikkbar. Hvis du klikker på et produkt i en produktliste så kommer du til produktdetaljer.

Erling: Du kommer en plass der du kan kjøpe produktet.

Anders: Det er slik nettbutikker fungerer, det er konvensjoner. Hvis vi ikke har den knappen, så påvirker ikke det salget vårt.

Erling: Det er jo en påstand vi ikke har data for å underbygge. Det er ingen som ser en liste med produkter og lurer på hvordan man kan kjøpe dem hvis de ikke har knapp.

Anders: Her er det ingen kjøpknapp, jeg stikker til konkurrenten. Dette er jo antagelser, men jeg er trygg på dette.

Erling: Det er jeg òg.

Anders: Så litt kudos Stormberg og Clas Ohlson.

Erling: De har valgt å fjerne kjøpknappen i listen.

Anders: Jeg vil argumentere for at det blir mindre å forholde seg til, det blir renere design.

Erling: Mindre støy, mer fokus på det som er viktig.

Anders: Mer fokus på produktbilde. Vi har optimalisert disse kjøpsknappene i en årrekke, hvilke farge, størrelse osv. Ok, her har de sagt. Det er produktnavn og bilde som er viktig.

Erling: Folk forstår at en kan kjøpe.

Anders: Hvis du nå hører på og driver en nettbutikk, og lurer på om du skal ta velg Velg, bestill eller kjøp-knappen i en produktliste, så setter du opp en A/B-test og ser om det påvirker konverteringen i den ene eller andre retningen.

Erling: Og jeg tørr påstå at sannsynligvis vil du ikke merke så mye. Da kan en òg konkludere med at en bør fjerne det. Når vi snakker om bestillknappen og kontekst, så snakket vi om dette før spilte inn. Nå husker jeg ikke om vi har nevnt det når vi spiller inn, men bestillknappen på produktsiden, hvis du får den opp i en lenkeliste, så står det bare bestill. Den er ikke beskrivende. Er det greit?

Anders: Ja, der vil jeg si at det er greit. I en produktliste er det ikke greit. Da får du potensielt opp bestill, bestill, bestill. I en produktdetaljside som kun omhandler produktet, der du får produktnavnet både i sidetittelen, du får det i hovedoverskriften og i brødsmulestien, da er det greit at det kun står bestill eller legg i handlekurv eller noe slikt. Hvis du virkelig skal tolke WCAG hardt, så kan du argumentere med at du forstå ikke hva du gjør uten å skjønne konteksten, men konteksten er for sterk til at jeg kjøpe det argumentet.

Erling: Enig. Når en har gått inn på en produktside, en vet hvor en her, en har valgt å gå inn på den produktsiden.

Anders: Og det er kun ett produkt du kan bestille her, kun ett valg.

Erling: Enig med deg.

Anders: Det blir som om du på en side har en knapp som heter søk på søkefeltet. Du trenger ikke å skrive på knappen, søk i alle undersider i dette nettstedet.

Erling: Vi kan ikke fordumme det heller.

Anders: Konklusjon – prøv å unngå å gjenta den samme knappeteksten. I en produktside er det OK å bare skrive legg i handlekurv.

Anders: I dag er så heldige å ha med oss en gjest. Det er podkasten sin tredje gjest, det begynner å bli bra. Med oss i dag har vi Rannveig Alette Skjerve. Stemmer det, sa jeg det riktig?

Rannveig: Ja, det var riktig. Alle tre.

Anders: Takk for at du hadde lyst å snakke med oss. Nå har jeg blitt litt kjent med deg, og i første setningen, så fortalte at du satt og jobbet med SVG-animasjoner, universell utforming av dem, som skulle inn i en ebok. Og så i neste setning så fortalte du meg om undertrykkelse av kvinner og hva det har med universell utforming å gjøre. Nå er jeg enormt nysgjerrig på vår prat med deg, fordi du kan ting jeg ikke kan noenting om, og det er gøy. Du skal få lov å si hva du gjør på jobben din, at du jobber på Netlight og at du er så heldig å jobbe mye med universell utforming, men hovedgrunnen til at vi kontaktet deg er fordi du har skrevet en masteroppgave om universell utforming. Jeg skal ikke prøve å videreformidle hva den handler om, det skal du få gjøre selv. Hvis vi ser at det blir for vanskelig å fortelle om på fem–ti minutter, så snakker vi om noe annet. Du har skrevet en masteroppgave?

Rannveig: Jeg har skrevet en masteroppgave og sett på hvordan vi bruker universell utforming i et interseksjonelt perspektiv.

Anders: Det må du forklare.

Rannveig: Det er mange vanskelige ord på én gang. Det handler rett og slett om forskjeller som skapes i undertrykkelse når du bruker nett. Undertrykkelse i denne sammenhengen kan du tenke på, når vi ikke lage det for noen. Vi undertrykke folk med funksjonshemminger når vi ikke lager tilgjengelige nettsider. Vi undertrykker kvinner når vi lager nettsider som ikke er brukbare for kvinner.

Anders: Finnes de?

Rannveig: Ja.

Anders: Jeg har aldri tenkt på det før.

Rannveig: Det var det jeg lurte på, egentlig. Det masteren min har sett på er forskjellen på å lage tilgjengelige nettsider for en generell person med funksjonhemming.

Anders: Det er det vi ofte gjør.

Rannveig: Vi har generelle guidelines som handler mye om fysikk og funksjon. Det her mennesket kan ikke bruke mus. Det er det vi tar oss av. Og så tror vi at den måten å løse det problemet på er det samme for alle og vil fungere for alle. Det er det vi går ut fra. Det jeg har sett på er hvordan det vil være annerledes avhengig av hvilken identitet du har, om du er kvinne, om du er skjeiv, om du er rasifisert. Og hvordan det endrer seg. Gjorde det det litt klarere?

Anders: Ja, det er nok forståelig. Det jeg tenker på når du sier det, det er kanskje en misforståelse av meg – oi, er dette når du spør om kjønn i et skjema at du må ta med alle de x antall forskjellige som finnes, eller er dette mer overordnet?

Rannveig: Det er et godt eksempel. Det her er et teoretisk eksempel som jeg har brukt mye for å forklare, det er dette med kjønn i skjema. Du får et skjema med mann og kvinne. Og så har du en kognitiv nedsettelse som gjør den jobben med å ta et valg litt vanskeligere. Og så får du ikke et alternativ som stemmer for ditt kjønn. Så er det da tilgjengelig? Det vil jeg si at det ikke er.

Anders: Ok. Så hvor mange valg i et slikt spørsmål anbefaler du?

Rannveig: Først og fremst vil jeg tenkt om det er nødvendig. Treng vi egentlig å vite kjønn i dette skjemaet. Og veldig sjelden er det sant. Hvis ikke kan du ha en tredje mulighet som er ingen av delene, eller ønsker ikke å oppgi.

Anders: Det er vel gjerne en god løsning.

Rannveig: I Norge kunne vi hatt et tredje valg som er trans. Men det kommer ann på hvor du er i verden. Vi har enormt mange kjønn.

Anders: Da har jeg lyst å komme med et konkret spørsmål. Jeg arrangerer et løp, og i det påmeldingsskjemaet så spør jeg etter mann/kvinne. Og da gjør jeg tydeligvis en feil. Jeg ønsker jo å forbedre meg. Og grunnen til at jeg gjør det, er at vi har to klasser, vi ønsker å kåre herrevinner og kvinnevinner. Så sier du, trenger vi egentlig å spør om det? Nei. Trenger vi å kåre en kvinne- og mannevinner? Nei. Vi kan slå dem sammen. Er det en bedre løsning?

Rannveig: Det er en god løsning. Hvis en vil beholde herre- og kvinneklassen, som en har en tendens til å ville i sport, så kan du i stedet for å spørre om kjønn, spørre hvilken klasse en skal delta i.

Anders: Ja, bare endre litt på mikroteksten.

Rannveig: Det er en liten endring for teksten, men en ganske stor endring for dem som skal bruke det.

Anders: Og det vet vi av mikrotekster generelt sett, i brukervennlighet, at litt feil begrepsbruk kan gjøre brukeren veldig usikker. Det synes jeg var et veldig fint forslag. Men nå tok jeg over samtalen her.

Rannveig: Det var veldig fint, jeg trenger litt hjelp å forklare dette på en god måte. Hovedfunnet i masteren, det handler mye om kognitivt. Hvordan legger vi opp ting. Hvem vi tenker på når vi legger opp ting kognitivt. Og så er det en helt grunnleggende, som jeg synes er kjempeviktig, det at ting koster. Det er en annen type undertrykkelse. Klasse, sosioøkonomisk status. Hvor mye penger har du å bruke. Når vi lager løsninger som krever dyr teknologi å bruke, når vi lager løsninger som er dyre.

Anders: Nå snakker du om dyrt for sluttbruker?

Rannveig: Ja, de som skal bruke. Vi lager løsninger for rike folk med funksjonshemminger.

Anders: Du setter i gang tanker. Fattige i Norge.

Rannveig: Si folk med lav inntekt, eller folk som har lite rutte med.

Anders: Er det stor andel mennesker med lav lønn som ikke har internettelefon i dag?

Rannveig: Men internettelefon er nok ikke, da snakker vi om enda litt lavere. Da snakker vi om når de går med dumtelefon, tenker du? Det jeg snakker om er på større flater, i det du er koblet til nett. Det er mer i forhold til hva det koster for å kunne gjøre den tingen.

Anders: Prisen i løsningen.

Rannveig: Jeg har tre hovedting. De er funnene er ganske komplekse, jeg skal ikke prøve å forklare det på 10 minutter, det tror jeg ikke går. Hovedpoenget ut fra masteren er hva er det jeg ikke vet om andre når jeg programmere og lager en nettside. Jeg vet at slike som meg, jeg er hvit, jeg har ingen peiling på hvordan det er for et menneske som er rasifisert, å bruke en nettside, hva som er annerledes. Da må jeg spørre.

Anders: Og da snakker du ikke om kultur? Det faller utenom?

Rannveig: Kultur er jo en del av det. Nå blir det komplisert og teknisk med én gang. Nå går vi inn på systemer og det teoretiske rammeverket som jeg har brukt, da trenger jeg sikkert en time.

Anders: Det er godt mulig at vi tar en prat på et senere tidspunkt og lager en hel episode når vi er ferdige med disse 26 WCAG-episodene vår.

Rannveig: Det er jeg med på, jeg har mye å fortelle, synes jeg selv da.

Anders: Når jeg spurte om kultur tenkte jeg, innenfor nettløsninger, så har jeg hørt det tidligere at asiatere foretrekker mer maksimalistiske løsning og vi vestlige foretrekke mer minimalistiske løsninger, at designtrendene er enklere for oss enn i asia. Men jeg vet ikke om det har noe med det du har skrevet om.

Rannveig: Jo, det har mye med det jeg har gjort. Den forskningen vi har gjort, er veldig orientert rundt det globale nord, og så tror vi at vi kan eksportere det rundt til verden. Men kognitive modeller rundt i verden er veldig forskjellig. Det kommer ann på masse. Slik at vi lage universelt utformede nettsider som er basert på en vestlig forståelse, eller en global nord forståelse av brukbarhet. Det jeg gjør er å komplisere dette 1000 ganger. Gjør universell utforming enda mer komplisert. Jeg synes nesten det er like viktig, at vi ikke gir oss.

Anders: Jeg klarer ikke helt å slippe tanken om at pris kan være undertrykkende. Jeg er enig, jeg forstå det. Men pris er jo … Hvis du skal prise en tjeneste eller et produkt, å ikke prise det ut fra markedspris, men ut fra hva alle i samfunnet har råd til, så får det store implikasjoner?

Rannveig: En må se litt på realiteter. Alt i verden blir ikke gratis bare fordi det er et poeng. Det er mer i forhold til, slik jeg tenker rent praktisk da, så vil det være at når vi lager en nettside, veldig konkret, at vi ikke legger inn ting som krever dyrt utstyr for å lese, for eksempel at gratis skjermlesere kan bruke det, ikke bare de som koster mye penger. Så hold seg til robust, rett og slett.

Anders: Ok, jeg feiltolket litt din tanke når jeg tenkte på nettsider som skal selge deg noe, en tjeneste eller produkt, det er ikke nødvendigvis det du tenker på.

Rannveig: Da kommer man inn i en verden som er vanskelig å ta tak i. Ting som koster penger er ikke tilgjengelig for alle. Det er helt klart. Det er ikke enkelt å tak i.

Anders: Ok, nå har jeg kanskje et bedre eksempel. Når vi lager tjenester, så skal vi finne ut hvilke nettlesere og telefoner det skal støtte. Og så finner man gjerne at de 80 % mest brukte telefonene er disse tre, og så tester man mot de. Men hvis man hadde sett på hvilken mobiltelefon de med 10 % lavest inntekt hadde brukt, og i tillegg optimalisert for de telefonene, så hadde man vært i tråd med din oppfattelse, eller denne tolkningen, ikke din tolkning, denne vinklingen på universell utforming?

Rannveig: Det var et perfekt eksempel.

Anders: Åh, takk. Nå var jeg litt ute på siden, så klarte jeg å komme meg til land igjen.

Rannveig: Det er et stort tema.

Anders: Ok. Du er konsulent, som meg. Du jobber i Netlight, jeg tipper det er litt forvirringer mellom Netlight og Netlife.

Rannveig: Det er det nok, det er Netlight som du jobber i.

Anders: Du er så heldig å jobber med universell utforming der. Har du lyst å fortelle litt om hvordan du og dere jobber, og om hvordan du tar med disse perspektivene på universell utforming, jeg vet ikke hva jeg tørr å kalle dem, kanskje utradisjonelle, men ikke det vi tenker på med universell utforming hvis vi forholder seg til WCAG, som er litt på andre enden av uu-skalaen hvis det går ann å si.

Rannveig: Nå er jeg ganske ny i Netlight, jeg er nettopp ferdig med masteren. Jeg har ikke jobbet der veldig lenge. Er du konsulent så blir du fort evangelist på hva du holder på med. Jeg snakker mye om universell utforming. Forklarer hva jeg har funnet, prøver å få folk til å tenke.

Anders: Da tenker du evangelist internt?

Rannveig: Ja, intern evangelist. Nå sitter jeg å jobber med SVG-er. Da blir det mye forklaring. Jeg er tester, så jeg tester og forklarer. Det er vanskelig å få inn en så ny tankegang, synes jeg. Det er vanskelig å vite hvordan en skal ta det med seg inn, det er så altomfattende. Jeg vet ikke hvordan jeg skal svare godt.

Anders: Nei, men du jobber med SVG-er sier du. Det gjør jo de fleste som jobber med web i dag. Det er populært format. Hvordan må du tenke annerledes når SVG-ene er animert?

Rannveig: Det er særlig i forhold til syn, fordi det skjer jo ting i animasjonene, så det å få beskrive det på et godt vis.

Anders: Er det informative eller dekorative.

Rannveig: Informative, de er illustrerende eksempel. Det må være med, og det er viktig at det er med. Jeg jobber med teksten.

Anders: Den teksten som står i relasjon til SVG-en, eller den alternative teksten?

Rannveig: Den alternative teksten. Det er noen av animasjonene som ikke har tekst, som bare viser noe, som beskriver det alternativt. Det er veldig artig.

Anders: Mitt råd når en bruker SVG har tidligere vært kodemessig å bruke title-taggen i SVG, er det din anbefaling òg?

Rannveig: Title-taggen og så driver jeg å finner ut av description-taggen for å finne ut om det er mulig å få en bedre …

Anders: Så det er beste praksis, for der er det litt diskusjon?

Rannveig: Ja, jeg synes det er komplisert, akkurat den.

Anders: Det er litt komplisert, det er ofte … Vanligvis når du setter inn et bilde med en alternativ tekst, så kan du sette den alternative teksten i CMS-et eller i koden. Når en utvikler får en SVG, så er jo koden allerede laget, og da inneholder ofte titlen bare noen tall eller noe beskrivelse som ikke gir mening i bruken av den, så da må en klare å overstyre det.

Rannveig: Vi jobber rett på SVG-ene. Vi har kontroll på dem. Vi har tilgang til koden. Det er vi som får mest av jobben på sånn, det gjør det lettere.

Anders: Men titlen er den viktigste.

Rannveig: Den er viktigst, den fungerer hver gang. Description har jeg mer problemer med.

Anders: Når du sier problemer, tenker du da på hvilke skjermlesere som forholder seg til description?

Rannveig: Ja.

Anders: Ja, det vet jeg ikke.

Rannveig: Det er sikkert noe jeg ikke har funnet ut av enda. Spør meg om en dag eller to, så vet jeg det.

Anders: Ok, fikk du sagt det du hadde lyst til?

Rannveig: Ja, det synes jeg.

Anders: Dette var en samtale der jeg kommer til å gruble litt videre, kverne litt. Du har åpnet noen dører i hodet som ikke har vært åpne før, så det er, jeg synes det var kjempeinteressant.

Rannveig: Det var det jeg håpet på. Få folk til å tenke.

Anders: Og det tipper jeg alle lyttere har gjort. Tusen takk for praten. Jeg har veldig lyst å snakke mer med deg på et senere tidspunkt.

Rannveig: Veldig gjerne.

Anders: Er det noe du har lyst å si på tampen? Hvis folk vil høre mer om deg, hvordan skal de kontakte deg? Er du i kanalene?

Rannveig: Jeg er nok ingenplass, tror jeg. Har ikke kommet meg ditt, eventuelt kommet meg bort derifra. Det går ann å sende en mail, det er jo skikkelig oldschool.

Anders: Skal du si adressen?

Rannveig: Kanskje bare legg den ut, det er litt sånn rettskriving og sånn, med navnet.

Anders: Rannveig, tusen takk for praten, stå på videre med evangelistrollen din som uu-evangelist i Netlight, ikke Netlife. Stå på videre! Så snakkes vi igjen.

Rannveig: Det gjør vi.

Anders: Hade.

Rannveig: Hei.

Erling: Da var vi ferdige for i dag. Tre ting du skal huske fra dagens episode? Eller to eller én. Hva skal en huske.

Erling: Det er jo å være bevisst på lenketekst. Skriv så godt som mulig. En teknikk er å få opp en liste med bare lenkene. Enten med den extension som du nevnte eller gjennom skjermleseren.

Anders: Det anbefaler jeg. Gå inn på Komplett. Åpne en lenkeliste. Du får opp hundrevis av lenker. Det er ikke kun Komplett. I en vanlig nettbutikk, på en forside, det er så mye lenker. Wikipedia òg, det er så mange lenker. Da er det så tydelig når det kommer lenker som jeg vil vite mer.

Erling: Om hva da? Hva skjer hvis jeg klikker på denne lenken?

Anders: Det er dagens øvelse til deg, åpne det du er ansvalig for, uansett om det er nettbutikk eller ei. Gjør det på forsiden og de mest besøkte sidene dine. Legg sidesøk og sidekart. Vi sier to ting du skal huske. Gode lenketekster og legg til søk og sidekart.

Erling: Neste episode, hva skal vi snakke om da?

Anders: Husker ikke.

Erling: Skal vi la det være en overraskelse? Jeg kan si hvilke kriterier det er. Det er 2.4.6, 2.4.7, 2.4.10 og 2.4.8.

Anders: Fire stykker der vi har blandet rekkefølgen. De har jeg ikke i hodet, Erling.

Erling: Da går jeg inn og jukser. Det er headings and labels. Og så er det focus visible. Og så er det section headings. Og den siste, location. Trigger det noe?

Anders: Jada, vi er fortsatt på navigasjon. Det handler om å vise hvor du er, la brukeren forstå hvor han er. Enten det er overskrifter, som vi har snakket om i dag. Dersom den jeg vil vite mer hadde hatt overskriften informasjonskapsler, så hadde vi skjønt det bedre. Der fant vi et brudd på neste episode òg.

Erling: Som vanlig, vi drives av kommentarer og tilbakemeldinger. Historier og sånn. Send det gjerne til hei@universeltutformet.no. Det var det vi hadde for i dag. Takk for oss. Jeg er Erling fra Okse.

Anders: Jeg er Anders fra Webstep.