PricingLoginStart free
Web Accessibility Academy logo
HTMLNettNivåer A1 → B222 språk

Web Accessibility Academy

Bygg inkluderende nettsteder som alle kan bruke. Lær deg semantisk HTML, ARIA, støtte for tastatur og skjermlesere samt samsvar med WCAG 2.2. En læringssti fra CoddyKit med 30 korte kurs og 120 interaktive leksjoner, med en AI-veileder tilgjengelig døgnet rundt.

Kurs
30
Leksjoner
120
Interaktive trinn
1,560
Gratis å komme i gang
Kurs 1
Kursinnhold

30 kurs i denne læringsstien

Alle kursene i læringsstien Web Accessibility Academy, i læringsrekkefølge. Det første er gratis.

1

A14 leksjonerGratis

Forklar hvem tilgjengelighet hjelper, og det forretningsmessige og etiske grunnlaget for inkluderende utvikling.

  1. 1Hva funksjonsnedsettelser faktisk innebærer på nettet
  2. 2Møt brukerne: blinde, svaksynte, døve, bevegelseshemmede og kognitivt funksjonshemmede
  3. 3Hjelpemiddelteknologi 101: Skjermlesere, brytere og forstørrere
  4. +1 flere
Start læringen gratis
2

A14 leksjonerPRO

Bruk de fire WCAG-prinsippene til å vurdere om en side er tilgjengelig.

  1. 1Sansbar: Kan alle oppfatte innholdet?
  2. 2Betjenbar: Kan alle bruke kontrollene?
  3. 3Forståelig: Er det lesbart og forutsigbart?
  4. +1 flere
Start læringen gratisLås opp med PRO
3

A14 leksjonerPRO

Velg meningsfulle elementer slik at siden er tilgjengelig før De legger til ett eneste attributt.

  1. 1Tagger har betydning: Hvorfor div-suppe mislykkes
  2. 2Tekstelementer: Avsnitt, lister og fremheving
  3. 3Tilgjengelighetstreet: Det skjermlesere hører
  4. +1 flere
Start læringen gratisLås opp med PRO
4

A14 leksjonerPRO

Bygg en logisk oversiktsstruktur for overskrifter som skjermleserbrukere kan navigere etter.

  1. 1Én h1 per side: Gi hovedtemaet et navn
  2. 2Nestingsnivåer uten å hoppe over nivåer
  3. 3Overskrifter er navigasjon, ikke bare stor tekst
  4. +1 flere
Start læringen gratisLås opp med PRO
5

A14 leksjonerPRO

Bruk landemerkeregioner slik at brukerne kan gå rett til delen de trenger.

  1. 1header, nav, main, footer: De fire store
  2. 2Plasser innhold i main – og bare én main
  3. 3Gi flere områder navn med aria-label
  4. +1 flere
Start læringen gratisLås opp med PRO
6

A24 leksjonerPRO

Skriv bildealternativer som formidler mening i stedet for å skape støy.

  1. 1Informativ kontra dekorativ: Den første avgjørelsen
  2. 2Skriv alt-tekst som formidler hensikten, ikke pikslene
  3. 3Tom alt-tekst og det skjulte dekorative bildet
  4. +1 flere
Start læringen gratisLås opp med PRO
7

A24 leksjonerPRO

Velg riktig interaktivt element, slik at atferd og semantikk stemmer overens.

  1. 1Lenker går steder, knapper gjør ting
  2. 2Lenketekst som gir mening uten kontekst
  3. 3Knapper som forteller hva de gjør
  4. +1 flere
Start læringen gratisLås opp med PRO
8

A24 leksjonerPRO

Bygg skjemaer der hver kontroll har et navn og er enkel å bruke.

  1. 1Alle inndatafelt trenger en ekte label
  2. 2Placeholder er ikke en etikett
  3. 3Gruppér felt med fieldset og legend
  4. +1 flere
Start læringen gratisLås opp med PRO
9

A24 leksjonerPRO

Sørg for at tekst og brukergrensesnitt skiller seg tydelig nok ut for svaksynte og fargeblinde brukere.

  1. 1Hvorfor kontrastforhold finnes
  2. 2Nå AA-kravene: Terskler for tekst og stor tekst
  3. 3Stol aldri på farge alene
  4. +1 flere
