Hvad er en til­gæn­ge­lig hjem­mesi­de, og hvorfor er det vigtigt?

Til­gæn­ge­li­ge websteder sikrer, at brugere med en lang række handicap og behov kan bruge websteder uden be­græns­nin­ger og uden hjælp fra andre. Formålet med et til­gæn­ge­ligt websted er derfor at forhindre ude­luk­kel­se af visse grupper online, for eksempel mennesker med fysiske eller in­tel­lek­tu­el­le handicap.

Hvad er en til­gæn­ge­lig hjem­mesi­de?

For at skabe en til­gæn­ge­lig hjem­mesi­de skal we­bind­hol­det designes på en måde, så alle brugere kan få adgang til og forstå det. Dette omfatter personer, der er afhængige af hjæl­pe­mid­ler såsom skærm­læ­se­re, ta­sta­tur­navi­ga­tion, for­stør­rel­ses­værk­tø­jer eller bil­led­tek­ster. Som led i skabelsen af en in­klu­de­ren­de on­li­ne­op­le­vel­se er til­gæn­ge­li­ge hjem­mesi­der afgørende for virk­som­he­der, or­ga­ni­sa­tio­ner og of­fent­li­ge in­sti­tu­tio­ner. Til­gæn­ge­ligt webdesign kan også forbedre sø­ge­ma­ski­ne­op­ti­me­ring ved at forbedre bru­ger­ven­lig­he­den og in­for­ma­tions­struk­tu­ren.

Barrierer er for­hin­drin­ger, der gør det van­ske­ligt – eller i nogle tilfælde umuligt – for brugerne at få adgang til og in­ter­a­ge­re med indholdet på et websted. Mens be­vidst­he­den om til­gæn­ge­lig­hed i fysiske rum er vokset be­ty­de­ligt, opstår der stadig ofte barrierer på in­ter­net­tet, og ofte util­sig­tet. Disse kan skyldes tekniske be­slut­nin­ger, valg af visuelt design eller dårligt struk­tu­re­ret indhold. Forskning og praktiske eksempler viser, at in­ter­ak­ti­ve kom­po­nen­ter, såsom login eller sik­ker­heds­funk­tio­ner, kan udgøre store ud­for­drin­ger. Visse CAPTCHA’er, der bruger forvræn­ge­de tegn eller kun visuelle gåder, kan i væsentlig grad begrænse adgangen for mennesker med syns­han­di­cap og være i strid med de nuværende for­vent­nin­ger til til­gæn­ge­li­ge websteder.

Web­til­gæn­ge­lig­heds­stan­dar­der for til­gæn­ge­li­ge websteder

Den vigtigste in­ter­na­tio­na­le standard for til­gæn­ge­li­ge websteder er WCAG– specifikt WCAG 2.2 (Web Content Ac­ces­si­bi­li­ty Gu­i­de­li­nes). Disse W3C-ret­nings­linjer definerer de nyeste krav og bedste praksis, der gør websteder til­gæn­ge­li­ge for alle brugere.

WCAG 2.2 lægger vægt på forbedret bru­ger­ven­lig­hed, klarere tastatur- og fo­kus­navi­ga­tion samt for­enk­le­de in­ter­ak­tio­ner på mobile enheder. Disse op­da­te­rin­ger afspejler ud­vik­lin­gen i bru­ge­rad­færd og adres­se­rer barrierer, som tidligere versioner ikke fuldt ud dækkede.

Nogle af de vigtigste suc­ceskri­te­ri­er i WCAG 2.2 omfatter:

• Synligt ta­sta­tur­fo­kus: In­ter­ak­ti­ve elementer skal være tydeligt synlige, når der navigeres ved hjælp af et tastatur.
• Mini­mum­stør­rel­se for kon­trol­e­le­men­ter: Områder, der kan klikkes og berøres, skal være store nok til at undgå util­sig­tet ak­ti­ve­ring.
• Al­ter­na­ti­ver til træk­be­væ­gel­ser: In­ter­ak­tio­ner må ikke ude­luk­ken­de være baseret på træk-og-slip.
• Undgå over­flø­dig ind­tast­ning: Brugere bør ikke skulle indtaste de samme op­lys­nin­ger flere gange.
• Til­gæn­ge­lig au­ten­ti­fi­ce­ring: Login-processer må ikke afhænge af kognitive opgaver såsom pus­le­spils­ba­se­re­de CAPTCHA’er.

