English

VIA University College

Lav webtilgængeligt indhold

Opdateret

Denne vejledning henvender sig til alle medarbejdere i VIA. Vejledningen fokuserer på de vigtigste krav og retningslinjer for udarbejdelse af webtilgængeligt indhold såsom dokumenter, billeder, video og tekst. Vejledningen beskriver først krav og retningslinjer for følgende filtyper: PowerPoint-præsentationer og Word-dokumenter, PDF-filer og scannede dokumenter samt lyd- og videofiler. Efterfølgende gennemgås krav og retningslinjer til opsætning af tekst. Til de fleste sektioner og krav i denne vejledning er der lavet opgaver og materiale, så du undervejs kan lære, hvordan du arbejder med webtilgængelighed ift. de beskrevne indholdsformater og krav. Tilgå opgaverne under overskrifterne "Opgave...".

Baggrund og introduktion

Webtilgængelighed handler om digital inklusion. Det vil sige, at alle brugere uanset funktionsnedsættelse eller handicap såsom ordblindhed, syns- eller hørehæmmede skal kunne anvende indholdet på digitale løsninger (eks. Itslearning, Medarbejderportalen, VIA.dk) på lige fod med alle andre. Læs mere om webtilgængelighed på Medarbejderportalen her eller se den korte video "Introduktion til webtilgængelighed" her (kræver VIAlogin). Det stiller en række krav til det materiale og indhold, vi i VIA udarbejder og/eller uploader til disse digitale løsninger.

Med indhold menes der både det, der udarbejdes direkte på en digital løsning, for eksempel de dokumenter, videoer og billeder, der uploades til digitale løsninger, der er omfattet af lov om webtilgængelighed som Medarbejderportalen eller VIA.dk (se omfattede systemer - kræver VIAlogin). Breve, der sendes i Digital Post skal også overholde kravene beskrevet i denne vejledning. Der er desuden forskellige krav til indholdet afhængigt af, hvilket format indholdet har, fx om det er video, billede, pdf osv.

Krav og retningslinjer til filtyper

Alle de dokumenter, du udarbejder og efterfølgende uploader til et af VIAs websteder eller digitale løsninger, som er omfattet af lov om webtilgængelighed (se omfattede systemer - kræver VIAlogin), skal overholde kravene til webtilgængelighed beskrevet i denne vejledning.

PowerPoint- og Word-filer

Do:

  • Anvend altid VIAs skabeloner (findes i fanebladet Dynamic Template), da disse allerede er optimeret ift. webtilgængelighed.
  • Anvend altid værktøjet Accessibility Assistant, når du er færdig med din PowerPoint-præsentation eller Word-dokument (findes i faneblades Gennemse). Læs vejledningen til Accessibility Assistant her.
  • Hvis du skal omdanne din PowerPoint-præsentation eller Word-dokument til pdf, skal du altid anvende Accessibility Assistants indbyggede funktion til dette (se, hvor du finder funktionen her under punkt 6) frem for at Microsoft Offices egne indbyggede funktioner til dette såsom "Gem som"-funktionen og vælge pdf eller vælge Eksportér og vælge pdf.

I Word og PowerPoint finder du skabelonerne i fanebladet "Dynamic Template". Gå til vejledninger til VIAs skabeloner her.

Opgave til PowerPoint- og Word-filer

Indscannede dokumenter

I nogle tilfælde kan indscannede dokumenter og filer sidestilles med  billeder af tekst og ikke reel tekst. Det afhænger af, om der under scanningen er anvendt OCR (Optimal Character Recognition), som betyder, at bogstaver, tal og tegn tolkes som tekst, eller om du har et program på din computer, der har OCR.

Do:

  • Anvend skærmlæserfunktionen i PDF Accessibility Checker (PAC) 2021 for at se, om det indscannede dokument er tilgængeligt og kan læses af en skærmlæser. NB: PAC 2021 kan kun tjekke webtilgængeligheden af pdf-filer. Læs vejledningen til PAC 2021 her. Hvis det indscannede dokument ikke er læsbart for en skærmlæser, skal der laves et tilgængeligt alternativ.
Video og audio (forudindspillet)

Do:

  • Lav altid tekstligt alternativ til lyd- og videofiler enten i form af en transskription eller undertekster. Læs evt. vejledningen til VIAs transskriberingsværktøj til webtilgængelighed eller om, hvordan du laver bedre undertekster her.
  • Lav en synstolkning af videoen.
    • Synstolkning er en mundtlig beskrivelse, der tilføjes lydsporet for at formidle vigtige visuelle detaljer, der ikke kan forstås ud fra det oprindelige lydspor alene.
    • Synstolkning af video giver information om handling, karakter, sceneskift, tekst, der vises på skærmen, samt andet visuelt indhold.
    • Synstolkning anvendes kun i de tilfælde, hvor noget af budskabet i videoen ville gå tabt for en synshæmmet/ikke-seende person. Fx vil en video af en person, der læser op, og hvor der ikke gøres brug af tekst eller visuel hjælp/indhold, mv. ikke være behov for synstolkning, da al indhold vil blive formidlet gennem det eksisterende lydspor.

