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.
| Taster | Funktion |
|---|---|
| tab | Spring 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 + tab | Spring til det forrige sted på siden med interaktivitet. |
| page‑down | Rul en side ned. |
| page‑up | Rul en side op. |
| home | Gå til toppen af siden (header). |
| end | Gå til bunden af siden (footer). |
| enter | “Klik” på et link, eller tryk på en knap. |
| alt + pil‑venstre | Gå tilbage til forrige side – som at trykke på tilbageknappen. |
| alt + pil‑højre | Gå frem til den side du var på før du trykkede tilbage. |
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.
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.