WCAG 2.2 er den vigtigste benchmark for moderne web­s­i­te­ud­vik­ling og danner det tekniske grundlag for til­gæn­ge­lig­heds­krav i Stor­bri­tan­ni­en.

Op­fat­te­ligt

Mange websteder in­de­hol­der blinkende annoncer, kom­men­tar­sek­tio­ner er fyldt med tekst i lille skrift, og nogle gange afspilles der endda bag­grunds­mu­sik for at un­der­stre­ge sidens stemning eller tema. Afhængigt af typen og svær­heds­gra­den af et handicap kan nogle besøgende på dit websted muligvis ikke opfatte disse elementer fuldt ud – eller slet ikke.

Blinde mennesker navigerer for eksempel på in­ter­net­tet uden visuelle signaler. I stedet læser en skærm­læ­ser hjem­mesi­den højt. Enheden vi­de­re­gi­ver de læsbare data til de hjæl­pe­mid­ler, der bruges. Et op­da­ter­bart blin­de­skrift­dis­play kan for eksempel kon­ver­te­re tekst til blin­de­skrift. Dette gør det muligt for personen at opfatte din hjem­mesi­de gennem berøring. Et tekst-til-tale-værktøj afspiller indholdet i lydformat. Med denne teknologi er brugerne afhængige af hørelsen for at kunne behandle web­s­te­dets indhold. I det netop nævnte eksempel bliver bag­grunds­mu­sik­ken imid­ler­tid en di­strak­tion.

Personer med mindre alvorlige syns­han­di­cap – herunder mange ældre voksne – kan se indholdet på din hjem­mesi­de med deres øjne, men de er afhængige af en stærkt for­stør­ret skærm. Personer med far­ve­syns­de­fekt kan derimod ikke se advarsler, der kun formidles gennem farver. Døve kan ikke få adgang til in­for­ma­tio­nen i lydfiler og meget af indholdet i vi­deo­fi­ler.

For­stå­e­ligt

Meget unge brugere, ældre voksne eller personer med kognitive handicap kan have svært ved at forstå tekster fyldt med teknisk sprog, ufor­kla­re­de for­kor­tel­ser eller komplekse sætninger. Hvis et websted adskiller relateret indhold eller bruger in­kon­se­kvent ter­mi­no­lo­gi, kan brugerne have svært ved at forstå den til­sig­te­de betydning.

Be­tje­ne­lig

Da mo­bil­browsing fort­sæt­ter med at vokse, bliver det særligt fru­stre­ren­de, når links er for små eller ligger for tæt sammen til, at man kan trykke præcist på dem. Websteder, der ikke er optimeret til smartp­ho­nes – hvor tæt­pak­ke­de, små link­tek­ster er al­min­de­li­ge – kan være særligt van­ske­li­ge for ældre voksne eller personer med begrænset håndsta­bi­li­tet.

Der er dog nu udviklet mange værktøjer til mennesker med fysiske handicap, som gør det lettere at bruge computere. Til dette formål sporer nogle værktøjer øjen­be­væ­gel­ser, mens andre tek­no­lo­gi­er betjenes via ta­sta­tu­ret. I prin­cip­pet bør et websted, der er designet til web­til­gæn­ge­lig­hed, være bygget, så det kan fortolkes af sådanne hjæl­pe­mid­ler. Hvis dit websted ikke kan navigeres med dem, har po­ten­ti­el­le kunder, der er afhængige af dem, ingen mulighed for at bruge hele dit udbud.

Når brugerne bliver bedt om at udfylde en formular – for eksempel for at tilmelde sig et nyheds­brev – er det ikke ual­min­de­ligt, at der opstår fejl. Ad­gangs­ko­den er for kort, eller fød­sels­da­to­en passer ikke til de angivne parametre. Giv derfor klare vej­led­nin­ger om, hvordan fejlene kan rettes. In­ter­ak­tion med et websted omfatter også navi­ga­tion. Personer, der bruger enheder med små skærme eller arbejder med høj skærm­for­stør­rel­se, har brug for navi­ga­tions­sti­er, der er tilpasset dette, og er afhængige af et klart, vel­struk­tu­re­ret websted.

