UU-podcasten:Universelt utformet

Erling: Da er det episode 14, Anders.

Anders: Hvor er du, Erling?

Erling: Jeg er over halvveis, hvis det var det du lurte på? Var det det du lurte på?

Anders: Nei, jeg prøvde å være litt morsom med tanke på dagens tittel. Hvor er du?

Erling: Hvor er du? Vi er jo over halvveis. Milepælen. Der er vi.

Anders: Hvordan føles det?

Erling: Det føles konge.

Anders: Hva føler du nå?

Erling: Ja, si det. Dummeste spørsmålet som kan stilles. Nei, det er kjempefint, og dette går radig. Motivasjonen er høy, og alt er fint.

Anders: Det føles bra. Jeg lærer mye hver episode.

Erling: Ikke så mye som meg.

Anders: Tja, jeg lærer mye. Så tror ikke vi skal ha en konkurranse om hvem som lærer mest. Så det er kjekt å formidle det jeg kan og det jeg lærer. Veldig godt å bli tryggere på et fagområde.

Erling: Veldig kjekt. Bare det å gå inn på nettsiden og se alle de episodene som ligger nedover, den følelsen av å ha gjort et slikt stykke arbeid, å vite at bak hver eneste episodene, så ligger det flere timers arbeid. Det er litt deilig.

Anders: I dag skal vi snakke om tredje del av WCAG 2.4, og nå skal jeg spør deg Erling, hva er 2.4?

Erling: Toen står for operable, altså mulig å operere. Firen står for navigere, mulig å navigere. Var det rett?

Anders: Det var rett.

Erling: Bra, da har jeg lært noe jeg òg.

Anders: Vi skal ta siste innspurt om det som går på navigasjon.

Erling: Hva er det vi skal snakke om idag, spesifikt?

Anders: I dag har vi plukket ut fire kriterier. To av dem henger sammen og to av dem er ganske alene. De to som henger sammen handler om overskrifter og deloverskrifter og ledetekster.

Erling: Når du sier ledetekster, du lærte vel nærmeste i dag, vi snakket om det i dag, det vi mener er label i et skjema, først of fremst?

Anders: Ja, først og fremst. Label er ikke nødvendigvis HTML label i denne betydningen.

Erling: Nettopp. Og det er en presisering vi kan ta med én gang. I dag snakker vi ikke om kode. Det snakket vi om i episode 1.3.1 som handler om god kodekvalitet.

Anders: I dag handler det mer om innholdskvaliteten. Dette spiller på lag, og vi tenke på alt. Nå skal vi snakke om overskrifter og deloverskrifter. Jeg har alltid sagt underoverskrifter, og det er et veldig rart ord. Deloverskrifter. Deler av en side, eller deler av en tekst.

Erling: Underoverskrifter? Hvorfor heter det ikke bare underskrift? Men det er jo noe helt annet. Det blir rot. Men deloverskrift, ja. Det gir mer mening.

Anders: Direkte oversatt hadde det blitt seksjonsoverskrifter. Vi velger å bruke samme begreper som Difi, og jeg synes deloverskrifter er bra.

Erling: Og de to som er utenfor, hva handler dem om?

Anders: Handler om synlig fokus. Da snakker vi om tastaturfokus, at det er synlig. Tidligere har vi snakket om fokus, men at det skal fungere. Her er det at det er mulig å bruke det.

Erling: Og den siste?

Anders: Den handler om plassering, altså fortelle brukeren hvor han er. La han/hun forstå hvor han er, for eksempel hvis du kommer direkte til en side som ligger dypt i strukturen.

Erling: For eksempel hvis du søker opp et produkt, og havner på en nettbutikk, så kan det være greit å vite hvilken kategori dette produktet ligger i.

Anders: I dagens aside, hva skal vi snakke om da?

Erling: Da skal vi snakke om noe som jeg kunne litt for lite om, og det er skjermlesere. Hvordan fungerer de? Hvordan er de strukturert opp? Hvordan blir de brukt?

Anders: Her er vi litt inspirert av forrige episode, der vi fikk et godt innblikk i hvordan Lars brukte sin datamaskin.

Erling: Og i dag, når vi har testet til ris og ros-spalten som i dag skal handle om rubrikkannonser.

Anders: Hva er rubrikkannonser?

Erling: Der du selger brukte ting. Eller som vi vanligvis referer til, finn.no.

Anders: Finn dot enno.

Erling: Hvorfor har vi disse kriteriene?

Anders: Struktur og formattering av innhold er viktig for å forstå og finne frem. Vi vet at folk skumleser. Dersom du skal skumlese store mengder tekst som ikke er gruppert i overskrifter, så krever det mye mer av leseren.

Erling: Det ender ofte opp med at en ikke gidder.

Anders: Mentalt sett er det tyngre å ta inn over seg informasjon som ikke har gode overskrifter og inndelinger. Dette er viktig for alle, og et veldig fint eksempel på at universell utforming er bra for alle og nødvendig for noen. Spesielt de med lese- og lærevansker, og dårlig korttidsminne. Nå går vi går på skjema, så er gode ledetekster viktig for å forstå. Hva skal inn i disse skjemaene?

Erling: Hvis de er dårlige, klarer en ikke å fylle ut skjema, så enkelt er det.

Anders: Det går på datakvalitet. Hvis du i et skjema bare skriver navn, så kan det hende at brukeren kun skriver fornavn. Og da vil du som mottaker bli litt misfornøyd, hvis du vil ha etternavnet. Da kan du løse det med to felter, fornavn og etternavn, eller spesifikt skrive fornavn og etternavn på feltet.

Erling: Eller fullt navn.

