0Pricing
Web Accessibility Academy icon
HTMLFrontendWebEnterpriseLevel A1 → B215 bahasa

Web Accessibility Academy

Bangun situs web yang inklusif yang dapat digunakan semua orang. Kuasai semantic HTML, ARIA, dukungan keyboard dan screen reader, serta kepatuhan WCAG 2.2. Jalur belajar CoddyKit yang terdiri dari 30 kursus singkat dan 120 pelajaran interaktif, dengan AI Tutor 24/7 di sisi kamu.

Kursus
30
Pelajaran
120
Langkah interaktif
1,560
Gratis untuk memulai
Kursus 1
Kurikulum

30 kursus di jalur ini

Setiap kursus dalam jalur Web Accessibility Academy, sesuai urutan belajar. Kursus pertama gratis.

1

A14 pelajaranGratis

Jelaskan siapa yang terbantu oleh aksesibilitas serta alasan bisnis dan etis untuk membangun secara inklusif.

  1. 1Seperti Apa Disabilitas di Web Sebenarnya
  2. 2Kenali Pengguna: Tunanetra, Rabun, Tuli, Motorik, Kognitif
  3. 3Teknologi Bantu 101: Pembaca Layar, Switch, Kaca Pembesar
  4. +1 lagi
Mulai belajar gratis
2

A14 pelajaranPRO

Terapkan empat prinsip WCAG untuk menilai apakah suatu halaman aksesibel.

  1. 1Dapat Dipersepsi: Bisakah Semua Orang Merasakan Konten?
  2. 2Dapat Dioperasikan: Bisakah Semua Orang Menggunakan Kontrol?
  3. 3Dapat Dipahami: Apakah Mudah Dibaca dan Dapat Diprediksi?
  4. +1 lagi
Mulai belajar gratisBuka dengan PRO
3

A14 pelajaranPRO

Pilih elemen yang bermakna agar halaman aksesibel sebelum Anda menambahkan satu atribut pun.

  1. 1Tag Memiliki Makna: Mengapa Sup div Gagal
  2. 2Elemen Teks: Paragraf, Daftar, dan Penekanan
  3. 3Pohon Aksesibilitas: Yang Didengar Pembaca Layar
  4. +1 lagi
Mulai belajar gratisBuka dengan PRO
4

A14 pelajaranPRO

Bangun kerangka judul logis yang dapat dinavigasi pengguna pembaca layar.

  1. 1Satu h1 per Halaman: Menamai Topik Utama
  2. 2Tingkat Penyarangan tanpa Melompat
  3. 3Judul adalah Navigasi, Bukan Sekadar Teks Besar
  4. +1 lagi
Mulai belajar gratisBuka dengan PRO
5

A14 pelajaranPRO

Gunakan wilayah landmark agar pengguna dapat langsung menuju bagian yang mereka perlukan.

  1. 1header, nav, main, footer: Empat Besar
  2. 2Menempatkan Konten di main dan Hanya Satu main
  3. 3Menamai Beberapa Wilayah dengan aria-label
  4. +1 lagi
Mulai belajar gratisBuka dengan PRO
6

A24 pelajaranPRO

Tulis alternatif gambar yang menyampaikan makna, bukan menambah kekacauan.

  1. 1Informatif vs Dekoratif: Keputusan Pertama
  2. 2Menulis Alt yang Menyampaikan Tujuan, Bukan Piksel
  3. 3alt Kosong dan Gambar Dekoratif Tersembunyi
  4. +1 lagi
Mulai belajar gratisBuka dengan PRO
7

A24 pelajaranPRO

Pilih elemen interaktif yang tepat agar perilaku dan semantiknya selaras.

  1. 1Tautan Menuju Tempat, Tombol Melakukan Sesuatu
  2. 2Teks Tautan yang Bermakna di Luar Konteks
  3. 3Tombol yang Menjelaskan Fungsinya
  4. +1 lagi
Mulai belajar gratisBuka dengan PRO
8

A24 pelajaranPRO

Bangun formulir yang setiap kontrolnya memiliki nama dan mudah dioperasikan.

  1. 1Setiap Input Membutuhkan label Asli
  2. 2Placeholder Bukan Label
  3. 3Kelompokkan Kolom dengan fieldset dan legend
  4. +1 lagi
Mulai belajar gratisBuka dengan PRO
9

A24 pelajaranPRO

Pastikan teks dan UI cukup menonjol bagi pengguna dengan penglihatan rendah atau buta warna.

  1. 1Mengapa Rasio Kontras Dibutuhkan
  2. 2Mencapai AA: Ambang Teks dan Teks Besar
  3. 3Jangan Pernah Mengandalkan Warna Saja
  4. +1 lagi