Kom­men­tar­fel­ter giver brugerne mulighed for at give feedback. De kan bruge dem til at dele deres mening om et produkt eller indhold eller til at kom­mu­ni­ke­re med andre mennesker. Når de skriver på en skærm, bruger mennesker med syns­han­di­cap ofte en skærm­for­stør­rer. Dette gør, at ele­men­ter­ne vises meget større og øger afstanden mellem læ­se­søj­len og ind­tast­nings­fel­tet. Placer derfor ele­men­ter­ne tæt på hinanden, så det bliver lettere for brugerne at in­ter­a­ge­re med hinanden.

Robust

Websteder skal være kom­pa­tib­le med hjæl­pe­mid­ler gennem en korrekt ko­de­struk­tur. Semantisk HTML (som <main>, <nav>, <section>) hjælper skærm­læ­se­re med at forstå sidens opbygning. Korrekte for­mu­la­re­ti­ket­ter forbinder ind­tast­nings­fel­ter med deres be­skri­vel­ser ved hjælp af for at­tri­but­ter. ARIA-lan­de­mær­ker giver genveje til navi­ga­tion med skærm­læ­se­re. Uden disse bliver selv ve­lud­for­met indhold ubru­ge­ligt for brugere af hjæl­pe­mid­ler.

Hvad er fordelene ved til­gæn­ge­ligt webdesign?

Fjernelse af til­gæn­ge­lig­heds­bar­ri­e­rer forbedrer bru­ger­ven­lig­he­den af dit websted og styrker din synlighed i sø­ge­ma­ski­ner. Mange til­gæn­ge­lig­heds­prak­sis­ser over­lap­per med bedste praksis inden for bru­gero­p­le­vel­se og SEO, hvilket betyder, at for­bed­rin­ger af til­gæn­ge­lig­he­den ofte kommer alle besøgende til gode.

En til­gæn­ge­lig hjem­mesi­de hjælper:

• brugere på mobile enheder,
• mennesker med fysiske eller kognitive handicap,
• ældre voksne og
• besøgende, der måske ikke er for­tro­li­ge med web­navi­ga­tion.

Ved at præ­sen­te­re in­for­ma­tio­ner­ne tydeligt og struk­tu­re­re din hjem­mesi­de logisk øger du både læs­bar­he­den og den tid, brugerne til­brin­ger på dine sider. Til­gæn­ge­lig­hed kræver ganske vist ekstra arbejde og testning, men fordelene er mange. Til­gæn­ge­li­ge hjem­mesi­der giver en bedre oplevelse for alle.

Hvordan gør man en hjem­mesi­de til­gæn­ge­lig? Tips og eksempler

Hvis du vil oprette en til­gæn­ge­lig hjem­mesi­de, skal du være meget opmærksom på, hvordan du struk­tu­re­rer in­for­ma­tio­nen og de for­skel­li­ge visuelle kom­po­nen­ter på siden.

Trin 1: Sørg for en klar in­for­ma­tions­struk­tur

Giv din hjem­mesi­de en logisk, let­for­stå­e­lig struktur og brug et enkelt, bru­ger­ven­ligt sprog. Det gør dit indhold mere til­gæn­ge­ligt og forbedrer også din placering på Google, da sø­ge­ma­ski­ner vurderer læsbarhed og klarhed.

For at un­der­støt­te stærk SEO og op­ret­hol­de en or­ga­ni­se­ret web­s­teds­ar­ki­tek­tur skal du huske følgende:

Trin 2: Brug visuelle signaler

Ska­ler­ba­re skrift­ty­per og far­veju­ste­rin­ger hjælper personer med nedsat syn eller far­ve­blind­hed med at læse indholdet på hjem­mesi­den lettere. Sørg for, at teksten har til­stræk­ke­lig kontrast til bag­grun­den, og at in­ter­ak­ti­ve elementer såsom knapper eller links fremstår tydeligt.

