Universell utforming av ikt - hva er status. En presentasjon om tilsynets testmetode. Ved Dagfinn R淡men, teknolog i tilsyn for universell utforming av ikt i Difi.
Gj淡r som Google, Facebook og Microsoft pass p奪 at video, bilder og tekst p奪 nettsiden din er tilgjengelig for alle. Hvordan lager du en nettside som f淡lger alle kravene til universell utforming? Malin Rygg fra Difi gir deg tre gode r奪d og viser deg Difis nye e-l脱ringskurs om universell utforming av nettsider.
Gj淡r som Google, Facebook og Microsoft pass p奪 at video, bilder og tekst p奪 nettsiden din er tilgjengelig for alle. Hvordan lager du en nettside som f淡lger alle kravene til universell utforming? Malin Rygg fra Difi gir deg tre gode r奪d og viser deg Difis nye e-l脱ringskurs om universell utforming av nettsider.
Malin Rygg, leder for tilsyn for universell utforming av IKT i Difi
Universell utforming av digitale l淡sningerMetronet
油
Denne presentasjonen er fra Metronet sitt frokostsemeinar om universell utforming, som ble holdt 22. oktober 2014.
Universell utforming handler om god design og gode brukeropplevelser som alle har glede av. P奪 dette seminaret fikk alle som jobber med web og digitale l淡sninger kunnskap om hvilken rolle universell utforming spiller for en bedre brukeropplevelse p奪 nett.
Interessert i 奪 l脱re mer? Kontakt oss p奪 post@metronet.no.
Hvordan man kan gj淡re universell utforming av IKT til en tverrfaglig prosess? Presentasjonen tar for seg en generell intro til universell utforming, f淡r den g奪r mer innp奪 hvordan man kan jobbe med universell utforming p奪 en optimal m奪te og som en tverrfaglig prosess.
Tilgjengelighet - N淡kkelen til 淡kt verdi p奪 ditt nettsted Tord Heyerdahl
油
Vi ser p奪 hvordan n.ettbruk er en utfordring for flere enn vi tror. Myndighetene krever at vi skjerper oss og gir oss derfor den nye diskriminerings- og tilgjengelighetsloven med basert p奪 f淡lgende retningslinjer og standarder. kt tilgjengelighet kan likevel oppn奪s med enkle grep
Malin Rygg sin presentasjon p奪 Digitaliseringskonferansen 2016 Difi: Preparing to fail. Malin gir 7 grunnar til kvifor du skal tenke p奪 universell utforming. Fr奪 no.
Hva tenker du n奪r du h淡rer universell utforming? Dyrt? Kjedelig? Vanskelig? Lovkrav? Til syvende og sist handler ogs奪 universell utforming om godt innhold, prioritert design og ryddig kode til glede for alle bes淡kere p奪 nettsidene dine.
Design og innhald - korleis ta universell utforming inn i prosessen ved Joakim Bording i Netlife Research. Du kan sj奪 opptak av foredraget p奪 uu.difi.no
Tilgjengelighet - N淡kkelen til 淡kt verdi p奪 ditt nettsted Tord Heyerdahl
油
Vi ser p奪 hvordan n.ettbruk er en utfordring for flere enn vi tror. Myndighetene krever at vi skjerper oss og gir oss derfor den nye diskriminerings- og tilgjengelighetsloven med basert p奪 f淡lgende retningslinjer og standarder. kt tilgjengelighet kan likevel oppn奪s med enkle grep
Malin Rygg sin presentasjon p奪 Digitaliseringskonferansen 2016 Difi: Preparing to fail. Malin gir 7 grunnar til kvifor du skal tenke p奪 universell utforming. Fr奪 no.
Hva tenker du n奪r du h淡rer universell utforming? Dyrt? Kjedelig? Vanskelig? Lovkrav? Til syvende og sist handler ogs奪 universell utforming om godt innhold, prioritert design og ryddig kode til glede for alle bes淡kere p奪 nettsidene dine.
Design og innhald - korleis ta universell utforming inn i prosessen ved Joakim Bording i Netlife Research. Du kan sj奪 opptak av foredraget p奪 uu.difi.no
P奪 Mangfoldsledelse 2018 snakka tilsynsleiar i Difi Malin Rygg om korleis universell utforming av ikt beveger samfunnet, og ga fem grunnar til kvifor universell utforming er n淡dvendig.
The document outlines the Norwegian Accessibility Legislation aimed at promoting equality and accessibility in information and communication technology. It details the legal framework, inspection processes, and the challenges users face with online services, emphasizing the importance of universal design. The findings from inspections indicate a high compliance rate among websites, highlighting areas for improvement, particularly in keyboard navigation and error handling.
Tilgjengelegheitssjef i NRK, Siri Antonsen, heldt innlegg om korleis NRK jobbar med universell utforming. Du kan sj奪 opptak av innlegget p奪 uu.difi.no.
8. 束Internetts styrke er at det
er universelt. Tilgjengelighet
for alle er essensielt, uavhengig
av funksjonshemning.損
Tim Berners-Lee, direkt淡r for W3C,
(oppfinner av World Wide Web)
Foto: Nadav Kander
11. Id辿: Denis Boudreau
DESIGN FOR YTTERPUNKTA
La midten ordne seg sj淡lv!
Brukarar med
nedsatt
funksjonsevne
Eldre
brukarar
Den
束gjengse損
brukar
Brukarar av
smartbrett
Brukarar av
smarttelefon
14. Tilsyn for universell utforming av IKT
束Empower every person
and every organization
on the planet to achieve more損.
Slagordet til Microsoft
Bill Gates grunnleggar Microsoft
Photo by Yana Paskova/Getty Images
31. N奪r gjeld dei nye krava?
1. juli 2020: Nye nettstadar
23. september 2020: Eksisterande nettstadar
23. juni 2021: Mobilapplikasjonar
Opent for endring
44. Tab-tasten, piltastane og enter-tasten
Muleg 奪 bruke alt innhald
Logisk rekkef淡lge
Snarveg til hovudinnhald
Ingen tastaturfeller
Tastaturnavigasjon
68. L淡sninger som m淡ter kravene i forskriften
Det er en rekke krav til tekststruktur for 奪 tilfredsstille loven.
Avhengig av hvilket publiseringssystem som benyttes,
kan kravene l淡ses ulikt teknisk, men grunnprinsippene vil v脱re de samme.
Innholdet m奪 struktureres med korrekt kode, og m奪 kunne forst淡rres uten tap
av tekst eller lesbarhet.Overskrifter Overskrifter og rett bruk av
overskriftsniv奪er er kanskje det mest fremtredende virkemiddelet for 奪 gi
struktur og oversiktlighet til teksten. Mange brukere, b奪de med og uten
hjelpemiddel, benytter mellomtitler for 奪 skumlese innholdet og finne det som
virker mest interessant. Uten mellomtitler blir lange tekster tunge 奪 lese.
Overskrifter kodes ved hjelp av overskriftelementene <h1> til <h6>, og disse
deler opp teksten tilsvarende i kapitler og delkapitler i ulike niv奪er. Sidetittel
skal v脱re h1Hovedinnholdets tittel skal v脱re den f淡rste overskriften i koden,
og skal v脱re p奪 niv奪 1 ved hjelp av elementet <h1>. Dette gjelder ogs奪
startsiden, som b淡r ha en synlig overskrift som tydelig formidler hvilken
virksomhet brukeren har kommet til. Dette er gunstig b奪de for
s淡kemotoroptimalisering og for brukere med hjelpemiddel.
71. L淡sninger som m淡ter kravene i forskriften
Det er en rekke krav til tekststruktur for 奪 tilfredsstille loven. Avhengig av
hvilket publiseringssystem som benyttes, kan kravene l淡ses ulikt teknisk,
men grunnprinsippene vil v脱re de samme. Innholdet m奪 struktureres med
korrekt kode, og m奪 kunne forst淡rres uten tap av tekst eller lesbarhet.
Overskrifter
Overskrifter og rett bruk av overskriftsniv奪er er kanskje det mest
fremtredende virkemiddelet for 奪 gi struktur og oversiktlighet til teksten.
Mange brukere, b奪de med og uten hjelpemiddel, benytter mellomtitler for 奪
skumlese innholdet og finne det som virker mest interessant. Uten
mellomtitler blir lange tekster tunge 奪 lese.
Overskrifter kodes ved hjelp av overskriftelementene <h1> til <h6>, og disse
deler opp teksten tilsvarende i kapitler og delkapitler i ulike niv奪er.
Sidetittel skal v脱re h1
#4: Noe dere kan ta med dere n奪r dere snakker om hvorfor uu er viktig i deres egen organisasjon.
5 grunnar til at vi meiner det gir samfunnet ein meirverdi 奪 satse p奪 universell utforming.
#5: Ein litt kjedeleg grunn f淡rst - universell utforming er samfunns淡konomisk l淡nnsomt
#6: Regjeringen satsar p奪 digitalisering ikkje berre for 奪 f奪 betre tenester, men like viktig er ambisjonen om 奪 drive ein meir effektiv forvaltning. For 奪 oppn奪 dette, s奪 er det ein forutsetning at flest muleg kan bruke nye l淡ysingar.
Her skal du f奪 eit lite bakteppe for kor mange har nytte av universell utforming.
#8: Vi brukar 奪 seie at universell utforming gir like mulegheiter ogs奪 i den digitale verden.
#9: Men dette med 奪 inkludere alle, det er ein tanke som ikkje er ny,
Den har v脱rt med siden oppstarten av internett
Oppfinnaren av Internett Tim Berners Lee har sagt at
束Internetts styrke er at det er universelt. Tilgjengelighet for alle er essensielt, uavhengig av funksjonshemming損.
Tilgjengelegheit for alle er essensen av internett.
#10: Og ta for eksempel Stephen Hawking.
Han var rekna for 奪 vere ein av verdens mest intelligente personer.
Internett og digitale hjelpemiddel var jo p奪 mange m奪tar ein forutsetning for at vi kunne ta del i hans tankar og idear.
#11: Universell utforming er smart!
Kort og godt. Det er bra for brukarane, men det er ogs奪 smart for virksomhetene.
#12: Dette er noko vi brukar 奪 snakke om n奪r vi snakkar om design p奪 nettet:
Dersom vi brukar tiln脱rminga til den amerikanske h脱ren, fokuserer du her i midten. (束gjengse brukar損)
P奪 denne illustrasjonen (inspirert av Denis Boudreau) finn du:
At p奪 begge sider av gjennomsnitt finn ein ytterpunkta.
p奪 den ene ytterkanten dei st淡rste brukarutfordringane,.
p奪 den eine kanten har du brukarar av smarttelefon
Liten skjerm krev responsive design.
V奪rt r奪d er derfor 奪 designe for ytterpunktene.
Dersom du designar for ytterpunkta, vil dei i midten f淡lgje med automatisk. P奪 den m奪ten har du favna alle.
#13: N奪r vi er rundt og snakkar om uu, ser vi at dei fleste tenker umiddelbart at dette handlar om 奪 f奪 dei blinde p奪 nettet.
I virkeligheten er for eksempel Google verdens st淡rste blinde brukar. I prinsippet, brukar dei den same tiln脱rminga som ein skjermlesar for 奪 finne innhald.
Dermed vil dere ogs奪 ha den fordelen at dersom du gjer nettsida di meir universelt utforma kjem du lenger opp i s淡ket p奪 Google.
#14: For det er nemleg l淡nnsamt.
Universell utforming er ikkje berre l淡nnsomt for samfunnet det er l淡nnsamt for virksomhetene.
#15: Microsoft har hatt som innebygd prosess at l淡ysingane skal vere tilgjengeleg for alle s奪 langt det er muleg fr奪 starten av.
Slagordet er 奪 sette kvar person og kvar organisasjon i stand til 奪 oppn奪 meir. Det skal inkludere alle uavhengig av funksjonsevne.
Dette sikkert omd淡mmemessig lurt av Microsoft, tenker eg, men eg har ingen tru p奪 at dei gjer dette dersom det ikkje er l淡nnsomt.
#16: S奪 det blir slik at dei som har tenkt p奪 funksjonshemma brukarar fr奪 starten av, dei har no ein kjempefordel og eg kan nemne andre selskap som har tenkt slik:
Facebook
Amazon
Apple
Dei har nok ikkje gjort det for hjertets godhet. Det er smart 奪 tenke p奪 eit st淡rre omfang. Det m奪 vi ogs奪 tenke p奪 i offentlig sektor, med digitalisering.
#17: Universell utforming gir fremtidsretta l淡ysingar!
#18: Teknologiutviklinga g奪r veldig raskt. Du veit ikkje kva teknologi innhaldet ditt blir presentert p奪 i 2021, eller kva yrker som er aktuelle i 2030.
F奪 tenkte p奪 appar i 2008, d奪 lova kom
Nye m奪tar 奪 l淡yse oppg奪ver p奪 vil komme jamt og trutt tenk berre p奪 mobilbetaling, eller P-app.
Det at vi lever i eit globalt samfunn, betyr at Norge ikkje er lausriven fr奪 resten av verden.
Spesielt ikkje p奪 det digitale omr奪det.
Premissene for mykje av det vi gjer p奪 nett, blir lagt andre stader i verda.
#19: Det handlar ikkje om 奪 berre henge med p奪 dei siste teknologiane, men det handlar om 奪 forst奪 kva verden dei opererer i, og d奪 m奪 du forst奪 folk.
Det 奪 designe ei nettside, handlar om 奪 lage l淡ysingar for brukarane. Og dagens unge, som er 束digital natives損, morgendagens brukere, kjem til 奪 stille h淡ge krav til brukarvenlegheit. Og uu er ein del av dette.
#20: Uansett om du ikkje syns dei 5 foreg奪ande grunnane var gode nok universell utforming av ikt er faktisk p奪lagt ved lov!
#21: Fr奪 1. juli 2013 vart universell utforming lovp奪lagt gjennom forskrift om universell utforming av IKT, og tilsynet vart etablert.
Forskrifta har heimel i Likestillings- og diskrimineringslova
Nye ikt-l淡ysingar skal no utformast i samsvar med krava.
I 2021 skal alle l淡ysingar f淡lge dei nye krava.
#22: Og det gjeld alle sektorar.
Forskrifta gjeld for:
Det gjeld alle verksemder i
Statleg sektor (klikk)
Kommunal sektor (klikk)
Privat sektor (klikk)
Lag og organisasjoner
Og fr奪 i 2018 er ogs奪 skole- og utdanningssektoren inkludert i regelverket.
#23: Ikt-l淡ysinga m奪 vere retta mot publikum i Norge
Integrert del av m奪ten verksemda informerer og tilbyr sine tenester til publikum.
#24: Ikt-l淡sninger i forskrifta er definert som nettsider, apper og automater.
#25: For nettl淡ysingar viser forskrifta til delar av standarden: Retningslinjer for tilgjengelig webinnhold. (WCAG) 2.0
WCAG er ein etablert og godt kjent internasjonal standard.
WCAG er bygd opp med fire prinsipp
Informasjon skal presenterast p奪 ein m奪te som brukarane kan oppfatta.
Det skal v脱re mulig 奪 bruke nettsida
Det skal vera muleg 奪 forst奪 informasjon og betening av brukargrensesnitt
Innhaldet skal vera robust nok til at det kan tolkast p奪 ein p奪leiteleg m奪te av ulike nettlesarar og hjelpemiddel
#26: vi i tilsynet jobbar med 奪 f淡lge opp regelverket p奪 fleire m奪tar:
Gir informasjon og 奪 veiledning
Bygger kunnskap og skaffer status p奪 korleis det st奪r til med universell utforming av ikt i Norge
Fagorgan: Videreutvikling av regelverk
F淡rer tilsyn - kontroll av enkeltverksemder.
Viss verksemda ikkje viser vilje eller evne til 奪 retta opp feila, eller brukar for lang tid p奪 奪 setta i verk retting, kan vi gi p奪legg om retting og i siste instans dagb淡ter. Vi har nylig v脱rt oppe i en dagbotsats p奪 150 000 kroner dagen.
#27: Norge har hatt regelverk p奪 dette omr奪det i 5 奪r.
Og EU kommer etter.
Med direktivet om tilgjengelighet til nettsteder i offentlig sektor kjent som webdirektivet.
Det ble vedtatt i desember 2016.
S奪 hvordan vil dette p奪virke oss i Norge?
Krava gjeld nettsider og mobilapplikasjonar.
Dagens norske regelverk dekkar i stor grad krava i webdirektivet.
#28: Direktivet stiller nokre nye krav, mellom anna til at vi i tilsynet skal gj淡re jevnlige m奪linger av nettsider og mobilapplikasjoner og rapportere status for universell utforming av ikt i Norge inn til EU-kommisjonen.
Men kva blir nytt for dykk?
#29: Det er en prosess p奪 奪 innlemme WCAG 2.1 i direktivet.
WCAG 2.1 var klar som standard fr奪 W3C tidligere i 奪r.
Alle kravene i 2.0 ligger i 2.1, men det er noen nye krav, som er ment 奪 ivareta bruk av nettsider p奪 mobil og nettbrett.
Nevner noen eksempler, utan at eg g奪r i dybden
Eksempel p奪 krav er:
Det skal v脱re mulig 奪 bruke nettsiden i b奪de liggende og st奪ende visning (Success Criterion 1.3.4 Orientation)
Innhold kan presenteres uten at man m奪 scrolle b奪de loddrett og vannrett (med noen unntak, for eksempel for kart), (Success Criterion 1.4.10 Reflow)
Grafer og navigeringsmekanismer skal ha en kontrast mot bakgrunnen p奪 minst 3:1. Alts奪 utvidet krav til kontrast, som i dag bare gjelder mellom tekst og bakgrunn (Success Criterion 1.4.11 Non-text Contrast)
Minimumskrav til klikkeflate (Success Criterion 2.5.5 Target Size)
Dette kommer. Trenger ikke vente.
#30: Verksemdene skal utarbeida ei tilgjengelegheitserkl脱ring for l淡ysingane sine, som dokumenterer status for universell utforming kva som er uu og kva som ikkje er uu.
Erkl脱ringa skal vere publisert p奪 nettstaden (eller tilsvarande for appar) og skal oppdaterast n奪r verksemda gjer st淡rre endringar av l淡ysinga
For 奪 f奪 oversikt over status for l淡ysinga m奪 verksemda teste l淡ysiga, anten ved 奪 teste den sj淡lv, eller ved 奪 kj淡pe ein test i marknaden.
EU-kommisjonen har utarbeider ein mal, som skal omsettast til norsk.
Nettstaden skal ha ein tilbakemeldingsfunksjon der brukarane skal kunne gje verksemda tilbakemeldingar om l淡ysinga og feil knytt til uu.
Brukeren har da krav p奪 utfyllende svar p奪 henvendelsen.
Dersom brukaren ber om eit tilgjengeleig alternativ til innhald som ikkje er universelt utforma, skal verksemda svara p奪 f淡respurnaden innan rimeleg tid.
#31: Verksemdene sine intranettsider skal ogs奪 vere universelt utforma.
Omgrepet intranett er ikkje klart definert i direktivet, men omfattar den interne nettstaden til verksemda.
Det vert ikkje stilt krav til ikt-l淡ysingar i arbeidslivet generelt.
Intranett omfattar t.d. ikkje:
saksbehandlingssystem
publiseringsl淡ysing
System for tidsregistrering og reiserekningar
andre fagsystem
#32: Vi regner med at det nasjonale regelverket trer i kraft 1. juli 2019.
For nye krav er det uansett en innf淡ringstid p奪 ett 奪r, og fristen for nye l淡sninger er derfor 1. juli 2020.
Fristene for eksisterende nettsteder f淡lger av direktivet
Jeg sier dette med et stort forbehold. Dette kan v脱re 奪pent for endring.
#33: Departementa (KMD, BLD), med bistand fra oss, jobber med 奪 oppdatere lov og forskrift for 奪 innarbeide det som er nytt. Det er fortsatt en del som er uavklart, ogs奪 fra EU-kommisjonens side.
Det blir vanleg h淡yring i haust.
Alle har h淡ve til 奪 gje innspel i h淡yringa
Det blir ope h淡yringsm淡te
F淡lg med p奪 nettstaden v奪r for meir informasjon. Vi jobbar 嘆g med veiledning om det som er nytt.
#34: N奪 om testing.
Kan ikke legge nettsida p奪 vektsk奪la og lese av kor stor prosent den er uu.
teste ein heil nettstad etter WCAG kan virke overveldende.
#35: Start i en ende og prioriter. Det er lett 奪 si
Kor skal ein starte? Kven skal gjere kva?
Her kan vi godt f奪 nokre innspel fr奪 salen etterp奪. Eg jobbar med tilsyn, og har s奪leis ein anna testkvardag enn de som er her i dag. Det er de som kjenner best p奪 utfordringane de har i dag.
N奪r vi testar, gjer vi alltid eit utval.
Vi tester ikkje alle sidene p奪 nettstaden, men vi veljer ut for eksempel
Dei viktigaste brukaroppg奪vene. Kva teneste eller informasjon er prim脱rfunksjonen til nettstaden?
Ulike sidetypar og malar Ved 奪 teste ein mal, f奪r du testa mange sider samtidig, og endringar f奪r store ringvirkningar
Innhaldet p奪 nettsidene avgjer kva krav det er relevant 奪 teste. Vi treng for eksempel ikkje teste tabellar viss det ikkje finst tabellar p奪 sidene.
#36: jobbe med universell utforming er lagarbeid.
Sj淡lv om det er mange flinke folk her i salen, er det nok ingen som kan gj淡re alt. Og det er viktig at ein ikkje blir sittande aleine med ansvaret.
Kven som testar kva og kva du testar kjem an p奪 dei ulike rollane i organisasjonen.
Og universell utforming er ikkje berre noko som skjer ein gong, men er ein prosess. Det m奪 inn i rutinane.
#37: N奪r vi tester, bruker vi v奪r egenutvikla metode, som er indikatorsettet v奪rt.
Som forvaltere av et lovverk, forholder vi oss til standarden, WCAG 2.0.
Standarden har tatt hensyn til brukerbehov.
Indikatorene bygger p奪 krava og dokumentasjonen i WCAG.
Indikatorene beskriver hvordan kan vi teste p奪 en forutsigbar m奪te, som kan g奪s etter i s淡mmene. Andre skal kunne bruke v奪re metodar og finne dei same feila.
Fra test, f奪r vi informasjon om hvordan det st奪r til med l淡sningen, hva som er feil og hva som er rett av innholdet vi har testa.
Vi tar vare p奪 dataene og kopler sammen anna informasjon, som grunnlag til videre arbeid med veiledning og kontroller.
Metoden v奪r, indikatorsettet, blir brukt b奪de i kontrollar og statusm奪lingar.
#38: m奪ling av nettsidene til de politiske partiene f淡r valget i fjor.
ny st淡rre statusm奪ling om universell utforming p奪 nett, resultata kjem i haust.
tilsyn og kontroller
#39: No skal eg snakke litt om vanlege feil vi finn, kva vi ser etter n奪r vi testar.
Eg har lyst til 奪 gi dykk gode r奪d p奪 3 omr奪de som det er viktig tenke p奪 n奪r de jobbar med universell utforming og kva du kan gjere for 奪 komme i gang.
Ein analogi vi ofte brukar er 奪 tenke p奪 nettsida som eit hus.
Og d奪 b淡r du ha ein solid grunnmur: Ha god kode.
B淡r ha ein bra design.
Fylt med tilgjengeleg innhald.
#40: Grunnmur: Ha god kode.
B淡r ha ein bra design det skal b奪de sj奪 bra ut, og ha ein design som fungerar
Fyllt med tilgjengeleg innhald.
#41: Grunnmur: Ha god kode.
B淡r ha ein bra design.
Fyllt med tilgjengeleg innhald. Like sj淡lvsagt som at du kan f奪 tak i alle tinga i huset ditt, at brukarane skal f奪 tak i innholdet p奪 like vilk奪r.
Men korleis f奪r du det til?
Eg veit at dei fleste av dykk er travle, du
sit med tusen oppg奪ver og masse leveransar
Du skal vere med og s淡rge for at nettsida f淡lgjer lovkravet om uu.
Du skal drive masse testing
Eg er her i dag for 奪 gi litt hjelp.
#42: La oss starte med grunnmuren:
GOD KODE
Viktig for alle brukere, b奪de med tanke p奪 brukervennlighet, og at nettl淡sningen skal fungere ved bruk i forskjellige nettlesere og hjelpemidler.
som for eksempel skjermleser og lignende.
Ogs奪 viktig for fremtidig teknologi. God kode gj淡r nettsiden mer robust.
Det finnes mange m奪ter 奪 kode en nettside p奪, og det finnes ulike l淡sninger, avhengig av hvilket kodespr奪k man bruker.
#43: Kode gjeld vel ikkje deg, tenker du. Det er leverand淡ren din. Eller utviklaren din.
Men du har med kode 奪 gjere b奪de n奪r du kravspekkar og n奪r du testar.
#44: Basert p奪 det vi ser i tilsyn og v奪re erfaringer, s奪 vil eg trekke fram 5 viktige punkt som du m奪 tenke p奪 n奪r det gjeld kode:
#45: Tastaturnavigasjonen tek utgangspunkt i koden p奪 nettsida f奪r 奪 fungere.
Her testar vi fleire ulike ting.
KLIKK
Vi bruker Tab-tasten for 奪 navigere gjennom ei nettside. Vi brukar ogs奪 piltastane for 奪 bla mellom val, og enter-tasten for 奪 bekrefte. Esc.
Vi tester:
Om det er muleg 奪 bruke alt innhald. Alt du kan n奪 med mus m奪 du kunne n奪 med tastaturet
At innhaldet kjem i ei logisk rekkef淡lge
Om det finst ein Snarveg fr奪 toppen av sida ned til hovudinnhaldet
At tastaturnavigasjonen ikkje sitt fast i ei tasttaurfelle
#46: Om brukeren tabber gjennom ei nettside, eller svaralternativ i ei nedtrekksliste, skal brukaren ikkje f奪 ei kontekstendring, med mindre brukaren f奪r beskjed.
Eksempel p奪 kontekstendring er at
tastaturfokuset blir flytta til ein annan del av sida
innhaldet p奪 sida endrar seg i vesentleg grad
sida laster p奪 nytt og tastaturnavigasjonen stater p奪 toppen igjen, eller
skjema blir sendt inn automatisk
Dette skal ikkje skje f淡r brukeren har aktivt fullf淡rt eller bekreftet handlingen.
#47: Du m奪 kunne sj奪 kvar du er.
Alle objekter p奪 nettstedet skal ved tastaturnavigering skal f奪 tydelig markering av fokus. Det m奪 v脱re lett 奪 se hvilket objekt som har fokus, hvis ikke blir tastaturnavigering i praksis umulig for enkelte brukere.
Alle nettlesere har en standard fokusmarkering innebygd, med mindre den aktivt er fjernet i koden eller css.
Men i enkelte tilfeller er ikke bruk av kun stiplet linje godt nok, og man kan definere egne, bedre fokusmarkeringer i koden.
Dette tester vi ved 奪 bruke tab-tasten for 奪 bla mellom elementene p奪 sida.
#48: Spr奪ket skal v脱re rett koda, b奪de opp mot HTML-standard, men ogs奪 spr奪kkode.
Det gjeld b奪de for hovudinnhaldet, og der delar av innhaldet er p奪 eit anna spr奪k.
Da blir nettsida lest opp med riktig stemme av skjermleser.
Vi testar med inspeksjonsverkt淡yet i nettlesaren.
Vi h淡yreklikker p奪 elementet vi skal teste og velger inspiser element. F12
#49: I tillegg skal koden unng奪 enkelte syntaksfeil som er spesifisert i WCAG
Her tester vi med HTML-validatoren til W3C.
#50: Skjemaelement skal vere kopla til ein ledetekst i koden.
Og det er nettopp p奪 skjema at vi bruker 奪 finne en del gjennomg奪ande feil.
For eksempel at skjemafelt ikkje er kopla til noko ledetekst, eller at ledeteksten i koden er feil eller p奪 feil spr奪k.
Da blir det umogeleg for enkelte brukara 奪 vite kva som skal fyllast inn i skjemafelta.
#51: For 奪 teste bruker vi inspeksjonsverkt淡yet i nettleseren.
#52: Nettsidene skal ha ein sidetittel som beskriv innhaldet.
Sidetittelen er synleg p奪 fana i nettlesaren og ligg i title-elementet i HTML-koden.
Vi sjekkar om title-elementet finst, og at teksten i elementet beskriv innhaldet p奪 sida godt nok.
Bruker inspeksjonsverkt淡yet.
#53: Men bra kode er ikkje nok, du m奪 ha god design!
#54: Det er mykje ubevisst bruk av design. Det er mykje som er laga for 奪 sj奪 束kult損 ut.
Men eg synast at det ikkje er kult viss det ikkje er brukarvenleg
Eg tenker at det er 4 ting du skal passe p奪 n奪r vi snakkar om god design:
Tydelege油lenker
Kontrast
God fargebruk 油
Forst淡rring av innhald
#55: Lenker skal vere tydeleg.
Kva er grunnen til at vi syns at lenker er s奪 viktig?
Dette er ein av dei viktigaste m奪tane folk kjem seg rundt p奪 nettstaden p奪.
Derfor m奪 lenkene skilje seg tydeleg fr奪 teksten.
La oss ta et eksempel
#56: Her er eit utsnitt av ei fiktiv nettside slik
ho vil sj奪 ut i sterkt sollys
eller for ein som er fargeblind.
Her er det ikke s奪 lett 奪 se hva som er lenker og ikke.
Kor mange lenkjer trur de det er her ?
#57: Hvis vi legger p奪 farger, blir det litt lettere 奪 se.
Noen forslag?
Her er det seks lenker.
#58: Her er det igjen sort-hvitt, men vi har understreket lenketeksten og da g奪r det med en gang 奪 se
N奪r vi testar, startar vi med 奪 identifisere lenker i l淡pande tekst, der det er brukt farge for 奪 skilje lenka fr奪 teksten.
Vidare skal lenka ha anna markering i tillegg til farge, for eksempel med understreking (som her), feit skrift, ikon eller andre virkemiddel.
#59: Sjekk kontrasten.
Det er heilt utruleg kor mykje d奪rleg kontrast som er ute 奪 g奪r.
Minn designaren p奪 at det finst krav til kontrast mellom tekst og bakgrunn.
Det ser kanskje fint p奪 retinaskjermen men for svaksynte eller p奪 mobilen ute i sola er det ein annan sak.
#60: Det er ulike krav for stor og liten tekst.
En huskeregel kan v脱re at:
stor tekst er det som er dobbelt s奪 stor som br淡dteksten.
Alt annet er liten tekst.
Grensa for stor tekst er i WCAG 2.0 sett til 19px feit eller 24px vanleg og st淡rre. D奪 kan teksten ha kontrast heilt ned i 3,0:1. Er teksten mindre enn det m奪 kontrasten minst v脱re 4,5:1.
Det er som oftest ikke s奪 mye som skal til for 奪 f奪 kontrasten opp p奪 minimumsniv奪et, og det har stor effekt for mange brukere.
#61: Det finnes mange gratis verkt淡y p奪 nettet. Noen er automatiske.
Vi bruker colour contrast analyser til 奪 teste
#62: Tenk p奪 fargebruken sj淡lv om kontrasten er bra s奪 tenk p奪 at same farge ikkje ser lik ut for alle.
I for eksempel grafar og diagram, skal det verer mogleg 奪 lese av grafen, sj淡lv om ein ikkje kan sj奪 alle fargane.
Vi tester derfor om informasjonen er formidla p奪 en annen m奪te i tillegg til farge, for eksempel med m淡nster, eller ei form for kopling til tekst.
Det finns mange nettsider der du simulere ulike type fargeblindheit.
Det anbefalar eg du kan f奪 deg ein aha-opplevelse.
La meg vise dykk eit eksempel. Dette var noko vi gjorde det handlar om bevisstheit.
#63: Dette lysarket, brukte vi p奪 eit foredrag i 2014, for 奪 vise kor mange prosent av befolkningen som hadde nedsatt funksjonsevne.
Her er dei med nedsett funksjonsevne merka med rosa farge, for 奪 skilje seg fr奪 dei andre, som er gr奪.
D奪 eg skulle vise det til ein kollega lurte han p奪 om alle hadde nedsatt funksjonsevne.
Nei, det er berre dei rosa, sa eg
Han s奪g dette.
#64: Alle var gr奪.
Han er fargeblind.
Dette viser - bruk meir enn berre farge!
Her kunne vi for eksempel brukt m淡nster eller skravering.
#65: Innholdet skal ogs奪 kunne forst淡rres utan tap av innhold og funksjonalitet. 200 %
Responsiv design kav v脱re en egna m奪te 奪 oppfylle kravet p奪.
Dette er et eksempel p奪 en vanlig feil ved forst淡rring av innhald. Ved zoom kan deler av innholdet, for eksempel bakgrunnsbilde, legge seg over anna innhald og skjule eller gi d奪rleg kontrast.
Vi testar med 奪 bruke zoomfunksjonen i nettlesaren. Viss dette ikkje fungerer, leiter vi etter ein zoomfunksjon p奪 nettsida og testar eventuelt med den.
#66: Og s奪, siste omr奪de Tilgjengelig innhald
Rett f淡r sommaren i fjor gjorde vi ein test av nettsidene til dei politiske partia p奪 Stortinget. Eitt av partia gjekk ut i media og sa at dei skj淡nte ikkje kvifor dei scora d奪rleg, for dei hadde jo bestilt ei nettside som var universelt utforma for to 奪r sidan.
Vi skj淡nnar at det er fort 奪 tenke slik, men det kan du ikkje.
Du skal jo sj淡lv legge inn innhald og det m奪 vere tilgjengelig.
#67: 4 ting du b淡r passe p奪 sj淡lv:
Lenketekst
Overskrift og liste
Video
Bilde
#68: Lenketekstar
God lenketekst som forklarer m奪let for lenken.
enten alene
eller sammen med innholdet som st奪r rundt lenken (konteksten), for eksempel tekst i samme avsnitt, i en overskriftscelle i tabell, eller forrige overskrift i innholdet.
I f淡lge kravet er det nok at lenkem奪let g奪r fram av konteksten, t.d. med avsnitt at 束referata fr奪 kommunestyret finn du HER損, (s奪 er 束HER損 lenketeksten).
Likevel anbefaler vi at lenkem奪let framg奪r av sj淡lve lenketeksten.
Og her er grunnen: Skjermlesarbrukarar kan skumlese sida ved 奪 hente opp lenkene i ei liste.
D奪 ser det slik ut. Ei lang liste, kor kvar lenke er les mer, les mer, les mer
Derfor er det mykje betre 奪 skrive tydelege lenker og ikkje berre les mer.
#69: N奪r det gjeld overskrifter og lister, s奪 er det noko vi ser mange gjer feil p奪.
For den som f奪r teksten opplest ser det utan riktig struktur, slik ut. Ei lang blokk med tekst.
#70: Det er ein enkelt 奪 f奪 til legge p奪 rett struktur, med 奪 bruke funksjonane som er i publiseringsl淡ysinga.
Feit font kan bety at det ser ut som ei overskrift. Men det er ikkje koda som overskrift.
Overskrifter skal vere koda med h-elementa i HTML (eller tilsvarande koding som ivaretek strukturen).
#71: Dette gjeld ogs奪 lister.
Tankestrek er ikkje ei punktliste.
Bruk listeverkt淡yet n奪r du lagar lister.
Lister skal v脱re koda som liste, avhengig av om de er nummererte eller unummererte.
#72: D奪 blir teksten sj奪ande slik ut b奪de for den som ser, og for den som brukar hjelpemiddel.
#73: For 奪 teste koding av lenker, overskrifter og lister, bruker vi inspeksjonsverkt淡yet i nettleseren.
#74: Slik kan det opplevast for dei over 700 000 nordmenn som har nedsett h淡yrsel.
Vi har snakka med H淡rselshemmedes landsforbund, og dei p奪peikar at det er eit stort demokratisk problem at alt fr奪 Stortingsforhandlingar, kommunestyrem淡ter til viktige infofilmar ikkje er teksta.
Vi tester om videoane er teksta og at tekstinga ikkje forstyrrer innhaldet i videoen.
Tekstinga skal gjengi b奪de det som blir sagt, og viktige lydeffektar.
#75: Videre til bilder.
Det kan v脱re litt vrient 奪 vurdere hva som er rett alt-tekst.
-P奪 skjermen ser dere et eksempel p奪 en alt-tekst Kran med vann
Dette er den informasjonen du f奪r viss du ikke kan se bildet,
men f奪r lest opp den alternative teksten med et hjelpemiddel.
La oss si at dette er et lenket bilde. Pr淡v 奪 gjett hvor lenken leder.
#76: Jo, den lenker til en side om vannavstenging i kommuen.
Riktig alt-tekst er helt avgj淡rende for at brukerne som ikke ser bildet,
skal f奪 med seg denne viktige informasjonen.
Det er ikkje nok at alt-teksten er der, den m奪 ogs奪 vere god nok.
#77: alternativ tekst, skrives inn i HTML-koden og er knyttet til bildeelementet IMG i HTML.
Bruk alt-attributtet i HTML. Det skal油alltid油v脱re med.
Funksjonen til bildet avgjer kva alt-tekst det skal ha.
Lenka bilde skal ha ein alt-tekst som beskriv lenkem奪let
Pynt skal ha tom alt-tekst
Vanlege bilde skal ha ein alt-tekst som beskriv innhaldet
Komplekse bilde med mykje informasjon, skal ha ei lengre forklaring i tillegg.
For 奪 teste alt-tekst bruker vi (noen forslag?)
#78: Inspeksjonsverkt淡yet i nettleseren.
Vi leter etter alt-attributtet p奪 img-elementet.
Alle steder der vi bruker inspeksjonsverkt淡yet, kan det finnes andre 束mer brukervennlige損 verkt淡y. Vi bruker inspeksjonsverkt淡yet for 奪 f奪 direkte tilgang til koden, i tilfellet kravet er oppfylt p奪 en m奪te som verkt淡yene ikke tar h淡yde for.
#79: I skjema m奪 brukaren f奪 tydeleg beskjed om kva dei skal skrive inn.
Vi testar difor om skjemaelement er identifiserte ved hjelp av ledetekstar eller instruksjonar, og at ledetekstane beskriv kva brukaren skal fylle inn.
Dersom skjemaelementa er obligatoriske, skal dei vere merka. Viss merkinga er eit symbol, for eksempel ei stjerne, skal det vere forklart f淡r den er teke i bruk f淡rste gong.
#80: Det kan for eksempel vere at brukaren har fylt inn feil informasjon i eit felt som krev eit s脱rskild dataformat, for eksempel dato, eller brukaren har gl淡ymd 奪 fylle ut eit obligatorisk felt.
Viss skjemaet kan oppdage feil automatisk
I feilmeldinga skal brukaren f奪 informasjon om
Kor feilen er
Kva som er feil
Og f奪 forslag til korleis dei kan rette feilen
Feilmeldinga skal vere i form av tekst
Feilmeldingane treng ikkje vere lange, men dei m奪 vere tydelege og spesifikke.
Vi testar med 奪 sende inn eit tomt skjema og ved 奪 sende inn eit skjema der vi har fylt inn feil informasjon. Vi vurderer s奪 feilmeldingane som kjem opp.
#81: Som mye av det jeg nettopp har sagt, er indikatorene og v奪r metode er i hovedsak manuell, med noko automatisering.
I og med at det er mye innhold som skal testes, er det en fordel 奪 kunne automatisere der man kan.
Da er det noen krav som egner seg bedre til automatisering enn andre, for eksempel .
Kontrast
Grunnleggende tastaturnavigasjon
Kodesyntaks
Koding av spr奪k
Automatisering er ikke egnet der man m奪 vurdere meningsinnhold og betydning p奪 innholdet. Som for eksempel
Tekstalternativ til bilde og video
Lenketekster
Overskrifter
Ledetekster og feilmeldingar i skjema
Vi forventer at mer og mer blir mulig 奪 teste automatisk.
Som Malin, sjefen min, bruker 奪 si: Hvis det er mulig 奪 lage selvkj淡rende biler, m奪 det v脱re mulig 奪 bruke kunstig intelligens til 奪 vurdere alt-tekster p奪 bilder.
#82: I tillegg til 奪 teste etter minimumskrava i standarden, anbefalar vi at de gjer brukartestar.
Test sida di med forskjellige brukarar p奪 alle stadier i utviklingsprosessen.
Vi f奪r ofte fortvila e-postar fr奪 folk som har brukartesta sida veka f淡r produksjonssetting.
Brukartest med ulike brukarar allereie p奪 designstadiet. D奪 sparar du pengar, tid og frustrasjon.
#83: Tilsynet legg vekt p奪 informasjon og rettleiing og tilsynets hovudkanal er uu.difi.no.
#84: Treng du repetisjon?
Ta e-l脱ringskurset v奪rt.
Gratis og ope for alle. F奪 alle i verksemda di som jobbar med nett til 奪 ta det.
Kurset er delt inn i tema og ta heile eller deler av det, og bruk det som oppslagsverk油油.
Kort og lang versjon.
#85: Indikatorsettet v奪rt. Bruk det gjerne for 奪 teste eiga l淡ysing. Gi gjerne tilbakemelding.
Ikkje det mest tilgjengelege formatet, i 50 Excel-arbeidsb淡ker. Jobber med ei meir tilgjengeleg l淡ysing p奪 sikt.
Rapport som beskriver metoden i detalj
#86: Nettsida v奪r uu.difi-no har veiledn og info om regelverket.
Ta gjerne kontakt p奪 epost dersom du har sp淡rsm奪l, el tlf
Og f淡lg oss gjerne p奪 tw og fb