PricingLoginStart free
Web Accessibility Academy logo
HTMLVerkkoTasot A1 → B222 kieltä

Web Accessibility Academy

Rakenna verkkosivustoja, joita kaikki voivat käyttää. Opi semanttinen HTML, ARIA, näppäimistö- ja ruudunlukijatuki sekä WCAG 2.2 -vaatimustenmukaisuus. CoddyKitin oppimispolku, joka sisältää 30 lyhyttä kurssia ja 120 interaktiivista oppituntia sekä tekoälytuutorin käytettävissäsi ympäri vuorokauden.

Kurssit
30
Oppitunnit
120
Interaktiiviset vaiheet
1,560
Aloita maksutta
Kurssi 1
Kurssisisältö

30 kurssia tässä opintopolussa

Kaikki Web Accessibility Academy-opintopolun kurssit suoritusjärjestyksessä. Ensimmäinen on ilmainen.

1

A14 oppituntiaIlmainen

Selitä, ketkä hyötyvät saavutettavuudesta, ja perustele osallistava rakentaminen liiketoiminnan ja etiikan näkökulmasta

  1. 1Miltä vammaisuus todella näyttää verkossa
  2. 2Tutustu käyttäjiin: sokeat, heikkonäköiset, kuurot, liikuntarajoitteiset ja kognitiivisesti rajoittuneet
  3. 3Apuvälineteknologian perusteet: ruudunlukijat, kytkimet ja suurennuslasit
  4. +1 lisää
Aloita opiskelu maksutta
2

A14 oppituntiaPRO

Sovella WCAG:n neljää periaatetta arvioidaksesi, onko mikä tahansa sivu saavutettava

  1. 1Havaittava: Voivatko kaikki aistia sisällön?
  2. 2Käytettävä: Voivatko kaikki käyttää ohjaimia?
  3. 3Ymmärrettävä: Onko sisältö luettavaa ja ennakoitavaa?
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
3

A14 oppituntiaPRO

Valitse merkitykselliset elementit, jotta sivu on saavutettava jo ennen ensimmäisen attribuutin lisäämistä

  1. 1Tageilla on merkitys: miksi div-soppa epäonnistuu
  2. 2Tekstielementit: kappaleet, luettelot ja korostukset
  3. 3Esteettömyyspuu: mitä ruudunlukijat kuulevat
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
4

A14 oppituntiaPRO

Rakenna looginen otsikkorakenne, jota ruudunlukijan käyttäjät voivat selata

  1. 1Yksi h1 kullakin sivulla: pääaiheen nimeäminen
  2. 2Sisäkkäiset tasot ilman hyppimistä
  3. 3Otsikot ovat navigointia, eivät vain suurta tekstiä
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
5

A14 oppituntiaPRO

Käytä maamerkkialueita, jotta käyttäjät voivat siirtyä suoraan tarvitsemalleen osalle

  1. 1header, nav, main, footer: neljä tärkeintä
  2. 2Sijoita sisältö main-elementtiin ja käytä vain yhtä main-elementtiä
  3. 3Nimeä useita alueita aria-labelilla
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
6

A24 oppituntiaPRO

Kirjoita kuville vaihtoehtoiset tekstit, jotka välittävät merkityksen eivätkä lisää turhaa sisältöä

  1. 1Informatiivinen vai koristeellinen: ensimmäinen päätös
  2. 2Kirjoita alt-teksti, joka välittää tarkoituksen eikä pikseleitä
  3. 3Tyhjä alt-teksti ja piilotettu koristekuva
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
7

A24 oppituntiaPRO

Valitse oikea vuorovaikutteinen elementti, jotta toiminta ja semantiikka vastaavat toisiaan

  1. 1Linkit vievät paikkoihin, painikkeet tekevät asioita
  2. 2Linkkiteksti, joka toimii myös asiayhteydestä irrotettuna
  3. 3Painikkeet, jotka kertovat, mitä ne tekevät
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
8

A24 oppituntiaPRO

Rakenna lomakkeita, joissa jokainen ohjain on nimetty ja helppokäyttöinen

  1. 1Jokainen syötekenttä tarvitsee oikean label-elementin
  2. 2Placeholder ei ole selite
  3. 3Ryhmittele kentät fieldset- ja legend-elementeillä
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
9

A24 oppituntiaPRO

Varmista, että teksti ja käyttöliittymä erottuvat riittävästi heikkonäköisille ja värisokeille käyttäjille

  1. 1Miksi kontrastisuhteet ovat olemassa
  2. 2Täytä AA-taso: tekstin ja suuren tekstin raja-arvot
  3. 3Älä koskaan luota pelkkään väriin
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
10

