UU-podcasten:Universelt utformet

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: Harre pittar!

Anders: Siste episode, Erling!

Erling: Hvis vi kan skryte av oss selv, så har vi vært veldig gode. Vi har sittet hver fredag kveld i et halvt år og snakket om universell utforming.

Anders: Nesten.

Erling: Klart, noen fredager hoppet vi over og noen tok vi dobbel episode og sånt, men i utgangspunktet hver fredag kveld.

Anders: Ja.

Erling: Hva synes samboeren din om det?

Anders: Nei, hun spurte i dag om det var siste episode, så sa jeg «Ja, det er siste innspillingsepisode», sa jeg. Men det kommer gjerne litt etterarbeid.

Erling: Litt etterarbeid, og kanske kommer det noe annet etter dette.

Erling: Men det er jysla deilig.

Anders: Det er en stor dag. Jeg har jo sett frem til å fullføre dette, samtidig er det vemodig. Fordi det har vært veldig gøy og lærerikt, og det startet som et ganske ambisiøst prosjekt.

Erling: Det er veldig kjekt dette, og dette som du sier med å bli ferdig, det er jo fordi vi satte et visst antall episoder. Så vi hadde et mål der fremme som vi jobbet mot. Det er litt derfor det er deilig, mer enn at det var på noe som helst måte dritt å gjøre det. Det har utelukkende bare vært kjekt, selv om vi har mistet noen tog og har måttet ventet til klokken ett på natten og noe sånt. Det er bare litt av sjarmen!

Anders: Det har blitt lite søvn i ingangen til helgen.

Erling: Ja, det har det. Vi er begge det som de fleste ville sett på som A-mennesker.

Anders: Veldig.

Erling: Liker godt å stå opp tidlig.

Erling: Men, vi må komme til poenget!

Anders: Vi må komme til poenget!

Erling: VI holder fortsatt på med 4.1. Og, hva er det det står for, Anders?

Anders: Firen er det fjerde prinsippet, og det handler om å lage robuste løsninger. Eneren handler om å lage kompatible løsninger.

Erling: Og i dag skal vi snakke om den aller siste suksesskriterien som er 4.1.3, og den handler om?

Anders: Statusbeskjeder.

Erling: Statusbeskjeder?

Anders: Ja, det handler om at brukeren skal få statusbeskjeder når det skjer viktige hendelser. Og her er det noen avklaringer vi må ta først som sist, og det er at dette er endringe rsom skjer uten at det gir kontekstendring. Og i praksis betyr det, i nesten alle tilfeller, at det ikke gir en sidelasting.

Erling: Nettopp. Eller en form for overlay, popup eller lignende. Så er det dette med statusbeskjed. Altså, hva er definisjonen på en statusbeskjed her? For, bare for å ta dette, dette er del av WCAG versjon 2.1, og den bærer jo preg av noe litt mer moderne enn WCAG 2.0. Det beste eksempelet her, synes jeg, er når man legger en vare i en handlekurv så blir den gjerne lagt i handlekurven uten en sidelasting eller lignende. Den endrer seg fra null til én. Da har det skjedd en «statusbeskjed» ved å endre fra null til én. Det må kommuniseres.

Anders: En feilmelding kan også være en statusbeskjed. Et venteikon kan være en statusbeskjed. En progresjonsindikator kan være en statusbeskjed.

Erling: Ting som endrer seg dynamisk mens man interagerer med grensesnittet.

Anders: Ikke nødvendigvis interagerer. Dette kan være uten interaksjon også. For eksempel hvis du se rpå en tekst-basert fotballkamp, også kommer det opp en melding om at Sandnes scorte mot Viking.

Erling: I dag er asiden hemmelig for meg. Du har en liten plan?

Anders: Ja.

Erling: Og i ris og ros har vi tatt bokhandlere.

Hvorfor har vi denne suksesskriterien?

Erling: Hvorfor har vi denne suksesskriterien?