Mulai belajar gratisBuka dengan PRO
10

A24 pelajaranPRO

Buat setiap interaksi dapat dijangkau dan terlihat hanya dengan papan ketik.

  1. 1Tab, Shift+Tab, Enter, Spasi: Tombol Inti
  2. 2Fokus Terlihat: Jangan Sembunyikan Garis Fokus
  3. 3Urutan Tab Logis Mengikuti Konten
  4. +1 lagi
Mulai belajar gratisBuka dengan PRO
11

B14 pelajaranPRO

Gunakan ARIA dengan benar untuk menambahkan makna yang tidak dapat dinyatakan HTML asli.

  1. 1Aturan Pertama: Tanpa ARIA Lebih Baik daripada ARIA yang Buruk
  2. 2Peran Menentukan Apa Arti Sesuatu
  3. 3Status dan Properti: diperluas, dicentang, dinonaktifkan
  4. +1 lagi
Mulai belajar gratisBuka dengan PRO
12

B14 pelajaranPRO

Kendalikan dengan tepat apa yang diumumkan teknologi asistif untuk elemen apa pun.

  1. 1Perhitungan Nama yang Dapat Diakses, Dijelaskan
  2. 2aria-label vs aria-labelledby
  3. 3aria-describedby untuk Konteks Tambahan
  4. +1 lagi
Mulai belajar gratisBuka dengan PRO
13

B14 pelajaranPRO

Pindahkan dan batasi fokus agar antarmuka dinamis tetap mudah digunakan.

  1. 1tabindex 0, -1, dan Jangan Pernah Positif
  2. 2Memindahkan Fokus Setelah Tindakan
  3. 3Mengembalikan Fokus Saat Lapisan Ditutup
  4. +1 lagi
Mulai belajar gratisBuka dengan PRO
14

B14 pelajaranPRO

Biarkan pengguna papan ketik melewati konten berulang menuju hal yang penting.

  1. 1Mengapa Lewati ke Konten Utama Diperlukan
  2. 2Membuat Tautan Lewati yang Benar-Benar Berfungsi
  3. 3Tersembunyi Secara Visual hingga Mendapat Fokus
  4. +1 lagi
Mulai belajar gratisBuka dengan PRO
15

B14 pelajaranPRO

Laporkan kesalahan formulir agar setiap pengguna dapat menemukan dan memperbaikinya.

  1. 1Mengaitkan Kesalahan dengan Kolom melalui aria-describedby
  2. 2Menandai Status Tidak Valid dengan aria-invalid
  3. 3Memindahkan Fokus ke Kesalahan Pertama
  4. +1 lagi
Mulai belajar gratisBuka dengan PRO
16

B14 pelajaranPRO

Tandai tabel agar hubungan antara sel dan tajuk menjadi jelas.

  1. 1th, scope, dan Elemen caption
  2. 2Tajuk Baris dan Kolom yang Tepat
  3. 3Tabel Rumit: Memasangkan headers dan id
  4. +1 lagi
Mulai belajar gratisBuka dengan PRO
17

B14 pelajaranPRO

Ekspos grafik yang bermakna dan sembunyikan grafik yang semata-mata dekoratif.

  1. 1SVG Sebaris: role img dan title
  2. 2Menyembunyikan Ikon Dekoratif dengan aria-hidden
  3. 3Tombol Ikon yang Tetap Memiliki Nama
  4. +1 lagi
Mulai belajar gratisBuka dengan PRO
18

B14 pelajaranPRO

Bangun dialog yang membatasi fokus, tertutup dengan rapi, dan mengumumkan keberadaannya.

  1. 1Peran Dialog dan Elemen dialog Bawaan
  2. 2Menjebak Fokus di Dalam Modal
  3. 3Tekan Escape untuk Menutup dan Mengembalikan Fokus
  4. +1 lagi
Mulai belajar gratisBuka dengan PRO
19

B14 pelajaranPRO

Implementasikan komponen pengungkapan umum dengan ARIA dan tombol yang tepat.

  1. 1Pola Tab: tablist, tab, tabpanel
  2. 2Navigasi Antar-Tab dengan Tombol Panah
  3. 3Akordeon dengan Button dan aria-expanded
  4. +1 lagi
Mulai belajar gratisBuka dengan PRO
20

B14 pelajaranPRO

Uji karya Anda sendiri seperti cara pengguna tunanetra benar-benar mengalaminya.

  1. 1Mengaktifkan NVDA, VoiceOver, dan TalkBack
  2. 2Gestur Inti dan Tombol Pintas
  3. 3Mode Jelajah vs Mode Fokus
  4. +1 lagi
Mulai belajar gratisBuka dengan PRO
21

B24 pelajaranPRO