Anders: Ja, enda bedre.

Erling: Dette er slike ting disse suksesskriteriene peker på. Tydelige ledetekster som du kaller det eller label som jeg kaller det. Eller overskrifter. Og fokus, hvorfor har de laget et eget kriterie for fokus?

Anders: Det er fordi det hjelper ikke at ting er kodet riktig, så lenge at seende brukere som er avhengig av tastatur, eller foretrekker tastatur ikke klarer å se hvor de er. Det er òg veldig viktig for alle, i skjemaer der en snur seg litt vekk, skal fortsett å fylle ut, og raskt da vil se hvor langt en hadde kommet i et skjema.

Erling: Eller hvis en tabber seg gjennom skjema, som det er mange som gjør, uten å ha funksjonsnedsettelser, trygger på tabb for å komme til neste felt. Da er det viktig at en er trygg på hvilket felt som har fokus. Det er ikke alltid at de har god rekkefølge, som vi har snakket om tidligere. Viktig å vise hvor fokuset er. Og plassering? Det med å kommunisere hvor du er?

Anders: Det er viktig for å fortelle hvor en er i en prosess, hvis det er en stegvis prosess. Det er viktig hvis du havner inn i en struktur og du vil skjønne hvor det er. For eksempel hvis du vil vite hvilken kategori det du leser om hører til. Og for eksempel hvis du, som vi skal snakke om, rubrikkannonser, hvis du kommer direkte inn … hvis du får tilsendt en lenke til et produkt inne hos Finn, og så var ikke det produktet helt det du ville ha, men du vil se tilsvarende produkter i samme kategori …

Erling: For eksempel hvis noen sender deg en lenke til en sofa. Så går du inn der. Det var en fin sofa. Den vil jeg kjøpe. Hvis du ikke ser at det er i leketøyskategorien, så får du kanskje ikke med deg at dette er en lekesofa, altså en liten sofa. Ikke det beste eksempelet.

Anders: Likte deg jeg. Plassering, det er viktig.

Erling: Hvem må tenke på dette?

Anders: Hvis vi begynner med innholdskvaliteten, overskriftene, så er det jo de som skriver innhold. Innholdsprodusenter som vi har valgt å kalle dere. Håper dere òg hører på.

Erling: Tekstforfattere. Journalister. Skribenter. Den gjengen der.

Anders: Designere og kodere må tenke på den synlige fokusen. Både hvordan det skal se ut og hvordan en implementerer det.

Erling: Det kan bli en liten brannfakkel til designere. Design fokus state. Fortell hvordan den skal se ut. Ellers blir den ikke bli ivaretatt.

Anders: Designere må òg tenke på dette med plassering. Enten vise hvordan en brødsmulesti eller navigasjonssti skal se ut eller hvordan den skal være. Eller hvis du skal ha andre indikatorer på plassering. For eksempel en visuell indikator på hvilken side en er på. I en navigasjon er det ofte en indikator som sier du er på denne kategorien. Det er jo opp til designeren.

Erling: Hvordan kan vi passe på at vi er i henhold til disse suksesskriteriene. Hvilke teknikker finnes?

Anders: Det er et generelt råd, skriv tydelig og éntydig. Spesielt i overskrifter, ikke vær for kreativ.

Erling: Jeg har faktisk et eksempel fra min egen bakgård som jeg så i dag. På okse.no. Som en overskrift: Av og til må vi klype oss i armen.

Anders: Som en hovedoverskrift?

Erling: Ja. Det er egentlig referanser. Vi referer til hvor mange kjekke kunder vi har fått jobbe med. Det ser jeg nå at er en dårlig overskrift. Eller er det?

Anders: Det er en veldig dårlig overskrift. Dere prøver jo å skape en stemning ved å skrive det. Dere tegner jo et bilde med tekst, som er et fint virkemiddel, men kanskje ikke som den viktigste overskriften. Dere kunne gjerne hatt det som en undertittel. Men la det være klinkende klart, at du er nå inne på referanser. Hvis du bare leser av og til må vi klype oss i armen må du lese det i sammenheng med det som kommer før og etter. God selvinnsikt, Erling.

Erling: Det er viktig det.

Anders: Det handler og som, som med all tekst på nett, så vær så folkelig som mulig. Bruk de begrepene som brukerne og kundene dine bruker.

Erling: Unngå stammespråk.

Anders: Det fant vi et fint eksempel på i dag.

Erling: Skal vi spare det til ris og ros?

Anders: Ja, vi lar den henge litt. Stammespråk er jo noe som vår bransje ikke er så flinke på, som vi burde vært. Det er litt paradoksalt. UX-designere.

Erling: Dette er en felle mange går i. Det er ikke nødvendigvis uvitenhet heller. Det er bare at når en er i det hver dag er det vanskelig å se på det som noe annet.

Anders: Det er verdt å nevne at kriteriet overskrifter, det betyr ikke at du må ha overskrifter. Det tvinger deg ikke til å putte inn overskrifter på en side. Men når du bruker det, der det er naturlig, så skal det være beskrivende.

Erling: Det skal være gode overskrifter, ikke at en nødvendigvis skal ha.

Anders: Teknikker for fokus, det er at du kan bruke nettlesers standard. I Chrome er det ganske svak blå kantlinje.

Erling: Border.

Anders: Nei, det er ikke en border. Det er en outline.

Erling: Teknisk sett en outline.

Anders: Vi anbefaler å ta et grep, og sørge for at det blir bedre.

Erling: Defaulten er ikke nødvendigvis god,

Anders: Den kan være grei, vil jeg si, men det kan hende at den havner på en blå bakgrunn, for at du har en blå bakgrunn.