Anders: Det er fordi ikke alle kan se statusbeskjeder, og de som ikke kan se de må få beskjed om at det har skjedd en status. Og det må vi kode, så vi må sørge for at innholdet i statusbeskjeder blir lest opp av skjermlesere. Derfor har vi det. Og det er viktig at vi ikke skal avbryte oppgaven til brukeren, så vi må også passe oss litt for hvor pågående vi er og at vi ikke endrer for eksempel tastaturfokus.

Erling: Vi skal også snakke om mer eller mindre pågående statusbeskjeder i teknikker.

Teknikker

Erling: Så til teknikker og hvordan man formidler statusbeskjeden.

Anders: Der er den overordnede teknikken, som vi også snakket om i forrige episode, er å bruke riktig role.

Erling: Ja, rolle. Og dette er ARIA igjen?

Anders: Ja, og en rolle kan være role=status. For eksempel hvis skjemaet er sendt inn. Hvis statusbeskjeden kommer samme plass som skjemaet er. Altså, hvis suksessiden er på en egen side etter en sidelasting så er det en kontekstendring. Da vil skjermelseren skjønne at det er en kontekstendring, og man kan lese det som står der. Hvis det dog kommer opp en grønn boks med «Melding sendt», «Bestillingen er sendt inn», påmeldt ditt eller påmeldt datt, da er det en role=status. Og den får implisitt aria-live=polite. Og, det vil si at den vil leses opp når brukeren er ferdig med det brukeren holder på med.

Erling: Ja, det er en høflig beskjed. Andre eksempel?

Anders: Ventetilstand hvis det er et lasteikon som står og ruller og går, og ting er tregt, så er et veldig dumt at den som bruker en skjermleser ikke får beskjed om det fordi hvis du ikke hører noe så tror du ikke at det ikke skjer noe.

Erling: Ja, men her lurer jeg litt. Det er ikke sikkert du har svar på det, men hvis du laster opp en fil på én gigabyte. Som tar en stund. Hvor ofte skal man informere om statusen da?

Anders: Like ofte som framdriftsendringen endrer seg.

Erling: Så hvis den hopper for hver prosent, så skal den si hver prosent.

Anders: Ja.

Erling: Så hvis det er en bitteliten fil, så vil det være veldig ofte. Eller, jeg vet ikke. Det var bare jeg som lurte.

Anders: Men der har du en egen rolle som heter role=progressbar. Den håndterer akkurat de tilfellene der.

Erling: Andre eksempel?

Anders: Ja, det er feilmeldinger. Det er role=alert, og den får implisitt aria-live=assertive. Det vil si den avbryter brukeren.

Erling: Så den går fra høflig til bestemt. Det vil si at den sier umiddelbart beskjeden når den skjer.

Anders: Den skal få role=alert implisitt, men test med en skjermleser at beskjeden blir lest opp. Og, hvis ikke, kan man prøve å legge på aria-live i tillegg. Og for alle disse må taggen som har rollen, være i DOMen ved første sidelasting.

Erling: Elementet må allerede eksistere. Du kan ikke stappe inn et nytt element med role=alert. Det elementet må allerede eksistere, for ellers vil ikke UAen – altså nettleseren eller skjermleseren – merke at det har skjedd en endring.

Anders: Den forventer ikke at det er noe den må følge med på og oppdatere. Så du har bare en tom tag.

Erling: Eller en med noe i som endrer seg.

Anders: Du nevnte dette med handlekurv, og der slipper du jo å ha en tom tag for der har du en handlekurv. Den eksisterer hele veien – selv om den er null. Da har du role=status på den, og så bør man tenke på for eksempel hvis du har det ene tekstlige elementet i en handlekurv er et tall så bør du ha en usynlig tekst som sier at tallet er antall varer i handlekurven.

Erling: Ja, slik at skjermen ikke bare sier «én», men «én vare i handlekurven».

Anders: Så har du chat. Der kan du bruke role=log.

Erling: Da vil den si tingene som kommer i loggen?

Anders: Ja, da vil den si de nye tingene som blir tilført. Den repeterer ikke hele loggen.

Erling: Ja, det var jo greit!

Anders: Små snackbarer er jo populært.

Erling: Små meldinger som dukker opp i grensesnittet.

Anders: De som dukker opp nede og forsvinner igjen må få en status. Og så kan man jo nevne at man kan også legge på disse aria-live-attributtene på ting som ikke har disse rollene.