Don't:

  • Publicer eller upload aldrig lyd- eller videofiler til VIAs platforme uden, at det som minimum indeholder et tekstligt alternativ enten i form af  transskription eller undertekster.
Video og audio (live streaming/live-udsendelser)

Live-streaming/live-udsendelse af video eller audio skal ikke have undertekster. Hvis streamingen eller live-udsendelsen efterfølgende publiceres, er de kun undtaget kravene for webtilgængelighed i 14 dage. Streaming/live-udsendelse, der har været offentliggjort i 14 dage eller mere skal derfor overholde kravene til video og audio (se krav til video eller krav til audio ovenfor). Hvis der vises dele af forudindspillet indhold, såsom video eller audio, der er optaget før live-udsendelsen, som en del af live-udsendelsen, er dette indhold underlagt kravene til video og audio.

Billeder og grafik

Do:

  • Anvend kun billeder og grafik til at understøtte indholdet i brødteksten, hvis det giver mening.
  • Billeder og grafik, der anvendes til at understøtte budskabet i teksten skal have en alternativ tekst. Læs vejledningen til alternative tekster her og få gode eksempler .
  • Billeder og grafik, der kun bruges dekorativt (eks. baggrundsbilleder) og i konteksten er ligegyldige for brugere skal ikke beskrives med en alternativ tekster. Læs om kravene til dekorative billeder og grafik her.
    • I nogle programmer findes der en funktion til at markere billeder og grafik som dekorative. Hvis du eksempelvis arbejder i Word eller PowerPoint kan du med Accessibility Assistant markere billeder som dekorative. Læs vejledningen til Accessibility Assistant her.
    • Hvis du arbejder på websider skal værdien af alt attributten være tom (null) og vil se således ud: alt="".
  • Hvis du anvender diagrammer skal du ud over at tilføje en alternativ tekst huske, at farve ikke må bruges som det eneste visuelle signal. Læs mere om farve som visuelt signal her.

Don't:

  • Lad ikke billeder og grafik stå alene som formidling af indhold.
  • Start ikke din alternative tekst med: "Billede af". En skærmlæser informerer nemlig brugeren om elementtypen. Læs mere i vejledningen til alternative tekster her.
  • Undgå at anvende billeder med tekst på, da teksten bliver grynet og svær at læse, når der zoomes meget ind på billedet. Hvis det absolut ikke kan undgås, skal du, hvis teksten på billedet har betydning for konteksten, skrive den ind i den alternative tekst. Læs mere om kravene til billeder med tekst her.

Krav og retningslinjer til opsætning

Ud over krav til de forskellige formater, der er beskrevet ovenfor, er der flere krav, der skal overholdes for at sikre webtilgængelighed. Der, hvor det har været muligt, har VIA indkøbt hjælpeværktøjer for at gøre arbejdet med webtilgængelighed nemmere og hurtigere. Der er dog nogle retningslinjer og generelle do's and dont's, som er gode at have kendskab til, når du arbejder med webtilgængelighed og særligt der, hvor der ikke er et hjælpeværktøj såsom Accessibility Assistant til rådighed. Nedenfor beskrives disse generelle retningslinjer.

Typografi

Do:

  • Anvend altid sigende titler og overskrifter.
  • Brug altid de indbyggede typografier såsom Overskrift 1 og Overskrift 2, hvis du skal opstille overskrifter eller underskrifter.
  • Brug altid funktionen til punktopstilling, når du ønsker at opstille punkter eller lave en liste.

Don't:

  • Brug ikke bindestreg eller asterisk, når du opstiller en liste, for en skærmlæser kan ikke tolke bindestreg eller asterisk som punktopstilling.

Opgave til typografi

Hierarki i overskrifter

Do:

  • Organiser altid overskrifter hierarkisk, dvs. først Overskrift 1, så Overskrift 2, derefter Overskrift 3 osv. På web (eks. VIA.dk) bruges overskrift tags H1, H2, H3 osv.

Don't:

  • Spring ikke overskrifter i hierarkiet over, fx ved at gå fra Overskrift 1/H1 til Overskrift 3/H3, da det er forvirrende for svagtseende eller blinde, der navigerer via skærmlæser.
Spalter/kolonner

