Skærmlæsere og tastaturnavigation

Informatik C · STX · C-niveau · Interaktionsdesign

💻 Skærmlæsere og tastaturnavigation

Skærmlæsere = software der læser tekst + UI op for synshandicappede.

Top-skærmlæsere: JAWS (Freedom Scientific, kommerciel, Windows-dominerende), NVDA (gratis open source, Windows), VoiceOver (Apple, indbygget i macOS + iOS), TalkBack (Android), Narrator (Windows indbygget).

Anvendelse: brugerne navigerer med Tab (næste element), Shift+Tab (forrige), Enter (aktivér), pile-taster (læs tekst), H (næste header), L (næste link).

Forudsætninger for skærmlæser-venlig kode: Semantic HTML — brug <nav>, <main>, <article>, <button>, <h1>-<h6> korrekt. Skærmlæser bruger struktur til at navigere. Alt-tekst på billeder ("alt='Diagram der viser stigning i CO2 fra 280 til 420 ppm 1850-2024'"). ARIA-attributter når HTML ikke er nok: aria-label, aria-describedby, aria-live (for dynamic content updates), role="dialog". Keyboard navigation: alle interaktive elementer skal være keyboard-tilgængelige. Tab-rækkefølge logisk (tabindex). Skip-link til main content (springer over navigation). Focus-indikator synlig (outline). Ingen keyboard-fælder (kan altid Tab væk).

Test: prøv at navigere dit website KUN med tastatur. Slå skærmlæser til (NVDA gratis) og luk øjnene.

Common bugs: modal dialogs hvor focus ikke fanges, formularer uden labels, kun-museværelser.

Læringsmål

• Anvende designprincipper (konsistens, feedback, affordans)
• Vurdere brugbarhed (usability)
• Lave bruger-test (think aloud, A/B-test)
• Anvende tilgængelighed (WCAG 2.1)
• Designe for skærmlæsere og tastaturnavigation

Sådan kan du arbejde med emnet

• Forklar, hvad en skærmlæser er, og hvad der er kravene til HTML for at den fungerer godt
• Test tastaturnavigation på en hjemmeside og beskriv, hvad der fungerer og hvad der mangler
• Diskutér, hvad der er de praktiske konsekvenser for brugere med synsnedsættelse, hvis webtilgængelighed fejler

Arbejd iterativt med prototyper og dokumentation. Test, evaluér og dokumentér.