Erling: Jeg må innrømme at jeg er litt usikker på når man skal bruke aria-live og når man skal bruke rollene.

Anders: Man begynner med rollene, hvis det ikke fungerer så legger man til aria-live.

Erling: Ah, så det er snakk om det fungerer elle rikke?

Anders: Ja, jeg vil si det. Men her er det også forskjellig støtte i ulike nettlesere. Noen helgraderer seg og tar med begge. Noen sier det er dumt. Så hvis vi forholder oss til WCAG – som vi nå gjør – så sier vi at det ikke er nødvendig å helgradere seg. Begynn med role, og se om det funker, og forhåpentligvis gjør det det.

Erling: Og eventuelt legg til aria-live. Men med role=log, så vil ikke det samme skje med aria-live.

Anders: Stemmer, for log har noen egne egenskaper.

Erling: Bra, var det siste teknikk?

Anders: Ja, det var det.

Verktøy

Erling: Og her, på verktøy, er det snakk om skjermleser.

Anders: Ja, du tester med en skjermleser.

Erling: Ja, skru på Nora, få henne til å si hva som skjer

Lovpålagt?

Erling: Er dette lovpålagt?

Anders: Det er en «tja» i dag. Det er del av WCAG 2.1. Vi vet det kommer.

Erling: Før sommeren snakket vi om at det skulle komme i sommer. Har det skjedd?

Anders: Det kommer!

Ris og ros

Erling: Så, til dagens ris og ros. Haugen bok og Ark skal få som det ljomer! Nei …

Anders: Vi skal se på disse her, og vi skal demonstrere det med en skjermleser. Jeg har da plukket opp Ark, og så skal jeg ta på headsettet. Jeg har Safari som fungerer best med voiceover. Jeg setter i gang voiceover.

Voiceover: Voiceover på Safari. Ark bokhandel. Vertikal linje, bøker på nett. Vertikal linje, nettbokhandel. Vindu, ark bokhandel. Vertikal linje. Bøker på nett. Vertikal linje, nettbokhandel.

Erling: Ja, det var mye vertikale linjer der!

Anders: Mye vertikale linjer.

Voiceover: Kobling. Arks personvernerklæring.

Anders: Ja, Arks personvernerklæring er første element i DOMen og egentlig den første visuelle også, så det er ikke feil, men jeg ville no puttet den i bunn. Men det er meg.

Erling: Nå går du nedover.

Anders: Vi skal ned til søk. De har glemt alt-tekst. Jeg er ikke interessert i hvilket filnavn de bruker på bildene sine.

Voiceover: Søk blant tre millioner titler. Tekst. søkefelt.

Anders: Tre millioner titler. Skal vi se om de finner en bok om universell utforming!

Voiceover: U, n, i, v, e, r, s, e, l

Anders: Det kommer masse forslag. Nå lærte jeg noe nytt! Det er at hun endrer tonefall på bokstavene når du fjerner en ting.

Erling: Ah, det var det du gjorde!

Anders: Ja, se nå skriver jeg en «g» og fjerner den igjen. Hun er litt dypere i røsten.

Erling: Kult.

Anders: Ok! Nå bruker jeg søkeforslagene, så det fungerer ikke.

Erling: Altså, du kan ikke pile ned?

Anders: Jo, jeg kan pile ned, men skjermleseren oppfatter ikke det.

Erling: Nei, nettopp.

Anders: Men jeg finner en bok som heter «Universell utforming» av Morten Tollefsen.

Anders: Så skal vi komme oss ned til «Legg i handlekurv»

Voiceover: Kobling, Arks personvernerklæring …

Anders: Rimelig irriterende at jeg må høre på Arks personvernerklæring. Vi begynner på starten, og de har ikke «Hopp til innhold». De har den fæleste titlen jeg har sett i hele mitt liv. Men, jeg jukser litt nå, så jeg hopper ned til «Legg i handlekurv».

Erling: Ja …

Anders: Da trykker jeg på «enter».

[Stillhet]

Anders: Og, en veldig tydelig statusbeskjed.

Erling: Visuell.

