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.

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. VIAs printere benytter OCR til scanning. Læs vejledningen til scanning her.

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.

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.

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.

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.

Do:

• Anvend altid sigende navngivning både til sider, titler og overskrifter, så en bruger ved, hvad de får ud af at læse en tekst.

Don't:

• Anvend ikke de samme navne til flere sider, titler eller overskrifter i samme dokument eller på samme webside, da dette virker forvirrende.

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.

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.

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.

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.

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:

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.

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.

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…”

3. 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.
4. Vælg "Næste række".

5. 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.
6. Vælg ”OK”.

Do:

• Navngiv links, så brugere ved, hvor de kommer hen, hvis de vælger linket.
• Hvis du bruger farve til at style linket, skal kontrastforholdet mellem link-farven og skriftfarven på den omgivende tekst være på 3:1. Derudover skal linkteksten have et kontrastforhold til baggrundsfarven på mindst 4,5:1, hvis skriftstørrelsen er til og med 14 og 3:1, hvis skriftstørrelsen er 14 som fed eller større skriftstørrelser. Læs mere om kontrastforhold her.
• Hvis du bruger farve til at style linket, skal du ud over farve bruge endnu et visuelt signal såsom understregning eller fed, så det adskiller sig fra den omkransende tekst. Læs mere om farve som visuelt signal her.
• Hvis et billede bruges som link, skal det have en alternativ tekst, der beskriver handlingen bag billedet som dets funktion eller hvor en bruger kommer hen ved at vælge linket. Læs om alternative tekster til billeder som link her.
  • Et eksempel er et billede af en printer. Her vil en god alternativ tekst være "Print siden" i stedet for "Printer-ikon".

Don't:

• Brug ikke den samme link tekst til forskellige links, som fører til forskellige destinationer, for nogle brugere kan ikke se forskellen mellem to enslydende links.

Billedet nedenfor viser i eksemplet til venstre to links med samme linktekst, hvilket betyder, at brugere skal læse hele teksten for at vide, hvor linket fører hen modsat eksemplet til højre, hvor linkene er navngivet på en måde, hvor brugere ud fra linkteksten alene kan læse, hvor linket fører hen. Derudover anvender eksemplet til venstre farve som visuelt signal til at fremhæve linkene fra den omkransende tekst. Der skal dog anvendes et ekstra visuelt signal, når farve anvendes, hvorfor der i eksemplet til højre er tilføjet understregning på linkene.

Nedenfor ser du et tekstudsnit af en side på Medarbejderportalen. Teksten indeholder to links. Prøv at se, hvilket du ser hurtigst. NB: Ingen af linkene iøvrigt  kravene til webtilgængelighed beskrevet ovenfor. Begge anvender farve som visuelt signal, men kontrastforholdet er ikke højt nok, og kun det ene link anvender et ekstra visuelt signal som påkrævet.

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.

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”.