For at hjælpe brugere, der navigerer med et tastatur eller en skærm­læ­ser, skal du fremhæve in­ter­ak­ti­ve elementer ved hjælp af:

• synlige fo­ku­sin­di­ka­to­rer,
• hover-effekter,
• aktive linkstilar­ter.

Stol ikke ude­luk­ken­de på farver til at formidle betydning — suppler far­ve­kod­nin­gen med symboler, tal eller stjerner.

Close

Personer, der lider af epi­lep­ti­ske anfald, er i fare, hvis et websted in­de­hol­der grafik eller videoer, der blinker mere end tre gange i sekundet. Forskere har også fundet ud af, at skarpt de­fi­ne­re­de, kon­tra­stri­ge git­ter­møn­stre også kan udløse anfald hos personer med lysfølsom epilepsi.

Trin 3: Præsenter in­for­ma­tion i flere formater

Web­s­te­dets til­gæn­ge­lig­hed bør være en del af din daglige ar­bejds­gang. Uanset om du optimerer til sø­ge­ma­ski­ner, of­fent­lig­gør PR-indhold eller tilføjer nye pro­dukt­si­der, bør re­gel­mæs­sigt uploadet indhold struk­tu­re­res på en måde, så det kan bruges af alle besøgende.

En grund­læg­gen­de del af web­s­te­dets til­gæn­ge­lig­hed – med SEO-fordele – er at inkludere al­ter­na­tiv tekst til billeder. Da crawlere og skærm­læ­se­re ikke kan fortolke billeder, giver al­ter­na­tiv tekst me­nings­ful­de be­skri­vel­ser af:

• blinde brugere,
• syns­han­di­cap­pe­de,
• brugere med langsomme in­ter­net­for­bin­del­ser.

Trans­skrip­tio­ner og bil­led­tek­ster

Det er en mere om­fat­ten­de opgave at udarbejde trans­skrip­tio­ner og un­der­tek­ster løbende og rettidigt. Disse værktøjer giver dig mulighed for at gøre ly­dind­hold til­gæn­ge­ligt for personer, der er døve eller hø­re­hæm­me­de. En trans­skrip­tion, der omdanner talte ord samt lyde og bag­grunds­støj til tekst, bør placeres så tæt som muligt på det til­hø­ren­de ly­dind­hold – for eksempel via en knap, der linker direkte til do­ku­men­tet.

Un­der­tek­ster gør det be­ty­de­ligt lettere for døve eller hø­re­hæm­me­de at forstå webvi­deo­er. De er også en fordel for brugere, der fo­re­træk­ker ikke at afspille lyd (for eksempel fordi de ikke ønsker at forstyrre andre). Mennesker med kognitive handicap eller lidelser som ADHD behandler ofte vi­deo­ind­hold mere effektivt, når de kan dæmpe bag­grunds­ly­de ved hjælp af en vi­deo­af­spil­le­rindstil­ling – på samme måde som brugere med hø­re­hæm­ning.

Lyd­be­skri­vel­se

Personer med en syns­styr­ke på under 30 procent betragtes som syns­han­di­cap­pe­de, og personer med en syns­styr­ke på under to procent betragtes som blinde. De opfatter visuel in­for­ma­tion kun delvist eller slet ikke. For at sikre, at disse personer kan forstå dit vi­deo­ind­hold, bør du inkludere et ekstra lydspor. Dette spor in­de­hol­der for­kla­rin­ger af visuelle elementer såsom land­ska­ber, personer og korte be­skri­vel­ser af hand­lin­ger, der finder sted på skærmen. Placer disse for­kla­rin­ger i tale- og lyd­pau­ser­ne i den originale optagelse, så lydspo­re­ne ikke over­lap­per hinanden.

Let­læ­se­ligt sprog

