Bedre webtilgængelighed med tastaturnavigation

At "webstedet er anvendeligt for brugere, der anvender tastatur og ikke mus", er punkt 2 på Digitaliseringsstyrelsens liste omkring webtilgængelighed.

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 og de mest anvendelige tastatur-genveje 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.
homeGå til toppen af siden (header).
endGå til bunden af siden (footer).
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 andre tastaturgenveje, men ovenstående er ret almindelige. Prøv dem. At trykke alt + pil‑venstre er hurtigere end at række ud efter musen og finde tilbageknappen på værktøjslinjen.

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

Digitaliseringsstyrelsen

Forestil dig, 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? De bør kunne deltage på lige fod med alle andre. Derfor er der også lovgivet om webtilgængelighed for offentlige hjemmesider. Og tænker du, 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.

Tastaturnavigation virker umiddelbart ud af boksen i alle browsere. Hvis du følger “best practice” når du bygger dit website, skal du sådan set ikke gøre noget aktivt, for at det er muligt at benytte siden med et tastatur. Filmen knækker 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 tab‘et lidt rundt på siden, måske fordi du sidder med en iPad eller en mobiltelefon, 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 ramme.

Screencast illustrerer focus outline styling

CSS til Blocksy for tydeligere focus outline

På oldrup.dk 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. Jeg er dog ikke helt tilfreds med fremhævningen af menu-links, og desuden har Firefox-browseren en så tyndbenet focus outline 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 tastatur-brugere kan få en god oplevelse på nettet.

/*** Better Focus Outline, especially in Firefox 2022-04-16 ***/

:root {
	--outline-width: 3px;
	--outline-style: solid;
	--outline-offset: 3px;
	scroll-padding: 4rem;
}


/** Improve general outline visibility **/

a:focus,
button:focus,
form.search-form button:focus,
pre[tabindex="0"]:focus {
	outline-width: var(--outline-width);
	outline-style: var(--outline-style);
	outline-color: var(--linkHoverColor);
	outline-offset: var(--outline-offset);
}


/** Blocksy - Header, reduced outline height of menu items **/

[data-header*="type-1"] .ct-header [data-id="menu"]>ul>li>a {
	height: calc(1em + var(--outline-offset) * 2);
}


/** Blocksy - Footer, make  room for the outline to be visible **/

.footer-menu-inline {
	padding: calc(var(--outline-offset) * 2) 1em;
}


/** Blocksy and Elementor - fix outline wraping two lines **/

.entry-title a:focus,
.related-entry-title a:focus,
.elementor-heading-title a:focus {
	display: inline-block;
}


/** Getwid - Override outline:none on accordion toggles **/

#main .wp-block-getwid-accordion__header-wrapper a:focus {
	outline: solid;
}

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 rundt på hjemmesider? Hvordan virker det? Smid meget gerne en kommentar herunder – også hvis du gerne vil se flere CSS-kodestumper her på sitet.

Del artiklen
Læs mere om Bjarne Oldrup, Sønderborg

Bjarne Oldrup

Webudvikler med forkærlighed for WordPress, bæredygtigt webdesign, GDPR og web­tilgængelighed.

Skriv en kommentar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *