PricingLoginStart free
HTML Academy · Lektion

Test med skærmlæsere

Brug VoiceOver og NVDA til at kontrollere ARIA-implementeringer

Lektion 4 af 413 trin

Test med skærmlæsere er en gratis HTML Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i HTML Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. HTML Academy-kurset indeholder 4 lektioner i alt.

Hvorfor teste med skærmlæsere?

Automatiserede værktøjer finder kun 30-40 % af tilgængelighedsproblemer. Rigtige tests med skærmlæsere afslører problemer, som automatiserede kontroller overser:

  • Forvirrende læserækkefølge
  • Uhenseigtsmæssige ARIA-annonceringer
  • Manglende fokushåndtering
  • Forvirrende interaktionsmønstre

VoiceOver på Mac

VoiceOver er indbygget i macOS – installation er ikke 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 oplevelsen med en mobil skærmlæser ved hjælp af 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 skærmlæser med åben kildekode til 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)
-->

Tjekliste til test med skærmlæser

Det skal du kontrollere med en skærmlæser:

  • Sidens titel annonceres ved indlæsning
  • Overskrifter danner en logisk navigationsstruktur
  • Alle billeder har meningsfuld eller tom alt-tekst
  • Alle formularfelter har etiketter
  • Knapper og links har beskrivende navne
  • Fokuslåsen for modaler fungerer korrekt
  • Opdateringer af dynamisk indhold annonceres

Almindelige fejl i skærmlæsere

Problemer, som automatiserede tests overser:

<!-- 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 -->

Test med tastatur først

Før du bruger en skærmlæser, skal du først teste kun med tastaturet:

  1. Frakobl musen eller pegefeltet
  2. Navigér gennem hele siden med kun Tab
  3. Kontrollér, at alle interaktive elementer kan nås
  4. Kontrollér, at alle handlinger kan udføres med tastaturet

Automatiserede værktøjer til tilgængelighedstest

Supplér manuel test med automatiserede værktøjer:

  • axe DevTools – Chrome-udvidelse; det mest præcise automatiserede kontrolværktøj
  • WAVE – wavebooth.com; visuel overlejring på siden
  • Lighthouse – Chrome DevTools; revision af ydeevne og tilgængelighed
  • pa11y – CLI-værktøj; velegnet til CI/CD-arbejdsgange

Reference til ARIA-mønstre

W3C ARIA Authoring Practices Guide (APG) leverer referenceimplementeringer:

  • Harmonika, alarm, alarmdialog
  • Brødkrumme, knap, karusel
  • Afkrydsningsfelt, kombinationsfelt, dialog
  • Vis/skjul, feed, gitter
  • listbox, menu, menulinje
  • Faneblad, værktøjstip, trævisning

URL: w3.org/WAI/ARIA/apg/

Løbende integration af tilgængelighed

Indbyg tilgængelighedstest i din arbejdsgang:

// 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 WCAG2AA

Opsummering af test

En komplet strategi for tilgængelighedstest:

  1. Design – kontrollér farvekontrast og størrelser på berøringsmål
  2. Udvikling – tastaturtest og automatiseret axe-scanning
  3. Gennemgang – test med skærmlæser (VoiceOver + NVDA)
  4. CI/CD – pa11y eller axe i en automatiseret arbejdsgang
  5. Produktion – Lighthouse og manuelle stikprøver

Hurtigt tjek

Hvor stor en procentdel af tilgængelighedsproblemer kan automatiserede værktøjer pålideligt finde?

Besvar den i den interaktive lektion

Opsummering: test med skærmlæser

Det vigtigste om test:

  • VoiceOver (Mac/iOS) og NVDA (Windows) er gratis og nødvendige
  • Test først kun med tastaturet, og tilføj derefter en skærmlæser
  • Automatiserede værktøjer: axe, WAVE, Lighthouse, pa11y
  • Automatiserede tests finder kun cirka 30-40 % af problemerne
  • Brug APG-mønstre som reference for korrekte ARIA-implementeringer
Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser
40
Lektioner
159
Start gratisSe hele kurset

Ofte stillede spørgsmål

Er lektionen “Test med skærmlæsere” gratis?

Ja — alle 3 lektioner i læringssporet HTML Academy, inklusive “Test med skærmlæsere”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. HTML Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Test med skærmlæsere”?

Brug VoiceOver og NVDA til at kontrollere ARIA-implementeringer Du øver dig i HTML Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på HTML Academy?

Der kræves ingen tidligere erfaring. HTML Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.

Hvor lang tid tager lektionen “Test med skærmlæsere”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne HTML Academy-lektion?

Ja. Alle HTML Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

  1. aria-expanded og aria-controls til skifteknapper
  2. aria-selected og fanemønstre
  3. Liveområder: aria-live aria-atomic aria-relevant
  4. Test med skærmlæsere
← Tilbage til HTML Academy