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 Anders, er vi på episode 24. I dag skal vi snakke om WCAG 4.1. Den første i fire, forresten. Det er kult.

Anders: Da har vi beveget oss inn på det siste prinsippet.

Erling: Det siste kapittelet. Hva handler det prinsippet om?

Anders: Robust.

Erling: Robust ja, hva legger de i det?

Anders: At det skal tåle å bli brukt av forskjellige nettlesere og user agents, jeg kom ikke på et godt norsk ord for det.

Erling: Brukeragenter?

Anders: Nei.

Erling: Handler det mest om god kode, eller?

Anders: Ja, det gjør det. Det er bare at koden skal være robust, at den ikke skal falle i sammen. I dag skal vi snakke om 1-en. Og i firen, så har vi bare én.

Erling: Det er bare én retningslinje i prinsipp fire?

Anders: Ja.

Erling: Så vi snakker om robust og kompatibel i kode.

Anders: I denne og de to neste episodene.

Erling: Dette er de tre siste. Vi går mot slutten. Siste prinsippet, siste retningslinjen, tredje siste suksesskriteriet. 4.1.1, hva handler den om, spesifikt?

Anders: Den handler om parsing, altså hvordan koden blir tolket.

Erling: Parsing, er det et norsk ord?

Anders: Difi har brukt det, og Difi er jo opptatt av gode begreper. Det er sikkert en bedre oversettelse.

Erling: For å si det med litt flere ord, så handler det om hvordan nettleserne tar en stykke kode og tolker det.

Anders: Omformer det til det det skal være. For eksempel et visuelt grensesnitt eller til lyd, eller hva det måtte omforme det til, parse det til.

Erling: God syntaks. God, feilfri kode.

Anders: Det er det det handler om.

Erling: I dagens ris og ros, hvem skal vi snakke om?

Anders: Vi skal se litt på kinoer.

Erling: Kino, sånn som vi kan se på kino.

Hvorfor?

Erling: Hvorfor har vi denne suksesskriterien?

Anders: Det er fordi nettlesere skal kunne tolke kode og lage det om til innhold. Og hvis en lage løsninger uten kodefeil, så er sannsynligheten for at de tåle fremtiden, bedre, og at de er kompatibel på tvers, de tåler bredden, og de tåler tiden.

Erling: De tåler tidens tann.

Hvem?

Erling: Hvem må passe ekstra på dette?

Anders: I dag er det bare kodere.

Erling: Dette er for dere kodere. Dette handler om godt håndverk! Dette er det som vi mener burde være en del av kodeskolen. Dag én. År én.

Hvordan?

Erling: Teknikker?

Anders: Der må jeg si at jeg trodde dette kriteriet her var mye hardere enn det det var. Jeg har nok litt for mange ganger sett på mange flere valideringsfeil enn det som er nevnt konkret her. Altså, validering, en validator er en tjeneste som ser etter syntaksfeil i kode. Men det er kun visse typer syntaksfeil som bryter dette suksesskriteriet.

Erling: Dette spesifikke suksesskriteriet.

Anders: Så de syntaksfeilene der er fullstendige start- og avslutningstagger. Altså hvis du skriver …

Erling: Hvis du starter en p, en paragraf, så må du òg avslutte den p-en.

Anders: Og der er det jo mindre og mindre som feiler, fordi verktøyene som vi koder i, fikser dette for deg. De lar deg kanskje ikke kompilere koden, hvis du har skrevet feil. I tillegg er det ofte rammeverkene som spyr ut denne koden, som òg håndterer dette på en god måte.

Erling: Så det står generelt ganske godt til. Og i HTML 5 løsnet de litt på slipp. Så det er ikke alt som krever avslutningstagg, for eksempel. Det kan òg være en del av årsaken til at det færre feiler.

Anders: Men de fleste bruker avslutningstagger selv om de ikke må. Det handler litt om …

Erling: Det er ikke feil å gjøre det, det kjennes litt bedre ut, spesielt for slike old school-folk som meg og deg.

Anders: Teknikk nummer to, er riktig nøsting. Det er at nivåene du skriver koden i, at du ikke bryter det som er regelen.

Erling: At de ligger inni hverandre, fullstendige sett med tagger ligger inni, at du ikke plutselig hiver noe utenfor, hvis du har en p, så har du en liste, så starter du listen inni p-en, så avslutter du den utenfor, et eller annet slikt fjas.

