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

Web Accessibility Academy

Bygg inkluderande webbplatser som alla kan använda. Lär Dig semantisk HTML, ARIA, stöd för tangentbord och skärmläsare samt uppfyllnad av WCAG 2.2. En lärstig från CoddyKit med 30 korta kurser och 120 interaktiva lektioner, med en AI-handledare till hands dygnet runt.

Kurser
30
Lektioner
120
Interaktiva steg
1,560
Gratis att börja
Kurs 1
Kursplan

30 kurser i den här lärvägen

Alla kurser i lärvägen Web Accessibility Academy, i rätt ordning. Den första är gratis.

1

A14 lektionerGratis

Förklara vilka tillgänglighet hjälper samt de affärsmässiga och etiska skälen till att bygga inkluderande

  1. 1Så ser funktionsnedsättning verkligen ut på webben
  2. 2Möt användarna: blinda, synsvaga, döva, motoriska och kognitiva funktionsnedsättningar
  3. 3Hjälpmedel 101: skärmläsare, reglage och förstoringsverktyg
  4. +1 till
Börja lära dig gratis
2

A14 lektionerPRO

Tillämpa WCAG:s fyra principer för att bedöma om en sida är tillgänglig

  1. 1Märkbar: kan alla uppfatta innehållet?
  2. 2Hanterbar: kan alla använda kontrollerna?
  3. 3Begriplig: är den läsbar och förutsägbar?
  4. +1 till
Börja lära dig gratisLås upp med PRO
3

A14 lektionerPRO

Välj meningsfulla element så att sidan är tillgänglig innan ni lägger till ett enda attribut

  1. 1Taggar har betydelse: varför div-soppa misslyckas
  2. 2Textelement: stycken, listor och betoning
  3. 3Tillgänglighetsträdet: vad skärmläsare hör
  4. +1 till
Börja lära dig gratisLås upp med PRO
4

A14 lektionerPRO

Bygg en logisk rubrikhierarki som skärmläsaranvändare kan navigera med

  1. 1Ett h1-element per sida: namnge huvudämnet
  2. 2Nivåindelning utan att hoppa över steg
  3. 3Rubriker är navigering, inte bara stor text
  4. +1 till
Börja lära dig gratisLås upp med PRO
5

A14 lektionerPRO

Använd landmärkesregioner så att användare kan hoppa direkt till den del de behöver

  1. 1header, nav, main, footer: de fyra stora
  2. 2Placera innehåll i main och använd bara ett main-element
  3. 3Namnge flera regioner med aria-label
  4. +1 till
Börja lära dig gratisLås upp med PRO
6

A24 lektionerPRO

Skriv bildalternativ som förmedlar betydelse i stället för att skapa brus

  1. 1Informativ eller dekorativ: det första beslutet
  2. 2Skriv alt-text som förmedlar syftet, inte pixlarna
  3. 3Tom alt-text och den dolda dekorativa bilden
  4. +1 till
Börja lära dig gratisLås upp med PRO
7

A24 lektionerPRO

Välj rätt interaktivt element så att beteende och semantik stämmer överens

  1. 1Länkar leder någonstans, knappar gör något
  2. 2Länktext som fungerar även utan sammanhang
  3. 3Knappar som tydligt meddelar vad de gör
  4. +1 till
Börja lära dig gratisLås upp med PRO
8

A24 lektionerPRO

Bygg formulär där varje kontroll har ett namn och är enkel att använda

  1. 1Varje indatafält behöver ett riktigt label-element
  2. 2Placeholder är inte en etikett
  3. 3Gruppera fält med fieldset och legend
  4. +1 till
Börja lära dig gratisLås upp med PRO
9

A24 lektionerPRO

Säkerställ att text och gränssnittselement framträder tillräckligt för användare med nedsatt syn eller färgblindhet

  1. 1Varför kontrastförhållanden finns
  2. 2Nå AA: gränsvärden för text och stor text
  3. 3Förlita dig aldrig på färg ensam
  4. +1 till
