PricingLoginStart free
Web Accessibility Academy logo
HTMLWebTahap A1 → B222 bahasa

Web Accessibility Academy

Bina laman web inklusif yang boleh digunakan oleh semua orang. Kuasai HTML semantik, sokongan ARIA, papan kekunci dan pembaca skrin, serta pematuhan WCAG 2.2. Laluan pembelajaran CoddyKit yang merangkumi 30 kursus pendek dan 120 pelajaran interaktif, dengan tutor kecerdasan buatan 24/7 di sisi anda.

Kursus
30
Pelajaran
120
Langkah interaktif
1,560
Percuma untuk bermula
Kursus 1
Kurikulum

30 kursus dalam laluan ini

Setiap kursus dalam laluan Web Accessibility Academy, mengikut urutan pembelajaran. Kursus pertama adalah percuma.

1

A14 pelajaranPercuma

Terangkan pihak yang dibantu oleh kebolehcapaian serta alasan perniagaan dan etika untuk membina secara inklusif.

  1. 1Rupa Sebenar Ketidakupayaan di Web
  2. 2Kenali Pengguna: Buta, Penglihatan Terhad, Pekak, Motor, Kognitif
  3. 3Teknologi Bantuan 101: Pembaca Skrin, Suis, Pembesar
  4. +1 lagi
Mula belajar secara percuma
2

A14 pelajaranPRO

Gunakan empat prinsip WCAG untuk menilai sama ada mana-mana halaman boleh dicapai.

  1. 1Boleh Dicerap: Bolehkah Semua Orang Mengesan Kandungan?
  2. 2Boleh Dikendalikan: Bolehkah Semua Orang Menggunakan Kawalan?
  3. 3Boleh Difahami: Adakah Ia Mudah Dibaca dan Boleh Dijangka?
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
3

A14 pelajaranPRO

Pilih elemen bermakna supaya halaman boleh dicapai sebelum menambah satu pun atribut.

  1. 1Tag Mempunyai Makna: Mengapa Sup div Gagal
  2. 2Unsur Teks: Perenggan, Senarai dan Penekanan
  3. 3Pepohon Kebolehcapaian: Perkara yang Didengar Pembaca Skrin
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
4

A14 pelajaranPRO

Bina rangka tajuk logik yang boleh dilayari oleh pengguna pembaca skrin.

  1. 1Satu h1 bagi Setiap Halaman: Menamakan Topik Utama
  2. 2Tahap Bersarang Tanpa Melangkau
  3. 3Tajuk ialah Navigasi, Bukan Sekadar Teks Besar
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
5

A14 pelajaranPRO

Gunakan kawasan mercu tanda supaya pengguna boleh terus melompat ke bahagian yang diperlukan.

  1. 1header, nav, main, footer: Empat Unsur Utama
  2. 2Meletakkan Kandungan dalam main dan Hanya Satu main
  3. 3Namakan Berbilang Rantau dengan aria-label
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
6

A24 pelajaranPRO

Tulis alternatif imej yang menyampaikan makna dan bukannya menambah keserabutan.

  1. 1Informatif berbanding Hiasan: Keputusan Pertama
  2. 2Tulis Alt yang Menyampaikan Tujuan, Bukan Piksel
  3. 3alt Kosong dan Imej Hiasan Tersembunyi
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
7

A24 pelajaranPRO

Pilih elemen interaktif yang betul supaya kelakuan dan semantik sepadan.

  1. 1Pautan Membawa ke Tempat, Butang Melakukan Perkara
  2. 2Teks Pautan yang Masuk Akal di Luar Konteks
  3. 3Butang yang Mengumumkan Fungsinya
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
8

A24 pelajaranPRO

Bina borang yang setiap kawalannya mempunyai nama dan mudah dikendalikan.

  1. 1Setiap Input Memerlukan label Sebenar
  2. 2Placeholder Bukan Label
  3. 3Kumpulkan Medan dengan fieldset dan legend
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
9

A24 pelajaranPRO

Pastikan teks dan antara muka cukup menonjol untuk pengguna penglihatan terhad dan buta warna.

  1. 1Mengapa Nisbah Kontras Wujud
  2. 2Mencapai AA: Ambang Teks dan Teks Besar
  3. 3Jangan Bergantung pada Warna Sahaja
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
10