Erling: Det har vi sett eksempler på i ris og ros tidligere, husker ikke hvor.

Anders: En teknikk som er nevnt i WCAG er å bruke to forskjellige farger for å gjøre det mer fleksibelt. Det har jeg aldri sett eksempler på. Det kan bli litt tivoli. Men jeg likte ideen.

Erling: Jeg likte perspektivet. Det ideen setter fokus på. Du kan ha det samme elementet på lys og mørk bakgrunn. Ved å ha to farger som står i kontrast til hverandre, så ivaretar du intensjonen med fokus på både mørk og lys bakgrunn, men hvis en har to farger som skal stå i sterk kontrast til hverandre og de dukker opp når noen har fokus på et inputfelt eller lignende … Ta gjerne utfordringen, men jeg sliter med å se hvordan det kan se fint ut.

Anders: Tror det lar seg gjøre.

Erling: Vent, jeg har en idé! Hvis en inderst har hvit, den lyse som den innerste. På den ytterste så har en farge som er mer lik den mørke, så vil en gjerne være tydelig på hvilken bakgrunnsfarger en har, så kan det være at den andre bakgrunnsfargen kanskje. Altså du vil ikke se begge fargene alltid.

Anders: Neinei.

Erling: Det må jeg teste! Kanskje senere i dag.

Anders: Test det ut. Teknikker for vise hvor du er, er jo brødsmulesti eller navigasjonssti mye brukt.

Erling: Hva er det?

Anders: Det er en linje, som ofte står høyt oppe på en side, som har sidenavnene etter hverandre. Og viser hvor dypt du er, og hvor du er i sidestrukturen. En annen teknikk er å vise i navigasjonen, den aktive siden. Eller den overordnede siden. Hvis du for eksempel er på Finn, og har navigasjon som heter Torget og er du dypt i torget, så kan du visuelt vise at du er på torget.

Erling: Det er mer vanlig på sider som har mindre komplisert struktur. Altså hvis du kun har fem sider, og du har en meny hvor du kan hoppe til disse fem sidene. Å vise hvilken man er på, så viser du plasseringen din.

Erling: Når feiler vi?

Anders: Hvis du skriver forvirrende tekster.

Erling: Som vi gjorde på Okse.

Anders: Ja, det putter jeg i kategorien feiling.

Erling: Jeg òg.

Anders: For fokus, hvis du fjerner fokuset. Hvis du har tatt bort nettleserens standard, og det skjer ofte. Det er jo et resultat av at designeren ikke har kjennskap til hvorfor og intensjonen bak, og tenker at nei, jeg orker ikke at det noen ganger skal være gult og noen ganger blått i Chrome. Gult og blått passer ikke i vår profil, vi fjerner det.

Erling: Eller at det er total uvitenhet, at de tegner det, ikke er bevisst på det, implementerer et skjema. Uff, den blå fargen, du må fjerne den blå fargen. Koderen er òg uviten og fjerner den.

Anders: Men det kan òg skje utvitende for designeren hvis koderen bruker et stilark som nullstiller alle egenskaper.

Erling: Anbefales i utgangspunktet ikke.

Anders: Nei, det kalles reset CSS. Det er brukt i mange biblioteker.

Erling: Ja, men det finnes bibliotek som ikke tar det helt tilbake, men har en veldig god default. Som overstyrer browser default. Fordelen er da har du noe som funker bra på tvers av nettlesere.

Anders: Har du noen eksempler?

Erling: Ja, vi har en som heter Normalize. Med Z. Den anbefaler, den pleier jeg å bruke. Den er òg en del av et rammeverk som heter HTML 5 Boilerplate.

Anders: Da lærte jeg noe nytt, dette er ikke noe jeg har kjennskap til. Verktøy, Erling. Har du noen verktøy for å teste dette?

Erling: Når det kommer til overskrifter og sånn, så går det på innholdet. Hva står? Det viktigste verktøyet er fornuften, sunn fornuft.

Anders: Dette er noe du aldri vil finne med automatiserte tester. Slik som Kristian fortalte oss for noen episoder siden, så er det gode verktøy for automatiserte tester, men det er begrenset hva du kan.

Erling: De kan se om du har brukt ett eller flere ord, og si med en gitt sannsynlighet at dette er beskrivende nok. Men når det kommer det til fokus, så er det enkelt å bare bruke tab-tasten.

Anders: Som vi snakket om forrige gang, hvis du skal finne hopp over-lenker, så begynner du å tabbe. Det samme med fokus.

Erling: Tabb deg gjennom, se om du får med deg fokus. Er det utydelig for deg så er det høyst sannsynlig uttydelig for mange andre òg. Vi har sagt allerede at dette er bra for alle. Er det andre situasjoner hvor en kan dra fordeler av å være i henhold til disse suksesskriteriene?

Anders: Spesielt på overskrifter, å ha et språk som er det samme som brukeren, det er viktig for å være synlige i Google. Google vektlegger overskrifter mer enn annen tekst som brødtekst eller mengdetekst. Jo bedre samsvar det er mellom det brukeren søker på og det som står i teksten, jo lettere er det å få trafikk på det innholdet.

Erling: Da rangerer du bedre.

Anders: Så Google vil like deg på overskrifter. Tror ikke Google bryr seg så mye om den synlige fokusen.

Erling: Må du gjøre dette? Bryter du loven?

Anders: I dag har vi jo fire stykker. Det som går på fokus og overskrifter, det er dobbel A, det må du forholde deg til.

Erling: Et spørsmål der, når overskrifter … Det er en del skjønn i bildet der, hvordan kan en vurdere at en bryter den?

