Gode titler og overskrifter hjælper både blinde og seende personer til hurtigt at afkode, hvad en tekst handler om, og om den er relevant. Flere overskrifter gør din tekst nemmere at læse.

På hjemmesiden bruger vi to typer overskrifter, og de er gode til forskellige ting: emneoverskrifter og fortællende overskrifter. Det kan du læse mere om i vores skriveguide til web.

Emneoverskrifter

Emneoverskrifter kategoriserer informationer på et overordnet niveau. De kan bestå af ét eller flere ord, men aldrig en sætning. De beskriver overordnede kategorier, for eksempel "Selvbetjening", "Fødevarestyrelsens kontrol" eller "Produktion af mikrogrønt". Derfor er de også gode på de øverste overskriftsniveauer – ikke mindst i menustrukturen på hjemmesiden.

Fortællende overskrifter

Læseren bruger fortællende overskrifter til at huske konklusioner, og hvem der gør eller skal gøre noget. Fortællende overskrifter formuleres som en sætning, for eksempel "Du skal følge reglerne for produktion af mikrogrønt".

Husk overskriftshierarkiet

Du skal  være opmærksom på at bruge overskriftshierarkiet rigtigt. Det kan du læse om i punkt 2 "Formatér overskrifter og tekst rigtigt".

Din tekst skal være formateret korrekt. Det vil sige, at du skal opmærke overskrifter som overskrifter, brødtekst som brødtekst osv. Hvis teksten ikke er opmærket korrekt, kan en skærmlæser ikke læse indholdet rigtigt op.

Vær opmærksom på, at der kan være særlige krav til overskrifter i modulet 'Accordion og tabs' samt for tabeller. 

Sådan bruger du rækkefølgen på overskrifter rigtigt

Når en person med en skærmlæser navigerer på et website, er rækkefølgen på overskrifterne med til at vise vej. De forskellige overskrifter ser forskellige ud, men det er vigtigt, at du følger logikken og ikke vælger ud fra, hvad, du synes, er pænest.

Rækkefølgen er:

• Overskrift 1 (H1)
• Overskrift 2 (H2)
• Overskrift 3 (H3)
• Overskrift 4 (H4)
• Osv.

Start med overskrift 2

Overskrift 1 er allerede sat i sidens titelfelt. Derfor skal du bruge Overskrift 2 i brødteksten og herunder H3, H4 osv.

Der må gerne være flere H2’ere efter hinanden. Du kan bruge niveau 3-6 hver gang, du går dybere ned i strukturen. Du kommer som udgangspunkt til at bruge H2 og evt. H3 som overskrifter.

Du kan sagtens vende tilbage til Overskrift 2, efter du har brugt Overskrift 3  og 4. Men du må ikke hoppe direkte fra H1 til H3.

En linktekst skal være beskrivende og fortælle, hvor brugeren kommer hen, og hvad de kan læse om. En skærmlæser kan skimme en tekst for links, og derfor skal linkteksten i sig selv beskrive det indhold, der linkes til.

Fortæl derfor læseren:

• Hvor linket fører dem hen. Hvis linket fører til en anden hjemmeside eller åbner en pdf, skal linkets destination være tydeligt i linkteksten.
• Hvad dit link indeholder. Det gør du med et par ord eller en kort sætning i linkteksten.
• Hvilken handling læseren kan lave med linket. Nogle læser en tekst med det ene formål at gøre noget bestemt, for eksempel ansøge om noget eller bestille et eller andet.

Du skal placere et link på en ny linje og allerhelst samle links i en boks nederst på siden. Læserne kan koncentrere sig lidt længere om din tekst, hvis du ikke afbryder dem med et link, som de skal tage stilling til midt i læsningen.

Eksempler på gode linktekster

Læs mere i årsrapporten for 2019 (pdf)

Læs mere om symptomerne på norovirus hos Statens Serum Institut

Brug vores blanket til at registrere din fødevarevirksomhed

Disse linktekster er beskrivende. De fortæller, hvad man kan læse om, og om linket fører til en anden hjemmeside eller åbner en fil.

Husk at følge vores designprincipper for linkets styling og at gøre opmærksom på, om linket åbner i en ny fane. Det kan du læse mere om på siden om links.

Eksempler på dårlige linktekster

Læs mere her

her

Klik her

Hvis brugeren møder et link med denne tekst, er det utydeligt, hvad linket fører til - uanset om de bruger en skærmlæser eller ej.

Undgå også at lave identiske linktekster, som man ikke kan skelne fra hinanden. Hver linktekst skal være unik og beskrivende. 

For at guide sin læser kan man fristes til at skrive: “Læs mere i boksen til højre” eller “Billedet herunder viser hvordan”. Det er dog uhensigtsmæssigt af to grunde:

• Personer med skærmlæsere kan typisk ikke se det element, du omtaler
• Hjemmesider er responsive. Det vil sige, at elementer og deres rækkefølge tilpasser sig visning på tablets og mobiltelefoner. F.eks. vil en boks, der ligger “til højre” på en stor skærm ligge et andet sted på en mindre.

Undlad derfor at skrive f.eks. “til højre, til venstre, oppe, nede” osv.

Hvis du bruger billeder og grafikker, skal du afgøre, om de skal have en alternativtekst eller markeres som 'dekorative'.

Undgå at bruge billeder af tekst, eksempelvis tekst skrevet henover et billede. Personer med skærmlæsere kan ikke læse teksten. I stedet kan du bruge en kombination af multibokse med billeder og tekst. Webredaktionen hjælper gerne med at finde en løsning.

Videoer på offentlige hjemmesider skal være tilgængelige for alle. Det betyder:

• Tilføj undertekster til videoen, hvis der er tale.
• Forklar med speak, hvad der sker på skærmen – f.eks. hvis du viser, hvordan man bruger en app.
• Tænk i alternativer, hvis videoen viser en visuel proces, f.eks. hvordan man opretter sig i en app. Det kan gøres på to måder.
  • Indtal det direkte i speaket: "Tryk på ’Opret bruger’, skriv din e-mailadresse og vælg en adgangskode."
  • Tilføj et separat lydspor eller en tekstversion, der beskriver, hvad der sker – hvis det ikke allerede bliver sagt i videoen.

Farvekontrasten mellem tekst og baggrund har stor betydning for nogle brugere. For eksempel er kontrasten mellem mørkegrøn tekst på en lysegrøn baggrund ikke høj nok for svagtseende.

Farvekontrasterne på hjemmesiden lever op til loven, men hvis du uploader et billedet eller en fil, skal du tjekke farverne.

Kontrastforholdet skal være på mindst 4,5:1. Der findes forskellige værktøjer, der kan tjekke, om kontrasten er høj nok, heriblandt Assist Pro.

Har du valgt de rigtige farver?

Farveblinde kan have svært ved at skelne bestemte farver fra hinanden. Undgå farvekombinationerne grøn-rød, grøn-blå, grøn-brun, grøn-sort, grøn-grå, blå-grå, lys grøn-gul og blå-lilla.

Bland ikke for mange farver

Husk at sætte dig ind i designprincipperne for, hvilke farver du kan bruge sammen på hjemmesiden. Undgå at blande for mange farver, da det kan give et kaotisk udtryk. 

Læs mere om vores designprincipper på siden om farver.

Når du opretter tabeller, er det vigtigt, at personer med skærmlæsere forstår, hvad der er op og ned i en tabel. Derfor er det ikke brugervenligt at klippe en tabel ind fra Word eller Excel som et billede.

Du er godt på vej mod en webtilgængelig tabel, når du

• opretter din tabel i GoBasic
• indstiller øverste række til at være overskriftrække
• holder tabellen så simpel som muligt - undgå at flette celler.
  Lav hellere flere simple tabeller end én lang og kompliceret tabel.