Testing med skjermlesere
Bruk VoiceOver og NVDA til å kontrollere ARIA-implementeringer
Testing med skjermlesere er en gratis leksjon i HTML Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i HTML Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i HTML Academy inneholder totalt 4 leksjoner.
Hvorfor teste med skjermlesere?
Automatiserte verktøy fanger bare opp 30–40 % av tilgjengelighetsproblemene. Testing med en ekte skjermleser avdekker problemer som automatiserte kontroller ikke finner:
- Forvirrende leserekkefølge
- Lite nyttige ARIA-kunngjøringer
- Manglende fokushåndtering
- Forvirrende interaksjonsmønstre
VoiceOver på Mac
VoiceOver er innebygd i macOS — ingen installasjon er nødvendig:
<!-- Activate: Cmd+F5 (or System Settings → Accessibility → VoiceOver) -->
<!-- Key commands:
VO = Control+Option
VO+Right Arrow = Next element
VO+Left Arrow = Previous element
VO+Space = Activate element
VO+U = Open rotor (landmark navigation)
VO+H = Next heading
Tab = Next focusable element
Shift+Tab = Previous focusable
-->VoiceOver på iOS
Test opplevelsen med mobil skjermleser ved hjelp av VoiceOver på iPhone/iPad:
<!-- Activate: Settings → Accessibility → VoiceOver
Or: triple-click side button if set up -->
<!-- Gestures:
Swipe right = next element
Swipe left = previous element
Double-tap = activate element
Two-finger scrub = back
Three-finger swipe up/down = scroll
-->NVDA på Windows
NVDA er en gratis skjermleser med åpen kildekode for Windows:
<!-- Download: nvaccess.org -->
<!-- Key commands:
NVDA key = Insert (or Caps Lock)
NVDA+N = NVDA menu
H = next heading
K = next link
B = next button
F = next form field
D = next landmark
Insert+F7 = element list (links, headings, landmarks)
-->Sjekkliste for testing med skjermleser
Dette bør du kontrollere med en skjermleser:
- Sidetittelen kunngjøres ved lasting
- Overskrifter danner en logisk navigasjonsstruktur
- Alle bilder har meningsfull eller tom alt-tekst
- Alle skjemafelt har etiketter
- Knarrer og lenker har beskrivende navn
- Fokusfellen i modaler fungerer riktig
- Oppdateringer av dynamisk innhold kunngjøres
Vanlige feil med skjermlesere
Problemer som automatiserte tester ikke finner:
<!-- 1. Reading order differs from visual order -->
<!-- CSS flex/grid order ≠ DOM order for screen readers -->
<!-- 2. aria-label doesn't match visible text -->
<!-- Voice control users say visible text to click -->
<!-- 3. Focus disappears after dialog closes -->
<!-- Programmatically return focus to trigger -->
<!-- 4. Dynamic content not in a live region -->
<!-- New items added silently, no announcement -->Tastaturfokusert testing
Test først med bare tastatur før du bruker en skjermleser:
- Koble fra musen eller styreflaten
- Naviger gjennom hele siden med bare Tab
- Kontroller at alle interaktive elementer kan nås
- Kontroller at alle handlinger kan utføres med tastaturet
Verktøy for automatisert tilgjengelighetstesting
Suppler manuell testing med automatiserte verktøy:
- axe DevTools — Chrome-utvidelse; den mest nøyaktige automatiserte kontrollen
- WAVE — wavebooth.com; visuelt overlegg på siden
- Lighthouse — Chrome DevTools; revisjon av ytelse + tilgjengelighet
- pa11y — CLI-verktøy; godt egnet for CI/CD-pipelines
Referanse for ARIA-mønstre
W3C ARIA Authoring Practices Guide (APG) inneholder referanseimplementasjoner:
- Accordion, Alert, Alert Dialog
- Breadcrumb, Button, Carousel
- Checkbox, Combobox, Dialog
- Disclosure, Feed, Grid
- Listbox, Menu, Menubar
- Tab, Tooltip, Treeview
URL: w3.org/WAI/ARIA/apg/
Kontinuerlig integrering av tilgjengelighetstesting
Bygg tilgjengelighetstesting inn i arbeidsflyten:
// Jest + axe-core for unit tests:
import { axe, toHaveNoViolations } from 'jest-axe';
expect.extend(toHaveNoViolations);
test('Button is accessible', async () => {
const results = await axe('<button>Click me</button>');
expect(results).toHaveNoViolations();
});
// pa11y in CI pipeline:
// pa11y https://example.com --standard WCAG2AASammendrag av testing
En komplett strategi for tilgjengelighetstesting:
- Design — kontroller fargekontrast og størrelsen på berøringsmål
- Utvikling — test med tastatur og kjør en automatisert axe-skanning
- Gjennomgang — test med skjermleser (VoiceOver + NVDA)
- CI/CD — bruk pa11y eller axe i en automatisert pipeline
- Produksjon — Lighthouse + manuelle stikkprøver
Hurtigsjekk
Hvor stor andel av tilgjengelighetsproblemene kan automatiserte verktøy pålitelig fange opp?
Oppsummering: Testing med skjermleser
Det viktigste om testing:
- VoiceOver (Mac/iOS) og NVDA (Windows) er gratis og nødvendige
- Test først med bare tastatur, og legg deretter til skjermleser
- Automatiserte verktøy: axe, WAVE, Lighthouse og pa11y
- Automatiserte tester fanger bare opp omtrent 30–40 % av problemene
- Bruk APG-mønstre som referanse for riktige ARIA-implementasjoner
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 40
- Leksjoner
- 159
Ofte stilte spørsmål
Er leksjonen «Testing med skjermlesere» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien HTML Academy, inkludert «Testing med skjermlesere», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i HTML Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Testing med skjermlesere»?
Bruk VoiceOver og NVDA til å kontrollere ARIA-implementeringer Du øver på HTML Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med HTML Academy?
Ingen tidligere erfaring er nødvendig. HTML Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.
Hvor lang tid tar leksjonen «Testing med skjermlesere»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne HTML Academy-leksjonen?
Ja. Alle HTML Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- aria-expanded og aria-controls for brytere
- aria-selected og tab-mønstre
- Live-regioner aria-live aria-atomic aria-relevant
- Testing med skjermlesere