Börja lära dig gratisLås upp med PRO
10

A24 lektionerPRO

Gör varje interaktion nåbar och synlig med endast tangentbordet

  1. 1Tabb, Skift+Tabb, Enter, blanksteg: de viktigaste tangenterna
  2. 2Synligt fokus: dölj aldrig konturen
  3. 3Logisk tabb-ordning följer innehållet
  4. +1 till
Börja lära dig gratisLås upp med PRO
11

B14 lektionerPRO

Använd ARIA korrekt för att tillföra betydelse som inbyggd HTML inte kan uttrycka

  1. 1Den första regeln: ingen ARIA slår dålig ARIA
  2. 2Roller definierar vad något är
  3. 3Tillstånd och egenskaper: expanded, checked, disabled
  4. +1 till
Börja lära dig gratisLås upp med PRO
12

B14 lektionerPRO

Styr exakt vad hjälpmedel meddelar för vilket element som helst

  1. 1Beräkningen av det tillgängliga namnet, förklarad
  2. 2aria-label jämfört med aria-labelledby
  3. 3aria-describedby för extra sammanhang
  4. +1 till
Börja lära dig gratisLås upp med PRO
13

B14 lektionerPRO

Flytta och begränsa fokus så att dynamiska gränssnitt förblir användbara

  1. 1tabindex 0, -1 och aldrig positiva värden
  2. 2Flytta fokus efter en åtgärd
  3. 3Återställ fokus när ett lager stängs
  4. +1 till
Börja lära dig gratisLås upp med PRO
14

B14 lektionerPRO

Låt tangentbordsanvändare hoppa förbi upprepat innehåll till det som är viktigt

  1. 1Varför Hoppa till huvudinnehåll finns
  2. 2Bygg en hopplänk som faktiskt fungerar
  3. 3Dold tills fokus placeras där
  4. +1 till
Börja lära dig gratisLås upp med PRO
15

B14 lektionerPRO

Rapportera formulärfel så att alla användare kan hitta och åtgärda dem

  1. 1Koppla fel till fält med aria-describedby
  2. 2Markera ogiltigt tillstånd med aria-invalid
  3. 3Flytta fokus till det första felet
  4. +1 till
Börja lära dig gratisLås upp med PRO
16

B14 lektionerPRO

Märk upp tabeller så att relationen mellan celler och rubriker är tydlig

  1. 1th, scope och caption-elementet
  2. 2Rad- och kolumnrubriker på rätt sätt
  3. 3Komplexa tabeller: koppling mellan headers och id
  4. +1 till
Börja lära dig gratisLås upp med PRO
17

B14 lektionerPRO

Exponera meningsfull grafik och dölj sådant som enbart är dekorativt

  1. 1Inline-SVG: role img och en title
  2. 2Dölj dekorativa ikoner med aria-hidden
  3. 3Ikonknappar som fortfarande har ett namn
  4. +1 till
Börja lära dig gratisLås upp med PRO
18

B14 lektionerPRO

Bygg dialogrutor som fångar fokus, stängs korrekt och meddelar sin existens

  1. 1Dialogroller och det inbyggda dialog-elementet
  2. 2Lås fokus inuti modalen
  3. 3Stäng med Escape och återställ fokus
  4. +1 till
Börja lära dig gratisLås upp med PRO
19

B14 lektionerPRO

Implementera vanliga utfällningskomponenter med korrekt ARIA och tangentbordsstöd

  1. 1Flikmönstret: tablist, tab, tabpanel
  2. 2Navigera mellan flikar med piltangenter
  3. 3Utfällbara paneler med knapp och aria-expanded
  4. +1 till
Börja lära dig gratisLås upp med PRO
20

B14 lektionerPRO

Testa ert eget arbete så som blinda användare faktiskt upplever det

  1. 1Starta NVDA, VoiceOver och TalkBack
  2. 2De viktigaste gesterna och kortkommandona
  3. 3Bläddringsläge jämfört med fokusläge
  4. +1 till