A24 oppituntiaPRO

Tee jokaisesta toiminnosta näppäimistöllä käytettävä ja näkyvä

  1. 1Tab, Shift+Tab, Enter, Space: tärkeimmät näppäimet
  2. 2Näkyvä kohdistus: älä koskaan piilota ääriviivaa
  3. 3Looginen sarkainjärjestys seuraa sisältöä
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
11

B14 oppituntiaPRO

Käytä ARIAa oikein lisäämään merkityksiä, joita natiivi HTML ei voi ilmaista

  1. 1Ensimmäinen sääntö: huono ARIA ei ole parempi kuin ei ARIAa
  2. 2Roolit määrittävät, mikä asia on
  3. 3Tilat ja ominaisuudet: expanded, checked, disabled
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
12

B14 oppituntiaPRO

Hallitse tarkasti, mitä avustava teknologia ilmoittaa mistä tahansa elementistä

  1. 1Saavutettavan nimen laskenta selkokielellä
  2. 2aria-label vai aria-labelledby
  3. 3aria-describedby lisäkontekstia varten
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
13

B14 oppituntiaPRO

Siirrä ja rajaa kohdistusta, jotta dynaamiset käyttöliittymät pysyvät käytettävinä

  1. 1tabindex 0, -1 ja ei koskaan positiivinen
  2. 2Kohdistuksen siirtäminen toiminnon jälkeen
  3. 3Kohdistuksen palauttaminen kerroksen sulkeutuessa
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
14

B14 oppituntiaPRO

Anna näppäimistökäyttäjien ohittaa toistuva sisältö ja siirtyä olennaiseen

  1. 1Miksi pääsisältöön ohittaminen on tarpeen
  2. 2Toimivan ohituslinkin rakentaminen
  3. 3Visuaalisesti piilotettu kohdistukseen asti
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
15

B14 oppituntiaPRO

Ilmoita lomakevirheistä niin, että jokainen käyttäjä voi löytää ja korjata ne

  1. 1Virheiden yhdistäminen kenttiin aria-describedby-avulla
  2. 2Virheellisen tilan merkitseminen aria-invalid-arvolla
  3. 3Kohdistuksen siirtäminen ensimmäiseen virheeseen
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
16

B14 oppituntiaPRO

Merkitse taulukot niin, että solujen ja otsakkeiden välinen suhde on selkeä

  1. 1th, scope ja caption-elementti
  2. 2Rivi- ja sarakeotsikot oikein tehtynä
  3. 3Monimutkaiset taulukot: headers- ja id-yhdistelmät
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
17

B14 oppituntiaPRO

Tuo merkitykselliset grafiikat saataville ja piilota puhtaasti koristeelliset grafiikat

  1. 1Tekstinsisäinen SVG: role img ja title
  2. 2Koristeellisten kuvakkeiden piilottaminen aria-hidden-arvolla
  3. 3Kuvakepainikkeella on edelleen oltava nimi
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
18

B14 oppituntiaPRO

Rakenna dialogeja, jotka lukitsevat kohdistuksen, sulkeutuvat siististi ja ilmoittavat itsestään

  1. 1Valintaikkunoiden roolit ja natiivi dialog-elementti
  2. 2Kohdistuksen pitäminen modaalisessa valintaikkunassa
  3. 3Sulkeminen Escapella ja kohdistuksen palauttaminen
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
19

B14 oppituntiaPRO

Toteuta yleiset sisältöä avaavat komponentit oikeilla ARIA-määrityksillä ja näppäimillä

  1. 1Välilehtirakenne: tablist, tab, tabpanel
  2. 2Välilehtien välillä siirtyminen nuolinäppäimillä
  3. 3Haitarielementit button- ja aria-expanded-määritteillä
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
20

B14 oppituntiaPRO

Testaa omaa työtäsi tavalla, jolla sokeat käyttäjät sitä oikeasti kokevat

  1. 1NVDA:n, VoiceOverin ja TalkBackin käyttöönotto
  2. 2Tärkeimmät eleet ja pikanäppäimet
  3. 3Selaustila ja kohdistustila
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
21

B24 oppituntiaPRO

Yhdistä todelliset onnistumiskriteerit konkreettisiin korjauksiin AA-vaatimukset täyttävää sivustoa varten

  1. 1A, AA, AAA: oikean tavoitetason valinta
  2. 2Version 2.2 lisäykset: kohdistuksen ulkoasu ja kohteen koko
  3. 3Vetoliikkeet ja saavutettava todentaminen
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
22