Let sprog udtrykker indhold på en meget enkel måde. Det hjælper mennesker med kognitive handicap med at forstå komplekse op­lys­nin­ger lettere. Let sprog undgår elementer som konjunk­tiv, synonymer og ne­ga­tio­ner. Sæt­nin­ger­ne er korte og in­de­hol­der kun én idé ad gangen. Mennesker med kognitive handicap har samme ret til in­for­ma­tion som alle andre. Af denne grund leverer dagblade i stigende grad versioner af deres artikler på let­for­stå­e­ligt sprog på deres on­li­ne­p­lat­for­me som et godt eksempel på til­gæn­ge­li­ge hjem­mesi­der. Of­fent­li­ge in­sti­tu­tio­ner bruger også oftere let­for­stå­e­ligt sprog i deres in­for­ma­tions­tek­ster.

En mindre streng form er det, der kaldes let­læ­se­ligt sprog, som groft svarer til sprog­ni­veau A2 eller B1.

Trin 4: Gør hjem­mesi­den kom­pa­ti­bel

Hjæl­pe­mid­ler såsom skærm­læ­se­re gør web­til­gæn­ge­lig­hed mulig for mange brugere. Disse værktøjer behandler websteder lineært fra venstre mod højre og fra top til bund, hvilket er grunden til, at layout og indhold skal være tydeligt adskilt. Ellers kan si­de­e­le­men­ter blive fortolket forkert.

Følg disse grund­læg­gen­de regler for at hjælpe brugerne med at navigere effektivt.

Spring navi­ga­tions­links og andre genveje over

Skærm­læ­se­re vi­de­re­gi­ver tekst­in­for­ma­tion til tekst-til-tale-software og op­da­ter­ba­re braille-skærme. For at gøre dette læser de siden fra top til bund – dette omfatter også gentagne elementer såsom navi­ga­tions­b­jæl­ken, ikoner eller links til un­der­si­der. For at forhindre, at læseren unødigt gentager denne in­for­ma­tion på hver side, bør du im­ple­men­te­re links til at springe navi­ga­tio­nen over (kort sagt: spring­links).

Brugere, der kun navigerer ved hjælp af et tastatur, eventuelt med en mundstok, har også store problemer, hvis de skal bladre gennem mange elementer. Disse personer har gavn af et spring­link øverst på siden, der er så synligt som muligt:

<a href="#content">Skip navigation</a>
<main id="content">
    <h1>Main heading</h1>
    <p>First paragraph</p>
</main>

Der er spring­links, der er usynlige i layoutet, men skærm­læ­ser­ne vi­de­re­gi­ver den al­ter­na­ti­ve tekst­be­sked “Spring navi­ga­tion over” til brugeren, når koden ser sådan ud:

<a href="#content"><img src="empty.gif" height="15" border="0" alt="Skip navigation" width="5"></a>

Det er vigtigt, at spring­links vises så tidligt som muligt i koden. Placer ankeret i be­gyn­del­sen af ho­ve­d­ind­hol­det:

<div id="content"></div>

Brug spring­links med måde, da for mange af dem kan ophæve deres positive effekt og tvinge brugerne til at klikke sig igennem et for stort antal elementer. En mere elegant løsning er at bruge ARIA-lan­de­mær­ker og sikre et vel­struk­tu­re­ret dokument. Det tilrådes også at bruge HTML5-elementer.

En anden nyttig funktion er en ind­holds­for­teg­nel­se i be­gyn­del­sen af do­ku­men­tet, som giver brugerne mulighed for at springe til bestemte afsnit via links på siden. Moderne skærm­læ­se­re læser de til­sva­ren­de over­skrif­ter højt. Ved at bruge me­nings­ful­de, vel­struk­tu­re­re­de over­skrif­ter forbedrer du læs­bar­he­den for både sø­ge­ma­ski­ner og hjæl­pe­mid­ler.

Da­ta­ta­bel­ler i stedet for lay­out­ta­bel­ler

For web­til­gæn­ge­lig­hed i henhold til W3C’s ret­nings­linjer for web­til­gæn­ge­lig­hed bør du ideelt set kun bruge da­ta­ta­bel­ler. Skærm­læ­se­re har færre problemer med dette format og kan præ­sen­te­re in­for­ma­tio­nen på en me­nings­fuld måde efter kon­ver­te­ring. Lay­out­ta­bel­ler giver derimod en side en visuel struktur, men gør det sværere for skærm­læ­se­re at formidle indholdet klart.