Start læringen gratisLås opp med PRO
10

A24 leksjonerPRO

Gjør alle interaksjoner tilgjengelige og synlige med bare tastaturet.

  1. 1Tab, Shift+Tab, Enter, Space: De viktigste tastene
  2. 2Synlig fokus: Skjul aldri omrisset
  3. 3Logisk tab-rekkefølge følger innholdet
  4. +1 flere
Start læringen gratisLås opp med PRO
11

B14 leksjonerPRO

Bruk ARIA riktig for å tilføre betydning som innebygd HTML ikke kan uttrykke.

  1. 1Den første regelen: Ingen ARIA er bedre enn dårlig ARIA
  2. 2Roller definerer hva en ting er
  3. 3Tilstander og egenskaper: expanded, checked, disabled
  4. +1 flere
Start læringen gratisLås opp med PRO
12

B14 leksjonerPRO

Styr nøyaktig hva hjelpemiddelteknologi kunngjør for ethvert element.

  1. 1Beregning av tilgjengelig navn, forklart
  2. 2aria-label kontra aria-labelledby
  3. 3aria-describedby for ekstra kontekst
  4. +1 flere
Start læringen gratisLås opp med PRO
13

B14 leksjonerPRO

Flytt og avgrens fokus slik at dynamiske grensesnitt forblir brukbare.

  1. 1tabindex 0, -1 og aldri positive verdier
  2. 2Flytte fokus etter en handling
  3. 3Returnere fokus når et lag lukkes
  4. +1 flere
Start læringen gratisLås opp med PRO
14

B14 leksjonerPRO

La tastaturbrukere hoppe forbi gjentatt innhold til det som er viktig.

  1. 1Hvorfor «Hopp til hovedinnhold» finnes
  2. 2Bygge en hoppelenke som faktisk fungerer
  3. 3Skjult visuelt til det får fokus
  4. +1 flere
Start læringen gratisLås opp med PRO
15

B14 leksjonerPRO

Presenter skjemafeil slik at alle brukere kan finne og rette dem.

  1. 1Knytte feil til felt med aria-describedby
  2. 2Markere ugyldig tilstand med aria-invalid
  3. 3Flytte fokus til den første feilen
  4. +1 flere
Start læringen gratisLås opp med PRO
16

B14 leksjonerPRO

Merk opp tabeller slik at forholdet mellom celler og overskrifter er tydelig.

  1. 1th, scope og caption-elementet
  2. 2Rad- og kolonneoverskrifter på riktig måte
  3. 3Komplekse tabeller: koble headers og id
  4. +1 flere
Start læringen gratisLås opp med PRO
17

B14 leksjonerPRO

Gjør meningsfull grafikk tilgjengelig, og skjul grafikk som bare er dekorativ.

  1. 1Inline-SVG: role img og en title
  2. 2Skjule dekorative ikoner med aria-hidden
  3. 3Ikonknapper som fortsatt har et navn
  4. +1 flere
Start læringen gratisLås opp med PRO
18

B14 leksjonerPRO

Bygg dialogbokser som holder fokus, lukkes ryddig og annonserer seg selv.

  1. 1Dialogroller og det innebygde dialog-elementet
  2. 2Fange fokus inne i modalen
  3. 3Escape for å lukke og gjenopprette fokus
  4. +1 flere
Start læringen gratisLås opp med PRO
19

B14 leksjonerPRO

Implementer vanlige visningskomponenter med riktig ARIA og riktige taster.

  1. 1Fanemønsteret: tablist, tab, tabpanel
  2. 2Navigere mellom faner med piltastene
  3. 3Trekkspill med Button og aria-expanded
  4. +1 flere
Start læringen gratisLås opp med PRO
20

B14 leksjonerPRO

Test Deres eget arbeid slik blinde brukere faktisk opplever det.

  1. 1Slå på NVDA, VoiceOver og TalkBack
  2. 2De viktigste bevegelsene og hurtigtastene
  3. 3Utforskingsmodus kontra fokusmodus
  4. +1 flere
