En god struktur for HTML-overskrifterne H1, H2, H3 osv. er værdifuld for alle dine besøgende, vigtig for søgemaskineoptimering og ikke specielt svært at opnå. I denne artikel kan du blive klogere på hvordan du let identificerer eventuelle problemer og hvordan du kan løser dem.
Indhold
- Formålet med HTML-overskrifterne H1, H2 osv
- Betydningen af korrekte overskriftsniveauer for brugere af skærmlæsere
- Sådan identificerer du dine overskriftsniveauer
- Overskrifter i Gutenberg, Elementor og Divi
- Hvad hvis jeg vil have mine overskrifter større eller mindre?
- Brug for sparring omkring webtilgængelighed?
Formålet med HTML-overskrifterne H1, H2 osv
Du har sikkert lagt mærke til, at du kan vælge forskellige typer overskrifter, når du skriver tekster i WordPress. Og måske vælger du overskrifterne ud fra, hvor store du synes de skal være, og hvordan det du skriver, ser ud. Men det er ikke den rigtige måde at gribe det an på.
Tænk på overskrifter som en indholdsfortegnelse (Table of Contents eller ToC). De fleste ToC-plugins, blokke eller widgets, analyserer sidens indhold, leder efter HTML-overskrifter og opretter automatisk en indholdsfortegnelse med links som leder direkte til de forskellige afsnit.
Du bør derfor ikke vælge mellem H1, H2 og H3 ud fra hvor store eller små dine overskrifter skal være. Du bør vælge overskrifter der kommunikerer en meningsfuld indholdsstruktur.
W3.org’s Web Accessibility Tutorials beskriver nøje formålet med HTML-overskrifter:
Headings communicate the organization of the content on the page. Web browsers, plug-ins, and assistive technologies can use them to provide in-page navigation.
Link: W3.org on Page Structure – Headings
Betydningen af korrekte overskriftsniveauer for brugere af skærmlæsere
YouTube-kanalen A11ycasts med Rob Dodson viser tydeligt, hvordan korrekte overskrifter er til gavn for brugere af skærmlæsere.
I videoen “Why headings and landmarks are so important” bruger de Apple VoiceOver til demonstrationen, men en lignende oplevelse er tilgængelig for pc-brugere med NVDA eller JAWS, eller ved at bruge den indbyggede “Forenklet Læser” i Microsoft Edge.
“If you look at some screen reader surveys, where they ask folks who use this technology, what’s your primary way of navigating an unfamiliar page, a lot of folks say, the first thing they do, is they try and navigate by heading.”
YouTube: Why headings and landmarks are so important
Sådan identificerer du dine overskriftsniveauer
W3C’s HTML-validator med outline-visning
Du kan bruge W3C’s HTML-validator til at identificere overskriftsniveauer uanset valg af editor, det være sig Gutenberg, Elementor eller Divi.
Du behøver ikke hente noget program eller installere et plugin. Besøg blot validator.w3.org, indsæt URL’en til den side, du vil teste, afkryds feltet outline og tryk på knappen check.
Validatoren viser en liste over eventuelle HTML-fejl og herunder en “Heading-level outline” med tydelige angivelser af manglende overskriftsniveauer.
I eksemplet herunder, bør overskriften “SerpWorx HTTP Security Headers …” være en H3 i stedet for en H4.
HeadingsMap Chrome-udvidelse
Denne metode kræver Google Chrome og Chrome-udvidelsen HeadingsMap men den er virkelig nem at bruge. Når udvidelsen er installeret, besøger du blot besøge den side du vil teste, og klikker på ikonet HeadingsMap på værktøjslinjen.
WordPress blok-editor dokumentoversigt
Hvis du opretter indhold ved hjælp af WordPress’ indbyggede blok-editor, bedre kendt som Gutenberg, kan du bruge detalje-knappen til at få et overblik over dit indhold.
Dokumentoversigten viser antallet af tegn, ord, afsnit, dokumentets struktur, og fremhæver forkerte overskriftsniveauer med en gul markering. Oversigten er praktisk, da den afslører fejl under selve redigeringen.
Accessibility Checker plugin til WordPress
Der findes flere WordPress-plugins der tjekker dine indlæg for tilgængelighedsproblemer. Accessibility Checker fra Equalize Digital er en favorit. En af fordelene ved Accessibility Checker er, at den scanner for mere end 40 typer problemer, hver gang du gemmer en kladde eller udgiver et indlæg.
En grundig kontrol som denne, rejser formentlig en masse røde flag, hvoraf mange kun kan rettes af en udvikler, ikke redaktionelt.
Overskrifter i Gutenberg, Elementor og Divi
Hvis du med et af ovenstående værktøjer har identificeret et problem med dine overskriftsniveauer, så kan du let rette det. I Gutenberg er der en dedikeret Heading Block, og det samme er i tilfældet i Elementor hvor de bare kalder det en Heading Widget. I Divi hedder hedder det Text Module hvor de samler både overskrifter og brødtekst i ét.
Princippet er det samme. Hvis man skal rette fejlen fra eksemplet tidligere, vælger man overskriften der fejlagtig er en H4, ændrer den til H3, gemmer, og tjekker strukturen igen.
Hvad hvis jeg vil have mine overskrifter større eller mindre?
Der bruger man styling til. Det gøres i din CSS-fil eller i din editor og varierer meget ud fra hvilket tema og hvilken editor du bruger. Der er ofte også flere forskellige måder at opnå det samme resultat på, så brug lidt tid på at finde den smarteste.
Herfra skal lyde en kraftig opfordring, til at finde ud af hvor du globalt kan indstille størrelserne for H1, H2, H3 osv, så du ikke skal ændre denne indstilling på hver enkelt overskrift du indsætter.
Med Gutenberg finder du oftest indstillinger for overskrifter i Appearance > Customize. I Divi har du kun begrænsede muligheder dér og kan med fordel tage et kig på Divi’s Global Presets.
Brug for sparring omkring webtilgængelighed?
Vi oplever ofte at webtilgængelighed er en eftertanke når et website allerede er gået i luften. Det er lidt ærgerligt. Det er lettere, hurtigere og billigere, at have webtilgængelighed i baghovedet både under udvikling og skabelse af indhold.
Dermed ikke sagt, at det ikke kan betale sig at rette op på fejl og mangler efterfølgende.
Har du brug for hjælp til at forstå hvor de største knaster er i dit projekt, hvad du selv kan gøre, og hvad du med fordel kan hyre en webudvikler til, så kontakt os.