Anders: Det er subjektive vurderinger.

Erling: Det er skjønnsvurdering.

Anders: Det må bli slik.

Erling: Er det slik, så er det slik.

Anders: Hvis du spør fem i målgruppen din.

Erling: Jeg skulle til å si brukertest. Hvis noen i målgruppen din ikke skjønner det, så har du brutt det. Men de to siste?

Anders: Det som går på deloverskrifter og plassering, det er trippel A.

Erling: Jaha, ta det med deloverskrifter igjen.

Anders: Det er at du strukturerer teksten din med flere overskrifter enn hovedoverskriften.

Erling: Ja, du har en overskrift som beskriver en del av dokumentet eller siden.

Anders: Dette blir tydeligere i ris og ros-spalten.

Erling: Og plassering er denne brødsmulestien, eller navigasjonsstien.

Anders: Ja, du må ikke ha det. Men det er bra.

Aside

Erling: Det er veldig mange som har brødsmulesti, så det er bra. I dagens aside så skal vi snakke om disse skjermlesereneA. Det som er litt fint nå. Du satt og holdt på med noe, jeg tvinnet tommeltotter og hadde gravd meg ned i noe helt ubrukelig. Så sa jeg, kan ikke du ta begynne på ris og ros-delen. Ja, ok. Så skulle jeg begynne med å ta opp skjermleseren og teste noe med den. Da gikk det opp for meg at utenom å tabbe seg gjennom interaktive element, og få dem lest opp, så kan jeg lite om hvordan den fungerer. Da måtte jeg spørre deg. Da forklarte du noen gode konsept og teknikker som gjorde at jeg fikk en mye bedre forståelse av hvordan skjermleseren brukes. Og den ene funksjonen er noe på som på MacOS sin Voiceover heter Rotor. Kan du fortelle hva det er?

Anders: Det er et hjelpemiddel som lister opp ulike typer komponenter. Et eksempel på en komponent er en overskrift.

Erling: Forskjellige typer strukturerte komponenter som du kan navigere deg ved hjelp av.

Anders: I Voiceover sin rotor, så kan du få opplistet alle lenker på en side, alle overskrifter på en side, alle landemerker på en side, alle skjemaelementer på en side. Og dette er ikke unikt for Voiceover. Når er tilfeldigvis meg og deg Macbrukere, jeg er kanskje på vei bort, men det er en annen diskusjon. Men dette har du andre òg. Du kan liste overskrifter og lenker i de skjermleserene jeg kjenner til.

Erling: Det er andre måter å gjøre det på. Vi jukset litt og kikket litt på, hva heter den siden hvor de hadde gjort dette veldig bra?

Anders: Jeg sliter med uttalen der. Deque University er en kjemperessurs for universell utforming. De tilbyr blant annet kurs hvis du skal sertifisere deg i universell utforming. Deres beskrivelse av for eksempel Voiceover og hurtigtaster der, er bedre enn Apple sin egen. Så får du samlet én plass. De har òg oversikt over NVDA, som er en skjermleser som er gratis og mye brukt på Windows. Der kan du trykk på H for å gå til neste overskrift. Så kan du trykke insert F7 for å få alle overskrifter.

Erling: Det er kanskje første gang jeg har hørt om en bra bruk av insert-knappen. Den førte til mye frustrasjon i min oppvekst, helt til jeg fant ut hvordan jeg kom ut av insert-modus.

Anders: Har du mye frustrert av insert-knappen?

Erling: Jeg tror jeg kan si ja, for du havnet i en modus hvor du skrev over alt det andre. Vet ikke om du husker det? Vet du hva som skjer når du trykker på insert-knappen.

Anders: Ja ja.

Erling: Det var sykt irriterende, jeg følte at noe galt hadde skjedd. Men de bruker insert-knappen som en tastatursnarvei inn i funksjonaliteten.

Anders: Nå sporte vi av. Vi har det som i Voiceover heter Rotor. Det kan vi godt demonstrere. Da Erling, gi meg en nettside.

Erling: En tilfeldig?

Anders: Siden vi skal snakke om rubrikkannonser.

Erling: Skal vi hoppe rett over i ris og ros? Ta en liten segway?

Anders: Skal vi kombinere aside og ris og ros?

Erling: Ja, så kan vi forklare om funksjonaliteten vi bruker. La oss gjøre det.

Ris og ros

Erling: I dagens ris og ros skal vi snakke om rubrikkmarkedet og vi skal demonstrere skjermleserfunksjonalitet. Skal vi begynne med Finn?

Anders: Skal vi da åpne skjermleseren på finn.no. Da begynner vi med forsiden, og da kan jeg jo, nå fikk jeg jo lyst til å bare klikke vekk denne dine data, dine valg. Personvernmeldingen som jeg fikk. Men la oss ikke trykke den vekk, men se hvordan den fungerer i skjermleseren. Det som skjedde nå var at jeg ikke klarte å … Nå trenger jeg hjelp her, jeg har bare to hender.

V: Voiceover på Chrome. Finn.no mulighetenes marked Google Chrome. Webstep. Vindu. Jeg forstår knapp har tastatur.

Anders: Her fikk vi mye informasjon. Det som er tydelig her er at knappen Jeg forstår har tastatur, men skjermleseren forteller ingenting om hva den knappen gjør. Så her kunne knappeteksten vært bedre eller hatt metainformasjon. Vi skal ikke snakke så mye om det. Jeg trykker OK, det var jo denne rotoren vi skulle vise. Jeg er inne på forsiden til Finn, og trykker på kontroll option U.

V: Koblinger meny.

