Tilgængelige websider i Umbraco
Her på siden kan du læse, hvordan du gør websider på skat.dk tilgængelige. Det er ikke en svær øvelse, men du skal måske være opmærksom på nogle ting, som du ikke tidligere har været opmærksom på.
Når du har gjort de første par websider tilgængelige, og du fra start har fokus på tilgængelighed, vil det ikke tage lang tid at gøre nye websider tilgængelige.
Sådan gør du
Foldeteksterne her på siden forklarer, hvordan du helt praktisk gør websidens enkelte elementer tilgængelige. Nogle tekster er relevante for alle sider, fx "Sidetitel og sprog" og "Tekster". Andre er kun relevante for de sider, hvor du faktisk har indsat et element af typen, fx "Links" og "Tabeller".
Lad dine øjne løbe ned over siden. Hvis de støder på et element, som du bruger på websiden, så fold teksten ud og følg vejledningen. Lav altid et afsluttende tjek af websidens tilgængelighed.
Sidetitel
Indsæt en sidetitel, som præcist afspejler sidens emne.
Sprog
Angiv sidens sprog. Det er afgørende for, at en skærmlæser kan oplæse siden korrekt.
Når du skal opmærke tekst som fx brødtekst eller over- og underoverskrift, skal du bruge Umbracos indbyggede formater. Så kan hjælpemidler som skærmlæsere nemlig forstå og præsentere tekstens struktur for brugeren.
Hvis teksten er en overskrift, må du altså ikke blot gøre den stor eller fed. Du skal i stedet vælge et format for overskrift. Du skal derudover sørge for en logisk ordning af overskrifterne, så at fx en "H2" kommer før en "H 3". Brødtekst skal opmærkes med formatet "brødtekst".
Brug overskrifter aktivt til at opdele indholdet i små, overskuelige bidder. Overskrifter giver struktur og mening til dit indhold og giver læseren mulighed for at scanne indholdet. Dette gælder også brugere med hjælpemidler.
Undgå at henvise til indhold alene ved at angive en placering på siden. Nogle brugere får alt indhold i én lang sekvens, så hvis du fx skriver "Se boksen til højre", vil det ikke give mening for dem. Sørg i stedet for at henvise til en overskrift, så brugeren kan finde indholdet ud fra dets overskrift.
Sådan formaterer du tekst:
- Markér den tekst, du vil formatere.
- Vælg det ønskede format i editorens nederste linje. Hvis teksten skal være en overskrift, kan du vælge mellem de forskellige overskriftniveauer H2, H3 eller H4. Husk at H2 kun bruges til sidens titel, og at der altså ikke må optræde flere H2'ere på én side.
Hvis du kopierer tekst ind fra et andet program
Hvis du kopierer tekst ind fra fx Word, skal du huske at rette formateringen. Hvis du ikke retter formateringen, kan din tekst både se helt forkert ud på siden og være utilgængelig. Det nemmeste vil mange gange være at nulstille formateringen og så opmærke teksten på ny.
Sådan nulstiller du formateringen:
- Markér den tekst, som skal have nulstillet formateringen.
- Tjek manuelt, om der er nogle fejl, som du selv må rette op på. Vær særligt opmærksom på, om punktopstillinger ser rigtige ud.
OBS!
Undgå fed eller kursiv til at fremhæve tekst visuelt. Særligt kursiv tekst kan være svær at læse på mange skærme.
Undgå lange og snørklede sætninger. De er svære at læse for alle brugere.
Brug altid venstrestillet tekst.
Dine links skal klart og præcist fortælle, hvor de fører hen. Det er god skik at bruge titlen på side, du linker til, som linktekst, fx "Læs mere om Indkomst og skat". Omvendt er det dårlig skik blot at skrive "Klik her" eller bruge selve webadressen som linktekst, fx https://skat.dk/data.aspx?oid=2664.
Hvis du linker til en side på et andet domæne, skal du altid skrive navnet på domænet i en parentes sidst i dit link, fx "Læs mere om Jagttegn (borger.dk)"
Sådan indsætter du et link:
- Markér den tekst, der skal være et link.
- Tryk på indsæt/ret link.
- Indsæt linkets webadresse i feltet Url.
- Vælg én af editorens linkfunktion. Fx linkknap eller linkpil.
- Ret eventuelt teksten i feltet Link titel. Dette er din linktekst.
- Vælg om linket skal åbne i samme fane eller en ny fane. Læs mere i afsnittet "Nyt eller samme vindue" herunder.
- Tryk Indsend.
Nyt eller samme vindue
Hvis du linker til en anden side på skat.dk, skal linket altid åbne i samme fane. Hvis du omvendt linker til en side uden for skat.dk, skal linket altid åbne i en ny fane. Det gælder også, hvis du linker til andre af Skatteforvaltingens domæner, fx TastSelv Borger og TastSelv Erhverv.
Typer af links
Du kan vælge mellem flere typer af links, nemlig "Link knap", "Link pil" og "login - link knap", "tilbage - link knap", "frem - link knap". Linkklassen har alene betydning for, hvordan dit link ser ud på siden.
Læs mere om forskellige typer af links på siden Links og knapper.
Hvis du skal indsætte en punktliste eller en nummereret liste, skal du bruge Umbracos indbyggede listefunktioner. Så sikrer du nemlig, at skærmlæsere faktisk opfatter listen som en liste. Du må altså ikke blot lave noget, der ligner en liste, ved at lave linjeskift og starte hver linje med fx en bindestreg eller et tal.
Sådan indsætter du en liste
- Markér de linjer, som du vil gøre til en liste.
- Vælg enten Punkt tegn eller Nummerering i menulinjen.
- Tilføj nye punkter til listen ved at trykke "Enter".
Tip!
Punktlister bruges typisk, når der er tale om en opremsning. Brug altid punktlisten med de udfyldte sorte prikker.
Eksempel på punktliste:
- Hovedkort
- Bikort
- Frikort
Nummererede lister bruges typisk, når listen viser trin i en proces. Brug den nummererede liste med tal (ikke bogstaver eller romertal).
Eksempel på nummereret liste:
- Log på TastSelv.
- Vælg Kontakt.
- Vælg Skriv til os.
Før du indsætter en tabel, bør du overveje, om indholdet kan præsenteres på anden måde. Tabeller giver nemlig ofte problemer for brugere med skærmlæsere. Ofte kan indholdet vises mere simpelt, fx med en liste eller med to forskellige, men mere enkle tabeller.
Hvis du stadig vil indsætte en tabel, er her en række punkter, som du bør være særligt opmærksom på:
- Brug Umbracos skabelon for tabeller.
- Hold tabeller så simple som muligt - både strukturelt og visuelt.
- Brug kun en tabel til indhold, der naturligt har kolonner og rækker - ikke til at layoute tekst på siden.
- Giv hver kolonne en sigende overskrift.
- Undgå opdelte, flettede og indlejrede celler.
- Undgå celler uden indhold.
Sådan indsætter du en tabel:
- Vælg Indsæt skabelon (det lille stempelikon).
- Vælg en tabel i rækken af skabeloner, fx "Tabel 2 kolonner, 3 rækker". Du kan tilføje flere kolonner eller rækker, når du har indsat tabellen.
- Skriv en sigende overskrift til hver kolonne.
- OBS: Husk at udfylde Caption med en beskrivelse af indholdet af tabellen for brugere med skærmlæsere. Den vises også som overskrift over tabellen
Hvis du indsætter visuelle elementer som billeder, figurer eller diagrammer, skal du enten indsætte en alternativ tekst eller markere elementet som dekorativt.
Hvis elementet har betydning
Hvis det visuelle element har en betydning eller en funktion i teksten, skal du altid skrive en alternativ tekst. Et element med betydning kunne fx være en graf eller et spørgetræ.
Den alternative tekst bliver læst op af en skærmlæser og er nødvendig for at de brugere, der ikke kan se skærmen, forstår betydningen af det visuelle element. En god alternativ tekst formidler indholdet i det visuelle element på en præcis og utvetydig måde. Hvis du fx indsætter et billede af Morten Bødskov, vil den bedste alternative tekst i de fleste tilfælde være "Skatteminister Morten Bødskov".
Den alternative tekst bør ikke være længere end en kort sætning eller to. Undgå at indlede den alternative tekst med sætningen “Et billede af…". Skærmlæsere læser i forvejen dette op, når de møder et billede.
Sådan indsætter du et billede med alternativ tekst:
- Vælg Indsæt/ret billede.
- Udfyld alt tekst.
Hvis elementet primært er dekorativt
Hvis det visuelle element primært er dekorativt og ikke har nogen betydning eller funktion i teksten, skal du markere det som dekorativt. Et dekorativt element kunne fx være et stemningsbillede, der ikke har anden information, end der allerede er beskrevet i teksten. Når elementet markeres som dekorativt, vil en skærmlæser automatisk springe elementet over.
Sådan indsætter du et dekorativt billede:
- Vælg Indsæt/ret billede.
- Udfyld alt tekst med ""
OBS!
Undgå at bruge billeder af tekst, da de ikke kan læses af skærmlæsere. Du kan kende et billede af tekst ved, at du ikke kan markere teksten med din mus.
Tip!
Det er ikke altid nemt at afgøre, hvad den bedste alternative tekst er. Du kan finde en god og omfattende guide til at skrive alternativ tekst på Alternative Text (webaim.org).
Hvis du indsætter en video efter 23. september 2020, skal du være opmærksom på, at videoen skal overholde en række krav. I Skatteforvaltningen bruger vi Kaltura til at hoste vores videoer, og når en video uploades til Kaltura er det muligt at lægge undertekster og synstolkning på som selvstændige filer. Derefter bliver det muligt for brugeren at tilvælge de forskellige ting, når videoen ses.
Du kan få vejledning i, hvordan du gør videoer tilgængelig på siden Tilgængelige videoer.
Før du indsætter et dokument i Word, Excel eller PDF på skat.dk, bør du overveje, om indholdet i dokumentet lige så godt kunne ligge som en webtekst på skat.dk. Webtekster er lettere at gøre tilgængelige end dokumenter, og brugere med skærmlæsere har lettere ved at oplæse webtekster end dokumenter.
Hvis du stadig vil indsætte dokumentet, skal du sørge for at dokumentet i sig selv er tilgængeligt. Du kan få vejledning i, hvordan du gør dokumentet tilgængeligt, på siderne Tilgængelige Word-dokumenter, Tilgængelige Excel-dokumenter og Tilgængelige PDF-dokumenter.
Sådan indsætter du et dokument:
- Markér den tekst, som skal være et link til filen.
- Vælg Indsæt/ret link.
- Tryk på Vælg medie.
- Find filen i mediearkivet eller upload det direkte.
- Tryk Indsend
Dokumentet er nu sat ind og åbner, når brugeren klikker på teksten, der linker til dokumentet.
Du må aldrig give tekst på skat.dk andre farver end standardfarven (sort) eller ændre baggrundsfarven eller kantfarven i en tabel. Hold dig altid til standardfarverne, så siderne fremstår ensartet på tværs af skat.dk.
Hvis du indsætter et billede eller et andet visuelt element, skal du sørge for, at kontrasten mellem eventuel tekst og baggrund i elementet er tilstrækkelig høj. Hvis kontrasten er for lav, bliver teksten svær at læse.
Vær desuden opmærksom på, at mennesker med farveblindhed måske ikke fanger betydningen i bestemte farver. Undgå derfor alene at bruge farver til at formidle information, fx ved at bruge farven grøn til at at symbolisere "OK" eller farven rød til at symbolisere "Fejl".
Hvis du følger vejledningen på denne side, er du godt på vej til at have en tilgængelig webside. Når du har publiceret siden, bør du alligevel tjekke, om siden er fuldt tilgængelig.
Der findes mange værktøjet på nettet til at tjekke graden af tilgængelighed på webside. Vi anbefaler værktøjet WAVE, der viser eventuelle problemer i rimelig forståelig rapport.
Vi anbefaler også, at du lytter indholdet på siden igennem med en højtlæser.
Sådan tjekker du tilgængeligheden med WAVE:
- Åben siden WAVE (wave.webaim.org).
- Kopier webadressen fra den side, du vil tjekke, og sæt den ind i feltet Web page address.
- Tryk på pilen for at køre tjekket.
- Tjek om WAVE finder problemer under Errors i boksen til venstre. Hvis der er problemer, kan du læse beskrivelser af dem ved at trykke på Details. Problemerne skal du rette i DAP.
OBS!
Vær opmærksom på, at det ikke er alle potentielle problemer, som værktøjet kan tjekke for. Fx kan værktøjet kun tjekke, om du har indsat alternative tekster på alle visuelle elementer, men ikke om teksterne er sigende for indholdet. Hvis du bruger tjeklisten i foldeteksten "Tjekliste" herunder, kan du fange mange af de problemer, som værktøjet ikke tjekker for.
Tjek gerne, at du kan svare "Ja" til alle spørgsmålene nedenfor, inden du publicerer siden på skat.dk.
- Sidetitel - Har du skrevet en titel, der er sigende for indholdet på siden?
- Tekster - Har du brugt Umbracos indbyggede typografier til overskrifter og brødtekst og andet tekstindhold?
- Overskrifter - Har du brugt overskrifter aktivt til at skabe overblik og inddele siden i overskuelige bidder og sørget for en logisk ordning af overskrifterne?
- Brødtekst - Har du skrevet klart og enkelt, så teksten er let at læse?
- Links - Har du skrevet linktekster, som klart og præcist fortæller, hvor linket fører hen?
- Lister - Har du brugt Umbracos indbyggede listefunktioner, hvis du har indsat punktlister eller nummererede lister?
- Tabeller - Har du brugt Umbracos indbyggede tabelskabeloner, hvis du har indsat en tabel, og har du inden da overvejet, om indholdet kunne vises på en mere simpel måde?
- Billeder, diagrammer og grafer - Har du skrevet en alternativ tekst til alle billeder, diagrammer og grafer?
- Indsatte dokumenter - Har du sørget for at indsatte (uploadede) dokumenter er 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?
- Tjek tilgængelighed - Har du tjekket med et kontrolværktøj som WAVE, at siden er tilgængelig? Eller lyttet indholdet igennem med en højtlæser?
Du kan også downloade tjeklisten til websider i printklar udgave.
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, som skat.dk skal overholde, er beskrevet på siden Web Content Accessibility Guidelines (WCAG) 2.1 (w3.org).
Har du brug for sparring og support omkring sikring af tilgængelighed, kan du kontakte:
Skattestyrelsen: Design og Digital - Skriv til web@sktst.dk.
Andre styrelser: Kontakt kommunikationskontoret eller ledelsessekretariatet i din styrelse.