Anders: Visuell, ja. Den var oransje. Poff. Masse blikkfang. Varte altfor kort, men det er ikke det vi skal snakke om. Men nå er det egentlig to statusbeskjeder. Du får først den hvilken bok du legger inn, og så ser vi at det er et ikon på handlekurven som nå har tallet «én». Så Ark har nok ikke noe rolle på den handlekurven. Da kan vi skru av skjermleseren.

Voiceover: Voiceover av.

Anders: Vi trenger ikke inspisere. Det skjedde ingenting.

Erling: Vi hørte ingenting. Det skjedde ingenting. Så for en blind bruker, en bruker av skjermleser, ville ikke fått beskjed om at den er lagt i handlekurven. Skal vi prøve Haugen bok, da?

Anders: Jeg skal bare skje hva som skjedde … Hm, det som skjedde her, Erling, er noe annet rart jeg har lyst til å nevne.

Erling: Å, ja?

Anders: Det er at tastaturfokuset …

Erling: Nå rynker det i pannen din.

Anders: Ja, jeg tror jeg fant en tastaturfelle? Jeg kommer meg ikke videre etter jeg har lagt i handlekurven. Ok, jeg vet ikke hva som skjer, men jeg klarer ikke å gjøre noe heller?

Erling: Det er en felle?

Anders: Hvis jeg trykker mange nok ganger kommer jeg ut, så den er nok en plass som ikke er synlig …

Erling: Men den leser jo ikke noe? Ah, du har skrudd av skjermleseren, ja …

Anders: Ok! Ark feilet.

Anders: Jeg lukker Ark, og jeg er på Haugen bok. Jeg kunne ha testet den irriterende dialogen som dukket opp der, men la oss ikke gjør edet. Jeg skrur på skjermleseren.

Voiceover: Voiceover på Safari. Haugenbok.no. Haugenbok.no. Vindu. Haugenbok.no. Haugenbok.no.

Anders: Vi hørte «Haugen bok» fire ganger. Det skal vi ikke forklare hvorfor nå.

Voiceover: Kobling kundeservice.

Anders: Det som skjedde nå, Haugen bok, er at de visuelt sett har logo oppe til venstre. De har stort søkefelt i midten, og de har en meny til høyre for søkefeltet helt i toppen som heter «Kundeservice, logg inn, handlekurv og kasse». Søkefeltet ble elegant hoppet over, så jeg fikk ikke fatt i det. Sannsynlgivis ligger det i en annen rekkefølge i DOMen, så jeg er på kundeservice nå.

Voiceover: Kobling. Logg inn. Søk.

Anders: Så hopper den tilbake!

Erling: Ah, den følger ikke den visuelle rekkefølgen.

Anders: Ja, her har de sannsynligvis en float-feil. Men vi skal ha den samme boka her!

Voiceover: U, n, i, v, e, r …

Anders: Universell …

Voiceover: Søk.

Anders: Da ser jeg at den har kommet opp i forslagene. Jeg kunne ikke pile meg ned. Men jeg kunne tabbe meg til den, så det var jo bra. Eller, det var jo ikke bra at jeg ikke kunne pile meg ned.

Anders: Ja, da er jeg fortsatt på søk. Og nå tabber jeg meg gjennom alt av lenker …

Anders: Der. Legg i handlekurv-knapp. Greit!

Erling: Nå trykket du på enter?

Anders: Akkurat det samme! Ingen indikasjon på at noe er lagt i kassen. Og de hadde også to statusbeskjeder. En liten rute, ganske i nærheten av kjøpsknappen. Som er veldig bra!

Erling: Ja, fordi da er de i kontekst av handlingen.

Anders: Ja, og det er helt supert at det skjer to plasser. For nå endret det seg også oppe der handlekurven er. Handlekurv- og kasseknappen ble slått sammen til én knapp. Ganske bra.

Erling: Ja, tydelig visuelt.

Anders: Ja, men HELT utydelig for en skjermleser.

Erling: De med skjermleser har ikke fått det med seg …

Anders: Ja, det ble bom til Haugen bok.

Erling: Og bok til Ark.

Erling: Men, jeg regner med de fleste bommer på dette?