Do:

  • Brug den indbyggede funktion til at opdele din tekst i spalter/kolonner. I Word findes den i fanen Layout under sektionen Sideopsætning (se billedet nedenfor).

Don't:

  • Brug ikke tab-tasten, når du ønsker at opdele din tekst i spalter eller kolonner.
  • Anvend ikke layout tabeller for at opsætte din tekst visuelt. En layout tabel er en almindelig tabel, der bruges til at opdele tekst på en bestemt måde, eks. i kolonner og rækker. Ofte kan man ikke se, at det er en tabel, men de er svære for skærmlæserbrugere at navigere i.
Læsbarhed

Do:

  • Opdel tekst i mindre afsnit med overskrifter og underoverskrifter for at skabe mere struktur og overblik.
  • Skriv korte og enkle sætninger.
  • Tjek altid din tekst for stavefejl, så skærmlæsere kan oplæse teksten korrekt. Hvis der ikke er stave- og grammatikkontrol i det program eller system, du skriver i, kan du altid tjekke din tekst i Word og anvende stave- og grammatikkontrol heri.

Don't:

  • Undgå at have alt for lange og snørklede sætninger eller tunge blokke af tekst. Det virker uoverskueligt og svært at gå til for mange, særligt brugere med kognitive funktionsnedsættelser eller handicap.

Opgave til læsbarhed

Sprog

Do:

  • Angiv altid korrektursprog for det dokument eller websted, du redigerer. Dette sikrer, at en skærmlæser kan læse teksten på det rigtige sprog.
  • Angiv altid korrektursprog, hvis du bruger blokke af tekst eller sætninger, der skrives på et andet sprog end hovedteksten.

For at angive korrektursprog skal du markere det stykke af teksten, du ønsker at angive korrektursprog for (enten en blok af tekst skrevet på andet sprog end hovedteksten eller al tekst i dokumentet) og vælge fanen Gennemse og funktionen Sprog:

Kontrastforhold

Tekst skal have tilstrækkelig kontrast ift. baggrundsfarver, så teksten kan læses af alle brugere, herunder farveblinde og svagtseende. Dette inkluderer tekst på billeder, baggrundsfarver, knapper og andre elementer. Du kan anvende følgende ressource til at tjekke kontrastforholdet for almindelig og stor tekst i forhold til baggrundsfarven: Contrast Checker. Læs vejledningen til, hvordan du bruger Contrast Checker her.

Do:

  • Almindelig tekst (til og med skriftstørrelse 14) skal have et kontrastforhold på 4,5:1 ift. baggrundsfarven.
  • Stor tekst (skriftstørrelse 14 som fed og større skriftstørrelser) skal have et kontrastforhold på 3:1 ift. baggrundsfarven.
  • Grafiske objekter eller dele af grafik (eks. stykkerne i et cirkeldiagram) og brugergrænsefladeobjekter (eks. knapper og inputfelter) skal have et kontrastforhold på 3:1 mod tilstødende farve(r). Se eksempler på kontrast nedenfor.

På billedet nedenfor er der i eksemplet venstre anvendt lys blå som baggrundsfarve og hvid som skriftsfarve. Farvekontrasten her er kun 1,45:1, hvilket er meget lavt og betyder, at teksten er svær at læse på den valgte baggrundsfarve. I eksemplet til højre er samme lyse blå farve anvendt som baggrundsfarven, men skriftfarven er nu helt mørk grå. Her er farvekontrasten 7:1, hvilket er højt og betyder, at teksten er nem at læse på den valgte baggrundsfarve.

På billedet nedenfor vil det i eksemplet til venstre være svært for farveblinde og svagtseende at skelne mellem de fire stykker i cirkeldiagrammet, da kontrastforholdet mellem stykkerne er meget lavt. I eksemplet til højre er stykkerne trukket fra hinanden, så baggrundsfarven (her hvis) bliver den tilstødende farve og her er kontrastforholdet mellem stykkerne og baggrundsfarven høj, hvilket gør, at det er lettere at skelne stykkerne fra hinanden.

Farve som visuelt signal

Do:

  • Anvend altid flere visuelle virkemidler såsom kombination af tekst, farve eller grafiske objekter, hvis du skal gøre opmærksom på vigtige oplysninger eller elementer.

Don't:

  • Anvend ikke farve på links som det eneste visuelle signal til at indikere, at det er et link. Brug sammen med farven understregning eller link.
  • Anvend i formularer ikke kun farve til at angive obligatoriske felter. Kombiner farven med asterisk (*) eller skriv, at feltet er obligatorisk.