Anders: Da får jeg opp koblinger. Det er den delen av rotoren jeg var i sist. Her får jeg en lang liste koblinger. Da kan jeg pile meg nedover.

V: Kobling. Gå til markeder.

Anders: Kobling. Gå til markeder.

V: Brukte kobling. Forside.

Anders: Den gå til markeder, det var en hopp over-lenke som vi snakket om sist. Neste er forside. Nå vi snakket om alternativ tekst i første episode så nevnte vi dette med intensjonen med en lenke eller et bilde. Og her har de gjort det, kanskje litt enkelt. I stedet for å si Finn logo, så sier de forside. Det er behagelig i denne sammenhengen.

V: Kobling. Varslinger.

Anders: Varslinger er en funksjon hos Finn, som ligger først i den øverste menyen, så det er helt naturlig at det kommer i koblinger.

Erling: Et spørsmål hvis du trykker på den gå til markeder. Da kommer du til det punktet på selve nettsiden, den vil ikke hoppe ned i rotoren. Rotoren vil beholde posisjonen i rotoren.

Anders: Nei, hvis jeg går til gå til markeder nå, så lukkes rotoren.

V: Kobling. Gå til markeder.

Anders: Da lukket rotoren og så er jeg fokusert på den lenken som jeg valgte i rotoren. Så kan jeg gå til den.

V: Eiendom.

Anders: Da hopper jeg rett ned til eiendom. Så jeg har hoppet over varslinger og alt det der.

Erling: Den sa eiendom, markeder, navigasjon. Det var jo tydelig.

Anders: Veldig bra. Det var litt gøy, det var ros til Finn. Her gjør de flere ting. Her sier hva eiendom tilhører. Hvor er du hen? Plassering. Så her traff de på den. I tillegg sier de at dette er navigasjon, det betyr at de brukt semantisk kode. De har sannsynligvis brukt nav-taggen i HTML som da gir meg som skjermleserbruker informasjon at her er det flere ting etter eiendom. Her kan jeg navigere meg, her vet jeg at jeg er i en navigasjonsliste.

Erling: Her har kanskje Finn vært flinke å skrive semantisk kode, og fått mye gratis.

Anders: Ja. Helt topp. For å fortsette på rotoren, for vi snakket jo om overskrifter. Disse hurtigtastene, det er ofte tre-fire tastekombinasjoner.

Erling: Hvor tilgjengelig er det, egentlig?

Anders: Det vet jeg ikke. Nå åpnet jeg rotoren. Kontroll option U. Kom på koblinger. Så trykker jeg pil høyre.

V: Overskrifter meny.

Anders: Da får jeg oppført en liste med overskrifter, og jeg kan bla meg nedover.

V: Overskriftsnivå én. Finn.no – mulighetenes marked.

Anders: De har valgt å bruke tittel som hovedoverskrift.

V: Overskriftsnivå to, markeder.

Anders: Markeder. Tydelig.

V: Overskriftsnivå to, få mer utav Finn.

Anders: Det er subjektivt, her nærmer vi oss en gråsone, fordi nå er jeg på en overskrift nivå to. Få med ut av Finn, det er ikke særlig tydelig for meg hva som befinner seg under denne overskriften her. Jeg ble litt nysgjerrig, men jeg er usikker.

Erling: Hva er det? Er det artikler?

Anders: Det er en oppfordring til å logge inn, for å få varsler, sende meldinger, legge til favoritter og lagre søk. Du får utvidet funksjonalitet når du er logget inn. Hele call to action under den overskriften er Logg inn. Få nå det med i overskriften.

Erling: I stedet for Få mer ut av Finn, kunne det stått Få mer ut av Finn ved å logge inn.

Anders: Yes!

Erling: Det hadde vært tydelig.

Anders: Her fant vi et godt eksempel.

Erling: Er det et brudd?

Anders: Ja. Nå vil noen si nei. Hvis jeg hadde gjort en uu-revisjon av Finn, så hadde jeg anbefalt på denne overskriften, er tydeligere.

V: Overskriftsnivå 2, Populære annonser.

Anders: Perfekt. Vi er ikke i tvil om hva det er.

Erling: Kort. To ord. Veldig bra.

Anders: Skal vi gjøre mer?

Erling: Nei, vi dekket Finn.

Anders: Vi er ikke ferdige med ris og ros av Finn, vi er ferdige med den lille skjermleserdemoen.

Erling: Enig. Da skrur vi av skjermleseren, og så forteller vi videre om hva Finn har gjort i kontekst av suksesskriteriene.

Anders: Da holder du mikrofonen min litt, så skal jeg skru av hun kjekke damen som vi hører.

V: Voiceover av.

Anders: Da skal vi snakke om Finn. Vi har puttet Finn både på ris og på ros i dag. Sånn blir det vi snakker fire ulike suksesskriterer, så er det sjelden at vi finner noen som har full poeng på alle. Det som jeg vil først kritisere Finn for, det er dette med synlig fokus. De har prøvd. Noen plasser er det alt for dårlig. Det de begynner med i hovednavigasjonen, med varslinger, om hvordan du skal få varslinger om funn på det du er interessert i, der blir det en understrek på hele lenke i menyen. De bruker mye understreker, òg på vanlige lenker.

Erling: Det er en tydelig understrek?

Anders: Det er ikke tvil om at det er fokus. Den har god kontrast. Det kan vi jo si, er at den synlige fokusen bør sees på i relasjon med den som har vært gjennom, ikke-tekstlig kontrast som òg omhandler tilstander. Så synlig fokus, før vi fikk de nye WCAG 2.1 i fjor, var egentlig litt subjektivt – hva er synlig? Nå sier de at vi skal ha 3 i kontrast på fokustilstand. Det er akseptert å ha lavere kontrast enn tekst.