Anders: Ja, de gjør det. Det vil si …

Erling: Ååå?

Anders: Det vil si at vi nevnte at vi nevnte snackbarer. Og hvis du bruker bibliotek som Angular Material, så putter de på rette rolle på sine statusmeldinger.

Erling: Det er noen der som har gjort det rett.

Anders: Noen har gjort det rett, ja. Det er ikke alltid sånne biblioteker og rammeverk er dårlig for uu. Av og til tilfører de noe ekstra som enn normalt glemmer.

Erling: Nettopp. Ja, det var dagens ris og ros!

Avslutning

Erling: Så, hva er det du skal huske fra vår siste episode?

Anders: Begynn med role-attributtet når du skal lage en statusmelding. Finn en rollen som er best egnet og passer best og er mest semantisk rett, ut av alle rollene som finnes. Så ser du om det gir mening med skjermleser. Husk at det skal vise i DOMen før du legger innhold i den! Så role-attributtet er for lite brukt. Det er vel det du skal huske.

Erling: Ja, og det er jo det dagens episode handler om i veldig stor grad.

Anders: Ja.

Erling: Så, for siste gang, innenfor disse rammenErling: Send oss tilbakemelding på hei@universeltutformet.no. vi forsvinner ikke fra jordens overflate, selv om vi er ferdig med disse 26 episodene. Vi skal gjøre mer. Vi vet ikke helt hva, enda. Det finner vi ut av! Vi lgjerne ha tilbakemeldinger.

Anders: Vi skal ha en juleferie først!

Erling: Og, som den obersvante lytteren gjerne har merket, så har vi ikke hatt asiden enda. Vi hoppet rett til slutten. Du ville ha asiden nå på slutten? Hva vil du aside, for noe?

Anders: Jeg vil mimre!

Erling: Mimre, ja!

Anders: Et lite tilbakeblikk. En kavalkade!

Erling: En kavalkade!

Anders: Hva husker DU fra 26 episoder, Erling? Hva husker jeg? Jeg har ikke forberedt meg, så jeg har ikke tenkt ut et svar.

Erling: Ikke jeg heller, det er første gang du nevner dette! Jeg husker veldig godt når vi skulle spille inn første episoden, og vi prøvde tre ganger før vi sa «ok, nå får det være godt nok.» Vi strevde en del med strukturen, detaljnivået. Vi gikk jo gjennom teknikker – hvis du husker det – altså de som ble listet ut i WCAG i mye mer detalj enn det vi gjør nå. Det husker jeg. Hva husker du?

Anders: Jeg husker det også, når du nevner det! Sånn faglig sett, er det jeg sitter igjen med at jeg har blitt mye, mye tryggere på hele WCAG. Men, jeg har også blitt veldig mye tryggere på at man ikek skal bry seg så mye om WCAG. Så jeg har blitt tryggere når jeg snakker med folk som trenger hjelp at man ikke skal bry seg så mye om WCAG, men begynne i en annen retning. Det har vært en viktig lærdom.

Erling: Og, da må jo jeg også si at jeg har lært sykt mye! Det jeg har fått gjort nå, er å gå gjennom HELE WCAG sammen med en uu-ekspert, og har måttet lære det så godt at vi kan lære det til andre. Dette er jo oppskriften på hvordan man skal lære noe!

Anders: Ja.

Erling: Så jeg har jo lært sinnsykt mye!

Anders: Jeg også. Masse! Og, vi hadde jo bare én fysisk gjest, og det var utvilsomt en høydare! Vi hadde flere gjester vi var i dialog med, men vi prioriterte gjerne ikke gjester så me på slutten nå. Kanskje litt dumt, men når vi hadde Lars på besøk var det kjempekjekt.

Erling: Det var kjempekjekt!

Anders: Jeg kommer nok til å huske disse fredagskveldene! Først på Hanabryggene, så midt i Stavanger.

Erling: Noen episoder hjemme hos meg også.

Anders: Absolutt! Så vi har hatt tre ulike fysiske plasser. Sene kvelder. Mye kalorier på bordet.

Erling: Ja, vi har vært fæle på det. Vi er jo begge veldig glad i søtsaker og …

