PricingLoginStart free
Web Accessibility Academy logo
HTMLWebNiveauer A1 → B222 sprog

Web Accessibility Academy

Byg inkluderende websteder, som alle kan bruge. Få styr på semantisk HTML, ARIA, tastatur- og skærmlæserunderstøttelse samt overensstemmelse med WCAG 2.2. Et læringsforløb på CoddyKit med 30 korte kurser og 120 interaktive lektioner – med en AI-vejleder ved din side døgnet rundt.

Kurser
30
Lektioner
120
Interaktive trin
1,560
Gratis at komme i gang
Kursus 1
Kursusindhold

30 kurser på denne sti

Alle kurser på Web Accessibility Academy-stien i læringsrækkefølge. Det første kursus er gratis.

1

A14 lektionerGratis

Forklar, hvem tilgængelighed hjælper, og det forretningsmæssige og etiske grundlag for at bygge inkluderende

  1. 1Sådan ser funktionsnedsættelse virkelig ud på nettet
  2. 2Mød brugerne: Blinde, svagsynede, døve, motoriske og kognitive funktionsnedsættelser
  3. 3Hjælpemiddelteknologi 101: Skærmlæsere, kontakter, forstørrelsesglas
  4. +1 flere
Start gratis
2

A14 lektionerPRO

Anvend de fire WCAG-principper til at vurdere, om en side er tilgængelig

  1. 1Kan alle opfatte indholdet?
  2. 2Kan alle bruge kontrollerne?
  3. 3Er det læsbart og forudsigeligt?
  4. +1 flere
Start gratisLås op med PRO
3

A14 lektionerPRO

Vælg meningsfulde elementer, så siden er tilgængelig, før De tilføjer en eneste attribut

  1. 1Tags har betydning: Hvorfor div-suppe fejler
  2. 2T ektelementer: Afsnit, lister og fremhævelse
  3. 3Tilgængelighedstræet: Det, skærmlæsere hører
  4. +1 flere
Start gratisLås op med PRO
4

A14 lektionerPRO

Byg en logisk overskriftsstruktur, som brugere af skærmlæsere kan navigere efter

  1. 1Én h1 pr. side: Navngivning af hovedemnet
  2. 2Indlejringsniveauer uden at springe over
  3. 3Overskrifter er navigation, ikke bare stor tekst
  4. +1 flere
Start gratisLås op med PRO
5

A14 lektionerPRO

Brug landmark-områder, så brugerne kan springe direkte til den del, de har brug for

  1. 1header, nav, main, footer: De fire store
  2. 2Placér indhold i main – og kun ét main
  3. 3Navngiv flere områder med aria-label
  4. +1 flere
Start gratisLås op med PRO
6

A24 lektionerPRO

Skriv billedalternativer, der formidler betydning i stedet for at skabe støj

  1. 1Informativ eller dekorativ: Den første beslutning
  2. 2Skriv alt-tekst, der formidler formålet – ikke pixels
  3. 3Tom alt-tekst og det skjulte dekorative billede
  4. +1 flere
Start gratisLås op med PRO
7

A24 lektionerPRO

Vælg det rigtige interaktive element, så adfærd og semantik passer sammen

  1. 1Links fører steder hen, knapper udfører handlinger
  2. 2Linktekst, der giver mening uden kontekst
  3. 3Knapper, der fortæller, hvad de gør
  4. +1 flere
Start gratisLås op med PRO
8

A24 lektionerPRO

Byg formularer, hvor alle kontroller har et navn og er nemme at betjene

  1. 1Hvert input kræver et rigtigt label
  2. 2Placeholder er ikke en label
  3. 3Gruppér felter med fieldset og legend
  4. +1 flere
Start gratisLås op med PRO
9

A24 lektionerPRO

Sørg for, at tekst og brugerflade skiller sig tilstrækkeligt ud for brugere med nedsat syn eller farveblindhed

  1. 1Hvorfor kontrastforhold findes
  2. 2Opnå AA: Grænser for tekst og stor tekst
  3. 3Stol aldrig på farve alene
  4. +1 flere
Start gratisLås op med PRO
10

A24 lektionerPRO