Erling: Men det betyr ikke at du skal sette det så lavt.

Anders: Neida, det er minstekrav.

Erling: Fokus kan godt ha litt umpfh, det kan godt være litt synlig.

Anders: Det kan det. Det er tydelig på knappene til Finn. På sekundærknappene så er det bare en bitteliten endring av bakgrunnsfargen. På primærknappen så endrer de litt på kontrasten. Det er så lite. Her endrer de litt på fargen, og så har de tatt bort nettleserstandarden. De har gjort det verre enn det som var utgangspunktet.

Erling: Og som du nevnte, 1.4.11, kontrast på ikke-tekstlige elementet, de bryter jo ikke noen suksesskriterier der, fordi kontrasten på knappen selv når den er diffus, er fortsatt god nok. Men den bryter denne, for det er ikke synlig. Ja?

Anders: Ja.

Erling: Det snakket vi om i episoden med 1.4.11. Forskjellen på ikke-fokus og fokus og hvor stor kontrasten er mellom de ulike tilstandene, er inn under der. Det var det ikke.

Anders: W3C er ikke tydelige på at det skal være slik. Men dersom du skjønner intensjonen med disse to, og slår dem sammen, og tenker på brukerne, så er det åpenbart at hvis du har en fokustilstand som har liten variasjon fra den opprinnelige tilstanden, så er det ikke god nok kontrast. Helt åpenbart, her kan Finn bedre fokustilstanden på knappene sine. Det er ikke bare, nå snakker vi om kantlinjer og vi snakker om farge. Vi har andre virkemidler òg som synlig fokus.

Erling: Var det Politiet som inverterte hele elementet?

Anders: Kanskje Politiet. Noe som vi òg har trukket frem tidligere er Sbanken, de endrer på radiusen på elementet.

Erling: Formen.

Anders: Du kan spille på formen. Det synes jeg er tydelig.

Erling: Jeg er enig i at det er en tydelig endring, men jeg har òg en følelse av at det er en viss konvensjon innenfor fokus-styling, at det skal komme en ramme, en som er litt out of place. Som egentlig ikke hører til i designet. Det er det som er en fokusstyling. Og en ser jo etter ting som en kjenner igjen.

Anders: Jeg støtter deg der.

Erling: Så selv om det kanskje endringen er tydelig, så er det ikke sikkert at det er tydelig at det er en fokusstate.

Anders: Jeg kan kjøpe den. Noe annet som du kan bruke er jo å tilføre tegn. Altså sette en pil ved siden av noe som er i fokus, for å vise det. Ikke en konvensjon, men du har flere ting å spille på her.

Erling: Du kan flytte teksten til venstre som heller ikke er tydelig, men det skjer i det minste noe.

Anders: Vi var jo på ris av Finn. Og Finn går òg i en enda større felle. De har òg fjernet synlig fokus helt noen steder. Ett eksempel på det, Finn, er når du skal legge inn en annonse, så må du først ta stilling til hvilken kategori det skal være i, om den skal inn i bil, torget eller eiendom. De har jo ganske mange kategorier. Når du tabber deg gjennom dem, er det ingen indikasjon på hvor du er. Så da må du som tastaturbruker telle. Hvis du skal ned på valg nummer åtte, så må du holde tungen bent i munnen, og telle deg ned åtte trykk, satse på at du er på riktig sted, trykke enter, og så håpe på at du har gjort riktig.

Erling: Eller bare trykke noen ganger på den du tilfeldigvis er på, fjerne den igjen, gå to til, og ta den du egentlig skulle ha. Nei, dette er smekk.

Anders: Men over til ros. Jeg vil hoppe litt frem og tilbake nå. La oss ta tjeneste for tjeneste.

Erling: Ris og så ros. Enig.

Anders: Finn noenlunde flinke på overskrifter og deloverskrifter. Nå er jo dette viktigst på teksttunge sider, så derfor har jeg tatt en stikkprøve der de har litt tekst. Som jo er litt rart, fordi det er lite lest innhold. Verdiene våre. På verdiene våre, så bruker de gode overskrifter og seksjonsoverskrifter. Ikke på siden «Fakta om oss», der er alt en smørje.

Erling: Er det forskjellige folk som har skrevet det?

Anders: Det kan godt være. Vi skjønner jo at disse sidene ikke er førstepri for Finn, det er jo tjenesten som er i fokus. Der har de gode ledetekster når du skal legge inn en annonse, det er veldig tydelig. Det er primærproduktet til Finn.

Erling: Det er kjernefunksjonalitet. Hvis ikke folk klarer å legge inn annonser …

Anders: Hvis de skaper forvirring der, med dårlige ledetekster …

Erling: Så fører det til mye merarbeid og færre annonser.

Anders: Kjenner jeg dem riktig, så har de eksperiment mye med å finne de gode ledeteksten.

Erling: Det har jeg òg tillit til at de har gjort.

Anders: Jeg tror ikke vi skal prøve å forbedre noe der. De bruker brødsmulesti på annonser. Det synes jeg er helt naturlig.

Erling: Enig. Verdifullt for brukeren.

Anders: Litt artig, ikke helt relatert til dagens kriterier …

Erling: Det var denne vi artet litt tidligere.