Anders: Dårlig på måtehold.

Erling: Ja, når det kommer til søtsaker.

Erling: Og så lurer jeg på om du har merket noe forskjell profesjonelt?

Anders: Ja … Det har jeg. Det har blitt god respons. Jeg har gjort konkrete jobber på uu. Senest i forrige uke. Jeg kan ikke knytte de direkte opp til podden, men jeg har jo vært flink til å mase eller lagt ut flere oppdateringer på LinkedIn, da, så klart det har en effekt. Det er mer en bonus enn hovedintensjonen, men det er jo greit når vi jobber med dette og har lyst til å jobbe mer med det.

Erling: Ja, og vi vil vel gjerne jobbe mer med det sånn at vi kan gjøre verden bedre. Rett og slett.

Erling: Og, for min del, jeg jobber ikke med uu til vanlig, men folk har jo skjønt at jeg gjerne har en litt ekstra interesse for uu. Jeg spiller jo inn en podkast om det!

Anders: Jeg er veldig fornøyd! Det kjennes så riktig. Vi har fått inn kommentarer. Både konstruktive og positive.

Erling: Veldig kjekt!

Anders: Vi har lært av de, vi har blitt utfordret, og vi har måttet tenke oss litt om. Vi har gjerne endret litt på måten vi har lagt poddene. Vi hadde en litt eksperimentell episode hvor vi hadde litt mindre struktur og var mer rett på sak. Så gikk vi litt tilbake igjen. Men det var jo basert på kommentarer. Men, det har vært superkjekt å ha skapt litt debatt!

Erling: Det har det. Men, det jeg også synes er fint er at det generelt så har vi fått veldig god bekreftelse på at det vi gjør er rett og korrekt og bra. Det er veldig få som har sendt og sagt at det vi har sagt er feil. Og, når noen har gjort det, så har vi satt veldig stor pris på det og hatt en dialog med de. Og, til syvende og sist, så har vi ikke gått tilbake på noe enda? Det var en presisering på den ene episoden, men mer enn det så tror jeg vi har truffet faglig godt.

Anders: Det er litt overraskende. Jeg tror nok at mange folk har … Det er bare en følelse … men en stor andel av de som jobber med uu har nok vært innom denne podden. Eller, har ikke nødvendigvis hørt alle episodene, men når vi har snakt om SÅ mye som er så åpent for tolkning. Og at vi ikke har fått flere henvendelser om at det vi sier er feil eller misforstått.

Erling: Det er garantert noen der ute som ikke har vært enig i alt vi har sagt!

Anders: Å, ja! Garantert. Og bra er det!

Anders: Det har vært en fryd. Utrolig digg å jobbe med deg, Erling!

Erling: I like måte!

Anders: Du er til å stole på. Det har pigede ikke blitt en avlysning, og det har vært lite tekniske problemer og VELDIG mye har gått på skinner.

Erling: Ja, og det er jysla deilig å ha et prosjekt med noen som er like opptatt av struktur som det jeg er. Altså, vi ble enige om hver fredag. Da blir det hver fredag. Sånn er det bare, og sånn fungerer vi begge to.

Erling: Vi snakket ikke før du ringte på døren her. Jeg var ikke i tvil om at du skulle komme. Sånne ting setter jeg veldig pris på!

Anders: I like måte!

Erling: Skal vi takke for oss for siste gang?

Anders: Jaaa … Jeg har ikke lyst til at det skal ta slutt!

Erling: Hehe. Men, som vi har sagt, dette er ikke slutten! Det er slutten på Universelt utformet-serien på 26 episoder, men vi må jo få til noe mer! En form for spin-off, eller noe. Ja … Jeg tror ikke vi skal begynne å snakke om de forskjellige ideene. Vi vil ha innspill på det! Vi vil det …

Erling: Så, for siste gang, takk for oss! Jeg er Erling fra Okse***

Anders: Jeg er Anders fra Webstep***. Håper du har lært mye – det har jeg.

Erling: Jeg også. Enormt!

Erling: Snakkes sannsynligvis en gang!

Anders: Håper det!

Erling: Hadet!

Anders: Hadet bra!