Petakan kriteria keberhasilan nyata ke perbaikan konkret untuk situs yang sesuai AA.

  1. 1A, AA, AAA: Memilih Target yang Tepat
  2. 2Penambahan pada 2.2: Tampilan Fokus dan Ukuran Target
  3. 3Gerakan Menyeret dan Autentikasi yang Dapat Diakses
  4. +1 lagi
Mulai belajar gratisBuka dengan PRO
22

B24 pelajaranPRO

Jaga aplikasi satu halaman tetap aksesibel meskipun menggunakan perutean sisi klien dan perenderan ulang.

  1. 1Perubahan Rute Tanpa Memuat Ulang Halaman
  2. 2Mengelola Fokus dengan Ref dan useEffect
  3. 3Fragmen, Portal, dan Perangkap Urutan DOM
  4. +1 lagi
Mulai belajar gratisBuka dengan PRO
23

B24 pelajaranPRO

Beri tahu pengguna pembaca layar tentang perubahan yang terjadi tanpa pemuatan ulang.

  1. 1polite vs assertive: Memilih Tingkat Urgensi
  2. 2Peran status, alert, dan log
  3. 3Mengumumkan Toast, Pemuatan, dan Hitungan
  4. +1 lagi
Mulai belajar gratisBuka dengan PRO
24

B24 pelajaranPRO

Bangun widget kustom yang tangguh dengan mengikuti pola APG yang telah terbukti.

  1. 1Membaca APG: Pola, Tombol, dan Contoh
  2. 2Combobox dan Pelengkapan Otomatis yang Tepat
  3. 3Menu, Menubar, dan Tombol Menu
  4. +1 lagi
Mulai belajar gratisBuka dengan PRO
25

B24 pelajaranPRO

Hormati preferensi gerakan dan hindari pemicu ketidaknyamanan atau kejang.

  1. 1prefers-reduced-motion dalam CSS dan JS
  2. 2Gangguan Vestibular dan Risiko Parallax
  3. 3Ambang Tiga Kilatan untuk Kejang
  4. +1 lagi
Mulai belajar gratisBuka dengan PRO
26

B24 pelajaranPRO

Buat diagram dan grafik dapat dipahami melampaui warna dan bentuk.

  1. 1Setiap Grafik Membutuhkan Alternatif Teks
  2. 2Cadangan Tabel Data
  3. 3Warna, Pola, dan Label Langsung
  4. +1 lagi
Mulai belajar gratisBuka dengan PRO
27

B24 pelajaranPRO

Temukan kelas bug aksesibilitas secara otomatis dalam pipeline Anda.

  1. 1Hal yang Dapat dan Tidak Dapat Dideteksi Otomatisasi
  2. 2Memindai dengan axe DevTools dan Lighthouse
  3. 3Menghubungkan axe-core ke Pengujian Playwright
  4. +1 lagi
Mulai belajar gratisBuka dengan PRO
28

B24 pelajaranPRO

Lakukan audit manual terstruktur dan prioritaskan perbaikan yang penting.

  1. 1Membangun Alur Kerja Audit Manual
  2. 2Prioritas Berdasarkan Tingkat Keparahan dan Dampak
  3. 3Menulis Laporan Bug yang Dapat Ditindaklanjuti Pengembang
  4. +1 lagi
Mulai belajar gratisBuka dengan PRO
29

B24 pelajaranPRO

Pahami hukum dan standar yang menempatkan aksesibilitas dalam rencana kerja.

  1. 1ADA, Bagian 508, dan Gugatan Web di US
  2. 2European Accessibility Act dan EN 301 549
  3. 3WCAG sebagai Tolok Ukur Hukum Bersama
  4. +1 lagi
Mulai belajar gratisBuka dengan PRO
30

B24 pelajaranPRO

Tanamkan aksesibilitas dalam tim Anda agar tetap berjalan melampaui satu proyek.

  1. 1Geser ke Kiri: a11y dalam Design dan Tiket
  2. 2Definisi Selesai yang Mencakup a11y
  3. 3Daftar Periksa Aksesibilitas Praktis per Fitur
  4. +1 lagi
Mulai belajar gratisBuka dengan PRO
CoddyKit PRO

Buka akses ke semua 30 kursus di jalur ini dan semua jalur lainnya

AI Tutor, ujian sertifikasi, dan sertifikat. Bisa digunakan di web, iOS, dan Android.

Lihat semua paket
Tahunan$29.90 / tahunSekitar $2.49 per bulanBayar sekaliSeumur hidup$69.99 sekaliTanpa perpanjangan. PRO selamanya.
Ringkasan Kursus

Web Accessibility (a11y): Build for Everyone