Gør enhver interaktion tilgængelig og synlig udelukkende med tastaturet

  1. 1Tab, Shift+Tab, Enter, Space: De vigtigste taster
  2. 2Synligt fokus: Skjul aldrig omridset
  3. 3Logisk tabulatorrækkefølge følger indholdet
  4. +1 flere
Start gratisLås op med PRO
11

B14 lektionerPRO

Brug ARIA korrekt til at tilføje betydning, som native HTML ikke kan udtrykke

  1. 1Den første regel: Ingen ARIA er bedre end dårlig ARIA
  2. 2Roller definerer, hvad en ting er
  3. 3Tilstande og egenskaber: expanded, checked, disabled
  4. +1 flere
Start gratisLås op med PRO
12

B14 lektionerPRO

Styr præcis, hvad hjælpemiddelteknologi annoncerer for ethvert element

  1. 1Beregning af det tilgængelige navn forklaret
  2. 2aria-label vs aria-labelledby
  3. 3aria-describedby til ekstra kontekst
  4. +1 flere
Start gratisLås op med PRO
13

B14 lektionerPRO

Flyt og afgræns fokus, så dynamiske grænseflader forbliver brugbare

  1. 1tabindex 0, -1 og aldrig positive værdier
  2. 2Flyt fokus efter en handling
  3. 3Gendan fokus, når et lag lukkes
  4. +1 flere
Start gratisLås op med PRO
14

B14 lektionerPRO

Lad tastaturbrugere springe forbi gentaget indhold til det, der betyder noget

  1. 1Derfor findes Skip to Main Content
  2. 2Byg et Skip Link, der faktisk virker
  3. 3Skjult visuelt indtil fokus
  4. +1 flere
Start gratisLås op med PRO
15

B14 lektionerPRO

Rapportér formularfejl, så alle brugere kan finde og rette dem

  1. 1Knyt fejl til felter med aria-describedby
  2. 2Markér ugyldig tilstand med aria-invalid
  3. 3Flyt fokus til den første fejl
  4. +1 flere
Start gratisLås op med PRO
16

B14 lektionerPRO

Markup tabeller, så forholdet mellem celler og overskrifter er tydeligt

  1. 1th, scope og caption-elementet
  2. 2Række- og kolonneoverskrifter gjort rigtigt
  3. 3Komplekse tabeller: sammenkobling af headers og id
  4. +1 flere
Start gratisLås op med PRO
17

B14 lektionerPRO

Eksponér meningsfuld grafik, og skjul grafik, der udelukkende er dekorativ

  1. 1Inline-SVG: role img og en title
  2. 2Skjul dekorative ikoner med aria-hidden
  3. 3Ikonknapper, der stadig har et navn
  4. +1 flere
Start gratisLås op med PRO
18

B14 lektionerPRO

Byg dialoger, der fastholder fokus, lukkes korrekt og annoncerer sig selv

  1. 1Dialogroller og det indbyggede dialog-element
  2. 2Fasthold fokus i modalen
  3. 3Escape for at lukke og gendanne fokus
  4. +1 flere
Start gratisLås op med PRO
19

B14 lektionerPRO

Implementér almindelige disclosure-widgets med korrekt ARIA og tastaturunderstøttelse

  1. 1Fane-mønsteret: tablist, tab, tabpanel
  2. 2Navigation mellem faner med piletaster
  3. 3Accordions med Button og aria-expanded
  4. +1 flere
Start gratisLås op med PRO
20

B14 lektionerPRO

Test dit eget arbejde, sådan som blinde brugere faktisk oplever det

  1. 1Aktivér NVDA, VoiceOver og TalkBack
  2. 2De vigtigste bevægelser og genvejstaster
  3. 3Gennemsynstilstand eller fokustilstand
  4. +1 flere
Start gratisLås op med PRO
21

B24 lektionerPRO

Knyt virkelige succeskriterier til konkrete rettelser for et AA-kompatibelt website

  1. 1A, AA, AAA: Vælg det rigtige mål
  2. 2Tilføjelserne i 2.2: Fokusudseende og målestørrelse
  3. 3Trækbevægelser og tilgængelig godkendelse
  4. +1 flere