Börja lära dig gratisLås upp med PRO
21

B24 lektionerPRO

Koppla verkliga framgångskriterier till konkreta åtgärder för en AA-kompatibel webbplats

  1. 1A, AA, AAA: välj rätt mål
  2. 2Tilläggen i 2.2: fokusutseende och målstorlek
  3. 3Dragrörelser och tillgänglig autentisering
  4. +1 till
Börja lära dig gratisLås upp med PRO
22

B24 lektionerPRO

Håll ensidesappar tillgängliga trots klientbaserad routning och omrenderingar

  1. 1Hantera ruttbyten utan omladdning av sidan
  2. 2Hantera fokus med refs och useEffect
  3. 3Fragment, portaler och fällan med DOM-ordningen
  4. +1 till
Börja lära dig gratisLås upp med PRO
23

B24 lektionerPRO

Meddela skärmläsaranvändare om ändringar som sker utan omladdning

  1. 1polite jämfört med assertive: välj hur brådskande det är
  2. 2Rollerna status, alert och log
  3. 3Meddela toast-meddelanden, laddare och antal
  4. +1 till
Börja lära dig gratisLås upp med PRO
24

B24 lektionerPRO

Bygg robusta anpassade komponenter genom att följa beprövade APG-mönster

  1. 1Läsa APG: mönster, tangenter och exempel
  2. 2Combobox och autocomplete på rätt sätt
  3. 3Meny, menyrad och menyknappen
  4. +1 till
Börja lära dig gratisLås upp med PRO
25

B24 lektionerPRO

Respektera rörelseinställningar och undvik att utlösa obehag eller krampanfall

  1. 1prefers-reduced-motion i CSS och JS
  2. 2Vestibulära sjukdomar och risker med parallax
  3. 3Tröskeln på tre blinkningar för epileptiska anfall
  4. +1 till
Börja lära dig gratisLås upp med PRO
26

B24 lektionerPRO

Gör diagram och grafer begripliga även bortom färg och form

  1. 1Varje diagram behöver ett textalternativ
  2. 2Reservlösningen med datatabell
  3. 3Färg, mönster och direkta etiketter
  4. +1 till
Börja lära dig gratisLås upp med PRO
27

B24 lektionerPRO

Upptäck automatiskt en kategori av tillgänglighetsfel i er pipeline

  1. 1Vad automatisering kan och inte kan upptäcka
  2. 2Skanna med axe DevTools och Lighthouse
  3. 3Koppla in axe-core i Playwright-tester
  4. +1 till
Börja lära dig gratisLås upp med PRO
28

B24 lektionerPRO

Genomför en strukturerad manuell granskning och prioritera de viktigaste åtgärderna

  1. 1Bygg ett arbetsflöde för manuell granskning
  2. 2Prioritering efter allvarlighetsgrad och påverkan
  3. 3Skriv felrapporter som utvecklare kan agera på
  4. +1 till
Börja lära dig gratisLås upp med PRO
29

B24 lektionerPRO

Förstå lagar och standarder som gör tillgänglighet till en del av planeringen

  1. 1ADA, Section 508 och amerikanska webbrättsprocesser
  2. 2European Accessibility Act och EN 301 549
  3. 3WCAG som gemensam rättslig måttstock
  4. +1 till
Börja lära dig gratisLås upp med PRO
30

B24 lektionerPRO

Förankra tillgänglighet i ert team så att den lever vidare efter ett enda projekt.

  1. 1Shift left: a11y i design och ärenden
  2. 2En definition av klart som inkluderar a11y
  3. 3En praktisk tillgänglighetschecklista för varje funktion
  4. +1 till
Börja lära dig gratisLås upp med PRO
CoddyKit PRO

Lås upp alla 30 kurser i den här lärvägen och alla andra lärvägar

AI-handledare, certifieringsprov och certifikat. Fungerar på webben, iOS och Android.

Se alla abonnemang
Årsvis$29.90 / årCirka $2.49 i månadenBetala en gångLivstid$69.99 en gångInga förnyelser. PRO för alltid.
Kursöversikt