Bangun situs web yang inklusif yang dapat digunakan semua orang. Kuasai semantic HTML, ARIA, dukungan keyboard dan screen reader, serta kepatuhan WCAG 2.2. Track ini mencakup 30 mini-kursus progresif dari pemula mutlak (A1) hingga lanjutan (B2), dengan pelajaran fokus singkat dan kuis cepat untuk mengunci setiap konsep.

What You Will Learn

Anda mulai dengan dasar-dasar dan membangun melalui topik menengah dan lanjutan, setiap kursus dibangun di atas yang terakhir. Setiap pelajaran praktis dan berukuran gigitan, dengan tutor AI 24/7 tersedia saat Anda membutuhkan bantuan.

How It Works

Setiap kursus dibagi menjadi empat pelajaran fokus berukuran gigitan. Selesaikan beberapa pelajaran sehari dan Anda akan menguasai seluruh track dalam berminggu-minggu, bukan berbulan-bulan.

Alat

Berlatih dengan AI, bukan hanya membaca

Tingkatkan pembelajaran kamu dengan alat dan fitur bertenaga AI

Chat AIChat dengan tutor AIAjukan Pertanyaan SuperDapatkan jawaban level expertPROBuat PelajaranPembangun pelajaran bertenaga AIPROMulai Ujian SertifikasiRaih sertifikat kamuPROMulai TantanganUji kemampuanmu

Cara Kamu Belajar

  1. 01

    Pelajaran Interaktif

    Latihan koding langsung dengan umpan balik real-time

  2. 02

    AI Tutor

    Dapatkan bantuan instan dari AI kami saat kamu stuck

  3. 03

    Editor Bawaan

    Tulis dan jalankan kode langsung di browser kamu

  4. 04

    Sertifikat

    Raih sertifikat saat kamu menyelesaikan kursus

Lanjutkan eksplorasi

Jalur belajar terkait

Angular AcademyLearn Angular to build scalable and modern web applications with Angular Academy.Frontend AcademyDevelop visually stunning and responsive websites with Frontend Development Academy.HTML for KidsIntroduce kids to web development with fun and easy HTML lessons at HTML for Kids.HTML AcademyBuild strong foundations in web development by learning HTML at HTML Academy.Micro Frontends Architecture with Module FederationMaster Micro Frontends architecture using Module Federation to build scalable and indepen…Vue AcademyCreate interactive and efficient user interfaces with Vue.js through Vue Academy.
FAQ

Pertanyaan yang Sering Diajukan

Apakah kursus Web Accessibility Academy gratis?

Ya. Kamu bisa memulai kursus Web Accessibility Academy secara gratis dan menyelesaikan pelajaran interaktifnya tanpa biaya. Langganan PRO opsional membuka akses ke alat AI tingkat lanjut dan sertifikat yang bisa dibagikan.

Apakah aku perlu pengalaman sebelumnya untuk belajar HTML?

Tidak. Kursus dimulai dari dasar dan secara bertahap bergerak ke topik yang lebih canggih, jadi kamu bisa memulai meski tanpa pengalaman HTML sebelumnya.

Bagaimana cara aku belajar HTML di CoddyKit?

Kamu belajar dengan praktik. Pelajaran interaktif pendek memadukan penjelasan yang jelas dengan latihan koding langsung yang berjalan real-time, dan tutor AI 24/7 memberikan bantuan personal kapan pun kamu stuck.

Apakah aku dapat sertifikat saat menyelesaikan Web Accessibility Academy?

Ya. Pelajar PRO bisa mengikuti ujian dan meraih sertifikat penyelesaian yang bisa dibagikan dengan kode verifikasi untuk kursus Web Accessibility Academy.

Bisakah aku belajar HTML di ponselku?

Ya. CoddyKit tersedia di web dan sebagai aplikasi native iOS dan Android, jadi kamu bisa belajar HTML di perangkat apa pun dan progresmu tersinkronisasi di semuanya.

Berapa biaya CoddyKit PRO?

Kursus pertama dari Web Accessibility Academy gratis. CoddyKit PRO membuka akses ke semua kursus: $5.90 per minggu, $7.90 per bulan, $29.90 per tahun, atau $69.99 sekali untuk akses seumur hidup tanpa perpanjangan.

Berapa lama waktu yang dibutuhkan untuk menyelesaikan Web Accessibility Academy?

Web Accessibility Academy memiliki 30 kursus dan 120 pelajaran. Sebagian besar pelajaran membutuhkan sekitar 5–10 menit, jadi seluruh jalur ini memerlukan sekitar 14 jam latihan langsung, sesuai kecepatan kamu.

Mulai Web Accessibility Academy Sekarang

Bergabunglah dengan ribuan pelajar yang menguasai pemrograman dengan pelajaran bertenaga AI.

Mulai belajar gratisJelajahi Semua Kursus