Start gratisLås op med PRO
22

B24 lektionerPRO

Hold single-page-apps tilgængelige trods client-side-routing og gen-renderinger

  1. 1Skift mellem ruter uden genindlæsning af siden
  2. 2Håndtér fokus med refs og useEffect
  3. 3Fragments, Portals og fælden med DOM-rækkefølgen
  4. +1 flere
Start gratisLås op med PRO
23

B24 lektionerPRO

Underret skærmlæserbrugere om ændringer, der sker uden en genindlæsning

  1. 1polite eller assertive: Vælg hastende karakter
  2. 2status-, alert- og log-roller
  3. 3Annoncér toastbeskeder, indlæsere og tællere
  4. +1 flere
Start gratisLås op med PRO
24

B24 lektionerPRO

Byg robuste brugerdefinerede widgets ved at følge gennemprøvede APG-mønstre

  1. 1Læs APG: Mønster, taster og eksempler
  2. 2Combobox og autocomplete gjort rigtigt
  3. 3Menu, menulinje og menuknappen
  4. +1 flere
Start gratisLås op med PRO
25

B24 lektionerPRO

Respektér bevægelsespræferencer, og undgå at udløse ubehag eller anfald

  1. 1prefers-reduced-motion i CSS og JS
  2. 2Vestibulære lidelser og risici ved parallakse
  3. 3Trefaldstærsklen for anfald
  4. +1 flere
Start gratisLås op med PRO
26

B24 lektionerPRO

Gør diagrammer og grafer forståelige ud over farve og form

  1. 1Alle diagrammer har brug for et tekstalternativ
  2. 2Data-tabellens fallback
  3. 3Farve, mønster og direkte etiketter
  4. +1 flere
Start gratisLås op med PRO
27

B24 lektionerPRO

Find automatisk en hel klasse af tilgængelighedsfejl i din pipeline

  1. 1Hvad automatisering kan og ikke kan finde
  2. 2Scan med axe DevTools og Lighthouse
  3. 3Integrér axe-core i Playwright-tests
  4. +1 flere
Start gratisLås op med PRO
28

B24 lektionerPRO

Gennemfør en struktureret manuel audit, og prioritér de rettelser, der betyder noget

  1. 1Byg en manuel audit-arbejdsgang
  2. 2Prioritering efter alvor og påvirkning
  3. 3Skriv fejlrapporter, udviklere kan handle på
  4. +1 flere
Start gratisLås op med PRO
29

B24 lektionerPRO

Forstå de love og standarder, der gør tilgængelighed til en del af roadmap'et

  1. 1ADA, Section 508 og amerikanske retssager om webtilgængelighed
  2. 2European Accessibility Act og EN 301 549
  3. 3WCAG som fælles juridisk målestok
  4. +1 flere
Start gratisLås op med PRO
30

B24 lektionerPRO

Forankr tilgængelighed i Deres team, så den lever videre efter ét projekt.

  1. 1Shift Left: a11y i design og tickets
  2. 2En Definition of Done, der inkluderer a11y
  3. 3En praktisk tilgængelighedstjekliste pr. funktion
  4. +1 flere
Start gratisLås op med PRO
CoddyKit PRO

Lås op for alle 30 kurser på denne sti og alle kurser på alle andre stier

AI-vejleder, certificeringseksamen og certifikat. Fungerer på web, iOS og Android.

Se alle abonnementer
Årligt$29.90 / årCa. $2.49 om månedenBetal én gangLivstid$69.99 én gangIngen fornyelser. PRO for altid.
Kursusoversigt

Webtilgængelighed (a11y): Byg til alle

Byg inkluderende websteder, som alle kan bruge. Få styr på semantisk HTML, ARIA, tastatur- og skærmlæserunderstøttelse samt overensstemmelse med WCAG 2.2. Dette forløb dækker 30 progressive minikurser fra helt nybegynder (A1) til avanceret (B2) med korte, fokuserede lektioner og hurtige quizzer, der hjælper dig med at forankre hvert koncept.

Det lærer du