Start læringen gratisLås opp med PRO
21

B24 leksjonerPRO

Knytt reelle suksesskriterier til konkrete forbedringer for et AA-kompatibelt nettsted.

  1. 1A, AA, AAA: Velg riktig mål
  2. 2Tilleggene i 2.2: Fokussynlighet og målestørrelse
  3. 3Dra-bevegelser og tilgjengelig autentisering
  4. +1 flere
Start læringen gratisLås opp med PRO
22

B24 leksjonerPRO

Hold enkeltsideapplikasjoner tilgjengelige til tross for klientbasert ruting og nye gjengivelser.

  1. 1Ruteendringer uten omlasting av siden
  2. 2Håndtere fokus med Refs og useEffect
  3. 3Fragments, Portals og fellen med DOM-rekkefølge
  4. +1 flere
Start læringen gratisLås opp med PRO
23

B24 leksjonerPRO

Varsle skjermleserbrukere om endringer som skjer uten en ny innlasting.

  1. 1polite kontra assertive: Velge hvor påtrengende det skal være
  2. 2status-, alert- og log-roller
  3. 3Kunngjøre toast-meldinger, innlastinger og antall
  4. +1 flere
Start læringen gratisLås opp med PRO
24

B24 leksjonerPRO

Bygg robuste egendefinerte komponenter ved å følge utprøvde APG-mønstre.

  1. 1Lese APG: Mønstre, taster og eksempler
  2. 2Combobox og autoutfylling på riktig måte
  3. 3Meny, menylinje og menyknappen
  4. +1 flere
Start læringen gratisLås opp med PRO
25

B24 leksjonerPRO

Respekter bevegelsespreferanser og unngå å utløse ubehag eller anfall.

  1. 1prefers-reduced-motion i CSS og JS
  2. 2Vestibulære lidelser og risikoen ved parallakse
  3. 3Treblitsgrensen for anfall
  4. +1 flere
Start læringen gratisLås opp med PRO
26

B24 leksjonerPRO

Gjør diagrammer og grafer forståelige utover farge og form.

  1. 1Alle diagrammer trenger et tekstalternativ
  2. 2Reservevisningen for datatabeller
  3. 3Farge, mønster og direkte etiketter
  4. +1 flere
Start læringen gratisLås opp med PRO
27

B24 leksjonerPRO

Oppdag en klasse tilgjengelighetsfeil automatisk i pipelinen Deres.

  1. 1Hva automatisering kan og ikke kan fange opp
  2. 2Skanning med axe DevTools og Lighthouse
  3. 3Koble axe-core inn i Playwright-tester
  4. +1 flere
Start læringen gratisLås opp med PRO
28

B24 leksjonerPRO

Gjennomfør en strukturert manuell revisjon og prioriter de viktigste forbedringene.

  1. 1Bygge en arbeidsflyt for manuell revisjon
  2. 2Prioritering etter alvorlighetsgrad og påvirkning
  3. 3Skrive feilrapporter utviklere kan handle på
  4. +1 flere
Start læringen gratisLås opp med PRO
29

B24 leksjonerPRO

Forstå lovene og standardene som gjør tilgjengelighet til en del av veikartet.

  1. 1ADA, Section 508 og amerikanske søksmål om nettilgjengelighet
  2. 2European Accessibility Act og EN 301 549
  3. 3WCAG som felles juridisk målestokk
  4. +1 flere
Start læringen gratisLås opp med PRO
30

B24 leksjonerPRO

Forankre tilgjengelighet i teamet, slik at den varer lenger enn ett prosjekt.

  1. 1Shift left: a11y i design og oppgaver
  2. 2En ferdigdefinisjon som inkluderer a11y
  3. 3En praktisk tilgjengelighetssjekkliste for hver funksjon
  4. +1 flere
Start læringen gratisLås opp med PRO
CoddyKit PRO

Lås opp alle 30 kursene i denne læringsstien og alle andre læringsstier

AI-veileder, sertifiseringseksamen og sertifikat. Fungerer på web, iOS og Android.

