�ݺ�ߣ

Editor's Notes

• #2: Jeg heter Cathrine von Porat, jobber med informasjon og veiledning i tilsynet og er blant annet nettredaktør for uu.difi.no
• #3: Tilsynets informasjon og veiledning handler om å få opp kunnskapen om hva uu er og om regelverket . Selv om du vet du må følge nye regler, er det jo mye lettere å følge dem hvis en forstår hensikten! Med økt kunnskap håper vi å motivere flere til å ta fatt. Men kunnskap og motivasjon er ikke alltid nok – vi trenger en verktøykasse.
• #4: uu.difi.no er hovedkanalen i veiledningsarbeidet vårt. Under Regelverk –finner du alt om lov og forskrift - hvem, hva, og når I Tilsynsbolken – hvordan vi fører kontroll med regelverket, og etter hvert resultater av enkelttilsyn, samt resultater fra statusmålinger
• #5: Vi har egen inngang til veiledning. Veiledningen har to løp – Det er nettløsninger eller nettsider og et eget for Automat. I dag vil det kun handle om nettsider.
• #6: Her er listen over de 35 WCAG-kravene. Det handler mye om å ha rett kode på innholdet. Likevel er det ikke bare teknologene som bør ha god kjennskap til hva WCAG og ikke er. Et eksempel kan være at: Teknologene må sørge for rett koding av bilder å ta med alt-atributtet. OG i tillegg må nettredaktøren passe på å legge inn en korrekt alternativ-tekst på de samme bildene.
• #7: I uu-skolen som dere ser her, har vi forsøkt å gjøre det litt enklere for dere. Her har vi oversatt WCAG til forståelige forklaringer, også for oss ikke-teknologer, samlet rundt temaer, for eksempel Bilder og grafikk, Lenker, Bruk av farger, Tabeller osv.
• #8: Jeg kommer til å si litt om hva du kan finne i en uu-skole artikkel, før jeg går inn i noen eksempler. I hvert artikkel finner du: illustrasjoner og eksempler på hvordan imøtekomme kravene, inkludert kodeeksempler.
• #9: Vi skiller vi mellom løsningsforslag som møter kravene i forskriften – altså er hentet fra de 35 suksesskriteriene,
• #10: …og løsningsforslag som går ut over kravene (neste lysbilde) Det er tips til hva du kan gjøre i tillegg.
• #11: Koblingen til de faktiske kravene som teksten dekker, finner du til høgre under overskriften WCAG 2.0 Lovkrav, En uu-skole-tekst kan inneholde flere enkeltkrav – eller suksesskriterier, som det heter i WCAG. Forslag til testverktøy, vil også være listet opp her som Colour Contrast Analyzer i dette tilfellet. Vil du finne ut hvordan kravet er formulert i WCAG, klikker du og kommer til siden.
• #12: Under relaterte sider, finner du hvilken retningslinje kravet hører til For dere som jobber med den tekniske biten er det mye å hente ved å gå til kilden Vi har lenket opp et par viktige sider hos W3Cs under Ressurser, Klikker du deg inn på Oppfylle kravet …
• #13: Havner du på denne siden. Her finner du forslag til ulike teknikker du kan bruke til å oppfylle kravene. For mens kravene er generelle og uavhengige av teknologi, gir teknikkene deg forslag til hvordan du kan kode i HTML, PDF, Flash, WAI-ARIA osv Forskjellen på krav og teknikker i kan illustreres på denne måten: Hvis du skal vaske gulvet kravet at gulvet skal bli rent. Men det er flere måter du kan gjøre det på: - du kan støvsuge, tørrmoppe eller bruke bøtte og klut – altså det flere teknikker du kan bruke for å oppfylle kravene i WCAG. (Men husk at det suksesskriteriene som er lovkravene, ikke teknikkene).
• #14: Så tilbake til uu-skolen. Nå skal jeg ta for meg fire eksempler som vi ser mange strever med.
• #15: Klarer dere å lese det som står øverst? Ikke tvil om hva som er lettest å lese.
• #16: Det første eksempelet handler om kontrast, og mange spør oss om dette. For å sikre god lesbarhet må all meningsbærende tekst og grafikk ha tilstrekkelig kontrast mot bakgrunnen. Dette er viktig for alle brukere f.eks når du skal lese fra mobilskjermen i skarpt sollys Men de som er mest avhengig av god kontrast er svaksynte, dyslektikere og fargeblinde. Verdt å merke seg at det er ulike krav til kontrast avhengig av størrelsen på objektene. WCAG 2.0 snakker om 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.
• #17: Kontrast er enkelt å måle selv, Du kan laste ned et gratis testverktøy, for eks. Colour Contrast Analyser. Verktøyet kontrollerer opp mot kravene i WCAG på dobbel og trippetnivå. Du måler først forgrunnen ved å klikke på pipetten og hente en fargeprøve fra den hvite teksten Så tar du pipetten og måler fargen som er bak teksten. I dette eksempelet får vi godkjent kontrast både på dobbel og trippel nivå.
• #18: Neste eksempel: Overskrifter og rett bruk av overskriftsnivåer er viktig for struktur og oversiktlighet i teksten. Kravet handler om at innholdet må struktureres med korrekt kode, og det må kunne forstørres uten at tekst forsvinner eller at lesbarheten blir dårligere. Et generelt tips er at det som ser ut som noe, skal være kodet som det . (I HTML vil rett koding av overskrifter være H1, H2, H3 osv.) For oss som skriver innhold må vi husk å bruke redigeringsverktøyet til å markere overskriftene, enten det er snakk om nettsiden, i Word eller andre dokumentformat Vi må unngå å bruke kun fet skrift. Vi slurver særlig med mellomtitler.
• #19: Mange, både med og uten hjelpemiddel, bruker også mellomtitler for å skumlese innholdet og finne det mest interessante. Når du har flere nivåer på overskriftene dine, er det viktig at rekkefølgen på disse er riktig. Når du går nedover i underskriftsnivå kan du bare hoppe ett nivå av gangen – altså fra H1 til H2, og videre nedover. Du kan ikke gå nedover i strukturen fra fra H1 til H3. MEN hvis du skal fortsette med et nytt tema eller nytt kapittel, er det greit å hoppe flere nivå opp, fra f.eks overskrift nivå 4 til nivå 2.
• #20: Hvis du vil sjekke eksisterende tekster, kan du benytte et annet gratis verktøy som heter Web Accessibility Toolbar, og velge Structure. Her har jeg testet overskriftsnivåene på intranettet vårt.
• #21: Neste eksempel er om utseende på lenker og beskrivelse av lenker. Poenget er at brukeren må kunne identifisere alle lenker uavhengig av situasjon, evner og innstillinger på utstyret de benytter. Dette betyr at lenker må være markert med mer enn bare farge. Det kan for eksempel være understreking av lenketekst, eller ikon knyttet til lenken, men gjerne i kombinasjon med farge, som vi ser i øverste eksempel. For å sikre at folk skjønner at det er en lenke, må enten lenketeksten alene eller konteksten rundt lenken, beskriver tydelig hva som er lenkens mål. I WCAG er det nok med kontekst. Vi anbefaler likevel at lenketeksten er fullt ut beskrivende. Dette gir god brukervennlighet for alle. Du finner mye mer om lenker i uu-skoleteksten med samme navn.
• #22: Omtrent slik vil det oppleves for de som ikke kan se bilder, når alt-teksten mangler. Det vil oppleves nærmest som sorte hull for brukeren! Jeg lurte veldig på hva 20 fot Kontor modul/container/spiserom var for noe.
• #23: Det gir mer mening med fullverdig informasjon! Tekstalternativ til bilder og grafikk er det siste eksempelet vi rekker i dag.
• #24: Mange nettredaktører vet at alt-tekst må med på bilder. Men vi skjønner kanskje ikke hvorfor. Og vi surrer derfor når vi legger til alt-tekster på bilder og grafikk. WCAG krever at bilde og illustrasjoner skal ha et tekstalternativ som formidler formålet og innholdet i bildet. Dette er viktig for de som bruker hjelpemidler, men også de som ikke kan eller ikke ønsker å se bildene. Kort oppsumert : Bilder og illustrasjoner skal alltid ha en alternativ tekst eller alt-tekst Men noen ganger må du også ha mer utfyllende tekst i tillegg, når bildet inneholder mye informasjon, som grafer og organisasjonskart. Det er for de som har vanskelig for å les informasjon ut fra en kompleks illustrasjon. (1.1.1 Ikke-tekstlig innhold : Alt ikke-tekstlig innhold som presenteres for brukeren, har et tekstalternativ som har samme formål, med unntak av situasjonene som er beskrevet nedenfor. Suksesskriterium på nivå A (omfattet av forskriften)
• #25: Du må avgjøre bildets funksjon for å finne rett tekstalternativ. Er formålet med bildet å navigere? Mister brukeren meningsinnhold hvis alt-teksten er tom? Jeg skal vise dere et enkelt flytskjema som kan være til hjelp: Her er bilde av ID-porten/MinID, Innlogging til offentlige tjenester står det. Da kan du alltid spørre: Er bildet lenket? Ja, i dette tilfellet. Da skal alt-teksten beskrive lenkemålet f.eks. Innlogging til ID-Porten og MinID
• #26: Neste eksempel: Er bildet lenket? Nei Neste spørsmål: Er bilde pynt? Ja, det er bare en prikk til pynt i mitt eksempel. Da skal du ha en tom alt-tekst. Ellers blir det støy. En tom alt-tekst betyr at du må sette inn to hermetegn i parentes. Bilder som er ren dekor bør aller helst legges inn i CSS.
• #27: Nytt eksempel: Er bilde lenket? Jeg sier nei, for å få frem poenget Er bilde pynt? Nei – det inneholder informasjon. Er bilde komplekst? Som i en graf eller diagram? Nei – ikke komplekst, men det inneholder en logo og et telefonnummer til Norsk Luftambulanse Da skal alt-teksten inneholde nettopp denne informasjonen som ligger i bildet.
• #28: Siste eksempelbilde: Nå har dere skjønt det for lengst, men jeg spør igjen Er bildet lenket? NEI Er bildet pynt? (er det meningsærende)? NEI Er bildet komplekst (f.eks. graf ller diagram)? JA det er det. Da må vi ha først ha en alt tekst som kort beskriver motviet - Markedsandelen til ulike nettlesere, Juli 2011 i dette tilfellet. Og så må vi ha et tekstalternativ som sier det samme som bilder viser, nemlig at markedsandelen for FIREFOX er 42 %, SAFARI 3,7 % osv. ( CHROME 29,4 %, OPERA 2,4 %, INTERNET EXPLORER 22 %) Vel, det var det vi rakk av smakebiter fra uu-skolen. Jeg håper dere har fått litt inspirasjon til å finne ut mere selv. Vil nevne at det kommer flere temaer i uu-skolen om ikke lenge, bla om video og nedlastbare dokumenter.
• #29: Og husk
• #30: Send oss gjerne spørsmål, tips til innhold og til forbedringspunkter på epost uu alfakrøll difi punktum no, Og se nettsidene våre på uu punktum difi punktum no og du kan følge oss på Twitter på alfakrøll uudifi. Takk for meg!