A24 pelajaranPRO

Jadikan setiap interaksi boleh dicapai dan kelihatan hanya menggunakan papan kekunci.

  1. 1Tab, Shift+Tab, Enter, Space: Kekunci Teras
  2. 2Fokus Jelas: Jangan Sembunyikan Garis Tepi
  3. 3Susunan Tab Logik Mengikut Kandungan
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
11

B14 pelajaranPRO

Gunakan ARIA dengan betul untuk menambah makna yang tidak dapat dinyatakan oleh HTML asli.

  1. 1Peraturan Pertama: Tiada ARIA Lebih Baik daripada ARIA yang Buruk
  2. 2Peranan Menentukan Maksud Sesuatu
  3. 3Keadaan dan Sifat: dikembangkan, ditanda, dilumpuhkan
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
12

B14 pelajaranPRO

Kawal dengan tepat perkara yang diumumkan oleh teknologi bantuan untuk mana-mana elemen.

  1. 1Pengiraan Nama Boleh Capai, Diperjelas
  2. 2aria-label berbanding aria-labelledby
  3. 3aria-describedby untuk Konteks Tambahan
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
13

B14 pelajaranPRO

Alih dan kekang fokus supaya antara muka dinamik kekal mudah digunakan.

  1. 1tabindex 0, -1 dan Jangan Positif
  2. 2Mengalihkan Fokus Selepas Tindakan
  3. 3Mengembalikan Fokus Apabila Lapisan Ditutup
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
14

B14 pelajaranPRO

Benarkan pengguna papan kekunci melangkaui kandungan berulang ke perkara yang penting.

  1. 1Sebab Langkau ke Kandungan Utama Wujud
  2. 2Membina Pautan Langkau yang Benar-Benar Berfungsi
  3. 3Disembunyikan Secara Visual Sehingga Difokuskan
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
15

B14 pelajaranPRO

Laporkan ralat borang supaya setiap pengguna dapat mencari dan membetulkannya.

  1. 1Mengaitkan Ralat dengan Medan Menggunakan aria-describedby
  2. 2Menandakan Keadaan Tidak Sah dengan aria-invalid
  3. 3Mengalihkan Fokus ke Ralat Pertama
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
16

B14 pelajaranPRO

Tandakan jadual supaya hubungan antara sel dan pengepala jelas.

  1. 1th, scope dan Elemen caption
  2. 2Pengepala Baris dan Lajur yang Betul
  3. 3Jadual Kompleks: Gandingan headers dan id
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
17

B14 pelajaranPRO

Dedahkan grafik yang bermakna dan sembunyikan grafik yang semata-mata hiasan.

  1. 1SVG Sebaris: role img dan title
  2. 2Menyembunyikan Ikon Hiasan dengan aria-hidden
  3. 3Butang Ikon yang Masih Mempunyai Nama
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
18

B14 pelajaranPRO

Bina dialog yang memerangkap fokus, ditutup dengan kemas dan mengumumkan kewujudannya.

  1. 1Peranan Dialog dan Elemen dialog Asli
  2. 2Memerangkap Fokus dalam Modal
  3. 3Escape untuk Menutup dan Memulihkan Fokus
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
19

B14 pelajaranPRO

Laksanakan widget pendedahan biasa dengan ARIA dan kekunci yang betul.

  1. 1Corak Tab: tablist, tab, tabpanel
  2. 2Navigasi Antara Tab dengan Kekunci Anak Panah
  3. 3Akordion dengan Button dan aria-expanded
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
20

B14 pelajaranPRO

Uji hasil kerja anda seperti pengalaman sebenar pengguna buta.

  1. 1Menghidupkan NVDA, VoiceOver dan TalkBack
  2. 2Gerak Isyarat dan Kekunci Pintas Teras
  3. 3Mod Semak Imbas berbanding Mod Fokus
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
21

B24 pelajaranPRO

Padankan kriteria kejayaan sebenar dengan pembaikan konkrit untuk tapak yang mematuhi AA.

  1. 1A, AA, AAA: Memilih Sasaran yang Tepat
  2. 2Penambahan 2.2: Rupa Fokus dan Saiz Sasaran
  3. 3Pergerakan Seretan dan Pengesahan Boleh Capai
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
22