Anders: Unike ID-er. Heller ikke så vanlige lengre. Det er jo ikke en ID hvis den ikke er unik, det ligger litt i sakens natur. Og ikke dupliserte attributter som den fjerde regelen her. Og et ganske lite problem.

Erling: Tror aldri jeg har sett det?

Anders: Nei.

Erling: Det er snakk om dupliserte attributter innen for én tagg, ett element.

Anders: Hvis du har en image tagg, så skriver du alt = Erling og så skriver du alt = Anders, så vet jo ikke da nettleseren om Anders eller Erling skal brukes.

Erling: Nettopp.

Anders: Ikke et stort problem.

Verktøy

Erling: I dag har vi verktøy. I dag har vi et godt gammelt verktøy. Vi har W3C sin kodevalidator.

Anders: Og den er egentlig ganske rett frem. Du skriver inn en adresse, eller en kodesnutt, eller laster opp en fil, så får du en rapport. Og én ting som er dårlig med den, er at du ikke kan ta sett med sider. Hvis du har 10000 sider, så kan du klemme gjennom alle.

Erling: Og jeg humret litt nå nettopp, for i dagens ris og ros, så måtte jeg jobbe litt for å klare å validere koden. For det var litt javascript der kan du si.

Anders: Og slik er det jo i disse javascript-tider, det er ikke alt …

Erling: Det er ikke som i gode, gamle dager, da vi kun hadde HTML og CSS. Sånn er det.

Andre situasjoner

Erling: Hvilke andre situasjoner er dette en god greie?

Anders: Det er litt søkt, men jeg nevner søkemotoroptimalisering. Det er fordi Google alltid har vært en fremskynder for riktig kode. Det skape mindre trøbbel for Googleboter hvis de slipper å måtte håndtere feil i koden.

Erling: Jeg kjøper den.

Anders: Og det går på mer enn de fire teknikkene som vi nå har sagt. Det var det.

Må du?

Erling: Bryter du loven?

Anders: Ja, dette er en enkel A.

Erling: Enkel A. Enkelt og greit. Så følg denne. Fordi dette kan potensielt bryte noe, det er derfor de har vurdert denne til enkelt A, ikke høyere.

Anders: Ja, for hvis du ikke har riktig syntaks, så kan det hende at noe ikke fungere i det hele tatt. Ikke blir synlig. Hvis en lenke blir oppfattet som en knapp, for du ikke har nøstet riktig, så går det kanskje ikke an å klikke på lenken, og da blir det helt ubrukelig.

Erling: Eller hvis noe ser visuelt greit ut, men fordi du har en syntaksfeil, så klarer ikke skjermleseren å få med seg informasjonen eller kontekst. Så en enkel A.

Ris og ris

Erling: Så til dagens ris og ros, vi har gått til kinoverdenen.

Anders: Når vi gjør dette, så prøver vi å lete etter feil. Og jeg tenkte egentlig at kinosider hadde var ganske dårlige. Men så var det ikke så ille. Men du kikket litt på Odeon.

Erling: Jeg kjørte de gjennom W3C sin validator. Og det var her jeg slitt litt. Hvis du bare skriver inn odeonkino.no i validatoren, så får en opp veldig få feil, det har litt med at det er veldig få HTML-element. Det er en div med sinnsykt med javascript-attributter inne i én HTML-attributt. Som den da gjør noe med, og genererer resten av DOM-en.

Anders: Det er den ferdig rendrede DOM-en du må teste i validatoren.

Erling: Nettopp. Så da prøvde jeg å finne den. Endte opp med å gå inn i inspektoren, og kopiere HTML-en fra inspektoren, som er en litt uvanlig måte å gjøre det på, men jeg klarte å få tak i den, kjørte den gjennom, og da fikk jeg 1001 feil. Grunnen til at det var 1001 var at den stopper ved 1000. Så error nummer 1001 er fatal error, too many messages.

Anders: Han orket ikke.

Erling: Nei, han orket ikke mer. Det står så dårlig til sier han, nå gidder jeg ikke mer. Du må fikse de første 1000 før du får ta resten. Men, dette er da ikke den typen feil som bryter suksesskriteriet som vi snakker om i dag.

Anders: For det er ikke 1000 forskjellige feil?

Erling: Nei, de er veldig like. Brorparten av dem er type attributter sånn og sånn, er ikke tillatt i elementet sånn og sånn. Og grunnen til at de har det slik er at attributtene er custom attributt, altså attributter javascript-rammeverket bruker, sannsynligvis. Det er per definisjon brudd.