Anders: Det er at de har kodet brødsmulestien med nav-elementet, som er riktig, eller som er bra. Og de har puttet på en aria-label for skjermlesere fordi dersom det plutselig kommer noen lenker ut av kontekst, det er tydeligere at det er en brødsmulesti dersom du er seende. Men for en med skjermleser så kan det fremstå som en hvilken navigasjon som helst. Derfor har de puttet på en aria-label, som er veldig bra Finn. Men! Verdien, ordet, er «brødsmuler». Da er vi inne på dette stammespråket. Jeg er ganske sikker at det er mange som ikke vet hva brødsmuler er.

Erling: Jeg tror vi nesten kan konkludere med at de fleste ikke vet hva brødsmuler er. Altså, de vet hva det er for noe, men ikke i denne konteksten.

Anders: Ikke alle klarer …

Erling: Det en ganske søk kobling mellom …

Anders: Hans og Grete, og nettsider.

Erling: Du må bli fortalt den koblingen før du skjønner det.

Anders: Løsningen er enkel. «Her er du» i stedet for ordet «brødsmule». Dersom «brødsmule» hadde stått visuelt før lenkene, så hadde det vært et brudd på «overskrifter og ledetekster». Men siden de ikke har synlig ledetekst, så er det ikke et brudd.

Erling: Det var òg et interessant perspektiv. For det hadde ikke vært naturlig å skrive «brødsmuler» foran den. Da hadde de tenkt seg om to ganger.

Anders: Da hadde noen kommentert dette inne hos Finn.

Erling: Det er ingen som forstår hva brødsmuler er. Men fordi det er «gjemt» i en aria-label, så slapp de gjennom det filteret. Så det er en viss sjanse for at de ikke har testet akkurat dette på en blind bruker.

Anders: Og noe jeg har tenkt på nå – kan det være en forvirring mellom brødsmuler og cookies?

Erling: Siden du sa det, så hadde jeg ikke blitt forvirret dersom noen hadde sagt det. For cookies er òg et begrep som ingen forstår. De har lært seg det nå kanskje.

Anders: Nå er det mye mer brukt.

Erling: De blir eksponert for den dumme popupen over alt.

Anders: Det var mye om Finn, la oss gå til en konkurrerende tjeneste som jeg aldri har brukt, som heter Let Go. Det var noe du fant frem.

Erling: Jeg har heller aldri brukt det, bare så det er sagt.

Anders: Det skal òg få ros, men først litt ris. De har elendig synlig fokus. Enten helt borte, for det meste helt borte, eller nettleserstandard. Der kan de forbedre.

Erling: Ikke bare det. Jeg ser på kategoriene her. Så har de fokus både på ikonet og på lenken, så du må klikke to ganger for å komme til neste element. Det skulle vært én anchor, og selvfølgelig tydeligere fokus.

Anders: Det snakket vi om i forrige episode.

Erling: At du skal ha ikon og lenketekst i ett, med tom alt-tekst.

Anders: Så lenge det står sammen med et ord. Så to trykk for hver kategori.

Erling: Her er det mye som kan bli bedre.

Anders: De har tjenestevilkår som er dårlig strukturert. De har ikke deloverskrifter, men de innleder med tykk tekst, så de har brukt overskriftene rett i avsnittet, i stedet for å sette det på en egen linje, som gjør det lettere å skumlese. De er riktignok litt bedre på personvernerklæringen, der har de deloverskrifter. Men de har brødsmulesti. Jeg vil si at det er bra at de ikke lenker siste ledd.

Erling: Hvorfor skal du lenke til den siden du er på?

Anders: Noen gjør jo det, men det gjør ikke … En liten kommentar der er at de har litt merkelig bruk at title-attributtet i brødsmulestien sin, de legger inn mye mer informasjon enn det som står. Det kan være et triks for å få mer mat inn til Google, men de avslutter for eksempel title-verdien med Let Go. Ikke relatert til dagens episode.

Erling: Én til kommentar. Du sier at siste element ikke er lenket, men det ser ikke ut som om noen av elementene er lenket. De ser helt like ut. Og det nest siste elementet er ikke lenket, og da er en jo ikke særlig konsekvent. Nå er jeg inne på «bruktsko til salgs i Grünerløkka». Rett før det er det en kategori som heter Grünerløkka, og da tenker jeg at det er konge, jeg vil ha opp alle produktene som hører til Grünerløkka. Kan ikke klikke på den. Men dersom jeg går ett nivå opp der igjen, så er det en kategori som heter «Hus og hage», og den kan jeg tilfeldigvis klikke på. Men det er ikke noe fokus, ikke noe active. Det er bare en helt vanlig tekst som jeg tilfeldigvis ser en hånd på når jeg hovrer over. Ja, de har brødsmulesti, men den kunne vært implementert veldig mye bedre!

Anders: De bruker òg button på lenkene der. Men men. La oss gå videre til Tise. De forteller meg ikke hvor jeg er. Dersom jeg går rett til en annonse, hvis jeg er inne på en yogaball som jeg har funnet, så vet jeg, fordi jeg har navigert meg frem til den, at den ligger under friluftsliv og sport, men hvis jeg kommer direkte til den, så står det ingen plass. Så hvis jeg vil ha en annen yogaball fordi denne var feil farge eller for dyr, så er det ingen enkel vei tilbake til sportskategorien. Det synlige fokuset varierer mellom standard og usynlig. Så de bommer også der. Bare en liten kommentar til det vi snakket om tidligere – de bruker veldig mye kun ordet «her» som lenketekst. Det har jeg sett i bloggen og forskjellige andre lenker. Og så har de, jeg må bare nevne det, de har jo bilder inne på en annonse. Og bla-knappen har aria-hidden. Så de har tenkt at dette er et bilde. Ingen som bruker skjermleser vil se på neste bilde. Og det en kjempe misforståelse, en misforståelse av den brukergruppen. Fordi hvis neste bilde viser en defekthet med produktet, som et eksempel, som du beskriver med en god alt-tekst, så vil jo selvfølgelig denne personensom bruker skjermleser få den informasjonen òg. Så selv om …

