Tilgængelige bannere

Webbannere kan ses som en særlig genre, hvor der ofte benyttes mange virkemidler for at fange modtagernes interesse og opmærksomhed. Det kan være animationer, blink, quizzer, stærke farver og levende billeder. 

Du kan godt benytte sig af dynamiske virkemidler og stadig udarbejde tilgængeligt indhold, men som tommelfingerregel kræver mere komplekse bannerkoncepter langt mere arbejde i forhold til at at sikre tilgængelighed end mere simple koncepter. 

Det anbefales derfor at stræbe efter simple bannerkoncepter frem for mere komplekse koncepter. 

Brug mindre:

• Quizzer og anden lignende interaktion i selve banneret, som giver flere "sider", tilstande og visninger i banneret. Overvej at placere mere kompleks interaktion på en webside hos skat.dk i stedet.        
• Film og lyde
• Mange animationer
• Tekster i mange størrelser og farver

Brug mere:

• Få CTA’er (Call to actions) - I mange tilfælde kan det skæres ned til blot én CTA-knap, f.eks. "Tag quizzen", som leder til en landingsside hos skat.dk med engagerende (og tilgængeligt) indhold
• Klart design på CTA-knap
• Handlingsanvisende tekst
• Få og subtile animationer

Hurtigt blinkende visuelle elementer eller andre stærke visuelle virkemidler kan virke ubehageligt for mennesker med epilepsi eller kognitive vanskeligheder - og kan endda forårsage anfald hos nogle mennesker. 

Begræns derfor brugen af hurtigt blinkende visuelle elementer i dit indhold. 

Hvis der bruges blinkende indhold, må der højst være 3 glimt pr. sekund.

Animationer eller film der kører i loop kan bruges til at skabe opmærksomhed. Det er dog et virkemiddel, som bør bruges med varsomhed. Der er nemlig særlige krav til bevægelser, som starter automatisk.

Det anbefales, at bevægelser og animationer i webbannere maksimalt varer sekunder. Hvis en bevægelse varer mere end 5 sekunder, skal brugeren have mulighed for at stoppe, skjule eller sætte informations på pause.

Hvis der anvendelse levende billeder, der kører i loop, skal brugeren have mulighed for at pause filmen. Overvej mere subtile animationer frem for animationer, som ændrer markant på indholdet over kort tid.

Linktekster er den tekst, som brugeren kan se og klikke på for at åbne linket. Tilsvarende er knapteksten den tekst, der vises i knappen. Brugere med skærmlæsere vælger ofte at springe rundt mellem links og knapper på en webside for at få et overblik over sidens funktioner og indhold. Derfor er det vigtigt, at link-og knapteksterne formidler klart og præcist, hvor linket fører hen.

Det er god skik at bruge titlen på den side, du linker til som linktekst, fx "Forskudsopgørelse", hvis det er titlen på den side, der linkes til.

For knaptekster, er det en god idé at formulere teksten handlingsanvisende og sørge for at give nogle hints til brugeren om, hvad der sker, når man lander på destinationen.

Eksempler: Beskrivende link- og knap-tekster

Eksemplerne nedenfor er beskrivende for linket og er derfor tilgængelige:

• Tag quiz 
• Forskudsopgørelse
• Læs mere om forskudsopgørelsen
• Prøv TastSelv

Eksemplerne nedenfor er ikke beskrivende for linket og er derfor ikke tilgængelige:

• Læs mere
• https://www.mitwebsted.dk/bolig-og-flytning/flytning_oversigt
• Klik her for at komme videre

Når du indsætter visuelt indhold i dit webbanner (fx billeder, figurer, grafikker), skal du huske at indsætte en alternativ tekst. 

En alternativ tekst er en lille metabeskrivelse, som knyttes til billedet - men som er skjult visuelt. Den alternative tekst forklarer billedet for personer, der ikke kan se skærmen og kan blive læst op af en skærmlæser. 

En god alternativ tekst formidler indholdet og funktionen med billedet på en præcis måde. Hvis du fx indsætter et billede af skatteministeren Morten Bødskov, vil den bedste alternative tekst i de fleste tilfælde blot være: "Skatteminister Morten Bødskov". Undgå at indlede den alternative tekst med sætningen "Et billede af…". Skærmlæsere læser i forvejen dette op. 

Hvis billedets formål primært er dekoration, skal der indsættes en tom alternativ tekst. På den måde bliver billedet "usynligt" for en bruger med skærmlæser. Baggrundsbilleder, der har til formål at skabe en stemning (fx et billede af en skov) har typisk kun et dekorativt formål og kan derfor markeres som dekoration.

Tip: Det er ikke altid helt nemt at afgøre, hvad den bedste alternative tekst er. Gå til Alternative Text hos WebAIM (webaim.org) for en god og omfattende guide i at lave alternative tekster til billeder.

