Bedre web­tilgænge­lig­hed med tastatur-navigation

At “webstedet er anvendeligt for brugere, der anvender tastatur og ikke mus”, er punkt 2 på Digitaliseringsstyrelsens liste over hvad web­tilgængelighed dækker over. Så hvor vigtigt er det?

Hvad er tastatur-navigation?

Husker du DOS? WordPerfect? Så kan du springe dette afsnit over. Hvis ikke, så kommer her en hurtig introduktion til tastatur-navigation på hjemmesider.

TasterFunktion
tabSpring til det næste sted på en side der tilbyder en form for interaktivitet. Det kan være et link, et formular-felt eller en knap.
shift + tabSpring til det forrige sted på siden med interaktivitet.
page‑downRul en side ned.
page‑upRul en side op
enter“Klik” på et link, eller tryk på en knap.
alt + pil‑venstreGå tilbage til forrige side – som at trykke på tilbageknappen.
alt + pil‑højreGå frem til den side du var på før du trykkede tilbage.
Almindelige tastaturgenveje på hjemmesider

En bedre brugeroplevelse for alle

Der er mange flere tastaturgenveje, men ovenstående er nok de mest almindelige. Prøv dem – lige nu! Når du først har opdaget, at alt + pil‑venstre er hurtigere end at række ud efter musen og finde tilbageknappen på værktøjslinjen, så vil du ærgre dig over at du ikke har kendt genvejen noget før.

Webtilgængelighed er nødvendigt for nogen og godt for alle.

Digitaliseringsstyrelsen

Forestil dig så, at du slet ikke kan betjene en mus. Måske er du blandt de omkring 30 procent af danskerne i alderen 16-64 år, der vurderer, at de har et større eller mindre handicap? Du fortjener at kunne deltage på lige fod med alle andre. Derfor er der lovgivet om webtilgængelighed for offentlige hjemmesider. Inden du fryder dig over, at din hjemmeside er privat, og at du dermed ikke formelt er omfattet af loven endnu, så overvej om din forretning har råd til at ekskludere 30% af dine potentielle kunder.

Den gode nyhed er, at tastaturnavigation virker umiddelbart ud af boksen i alle browsere. Hvis du følger “best practice”, når du bygger dit site, skal du sådan set ikke gøre noget aktivt, for at det er muligt at benytte siden uden mus. Filmen knækker oftest, når vi – eller de leverandører vi benytter – træffer nogle uheldige designvalg, f.eks. ikke at ha’ en tydelig focus outline.

Focus outline – sådan ser der ud i praksis

Hvis du ikke allerede har tabbet lidt rundt på siden, måske fordi du sidder med en enhed uden tastatur, så kan du i den korte screencast herunder se, hvordan jeg bevæger mig ned igennem menuen og de første titler og emneord på forsiden, og hvordan mit “fokus” vises med en fed understregning eller ramme.

Screencast illustrerer focus outline styling

CSS til Blocksy for lidt pænere focus outline

På dette website anvender jeg det glimrende WordPress tema Blocksy som gør et fint arbejde i forhold til at sikre god webtilgængelighed, og består de fleste WCAG tests uden videre tilretninger. Jeg er dog ikke helt tilfreds med fremhævningen af menu-links og social media-symboler. Desuden har Firefox-browseren en så tyndbenet focus outline som standard, at man dårligt kan se den.

Disse små mangler har jeg udbedret med følgende stump CSS som jeg gerne vil dele med dig, så lidt flere kan få en god oplevelse på nettet.

/*** Blocksy Focus Outline Mod 2021-06-17 ***/
:root {
  --outline-width: 3px;
  --outline-style: solid;
  --outline-offset: 3px;
  scroll-padding-bottom: 4rem;
}

/** Replace menu item focus outline with underline **/
.menu li>a:focus {
  outline: none;
  --textDecoration: underline;
  text-decoration-style: var(--outline-style);
  text-decoration-thickness: var(--outline-width);
  text-decoration-color: var(--linkHoverColor, initial);
}

/** Improve general outline visibility especially in firefox **/
a:focus,
button:focus,
.ct-share-box a:focus svg,
form.search-form button:focus {
  outline-width: var(--outline-width);
  outline-style: var(--outline-style);
  outline-color: var(--linkHoverColor);
  outline-offset: var(--outline-offset);
}

/** Improve social icons and back to top outlines **/
.ct-social-box a,
.ct-back-to-top {
  --linkHoverColor: var(--icon-hover-color);
}

/** Remove share box default container outlines **/
.ct-share-box a:focus {
  outline-style: none;
}

/** Fix ugly outline wrap in firefox **/
.entry-title a:focus,
.related-entry-title a:focus,
.elementor-heading-title a:focus {
  display: inline-block;
}

Hvis du vil vide mere

Hele lavinen omkring webtilgængelighed, også for private virksomheder, begyndte efter sigende at rulle, da en blind person lagde sag an mod Domino’s, fordi han ikke kunne få lov at bestille en pizza på deres hjemmeside. Den historie og et par nyttige CSS properties kan du læse mere om her:

Supreme Court hands victory to blind man who sued Domino’s

:focus CSS pseudo-class på MDN Web Docs

text-decoration CSS property på MDN Web Docs

outline CSS shorthand property på MDN Web Docs

scroll-padding-bottom property på MDN Web Docs

Hvad tænker du om tastatur-navigation?

Bruger du nogensinde tastaturet til at navigere dig rundt på hjemmesider? Hvordan virker det? Smid meget gerne en kommentar herunder – også hvis du gerne vil se flere CSS-kodestumper her på sitet.

Skriv en kommentar