Erling: Og det er forskjellig grad av blindhet. Noen kan se bildene, men ikke kan se navigasjonselementene, men likevel vil bruke dem med tastatur.

Anders: For guds skyld, ikke ta bort muligheten å bla mellom bilder for skjermlesere.

Erling: Nei, det er det vi på godt norsk kaller en bjørnetjeneste.

Anders: Ja, det er det. En av de store vil jeg si.

Erling: Det som er litt fascinerende. Det er jo en indikasjon på at de har tenkt på dette. De har gått gjennom den tankerekken. Vi må tenke på de som er blinde òg. De ser jo ikke bildene, da fjerner vi et navigasjonselement, for de vil ikke se bildene uansett. Så de har tenkt.

Anders: Og her kommer det inn, den store, store undersøkelsen utført av WebAIM, av de én million største nettstedene i verden, de tok en revisjon av dem. Der ser de at det er mer uu-feil på sider med aria. Og det fordi folk har prøvd for hardt. Kan være én av grunnene.

Erling: De har fått beskjed om gjøre noe. Og så har de gjort noe uten å vite hva de egentlig gjør. For eksempel.

Anders: Overskriften her. De har en overskrift på produktet. Yogaball, selvfølgelig. Her er et eksempel på at dette i seg selv ikke er et brudd på det vi har snakket om i dag. Men, overskriften på Tise er en del av bildet.

Erling: Hæ?

Anders: Den er ikke i koden.

Erling: What?

Anders: Der bryter man mange. Så hvis du åpner bildet, så ligger prisen og teksten «yogaball» i selve bildefilen. Så de har ingen h-tagg.

Erling: Good catch. Det ser jo ut som tekst. Så jeg antok at dette, de har bare lagt teksten på bildet. Og det at de har tekst på bilde òg er et brudd i seg selv.

Anders: Det kommer vi til senere. Det er en usedvanlig praksis i dag. Og som bare er …

Erling: Jeg husker på slutten av 90-tallet nærmest, så var det én av de store feilene du kunne gjøre, det var å tekst på bilde, altså ikke implementere som tekst. Og her i 2019, en ny tjeneste som skal konkurrere med Finn, gjør slike blundere, nå drar vi det langt, jeg kjenner jeg har lav tillit til de som har implementert tjenesten. Det betyr ikke at Tise er drit, det betyr bare at de som har Tise har hyrt eller ansatt for å gjøre det, basert på dette, lav kvalitet.

Anders: Her er det så enkelt, hvis jeg skal gi Tise et råd, implementer tekst som tekst, putt det inn i en h1-tagg, så vil synligheten på alle annonsene totalt sett øke. Dere vil få mye mer trafikk fra trafikk. Og trafikk fra Google er mer salg. Dette er en så lavthengende frukt som det kan bli.

Erling: Dette er noe du lærer første dagen når du skal implementere et design. Tekst skal være tekst. Håpløst. Men igjen, hvis vi skal se litt større på det. Hovedplatformen til Tise er jo app, så denne plattformen har nok ikke prioritet. Det unnskylder ikke nødvendigvis, men det kan forklare hvorfor det ikke har blitt gjort så skikkelig som det burde. Har vi pisket folk nok?

Anders: Vi kan avslutte med en bitteliten ros til Tise. De har god struktur på personvernerklæringen og brukervilkårene. Riktignok på engelsk. Det er ikke en kjemperos.

Erling: Ikke bare det, den har knapt brukt CSS. Det er ikke noe styling på den. Det er igjen dette med at HTML i sin natur, før du begynner å tøyse med den, er ganske bra på mange ting. Så ja, da fikk de litt ros på slutten.

Erling: Nok en kjekk episode. Dette er veldig bra. Hvis de skal huske tre ting fra dagens episode. Hva skal de sitte igjen med?

Anders: Godt språk i overskrifter og ledetekster. Synlig fokus. Skikkelig synlig fokus. Og vis hvor brukeren er.

Erling: Det var bare en gjentakelse av de fire suksesskriteriene, hvor to av dem er nokså like. Veldig bra. Og neste episode? Hva skal vi snakke om da?

Anders: Neste episode er kjekk fordi det er suksesskriterier som handler litt om muspekere og musmarkør, ikke bare mus, men markør på skjerm, og òg bevegelse av mobil, altså sånn gyrobevegelse. Hva må du tenke på når du sier at det å riste Spotify på mobilen din betyr tilfeldig avspilling av sanger, hva har det med universell utforming å gjøre?

Erling: Det drar det litt ut.

Anders: Neste episode kommer vi til å nevne ting som vi normalt ikke tenker på.

Erling: Og jeg kan òg nevne at i forbindelse med neste episode har jeg lært meg en ny måte å lese disse sukesskriteriene på, fordi den ene suksesskriterien fremstår som veldig omfattende har mye avansert språk, men han er egentlig ganske enkel. Det kan jeg fortelle om neste gang, hvordan jeg har lært å lese. Bra. Kommentarer til hei@universeltutformet.no. Det er vårt brød. Vår næring. Vi elsker tilbakemeldinger. Forteller gjerne historier om ting du har fikset på grunn av noe du har hørt hos oss. Da blir vi veldig glade, da føler vi at vi har gjort forskjell. Enig?

Anders: Ja.

Erling: Det var det vi hadde for i dag. Takk for oss. Jeg er Erling fra Okse.

Anders: Jeg er Anders fra Webstep. Ha det bra.