Introduktion
I denne artikelserie stiller vi hos Sensus skarpt på nogle af de tilgængelighedsudfordringer, der er håndgribelige at løse som redaktør eller udvikler, og hvorfor de bør løses. Tilgængelighed behøver nemlig ikke at være svært at implementere, især hvis man tænker det ind i sin løsning og arbejdsgang fra start til slut.
I dette indlæg sætter vi fokus på opmærkning af sidens overskriftsstruktur, og hvorfor det er vigtigt at være opmærksom på som redaktør eller udvikler.
Hvorfor skal du være opmærksom på overskriftsstruktur?
En korrekt overskriftsstruktur gør det muligt for brugere med skærmlæsere og andre kompenserende teknologier hurtigt at danne sig et overblik over indholdet på en side. Overskrifter fungerer som vejskilte, der hjælper brugeren med at navigere, forstå sidens hierarki og springe direkte til de relevante afsnit. Det gavner især personer med synshandicap, kognitive udfordringer eller læsevanskeligheder, der er afhængige af struktureret indhold for at bevare overblikket. Nogle brugere, der navigerer alene ved brug af tastatur, anvender også overskrifter til hurtigt at springe mellem dele af indholdet på siden.
Derudover styrker en korrekt overskriftsstruktur også SEO (søgemaskineoptimering), da søgemaskiner bruger overskrifter til at forstå, hvordan indholdet hænger sammen, og hvilke dele af siden der er vigtigst.
Rent formelt er de konkrete kriterier, der beskæftiger sig med dette i WCAG (Web Content Accessibility Guidelines), primært “1.3.1 Information og relationer” og “2.4.6 Overskrifter og etiketter”.
Ifølge disse er det vigtigt, at overskrifter bruges semantisk korrekt og er meningsgivende. Det vil sige til, at overskrifterne strukturerer indholdet logisk og ikke blot anvendes for at fremhæve visse elementer visuelt eller som et stilistisk greb. Det er også vigtigt, at man undlader at lave ”visuelle overskrifter”, og altså ikke bare anvender fed skrift og større skriftstørrelse for at indikere en overskrift, men derimod bruger korrekt overskriftopmærkning. Overskrifterne i sig selv skal være meningsgivende og beskrive det afsnit, som de hører til.
Sådan angives en korrekt overskriftsstruktur
Det er let at sikre en korrekt overskriftsstruktur, hvis man har adgang til at redigere sidens HTML-kode. Det gøres ved at bruge overskrifttags (<h1>, <h2>, <h3> osv.) i faldende rækkefølge til at afspejle indholdets hierarki.
Et simpelt eksempel kan se sådan ud:
<h1>Sidens hovedtitel</h1>
<p>Introduktionstekst…</p>
<h2>Underafsnit</h2>
<p>Indhold for dette underafsnit.</p>
<h3>Underemne</h3>
<p>Detaljeret forklaring.</p>
<h2>Endnu et underafsnit</h2>
<p>Tekst i dette underafsnit.</p>
<h3>Endnu et underemne</h3>
<p>Detaljeret beskrivelse.</p>
Spring aldrig overskriftsniveauer over; spring f.eks. aldrig fra <h1> direkte til <h3>, da det skaber forvirring både for skærmlæserbrugere og søgemaskiner.
Hvis du arbejder i et CMS, som f.eks. WordPress, kan overskrifter oftest skabes i din editor-løsning. Hvis overskrifter ikke som udgangspunkt opmærkes korrekt i dit CMS, kan du konsultere dokumentationen for at sikre, at overskrifter håndteres korrekt, eller tale med udvikleren og bede dem om at implementere korrekt opmærkning af overskrifter.
NB: Der er visse skoler indenfor tilgængelighed, der mener, at der kun bør være en overskrift på niveau 1 pr. side, og det kan muligvis også blive angivet som opmærksomhedspunkt i visse automatiserede testværktøjer. Vi mener som udgangspunkt, at det ikke gør noget, at der eksisterer flere overskrifter på niveau 1 pr. side, så længe, indholdet er strengt hierarkisk struktureret og overskrifterne er meningsgivende.
Afrunding
En logisk, strengt hierarkisk og veldefineret overskriftsstruktur er en af de enkleste, men mest effektive måder at forbedre tilgængeligheden og brugeroplevelsen på din hjemmeside. Den hjælper både mennesker og maskiner med at forstå indholdet bedre.
Bemærk i øvrigt, at de samme principper for overskrifter gør sig gældende, når du skal arbejde med overskrifter i dine dokumenter.
Hos Sensus hjælper vi gerne med at gennemgå og optimere jeres sides struktur og tilgængelighed. Kontakt os for rådgivning, test eller sparring, eller følg med her på siden for flere nyttige tilgængelighedstips.