Se alle abonnementene
Årlig$29.90 / årOmtrent $2.49 per månedBetal én gangLivstid$69.99 én gangIngen fornyelser. PRO for alltid.
Kursoversikt

Webtilgjengelighet (a11y): Bygg for alle

Bygg inkluderende nettsteder som alle kan bruke. Lær deg semantisk HTML, ARIA, støtte for tastatur og skjermlesere samt samsvar med WCAG 2.2. Dette læringsløpet består av 30 gradvis oppbygde minikurs, fra helt nybegynnernivå (A1) til avansert nivå (B2), med korte, fokuserte leksjoner og raske quizer som hjelper deg å befeste hvert konsept.

Dette lærer du

Du begynner med grunnleggende konsepter og bygger deg opp gjennom temaer på mellomnivå og avansert nivå, der hvert kurs bygger på det forrige. Alle leksjonene er praktiske og delt inn i passe store biter, og en AI-veileder er tilgjengelig døgnet rundt når du trenger hjelp.

Slik fungerer det

Hvert kurs er delt inn i fire fokuserte leksjoner i passe store biter. Gjennomfør noen leksjoner om dagen, så behersker du hele læringsløpet på uker, ikke måneder.

Verktøy

Øv med AI, ikke bare les

Få mer ut av læringen med AI-drevne verktøy og funksjoner

AI-chatChat med AI-veilederenStill et superspørsmålFå svar på ekspertnivåPROOpprett leksjonAI-drevet leksjonsbyggerPROStart sertifiseringseksamenFå sertifikatet dittPROStart utfordringTest ferdighetene dine

Slik lærer du

  1. 01

    Interaktive leksjoner

    Praktiske kodeøvelser med tilbakemelding i sanntid

  2. 02

    AI-veileder

    Få øyeblikkelig hjelp fra AI-en vår når du står fast

  3. 03

    Innebygd kodeeditor

    Skriv og kjør kode direkte i nettleseren

  4. 04

    Sertifikat

    Få et sertifikat når du fullfører kurset

Fortsett å utforske

Relaterte 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 logoMikrofrontend-arkitektur 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.
FAQ

Ofte stilte spørsmål

Er kurset i Web Accessibility Academy gratis?

Ja. Du kan starte på kurset i Web Accessibility Academy gratis og fullføre de interaktive leksjonene uten kostnad. Et valgfritt PRO-abonnement låser opp avanserte AI-verktøy og et delbart sertifikat.

Trenger jeg tidligere erfaring for å lære HTML?

Nei. Kurset begynner med det grunnleggende og går gradvis videre til mer avanserte emner, slik at du kan starte selv uten tidligere erfaring med HTML.

Hvordan lærer jeg HTML på CoddyKit?

Du lærer gjennom praksis. Korte, interaktive leksjoner kombinerer en tydelig forklaring med en praktisk kodeøvelse som kjører i sanntid, og en AI-veileder som er tilgjengelig døgnet rundt, gir deg personlig hjelp når du står fast.

Får jeg et sertifikat når jeg fullfører Web Accessibility Academy?

Ja. PRO-brukere kan ta en eksamen og få et delbart fullføringssertifikat med en verifiserbar kode for kurset i Web Accessibility Academy.

Kan jeg lære HTML på telefonen?

Ja. CoddyKit er tilgjengelig på nettet og som native iOS- og Android-apper, slik at du kan lære HTML på alle enheter, mens fremdriften synkroniseres mellom dem.

Hvor mye koster CoddyKit PRO?

Det første kurset i Web Accessibility Academy er gratis. CoddyKit PRO gir tilgang til alle kurs: $5.90 per uke, $7.90 per måned, $29.90 per år eller $69.99 én gang for tilgang på livstid uten fornyelser.

Hvor lang tid tar det å fullføre Web Accessibility Academy?

Web Accessibility Academy består av 30 kurs og 120 leksjoner. De fleste leksjonene tar omtrent 5–10 minutter, så hele læringsstien tar rundt 14 timer med praktisk øving i eget tempo.

Start på Web Accessibility Academy nå

Bli med tusenvis av elever som lærer programmering med AI-drevne leksjoner.

Start læringen gratisSe alle kurs