For at brugere med hjælpemidler (fx en skærmlæser) kan anvende indholdet, kræver det, at opmærkningskoden følger HTML-standarden. I nogle tilfælde kan det være vanskeligt at teste leverandørens banner, fordi det er et script, der danner HTML-koden. I så fald, kan du bede leverandøren om at sende banneret i "rå" HTML-format, så det kan tjekkes. 

Det anbefales at bruge standarden for HTML5 og CSS3, som giver mulighed for at lave dynamisk indhold og samtidig lave tilgængelig kode, som vil fungere i en skærmlæser.

Du kan tjekke om koden er valid med værktøjet Markup Validation Service (w3.org). Sørg for, at kodetjekket har så få fejl som muligt, ideelt selvfølgelig ingen fejl. 

Hvis du har fulgt vejledningen på dette side, er du godt på vej til at have et tilgængelige banner, men du bør alligevel tjekke koden for tilgængelighedsfejl.

Der findes mange værktøjet på nettet til at tjekke graden af tilgængelighed. Vi anbefaler værktøjet WAVE, der viser eventuelle problemer i rimelig forståelig rapport. 

I nogle tilfælde kan det være vanskeligt at teste leverandørens banner, fordi det er et script, der danner HTML-koden. I så fald, kan du bede leverandøren om at sende banneret i "rå" HTML-format, så det kan tjekkes. 

Mange brugere med synsvanskeligheder er afhængige af at kunne navigere på hjemmesider uden at pege og klikke (desktop computere) eller pege og tappe på skærmen (tabletter og telefoner). Typisk har de et hjælpemiddel med nogle særlige knapper eller også bruger de alene tastaturet alene til at springe rundt på hjemmesiden. 

Hvis dit banner har links eller knapper, skal brugeren kunne navigere imellem dem alene ved hjælp af tastaturet. Det er derfor en god idé at tjekke om, det er muligt. 

Hvis en knap eller link er i fokus, skal der være en markering af dette. Dette sker automatisk via browseren, men mange gange er funktionen slået fra eller fungerer ikke. Tjek derfor også, at der er nogle tydelige fokusmarkeringer.

De vigtigste tastaturgenveje til dit tjek er: 

• TAB: Navigér frem til næste interaktive element
• TAB + SHIFT: navigér tilbage til forrige interaktive element
• ENTER: Aktiver en knap eller et link
• SPACEBAR: Fjern eller tilføj flueben i checkbokse

Nogle brugere med synsvanskeligheder forstørrer indholdet ved hjælp af browserens zoom-funktion, så teksten bliver langt større og dermed læsbar. Du skal derfor tjekke muligheden for at zoome. 

Hvis du starter med et browservindue i opløsningen 1280 x 1024px (standard desktopstørrelse), skal du via browseren zoom-funktion kunne zoome indholdet 400 % og stadig kunne få noget ud af indholdet. Når du ikke skal scrolle både horisontalt og vertikalt ved zoom, er dit banner i orden. Tjek også om teksten stadig er læsbar, når du zoomer. 

Det kan være nødvendigt at konstruere webbanneret, så det er responsivt, dvs. tilpasser sig automatisk efter brugerens skærmstørrelse. En anden mulighed er at lave forskellige udgaver af webbanneret i forskellige størrelser, der vises alt efter brugerens skærmstørrelse. Løsningen vil afhænge af de muligheder, som der gives på den hjemmeside, som banneret skal præsenteres på.

Tjek gerne, at du kan svare "Ja" til alle spørgsmålene nedenfor, inden du publicerer siden på skat.dk.

• Keep it simple - Har du husket at simple bannere er lettere at gøre tilgængelige? 
• Kontraster og farver - Har du sikret, at kontrasten mellem tekst og baggrund er så tilstrækkelig høj, at teksten uden problemer kan læses?
• Hurtige blink - Har du husket at blinkende indhold maksimalt må have 3 glimt pr. sekund? 
• Animation - Har du sørget for at din animation bevæger sig i maksimalt 5 sek og ellers kan stoppes? 
• Links - Har du skrevet linktekster, som klart og præcist fortæller, hvor linket fører hen?
• Alternativ tekst - Har du sikret, at dit visuelle format (billede, grafik eller figur) en god alternativ tekst?
• Tjek HTML - Har du tjekket, at koden har så få fejl som muligt? 
• Tjek tilgængelighed - Har du tjekket med et kontrolværktøj som WAVE, at banneret er tilgængelig?
• Tjek navigation - Har du tjekket, om banneret kan bruges via de vigtigste tastaturgenveje? 
• Tjek zoom - Har du tjekket, om teksten er læsbar, når du zoomer? 

Skatteforvaltningens vejledningssite om webtilgængelighed med undervisningsmateriale, beskrivelse af brugere etc. på sitet Webtilgængelighed (sharepoint.dk). 

Digitaliseringsstyrelsen skriver om webtilgængelighed og om offentlige myndigheders efterlevelse af loven på siden Webtilgængelighed (digst.dk).

Kravene om tilgængelighed er beskrevet på siden Web Content Accessibility Guidelines (WCAG) 2.1 (w3.org)