Mobilvenlighed og tilgængelighed

Mobilvenlighed og tilgængelighed behandles ofte som to forskellige emner, men i praksis hænger de tæt sammen. Et website, der er svært at bruge på mobil, er ofte også svært at bruge med hjælpemidler. En formular uden korrekte labels giver problemer for skærmlæsere, stemmestyring, browser-autofill og helt almindelige brugere.

Teknisk SEO handler derfor ikke kun om crawlability og metadata. Synlighed afhænger også af, om brugeren faktisk kan bruge siden efter besøget. Hvis layoutet bryder på mobil, knapper er svære at ramme, indhold skjules, eller tastaturnavigation fejler, er det tekniske fundament ikke færdigt.

Start med viewport og responsivt layout

Mobilvenlighed starter med en korrekt viewport, så mobile browsere renderer siden ved enhedens reelle bredde. Derefter skal layoutet kunne tilpasse sig uden horisontal scrolling eller skjult nøgleindhold.

Responsivt design må gerne ændre præsentationen. Navigation kan blive til en menu, grids kan stables, og sideelementer kan flyttes. Men mobilversionen skal stadig indeholde det samme primære indhold, de samme vigtige links og de samme tekniske signaler som desktop.

Det er vigtigt for brugeren, men også for indeksering. Søgemaskiner vurderer i høj grad mobilversionen af siden. Hvis mobilversionen fjerner vigtige overskrifter, links eller tekst, kan den indekserede version blive svagere.

Gør touch targets praktiske

På mobil er interaktion mindre præcis. Links, knapper, checkbokse, menupunkter og formularfelter skal have nok plads til at kunne rammes uden fejlklik. Små kontrolelementer skaber især problemer for brugere med nedsat motorik, rystelser, midlertidige skader eller små skærme.

Afstand mellem elementer er lige så vigtig som størrelse. Mange små links eller knapper samlet i menuer, filtre, pagination eller cookie-bokse gør brugeroplevelsen unødigt svær.

Hold teksten læsbar

Læselighed afhænger af skriftstørrelse, linjehøjde, kontrast, afstand og linjelængde. En side kan være teknisk responsiv og stadig være ubehagelig at læse, hvis teksten er for lille, kontrasten er svag, eller layoutet er for tæt.

God læsbarhed understøtter både tilgængelighed og SEO. Brugere bliver længere på siden, når indholdet er let at skimme. Søgemaskiner og AI-systemer får også et klarere billede af siden, når overskrifter, afsnit, lister og links er tydeligt struktureret.

Undgå at deaktivere brugerens mulighed for zoom. Browseren skal forblive under brugerens kontrol.

Brug semantiske kontroller først

Native HTML-elementer har indbygget adfærd. En rigtig knap kan fokuseres, aktiveres med tastatur, annonceres af skærmlæsere og forstås af browseren uden ekstra JavaScript. En klikbar <div> kræver, at alt dette genskabes manuelt.

Det samme gælder dialoger, menuer, formularer og navigation. Brug browserens egne elementer og mønstre, når de løser opgaven. Custom UI skaber ofte problemer, fordi den visuelle løsning bygges før interaktionsmodellen.

Gør tastaturnavigation forudsigelig

Alle interaktive elementer skal kunne nås og bruges med tastatur. Det gælder menuer, formularer, søgning, filtre, cookie-kontroller, accordions, dialoger og skip links.

Fokus skal være synligt. Hvis standard-fokus ikke passer til designet, skal det erstattes af en bedre fokusstil, ikke fjernes. En bruger skal altid kunne se, hvor på siden tastaturet befinder sig.

Undgå fokusfælder. En modal kan godt holde fokus, mens den er åben, men brugeren skal kunne lukke den og vende tilbage til siden.

Label formularer korrekt

Formularer er et område, hvor tilgængelighedsproblemer hurtigt bliver til konverteringsproblemer. Hvert felt skal have et programmatisk tilknyttet label. Placeholders kan være hjælpetekst, men de er ikke labels.

Fejlbeskeder skal være konkrete og knyttet til det felt, der fejlede. Brugeren skal forstå, hvad der gik galt, hvorfor det gik galt, og hvad der skal gøres næste gang.

Brug passende input-typer og autocomplete-attributter, når det giver mening. Det hjælper mobile tastaturer, autofill, password managers og datakvalitet.

Skriv nyttige alt-tekster

Alt-tekst skal beskrive billedets funktion i konteksten. Et dekorativt billede kan have tom alt-attribut, så hjælpemidler springer det over. Et informativt billede skal beskrives kort. Et linket billede skal beskrive linkets formål.

Alt-tekst er ikke et sted til søgeordsfyld. Den skal hjælpe en bruger med at forstå, hvad billedet bidrager med, hvis billedet ikke kan ses eller ikke loader.

Respekter bevægelse, kontrast og medier

Animation kan gøre en grænseflade lettere at forstå, men for nogle brugere kan bevægelse skabe ubehag. Respekter prefers-reduced-motion og undgå at tvinge store animationer, parallax, autoplay eller looping-effekter igennem.

Kontrast skal kontrolleres for tekst, ikoner, rammer, fokusmarkeringer og kontrolelementer. Brug ikke farve alene til fejl, status eller valg. Kombinér farve med tekst, form, ikon eller placering.

Video og lyd bør have captions eller transcripts, når de bærer information. Hvis indholdet er vigtigt nok til at publicere, skal det også kunne bruges af dem, der ikke kan høre, se eller afspille det.

Håndter sprog og lokalisering korrekt

Angiv sidens sprog med lang-attributten, og markér tekst på andre sprog, hvor det er relevant. Det påvirker udtale i skærmlæsere, oversættelsesværktøjer, browseradfærd og søgemaskiners forståelse.

På flersprogede sites skal oversættelsen også omfatte metadata, navigation, billedtekster, strukturerede data, datoer og call-to-actions. En oversat brødtekst med engelske metadata er kun en halv oversættelse.

Undgå accessibility overlays

Accessibility overlays og quick-fix-widgets gør ikke et site tilgængeligt. De lægger JavaScript oven på eksisterende problemer og kan gøre oplevelsen værre for brugere af hjælpemidler.

Hvis et site har tilgængelighedsproblemer, skal markup og adfærd rettes direkte i koden. Det giver også en mere vedligeholdelig løsning.

Sådan validerer du

Automatiske værktøjer er nyttige, men de fanger kun en del af problemet. Brug Lighthouse, browserens accessibility-inspektion, kontrastværktøjer og mobil-emulering, men test også med tastatur, rigtige mobile enheder, zoom, reduceret bevægelse og formularflows.

Det praktiske spørgsmål er enkelt: Kan brugeren læse, navigere, forstå og fuldføre siden uden at kæmpe med grænsefladen? Når svaret er ja på tværs af enheder og inputmetoder, står den tekniske SEO stærkere.

---

Denne guide er en del af Teknisk SEO-guiden.

Brug Teknisk SEO analyse, hvis du vil tjekke en konkret URL mod de samme tekniske områder.