Anders: Det forstår jeg jo òg. Selv om de ikke er en del av HTML-spesifikasjonen, så vil jo javascriptet håndtere det selv, og nettleseren trenger ikke å forholde seg til det.

Erling: Dette er type ting som nettleseren ikke trenger å forholde seg til. Mistenker jeg.

Anders: Indirekte må den jo det.

Erling: Validatoren trigger jo på det.

Anders: Du kan jo ikke fjerne disse ulovlige attributtene, for da vil løsningen din knekke. Da må du bytte ut hele rammeverket ditt.

Erling: Og vi trenger ikke å gå inn i kodedetaljene. Jeg hiver ut noen ID-er og noen greier. Men det var såvidt jeg kunne se, nå skal jeg bare dobbelsjekke det, nei, det er ingen syntaks error her. Så det betyr at såvidt jeg kan se, så er det ingen brudd på dette sukesskriteriet.

Anders: Klapp for det.

Erling: Bra, Odeon kino.

Anders: Jeg tar over stafettpinnen. Jeg har kikket litt på Bergen Kino. Og der var det færre feil enn du fant. 140. Men her òg, ingen som direkte bryter 4.1.1. Det går på attributter som ikke er tillatt. Det er én feil som jeg anser som litt stygg, men som ikke er et direkte brudd. Det er at de har en button inni en a. Og jeg klarer ikke helt å se hvorfor en vil gjøre det.

Erling: Det høres ut som litt dårlig kode.

Anders: Den tenker jeg kan feiltolkes av forskjellige user agents. Hva betyr et klikk? Er det klikk på a-en eller på button? For du har jo en dobbel funksjon der. Så den har de veldig mye av. Dette er helt klart noe jeg råder Bergen Kino til å fikse, for slik skal det ikke være, men det ikke nødvendigvis på grunn av 4.1.1. De har òg noen andre rare greier, men det var den som stod ut for meg. Og den er det veldig mange av òg. Det var Bergen. Tilbake til deg, Erling.

Erling: Tilbake til meg. Jeg har tatt Filmweb, som strengt tatt, er det en kino, nå ble jeg usikker.

Anders: Du får lov å ta dem, men det er ikke én kino.

Erling: Det er ikke én kino, men det er forsåvidt ikke Odeon heller.

Anders: Neinei, men Filmweb, det er bare presentasjon av filmer. Du blir sendt videre til de ulike kinoene.

Erling: Vet du hva, jeg har kanskje et unødvendig sleivspark, men Filmweb og Odeon kino, Odeon er jo der jeg kjøper billetter til min lokale kino, jeg har alltid mislikt det. Filmweb og Odeon kino, eller det som før var, var det SF-kino? Det har alltid vært dårlig. Unødvendig sleivspark, men jeg måtte si det.

Anders: Du kan ikke komme med den uten å fortelle hvorfor, du kan ikke bare si at det er dårlig.

Erling: Jeg kan godt si hvorfor. Veldig mye er fordi de har endret så enormt ofte. Det er kommet redesign på redesign på redesign. Og hver gang jeg går inn, men i hvert eneste redesign, så jeg har slitt med å finne frem til det jeg har lyst å gjøre. Altså, jeg har lyst å kjøpe billett på min kino til én spesifikk film. Det har alltid vært vanskelig. Det er grunnen. Men, Filmweb og 4.1.1 og syntaks. Igjen, det står relativt godt til. Av de vi har nevnt til nå har de færreste feil, kun 93, men de har en god gammeldags syntaks error. Altså de har et p-element som avsluttes, men ikke har blitt startet. Så dette er en direkte feil, direkte brudd på dette suksesskriteriet.

Anders: Og det er et brudd, men det er litt i den fuck WCAG-greiene. Det betyr veldig lite.

Erling: Når det kommer en avsluttende tagg som henger i løse luften, så tror jeg ikke det vil bryte noenting, men det er et brudd. Men det de òg gjør, som jeg tror er uheldig, er at de har img, altså en image tagg, med tom source. S R C. Det virker litt snodig, for jeg skjønner ikke nødvendigvis hvorfor. Jeg ser at den jeg ser på nå, har class avatar hidden. Så er jeg litt sånn, hvorfor er det en image her, skjønner ikke helt. Kanskje jeg hadde skjønt det dersom jeg hadde sett det i konteksten av det. Så har du òg påkrevde attributt som mangler i element. Og det er ikke et direkte brudd på dette kriteriet.