B24 pelajaranPRO

Pastikan aplikasi satu halaman boleh dicapai walaupun terdapat penghalaan sisi klien dan pemaparan semula.

  1. 1Perubahan Laluan Tanpa Memuat Semula Halaman
  2. 2Mengurus Fokus dengan Refs dan useEffect
  3. 3Fragmen, Portal dan Perangkap Susunan DOM
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
23

B24 pelajaranPRO

Maklumkan pengguna pembaca skrin tentang perubahan yang berlaku tanpa memuat semula.

  1. 1polite berbanding assertive: Memilih Keutamaan
  2. 2Peranan status, alert dan log
  3. 3Mengumumkan Toast, Pemuat dan Bilangan
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
24

B24 pelajaranPRO

Bina widget tersuai yang kukuh dengan mengikuti corak APG yang terbukti.

  1. 1Membaca APG: Corak, Kekunci dan Contoh
  2. 2Combobox dan Autolengkap yang Betul
  3. 3Menu, Menubar dan Butang Menu
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
25

B24 pelajaranPRO

Hormati pilihan pergerakan dan elakkan pencetus ketidakselesaan atau sawan.

  1. 1prefers-reduced-motion dalam CSS dan JS
  2. 2Gangguan Vestibular dan Risiko Paralaks
  3. 3Ambang Tiga Kilatan untuk Sawan
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
26

B24 pelajaranPRO

Jadikan carta dan graf dapat dilihat melangkaui warna dan bentuk.

  1. 1Setiap Carta Memerlukan Alternatif Teks
  2. 2Sandaran Jadual Data
  3. 3Warna, Corak dan Label Langsung
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
27

B24 pelajaranPRO

Kesan kelas pepijat kebolehcapaian secara automatik dalam saluran paip anda.

  1. 1Perkara yang Boleh dan Tidak Boleh Dikesan Automasi
  2. 2Mengimbas dengan axe DevTools dan Lighthouse
  3. 3Menyepadukan axe-core ke dalam Ujian Playwright
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
28

B24 pelajaranPRO

Jalankan audit manual berstruktur dan utamakan pembaikan yang penting.

  1. 1Membina Aliran Kerja Audit Manual
  2. 2Keparahan dan Pengutamaan Impak
  3. 3Menulis Laporan Pepijat yang Boleh Diambil Tindakan oleh Pembangun
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
29

B24 pelajaranPRO

Fahami undang-undang dan piawaian yang meletakkan kebolehcapaian dalam pelan hala tuju.

  1. 1ADA, Seksyen 508 dan Tindakan Undang-Undang Web US
  2. 2Akta Kebolehcapaian Eropah dan EN 301 549
  3. 3WCAG sebagai Ukuran Undang-Undang Bersama
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
30

B24 pelajaranPRO

Sematkan kebolehcapaian dalam pasukan anda supaya amalan ini berterusan melangkaui satu projek.

  1. 1Anjak ke Kiri: a11y dalam Reka Bentuk dan Tiket
  2. 2Takrif Selesai yang Merangkumi a11y
  3. 3Senarai Semak Kebolehcapaian Praktikal bagi Setiap Ciri
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
CoddyKit PRO

Dapatkan akses kepada kesemua 30 kursus dalam laluan ini dan semua laluan lain

Tutor AI, peperiksaan pensijilan dan sijil. Berfungsi di laman web, iOS dan Android.

Lihat semua pelan
Tahunan$29.90 / tahunKira-kira $2.49 sebulanBayar sekaliSeumur hidup$69.99 sekaliTiada pembaharuan. PRO selama-lamanya.
Gambaran Keseluruhan Kursus

Kebolehcapaian Web (a11y): Bina untuk Semua

Bina laman web inklusif yang boleh digunakan oleh semua orang. Kuasai HTML semantik, sokongan ARIA, papan kekunci dan pembaca skrin, serta pematuhan WCAG 2.2. Laluan ini merangkumi 30 kursus mini berperingkat daripada pemula mutlak (A1) hingga tahap lanjutan (B2), dengan pelajaran ringkas yang berfokus serta kuiz pantas untuk mengukuhkan setiap konsep.