I eksemplet nedenfor er der til venstre anvendt rød, gul og grøn til at angive at noget er henholdsvis kritisk, en advarsel og sundt. De personer, der ikke kan se farver eller er farveblinde vil ikke kunne se forskel på, hvornår noget er eksempelvis kritisk og sundt. Derfor bør endnu et visuelt signal tilføjes som i eksemplet til højre, hvor der inde i farvemarkeringen også er angivet symboler. Dette gør det tydeligt for alle typer af brugere at adskille de forskellige forhold.

Læg også mærke til at etiketterne under alle billede-eksempler anvender tre visuelle signaler:

  1. Farve: rød eller grøn.
  2. Tekst: Ikke tilgængelig eller Tilgængelig.
  3. Ikoner: tommelfinger ned eller tommelfinger op.

I eksemplet nedenfor til venstre vil ikke alle brugere kunne adskille, hvilke stykker af cirkeldiagrammet, der angiver hvilket kvartal der refereres til, da dette kun kan læses ud fra farverne angivet nederst. Eksemplet til højre har en dataetiket på hvert diagramstykke, hvor det er inkluderet, hvilket kvartal, stykket repræsenterer. Herved anvendes dataetiketten som et ekstra visuelt signal, således alle kan læse diagrammet.

Tabeller

Do:

  • Første række og/eller kolonne i en tabel skal angives som overskrifter, så tabellen vil give mening for skærmlæserbrugere. Husk sigende navngivning af overskrifter.

Don't:

  • Ungdgå tabeller, som angiver struktur/layout, da de ikke er kompatible med skærmlæsere.
  • Undgå indlejrede, opdelte og flettede celler, da en skærmlæser ikke kan navigere i disse.
  • Undgå komplekse tabeller med flere niveauer af overskrifter. Flere simple tabeller kan ofte gøre det ud for én kompleks tabel, så vurdér, om det vil give mening at opdele dataet i flere tabeller
  • For tabeller i dokumenter gælder, at rækkers indhold ikke må deles over to sider.
  • For tabeller i dokumenter gælder, at overskriftsrækker skal gentages, hvis tabellen splittes over to sider.

Følgende vises, hvordan du sikrer overholdelse af at rækkers indhold ikke deles over to sider samt at overskriftrækker gentages i Office (eksemplet tager udgangspunkt i Word):

  1. Højreklik på den øverste række i din tabel (overskriftsrækken)
  2. Vælg ”Egenskaber for tabel…”
  1. Under fanen ”Rækker”, skal du sikre, at der KUN er flueben ved ”Gentag som overskriftsrække øverst på hver side”.
    • Overskriftsrækken hedder altid Række 1. Du kan se dette øverst i vinduet Tabelegenskaber.
  2. Vælg "Næste række".
  1. Sikr dig, at der ikke er flueben I "Tillad opdeling af række" eller "Gentag som overskriftsrække øverst på hver side".
    • Gentag trin 4 og 5 og sikr dig, at der i alle rækkerne efter en eventuel overskriftrække (dvs. Række 2, Række 3, osv.) ikke er flueben i valgmulighederne.
  2. Vælg ”OK”.

Opgave til tabeller

Interaktive elementer

Do:

  • Når der er elementer, som en bruger skal interagere med, skal det tydeligt fremgå, hvad det interaktive element er til, så guide altid brugeren gennem funktionaliteten.
  • Teksten på et formularelement skal stå udenfor elementet, hvis det er meningen, at en bruger skal indtaste oplysninger i formularelementet, for hvis hjælpen står inde i elementet, forsvinder hjælpen nemlig, når formularfeltet aktiveres – hvis du eksempelvis klikker på det.
  • Vis altid valideringsfejl, fejlmeddelelser, og hvis det er muligt skal brugeren tilbydes instruktioner eller hjælp til at rette eventuelle fejl.

Don't:

  • Farve, form og placering må ikke være den eneste indikator på, hvad interaktive elementer skal bruges til. Fx må farve et formularfelt ikke være rødt for at angive, at det er obligatorisk.

Nedenfor ses et eksempel på forkert og korrekt brug af ovenstående retningslinjer. Læs evt. vejledningen om webtilgængelige spørgeskemaer og formularer her.

Instruktioner

Do:

  • Når du giver instruktioner, skal du kombinere flere elementer såsom placering og beskrivende tekst som fx ”i boksen til højre med titlen »Linksamling«”. På denne måde er det nemmere for synshæmmede og blinde at finde det korrekte element med hjælp af en skærmlæser.

Don't:

  • Undgå instruktioner, der udelukkende er baseret på et elements placering på siden. Skriv fx ikke ”i boksen til højre”.
Forrige Vejledning Video onlinekursus
Næste Vejledning Tjek om Word og PowerPoint-filer er webtilgængelige