Definer lay­out­ta­bel­ler ved kun at bruge enkle elementer: TABLE, TR og TD (hen­holds­vis tabel, række og celle). Brug struk­tu­rel­le elementer til at gøre re­la­tio­ner­ne mellem cellerne logiske, så skærm­læ­ser­pro­gram­met læser lay­out­ta­bel­len som en datatabel. Du gør det modsatte, hvis du fjerner visse ta­bel­e­le­men­ter fra til­gæn­ge­lig­heds­træ­et.

Brug koden role="none" som vist i eksemplet i for­bin­del­se med dine tiltag for web­til­gæn­ge­lig­hed. Dette gælder for tabellen og dens un­der­ord­ne­de elementer. Hvis du indlejrer tabeller i tabeller, skal du definere begge elementer med den.

<table role="none">
<tr>
<td>
<table role="none">
<tr>
<td>
Example text <abbr title="for example">e.g.</abbr> about ARIA
</td>
</tr>
</table>
</td>
</tr>
</table>

Tjekliste for til­gæn­ge­li­ge websteder

Når du er færdig med at opbygge din hjem­mesi­de, kan du gennemgå vores tjekliste for web­til­gæn­ge­lig­hed for at sikre dig, at du har taget højde for de vigtigste faktorer.

✓ In­for­ma­tions­struk­tu­ren er vel­or­ga­ni­se­ret og let at følge

✓ Brug af klart og til­gæn­ge­ligt sprog

✓ Al­ter­na­tiv tekst til billeder

✓ Video- og lyd­trans­skrip­tio­ner

✓ Far­ve­frem­hæv­ning af vigtigt indhold

✓ Høj kontrast

✓ Un­der­støt­tel­se af skærm­læ­ser

Gratis værktøjer til op­ret­tel­se af til­gæn­ge­li­ge websteder

Der findes en række værktøjer, der kan hjælpe dig med at oprette en til­gæn­ge­lig hjem­mesi­de. Nedenfor er nogle af de mest kendte mu­lig­he­der:

• TPGi ARC Toolkit: Meget pålidelig og ideel til tekniske webs­i­deau­dits.
• Ac­ces­si­bi­li­ty Checker: Med denne webapp kan du gratis teste din hjem­mesi­de for over­hol­del­se af WCAG.
• Si­teim­prove: Si­teim­proves Ac­ces­si­bi­li­ty Checker tilbyder en gratis webs­i­descan­ning, hvor re­sul­ta­ter­ne leveres via e-mail.

Web­s­te­dets til­gæn­ge­lig­hed forbedrer bru­gero­p­le­vel­sen for alle

For­bed­ring af til­gæn­ge­lig­he­den på din hjem­mesi­de øger den generelle bru­ger­ven­lig­hed og forbedrer bru­gero­p­le­vel­sen be­ty­de­ligt. Dette har følgende fordele:

• mo­bil­bru­ge­re,
• mennesker med fysiske eller kognitive handicap,
• ældre voksne og
• alle, der har svært ved at navigere på in­ter­net­tet.

Ved at struk­tu­re­re din hjem­mesi­de tydeligt og udarbejde indhold i et in­klu­de­ren­de, let­for­stå­e­ligt format un­der­støt­ter du både til­gæn­ge­lig­hed og sø­ge­ma­ski­ne­op­ti­me­ring. Tydelig ar­ki­tek­tur, stærk kontrast, læsbar tekst og kom­pa­ti­bi­li­tet med hjæl­pe­mid­ler bidrager alle til længere besøg og højere til­freds­heds­pro­cen­ter.

Selvom det kræver ekstra arbejde at sikre til­gæn­ge­lig­hed – såsom grundig testning, klar ind­holds­struk­tur, al­ter­na­tiv tekst og gen­nemtænk­te in­ter­ak­tions­e­le­men­ter – er in­ve­ste­rin­gen det hele værd. Til­gæn­ge­ligt web­s­teds­de­sign gavner alle brugere, styrker brandets tro­vær­dig­hed og hjælper dig med at nå ud til et bredere publikum, herunder dem, der er afhængige af hjæl­pe­mid­ler til at navigere på nettet.