Du begynder med det grundlæggende og bygger videre gennem mellemliggende og avancerede emner, hvor hvert kursus bygger på det forrige. Alle lektioner er praktiske og overskuelige, og en AI-vejleder står til rådighed døgnet rundt, når du har brug for hjælp.

Sådan fungerer det

Hvert kursus er opdelt i fire fokuserede lektioner i et overskueligt format. Gennemfør et par lektioner om dagen, så mestrer du hele forløbet på uger i stedet for måneder.

Værktøjer

Øv dig med AI – læs ikke bare

Få mere ud af din læring med AI-drevne værktøjer og funktioner

AI-chatChat med en AI-underviserStil et superspørgsmålFå svar på ekspertniveauPROOpret lektionAI-drevet værktøj til at oprette lektionerPROStart certificeringseksamenFå dit certifikatPROStart udfordringAfprøv dine færdigheder

Sådan lærer du

  1. 01

    Interaktive lektioner

    Praktiske kodeøvelser med feedback i realtid

  2. 02

    AI-underviser

    Få øjeblikkelig hjælp fra vores AI, når du sidder fast

  3. 03

    Indbygget editor

    Skriv og kør kode direkte i din browser

  4. 04

    Certifikat

    Få et certifikat, når du gennemfører kurset

Udforsk videre

Relaterede læringsstier

Angular Academy logoAngular AcademyLearn Angular to build scalable and modern web applications with Angular Academy.Frontend Academy logoFrontend AcademyDevelop visually stunning and responsive websites with Frontend Development Academy.HTML for Kids logoHTML for KidsIntroduce kids to web development with fun and easy HTML lessons at HTML for Kids.HTML Academy logoHTML AcademyBuild strong foundations in web development by learning HTML at HTML Academy.Micro Frontends Architecture with Module Federation logoMikrofrontendarkitektur med Module FederationMaster Micro Frontends architecture using Module Federation to build scalable and indepen…Vue Academy logoVue AcademyCreate interactive and efficient user interfaces with Vue.js through Vue Academy.
Ofte stillede spørgsmål

Ofte stillede spørgsmål

Er Web Accessibility Academy-kurset gratis?

Ja. Du kan begynde på Web Accessibility Academy-kurset gratis og gennemføre de interaktive lektioner uden omkostninger. Et valgfrit PRO-abonnement giver adgang til avancerede AI-værktøjer og et certifikat, der kan deles.

Skal jeg have erfaring på forhånd for at lære HTML?

Nej. Kurset begynder med det grundlæggende og bevæger sig gradvist videre til mere avancerede emner, så du kan starte uden tidligere erfaring med HTML.

Hvordan lærer jeg HTML på CoddyKit?

Du lærer ved at øve dig. Korte interaktive lektioner kombinerer en tydelig forklaring med en praktisk kodeøvelse, der kører i realtid, og en AI-vejleder, der er tilgængelig døgnet rundt, hjælper dig personligt, når du sidder fast.

Får jeg et certifikat, når jeg gennemfører Web Accessibility Academy?

Ja. PRO-brugere kan tage en eksamen og få et certifikat for gennemførelse af Web Accessibility Academy-kurset, som kan deles og indeholder en verificerbar kode.

Kan jeg lære HTML på min telefon?

Ja. CoddyKit er tilgængeligt på nettet og som indbyggede iOS- og Android-apps, så du kan lære HTML på enhver enhed, og dine fremskridt synkroniseres på tværs af dem.

Hvad koster CoddyKit PRO?

Det første kursus på Web Accessibility Academy-stien er gratis. CoddyKit PRO giver adgang til alle kurser: $5.90 om ugen, $7.90 om måneden, $29.90 om året eller $69.99 én gang for livstidsadgang uden fornyelser.

Hvor lang tid tager det at gennemføre Web Accessibility Academy?

Web Accessibility Academy har 30 kurser og 120 lektioner. De fleste lektioner tager cirka 5–10 minutter, så hele stien kræver omkring 14 timers praktisk øvelse i dit eget tempo.

Start på Web Accessibility Academy nu

Slut dig til tusindvis af kursister, der mestrer programmering med AI-drevne lektioner.

Start gratisSe alle kurser