B24 oppituntiaPRO

Pidä yhden sivun sovellukset saavutettavina asiakaspuolen reitityksestä ja uudelleenrenderöinneistä huolimatta

  1. 1Reittien vaihtaminen ilman sivun uudelleenlatausta
  2. 2Kohdistuksen hallinta ref-viitteillä ja useEffectilla
  3. 3Fragmentit, portaalit ja DOM-järjestyksen ansa
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
23

B24 oppituntiaPRO

Ilmoita ruudunlukijan käyttäjille muutoksista, jotka tapahtuvat ilman sivun lataamista uudelleen

  1. 1polite vai assertive: kiireellisyyden valinta
  2. 2status-, alert- ja log-roolit
  3. 3Toast-ilmoitusten, latausilmaisimien ja lukumäärien ilmoittaminen
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
24

B24 oppituntiaPRO

Rakenna vankkoja mukautettuja komponentteja noudattamalla hyväksi todettuja APG-malleja

  1. 1APG:n lukeminen: rakenteet, näppäimet ja esimerkit
  2. 2Combobox ja automaattinen täydennys oikein tehtynä
  3. 3Menu, menubar ja menupainike
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
25

B24 oppituntiaPRO

Kunnioita liikeasetuksia ja vältä epämukavuuden tai kohtauksien aiheuttamista

  1. 1prefers-reduced-motion CSS:ssä ja JS:ssä
  2. 2Vestibulaariset häiriöt ja parallaksin riskit
  3. 3Kohtauksia ehkäisevä kolmen välähdyksen kynnys
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
26

B24 oppituntiaPRO

Tee kaavioista ja kuvaajista havaittavia myös värin ja muodon ulkopuolella

  1. 1Jokainen kaavio tarvitsee tekstivastineen
  2. 2Tietotaulukko varavaihtoehtona
  3. 3Väri, kuvio ja suorat selitteet
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
27

B24 oppituntiaPRO

Tunnista tietynlaiset saavutettavuusvirheet automaattisesti putkessasi

  1. 1Mitä automaatio voi ja ei voi havaita
  2. 2Skannaus axe DevToolsilla ja Lighthousella
  3. 3axe-coren liittäminen Playwright-testeihin
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
28

B24 oppituntiaPRO

Tee jäsennelty manuaalinen auditointi ja priorisoi tärkeimmät korjaukset

  1. 1Manuaalisen auditointityönkulun rakentaminen
  2. 2Vakavuuden ja vaikutusten luokittelu
  3. 3Toimintakelpoisten virheraporttien kirjoittaminen kehittäjille
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
29

B24 oppituntiaPRO

Ymmärrä lait ja standardit, jotka nostavat saavutettavuuden kehityksen tiekartalle

  1. 1ADA, Section 508 ja verkkosaavutettavuutta koskevat oikeusjutut Yhdysvalloissa
  2. 2Euroopan esteettömyyssäädös ja EN 301 549
  3. 3WCAG yhteisenä oikeudellisena mittapuuna
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
30

B24 oppituntiaPRO

Juurruttakaa saavutettavuus tiimiinne, jotta se säilyy projektin päätyttyäkin.

  1. 1Vasemmalle siirtyminen: a11y suunnittelussa ja tehtävissä
  2. 2Valmis-määritelmä, joka sisältää a11y:n
  3. 3Käytännöllinen ominaisuuskohtainen saavutettavuuden tarkistuslista
  4. +1 lisää
Aloita opiskelu maksuttaAvaa PRO-tilauksella
CoddyKit PRO

Avaa kaikki 30 tämän opintopolun kurssia ja kaikki muut opintopolut

Tekoälytuutori, sertifiointikoe ja suoritustodistus. Toimii verkossa sekä iOS- ja Android-laitteilla.

Näytä kaikki paketit
Vuosittain$29.90 / vuosiNoin $2.49 kuukaudessaMaksa kerranElinikäinen$69.99 KerranEi uusimisia. PRO ikuisesti.
Kurssin yleiskatsaus

Web-saavutettavuus (a11y): Rakenna kaikille

Rakenna verkkosivustoja, joita kaikki voivat käyttää. Opi semanttinen HTML, ARIA, näppäimistö- ja ruudunlukijatuki sekä WCAG 2.2 -vaatimustenmukaisuus. Tämä oppimiskokonaisuus sisältää 30 etenevää minikurssia vasta-alkajatasolta (A1) edistyneelle tasolle (B2), ja sen lyhyillä, aiheeseen keskittyvillä oppitunneilla sekä nopeilla tietovisoilla opitut asiat jäävät mieleen.

Mitä opit

Aloitat perusteista ja etenet keskitason sekä edistyneen tason aiheisiin niin, että jokainen kurssi rakentuu edellisen päälle. Jokainen oppitunti on käytännönläheinen ja lyhyt, ja käytettävissäsi on ympäri vuorokauden toimiva tekoälytuutori, kun tarvitset apua.

Näin se toimii

Jokainen kurssi on jaettu neljään lyhyeen ja selkeästi rajattuun oppituntiin. Kun suoritat muutaman oppitunnin päivässä, hallitset koko oppimiskokonaisuuden viikoissa etkä kuukausissa.

Työkalut

Harjoittele tekoälyn avulla – älä vain lue

Tehosta oppimistasi tekoälypohjaisilla työkaluilla ja ominaisuuksilla

TekoälychatKeskustele tekoälytuutorin kanssaEsitä superkysymysSaat asiantuntijatason vastauksiaPROLuo oppituntiTekoälypohjainen oppituntien luontityökaluPROAloita sertifiointikoeHanki sertifikaattiPROAloita haasteTestaa taitosi

Näin opiskelet

  1. 01

    Interaktiiviset oppitunnit

    Käytännön koodiharjoituksia ja reaaliaikaista palautetta

  2. 02

    Tekoälytuutori

    Saat heti apua tekoälyltä, kun jäät jumiin

  3. 03

    Sisäänrakennettu editori

    Kirjoita ja suorita koodia suoraan selaimessa

  4. 04

    Sertifikaatti

    Saat sertifikaatin suoritettuasi kurssin

Tutustu lisää

Aiheeseen liittyvät opintopolut

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 logoMicro Frontends -arkkitehtuuri Module FederationillaMaster 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.
UKK

Usein kysytyt kysymykset

Onko Web Accessibility Academy-kurssi ilmainen?

Kyllä. Voit aloittaa Web Accessibility Academy-kurssin ilmaiseksi ja suorittaa sen vuorovaikutteiset oppitunnit maksutta. Valinnainen PRO-tilaus avaa käyttöön edistyneet tekoälytyökalut ja jaettavan todistuksen.

Tarvitsenko aiempaa kokemusta oppiakseni HTML?

Et tarvitse. Kurssi alkaa perusteista ja etenee vähitellen edistyneempiin aiheisiin, joten voit aloittaa, vaikka sinulla ei olisi aiempaa HTML-kokemusta.

Miten opin HTML CoddyKitissä?

Opit tekemällä. Lyhyillä vuorovaikutteisilla oppitunneilla selkeä teoria yhdistyy käytännön koodiharjoitukseen, joka suoritetaan reaaliajassa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori auttaa henkilökohtaisesti aina, kun jäät jumiin.

Saanko todistuksen Web Accessibility Academy-kurssin suorittamisesta?

Kyllä. PRO-oppijat voivat suorittaa kokeen ja saada Web Accessibility Academy-kurssin suorittamisesta jaettavan todistuksen, jonka koodi voidaan tarkistaa.

Voinko oppia HTML puhelimellani?

Kyllä. CoddyKit on käytettävissä verkossa sekä iOS- ja Android-natiivisovelluksina, joten voit oppia HTML millä tahansa laitteella, ja edistymisesi synkronoituu niiden välillä.

Paljonko CoddyKit PRO maksaa?

Web Accessibility Academy-opintopolun ensimmäinen kurssi on ilmainen. CoddyKit PRO avaa kaikki kurssit: $5.90 viikossa, $7.90 kuukaudessa, $29.90 vuodessa tai $69.99 kerran maksettuna, jolloin saat elinikäisen käyttöoikeuden ilman uusimisia.

Kuinka kauan Web Accessibility Academy-opintopolun suorittaminen kestää?

Web Accessibility Academy sisältää 30 kurssia ja 120 oppituntia. Useimmat oppitunnit kestävät noin 5–10 minuuttia, joten koko opintopolun suorittamiseen kuluu omaan tahtiin noin 14 tuntia käytännön harjoittelua.

Aloita Web Accessibility Academy nyt

Liity tuhansien oppijoiden joukkoon ja opi ohjelmointia tekoälyä hyödyntävillä oppitunneilla.

Aloita opiskelu maksuttaSelaa kaikkia kursseja