Tilgængelighed, eller accessibility som det også hedder, er en vigtig del af ethvert moderne website. Ikke alene sikrer det, at din hjemmeside er brugervenlig for alle, uanset evner, men det kan også forbedre dine placeringer i Googles søgeresultater. En kombination af tilgængelighedsoptimering og forbedring af din PageSpeed kan føre til markant bedre placeringer i SERP’s og en mere engageret brugerbase.
Indholdsfortegnelse
Hvad er webtilgængelighed?
Det ligger næsten i ordet: Tilgængelighed handler om at designe en oplevelse, der kan benyttes af alle, inklusive personer med synshandicap, nedsat motorik eller andre udfordringer – indholdet skal altså være tilgængeligt for alle.
I virkeligheden er webtilgængelighed relativt banalt, og netop derfor er der heller ingen grund til ikke at have styr på det!
Farvekontrast
Du skal sørge for, at tekst skiller sig tydeligt ud fra din baggrund, hvilket gør teksten lettere at læse. Kontrastforhold er samtidig det mest fundamentale princip inden for tilgængelighed.
Det handler altså om at sikre, at tekst og visuelle elementer står tydeligt frem mod baggrunden, så alle brugere, uanset synsevne, kan læse og forstå indholdet.
En farvekontrast refererer til forskellen i lysstyrke og farve mellem tekst eller eventuelle grafiske elementer og deres baggrund. Er kontrasten for lav, kan det være meget svært for en bruger at læse teksten, særligt for dem med synshandicap, ældre mennesker eller dem, der måske benytter en mobil enhed i dårligt lys.
- God kontrast: Sort tekst på en hvid baggrund (eller omvendt).
- Dårlig kontrast: Lysegrå tekst på en hvid baggrund.
Så jeg skal bare have en skarp kontrast?
Nej, en kontrast kan også blive for voldsom, og heldigvis findes der råd for, hvordan man måler læsbarheden. Ifølge WCAG (Web Content Accessibility Guidelines) er følgende værdier anbefalelsesværdige:
- Minimumskravet for normal tekst er et kontrastforhold på 4,5:1.
- For stor tekst er minimumskravet lavere, nemlig 3:1.
Det er for øvrigt de samme værdier, Googles Pagespeed benytter, når de graduerer dine kontrastforhold under tilgængelighedsrapporten.
Tydelige links
Links på dit website bør have en klar farve og bør ændre sig ved hover (når musen føres over). Hvis vi går lidt tilbage i tiden og til de første webdesignprincipper, kan vi se nærmere på danske Jacob Nielsen, der i sin bog “Designing Web Usability” fremhæver, at links traditionelt er blå og understregede, hvilket gør dem let genkendelige for brugerne.
Ifølge Jacob Nielsen vil afvigelser fra denne standard forvirre brugerne og reducere effektiviteten af deres navigation på dit website.
Men når alt er sagt, så blev hans bog udgivet i 1999, og selvom jeg blev skolet i design gennem hans lære, er der rendt mange bække under broen siden da.
Den dag i dag behøver du ikke længere at understrege dine links for, at en bruger forstår, at der kan være tale om et link, men stor kontrast i forhold til brødtekst er naturligvis helt essentielt. Reglen om, at et link skal være blåt, er ej heller længere aktuel, men kan stadig ses som en slags best practice. Det kunne i princippet sammenlignes med subdomænet www. For 10-15 år siden var det best practice at køre med www som subdomæne for at bekræfte over for brugere, at der var tale om et website på World Wide Web!
For små klikbare elementer – Et ofte overset problem
En af de mest almindelige og samtidig oftest sete udfordringer er knapper og links, der enten er for små eller ligger alt for tæt på hinanden. Det kan være umådeligt svært for en bruger med nedsat motorik eller en bruger, der kun navigerer med en enkelt finger, at ramme små klikbare områder. Samtidig er det en stor irritationsfaktor på mobile enheder, hvor der måske ikke er plads nok mellem links til, at man nemt kan klikke sig ind på det rigtige.
Generelle retningslinjer for klikbare elementer
- Sørg for tilstrækkelig plads omkring links og knapper. Hold en minimumsafstand på 48px mellem klikbare elementer.
- Brug tydelige knapper med tekst eller ikoner, der signalerer deres funktion klart.
- Undgå små skrifttyper på links og knapper, især på mobil.
Når du optimerer dine klikbare elementer, forbedrer du altså ikke kun tilgængeligheden, men mindsker også eventuel potentiel frustration hos dine brugere – hvilket kan føre til højere engagement, længere tid brugt på dit website og en lavere afvisningsprocent. Værdier, vi ved, Google måler på for at finde ud af, om dit website er relevant for den givne forespørgsel.
Alt-tekst (Forklar, hvad dine billeder viser!)
Alt-tekster er et andet super vigtigt element inden for webtilgængelighed. Disse korte beskrivelser af billeder hjælper brugere med synshandicap, der benytter skærmlæsere, med at forstå billedindholdet. De gør det også muligt for søgemaskiner at indeksere billeder korrekt, hvilket kan give ekstra trafik fra billedsøgninger.
At lave gode alt-beskrivelser kan i den grad øge din synlighed i Googles billedresultater, men det øger også relevansen for den pågældende side. Alt-teksten bidrager nemlig til mere indhold på den side, billedet er placeret på, og kan derigennem øge synligheden for siden som helhed.
Hvordan laver man gode alt-tekster?
- Beskriv billedets formål eller betydning kort og præcist.
- Undgå at bruge ord som “billede af” eller “foto af”. Skærmlæsere angiver allerede, at det er et billede.
- Hold teksten relevant for indholdet, og undgå over-optimering med søgeord – don’t spam.
Eksempel:
- Dårlig alt-tekst: alt=”SEO”.
- God alt-tekst: alt=”Graf over tilgængelighedsoptimeringens effekt på SEO-ranking”.
Overskrifter
Overskrifter er, ikke overraskende, også et meget vigtigt element inden for tilgængelighed, men også inden for SEO. Ved at strukturere indhold og skabe et logisk hierarki med dine overskrifter hjælper du både brugere og søgemaskiner med at forstå sidens opbygning. For de brugere, der benytter sig af skærmlæsere, er overskrifter en navigationsgenvej, der gør det muligt at springe mellem sektioner og finde relevant information, ligesom du som almindelig bruger kender det fra en indholdsfortegnelse. Du er måske stødt på min i starten af denne artikel.
Mangler der overskrifter, eller er de struktureret forkert, kan det skabe forvirring og potentielt resultere i en dårlig brugeroplevelse. I forhold til Google fungerer overskrifter som signaler om, hvad siden handler om. Særligt H1-overskriften er vigtig, da den fortæller, hvad det primære emne for siden er. Underliggende overskrifter, såsom H2 og H3, hjælper med at organisere indholdet i undersektioner, hvilket gør det lettere for både crawlere og mennesker at forstå konteksten.
Overskrifter med relevante søgefraser kan også være med til at øge din placering på den pågældende søgefrase. Google lægger, ikke overraskende, meget vægt på, hvad der står i dine overskrifter. De skulle jo gerne forklare, hvad det efterfølgende afsnit omhandler.
For at sikre en korrekt brug af overskrifter bør man følge en hierarkisk struktur, hvor H1 bruges én gang som sidens hovedoverskrift, og H2, H3 og så videre anvendes til undersektioner. En typisk struktur kunne starte med en H1 som “Sådan optimerer du din hjemmeside”, efterfulgt af H2’er som “Hvorfor er SEO vigtigt?” og underafsnit markeret med H3 som “Fordele ved teknisk SEO”. Det skaber en klar og logisk opbygning, som både brugere og søgemaskiner kan navigere i.
Tilgængelighed er ikke en direkte rankingfaktor
Selvom tilgængelighed ikke direkte er en rankingfaktor i Googles algoritme, har det en række indirekte SEO-fordele. En nemmere navigation og tydeligere indhold kan øge tiden brugt på dit website, øge antallet af sider der besøges og reducere afvisningsprocenten. Det kan altså få dine brugere til at interagere mere med dit website, og vi ved fra Googles lækkede informationer, at engagement øger chancen for, at vi kan beholde vores position eller måske endda forbedre den.
Brug af korrekt HTML-struktur hjælper søgemaskiner med at forstå dit indhold bedre. Når brugere finder din hjemmeside let at bruge, bliver de længere tid og interagerer mere. Disse signaler er afgørende for at rangere højere i søgeresultaterne.
PageSpeed Insights og tilgængelighed
Du er helt sikkert bekendt med Googles PageSpeed Insights-værktøj, der kan vurdere, hvor hurtigt dit website er, og om det overholder gængse hastighedsstandarder. Men værktøjet giver også dit website en karakter i webtilgængelighed og kommer med konkrete optimeringstiltag, du kan og bør lytte til.
Personligt har jeg fulgt vejledningerne til punkt og prikke på denne blog, og få uger efter at jeg implementerede disse ændringer, så bloggen en stor stigning i synlighed. Blandt andet røg den tilbage på forsiden på termer som “søgemaskineoptimering”, “linkbuilding” mv.
Jeg har også flere gange set andre cases, hvor forbedring af styling af blandt andet links har haft en enorm positiv effekt på websites’ rankings.