Anders: Burde vært.

Erling: Burde vært, det er ikke særlig robust, for det kan påvirke hvordan ting blir rendret i forskjellige user agents.

Anders: Det er en grunn til at de er påkrevd.

Erling: Så ikke fullt krasj. Én spesifikk feil. Ellers mye som ikke treffer denne suksesskriterien. Din tur.

Anders: Jeg tror at jeg har rotet i notatene mine. Jeg sa Bergen Kino, men de feilene jeg nevnte tror jeg var Nordisk Film Kino, altså nfkino.no.

Erling: Var det de som hadde a button?

Anders: Så nå har jeg sett på Bergen Kino som har litt andre feil. Men de har færre feil. De har òg den samme som du, så kanskje de har samme rammeverk, altså at source-attributtet er forsvunnet fra image. De har mye greier knyttet til iframe. Sannsynligvis helt uproblematisk. De har noen rare verdier, at du bruker 100 % på en bredde på en iframe, som ikke er lov, som kanskje burde vært lov. I det store og hele, ingen konkrete feil. Så beklager at jeg rotet litt, og fortalte om Bergen Kino som ikke stemte.

Erling: Du refset dem uten at det stemte.

Anders: Jeg tror det er fordi, håper ikke jeg virker stresset, men forrige gang så ble vi så ivrige her at jeg ikke nådde siste tog, og det har jeg jo veldig lyst å få til i dag, slik at jeg kommer meg hjemover.

Erling: Det er lenge til det toget går.

Anders: Ok, så det var egentlig ris og ros.

Erling: Basert på vår lille gjennomgang, står det ganske godt til.

Avslutning

Anders: Hva skal vi huske fra i dag?

Erling: Skriv god kode. Pass på at den er korrekt og robust. Når vi sier korrekt og robust, jeg er litt redd for å si at den validerer, det er ikke nødvendigvis det, bare pass på at den er korrekt.

Anders: Neste episode, skal vi snakke om 4.1.2, og det handler om skreddersydde komponenter. Det er for eksempel hvis du bygge opp interaktive komponenter med div-er. Enten for å erstatte noe som allerede finnes, en select-meny eller sånn, eller hvis du bygger en helt ny komponent fordi den ikke eksisterer i HTML-verktøykassen. Hva må du da tenke på, for at det skal kunne bli brukenes for forskjellige user agents.

Erling: Veldig aktuelt.

Anders: Ja, for dette skjer det mer og mer av. Dette var det mindre av før i tiden.

Erling: Er dette 2.1?

Anders: Dette er 2.0, det er jeg sikker på.

Erling: Spennende.

Anders: Det var det vi hadde. Gleder meg til neste episode.

Erling: Jeg òg. Nå er det ikke mange episoder igjen.

Anders: Det er litt vemodig at det går mot slutten.

Erling: Vi må jo feire eller sørge når den tid kommer. Men fortsatt noen episoder igjen, så ikke la oss ta gledene eller sorgene på forskudd. I mellomtiden, så vil vi veldig gjerne at lytterne sender en kommentar til hei@universeltutformet.no.

Anders: Spesielt, siden det går mot slutten. Nå trenger vi ikke så mye skryt lengre, for vi trenger ikke motivasjon til å fortsette. Vi trenger tips til når vi får podkastabstinenser etter å tatt farvel og gitt hverandre en god klem, hva skal vi gjøre da? Vi vil nok lage noe mer, og gjerne under uu-paraplyen tipper jeg. Du har mange ideer.

Erling: Det har jeg.

Anders: Men vi vil gjerne høre noen fra der ute. Det som er helt garantert, er at, dersom vi gjør noe videre, så blir det mye mer løsrevet fra WCAG enn det vi har kjørt nå.

Erling: De tankene vi sitter med nå, eller hvertfall jeg, er at ris og ros-segmentet, der er det mye snacks.

Anders: Det kan vi dyrke litt, og foredle litt.

Erling: Igjen, hvis dere synes at det fungerer i dette formatet, at du ikke ser hva vi ser på, at vi bare snakker om det …

Anders: Der tror jeg vi kan bli flinkere, det er ikke alltid like lett å tenke at lytterne ikke ser på det vi ser på.

Erling: Stemmer det. Så det var det vi hadde for i dag. Jeg er Erling fra Okse.

Anders: Jeg er Anders fra Webstep. Tusen takk for at du har fulgt med på det vi har preket om.

Erling: Tusen takk og tuddelu.