Apa yang Akan Anda Pelajari

Anda akan bermula dengan asas dan beralih kepada topik pertengahan serta lanjutan, dengan setiap kursus dibina berdasarkan kursus sebelumnya. Setiap pelajaran bersifat praktikal dan ringkas, dengan tutor AI 24/7 yang tersedia apabila anda memerlukan bantuan.

Cara Kursus Ini Berfungsi

Setiap kursus dipecahkan kepada empat pelajaran ringkas yang berfokus. Lengkapkan beberapa pelajaran sehari dan anda akan menguasai keseluruhan laluan dalam beberapa minggu, bukan beberapa bulan.

Alat

Berlatih dengan AI, bukan sekadar membaca

Tingkatkan pembelajaran anda dengan alat dan ciri berkuasa AI

Sembang AIBerbual dengan tutor AITanya Soalan SuperDapatkan jawapan bertaraf pakarPROCipta PelajaranPembina pelajaran berkuasa AIPROMulakan Peperiksaan PensijilanDapatkan sijil andaPROMulakan CabaranUji kemahiran anda

Cara Anda Belajar

  1. 01

    Pelajaran Interaktif

    Latihan pengekodan amali dengan maklum balas masa nyata

  2. 02

    Tutor AI

    Dapatkan bantuan segera daripada AI kami apabila anda buntu

  3. 03

    Penyunting Terbina Dalam

    Tulis dan jalankan kod terus dalam pelayar anda

  4. 04

    Sijil

    Dapatkan sijil selepas melengkapkan kursus

Terus meneroka

Laluan pembelajaran berkaitan

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 logoSeni Bina Mikrobahagian Hadapan dengan 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

Soalan Lazim

Adakah kursus Web Accessibility Academy percuma?

Ya. Anda boleh memulakan kursus Web Accessibility Academy secara percuma dan mengikuti pelajaran interaktifnya tanpa sebarang bayaran. Langganan PRO pilihan membuka akses kepada alat kecerdasan buatan lanjutan dan sijil yang boleh dikongsi.

Adakah saya memerlukan pengalaman terdahulu untuk mempelajari HTML?

Tidak. Kursus ini bermula dengan asas dan beralih secara beransur-ansur kepada topik yang lebih maju, jadi anda boleh bermula walaupun tanpa pengalaman terdahulu dalam HTML.

Bagaimanakah saya akan mempelajari HTML di CoddyKit?

Anda belajar melalui amali. Pelajaran interaktif yang ringkas menggabungkan penerangan yang jelas dengan latihan pengekodan praktikal yang berjalan dalam masa nyata, manakala tutor kecerdasan buatan 24/7 memberikan bantuan yang diperibadikan apabila anda menghadapi kesukaran.

Adakah saya mendapat sijil selepas menamatkan Web Accessibility Academy?

Ya. Pelajar PRO boleh menduduki peperiksaan dan memperoleh sijil tamat kursus yang boleh dikongsi, lengkap dengan kod yang boleh disahkan untuk kursus Web Accessibility Academy.

Bolehkah saya mempelajari HTML melalui telefon saya?

Ya. CoddyKit tersedia di web dan sebagai aplikasi asli iOS serta Android, jadi anda boleh mempelajari HTML pada mana-mana peranti dan kemajuan anda disegerakkan merentas semua peranti.

Berapakah kos CoddyKit PRO?

Kursus pertama dalam Web Accessibility Academy adalah percuma. CoddyKit PRO membuka akses kepada setiap kursus: $5.90 seminggu, $7.90 sebulan, $29.90 setahun atau $69.99 sekali untuk akses seumur hidup tanpa pembaharuan.

Berapa lama masa yang diperlukan untuk melengkapkan Web Accessibility Academy?

Web Accessibility Academy mempunyai 30 kursus dan 120 pelajaran. Kebanyakan pelajaran mengambil masa kira-kira 5–10 minit, jadi keseluruhan laluan ini memerlukan sekitar 14 jam latihan amali, mengikut rentak anda sendiri.

Mulakan Web Accessibility Academy Sekarang

Sertai ribuan pelajar yang menguasai pengaturcaraan melalui pelajaran berkuasa kecerdasan buatan.

Mula belajar secara percumaSemak Semua Kursus