Webbtillgänglighet (a11y): Bygg för alla

Bygg inkluderande webbplatser som alla kan använda. Lär Dig semantisk HTML, ARIA, stöd för tangentbord och skärmläsare samt uppfyllnad av WCAG 2.2. Den här kursserien omfattar 30 progressiva minikurser från nybörjarnivå (A1) till avancerad nivå (B2), med korta, fokuserade lektioner och snabba quiz som hjälper Dig att befästa varje koncept.

Det här får Du lära Dig

Du börjar med grunderna och bygger vidare med medelsvåra och avancerade ämnen, där varje kurs bygger vidare på den föregående. Alla lektioner är praktiska och uppdelade i lagom stora delar, och en AI-handledare finns tillgänglig dygnet runt när Du behöver hjälp.

Så fungerar det

Varje kurs är indelad i fyra fokuserade lektioner i lagom stora delar. Genomför några lektioner om dagen och bemästra hela kursserien på veckor, inte månader.

Verktyg

Öva med AI – läs inte bara

Ta lärandet till nästa nivå med AI-drivna verktyg och funktioner

AI-chattChatta med AI-handledarenStäll en superfrågaFå svar på expertnivåPROSkapa lektionAI-driven lektionsskaparePROPåbörja certifieringsprovetFå ditt certifikatPROStarta utmaningTesta dina kunskaper

Så lär du dig

  1. 01

    Interaktiva lektioner

    Praktiska kodövningar med feedback i realtid

  2. 02

    AI-handledare

    Få omedelbar hjälp av vår AI när du kör fast

  3. 03

    Inbyggd kodredigerare

    Skriv och kör kod direkt i webbläsaren

  4. 04

    Certifikat

    Få ett certifikat när du slutför kursen

Fortsätt utforska

Relaterade lärvägar

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.
FAQ

Vanliga frågor

Är kursen i Web Accessibility Academy gratis?

Ja. Ni kan börja kursen i Web Accessibility Academy gratis och genomföra de interaktiva lektionerna utan kostnad. Med en valfri PRO-prenumeration får Ni tillgång till avancerade AI-verktyg och ett certifikat som kan delas.

Behöver jag tidigare erfarenhet för att lära mig HTML?

Nej. Kursen börjar med grunderna och går stegvis vidare till mer avancerade ämnen, så Ni kan börja även utan tidigare erfarenhet av HTML.

Hur lär jag mig HTML på CoddyKit?

Ni lär Er genom att göra. Korta interaktiva lektioner kombinerar tydliga förklaringar med praktiska kodövningar som körs i realtid, och en AI-handledare som är tillgänglig dygnet runt ger personlig hjälp när Ni kör fast.

Får jag ett certifikat när jag har slutfört Web Accessibility Academy?

Ja. PRO-användare kan göra ett prov och få ett delbart intyg på att de har slutfört kursen i Web Accessibility Academy, med en verifierbar kod.

Kan jag lära mig HTML i mobilen?

Ja. CoddyKit finns på webben och som inbyggda iOS- och Android-appar, så Ni kan lära Er HTML på valfri enhet och synkronisera Era framsteg mellan dem.

Vad kostar CoddyKit PRO?

Den första kursen i Web Accessibility Academy är gratis. CoddyKit PRO låser upp alla kurser: $5.90 per vecka, $7.90 per månad, $29.90 per år eller $69.99 en gång för livstidsåtkomst utan förnyelser.

Hur lång tid tar det att slutföra Web Accessibility Academy?

Web Accessibility Academy har 30 kurser och 120 lektioner. De flesta lektioner tar cirka 5–10 minuter, så hela lärvägen motsvarar ungefär 14 timmars praktisk övning i egen takt.

Börja med Web Accessibility Academy nu

Anslut Er till tusentals deltagare som lär sig programmering med AI-drivna lektioner.

Börja lära dig gratisBläddra bland alla kurser