Asas Kebolehcapaian Web — Membina Laman Web untuk Semua Orang

Lebih daripada satu bilion orang di seluruh dunia hidup dengan beberapa bentuk ketidakupayaan. Itu kira-kira 15% daripada populasi global. Dalam kalangan mereka terdapat orang yang buta atau mempunyai penglihatan rendah, orang yang pekak atau sukar mendengar, orang yang mempunyai kecacatan motor, perbezaan kognitif, atau keadaan sementara seperti tangan patah atau migrain.

Apabila kita membina laman web tanpa mempertimbangkan realiti ini, kita bukan sekadar menyebabkan kesulitan. Kita menghalang orang daripada mengakses maklumat, perkhidmatan, dan peluang yang dianggap wajar oleh orang lain. Kebolehcapaian bukan satu ciri. Ia adalah tanggungjawab.

Apa maksud kebolehcapaian web

Kebolehcapaian web bermaksud mereka bentuk dan membangunkan laman web supaya orang kurang upaya dapat melihat, memahami, menavigasi, dan berinteraksi dengannya. Ia juga bermaksud mereka boleh menyumbang kepada web.

Ini melampaui pembaca skrin. Kebolehcapaian meliputi:

• Visual: buta, penglihatan rendah, buta warna
• Auditori: pekak, sukar mendengar
• Motor: kawalan motor halus terhad, gegaran, lumpuh
• Kognitif: disleksia, ADHD, kesukaran ingatan, ketidakupayaan pembelajaran
• Sementara dan situasi: pergelangan tangan patah, cahaya matahari terang pada skrin, persekitaran bising, internet perlahan

Wawasan utama: reka bentuk yang boleh diakses memberi manfaat kepada semua orang. Sari kata membantu di tempat yang bising. Kontras tinggi membantu di bawah cahaya terang. Navigasi papan kekunci membantu pengguna mahir. Tulisan yang jelas membantu penutur bukan asli. Kebolehcapaian bukan mod khas — ia adalah reka bentuk yang baik.

Piawaian WCAG

Garis Panduan Kebolehcapaian Kandungan Web (WCAG) ialah piawaian antarabangsa untuk kebolehcapaian web, diterbitkan oleh W3C. Versi semasa ialah WCAG 2.2, diorganisasikan berdasarkan empat prinsip yang dikenali dengan akronim POUR:

Boleh Dipersepsi (Perceivable)

Maklumat mesti dipersembahkan dengan cara yang boleh dipersepsi oleh semua pengguna.

• Alternatif teks: setiap imej memerlukan atribut alt yang menerangkan kandungannya. Imej hiasan menggunakan alt="".
• Sari kata dan transkrip: kandungan video memerlukan sari kata; kandungan audio memerlukan transkrip.
• Struktur boleh suai: kandungan mesti bermakna apabila gaya dikeluarkan. Gunakan HTML semantik (<h1>, <nav>, <main>, <article>).
• Kandungan boleh dibezakan: kontras warna mencukupi, teks boleh diubah saiz, tiada maklumat yang disampaikan melalui warna sahaja.

Boleh Dioperasi (Operable)

Pengguna mesti boleh mengoperasikan antara muka.

• Boleh diakses papan kekunci: setiap elemen interaktif mesti boleh dicapai dan digunakan dengan papan kekunci sahaja. Tiada perangkap tetikus.
• Masa mencukupi: jika kandungan mempunyai had masa, pengguna mesti boleh melanjutkan atau menyahaktifkannya.
• Tiada pencetus sawan: elakkan kandungan yang berkelip lebih daripada tiga kali sesaat.
• Boleh dinavigasi: tajuk halaman yang jelas, struktur tajuk yang logik, pautan langkau navigasi, penunjuk fokus yang kelihatan.

Boleh Difahami (Understandable)

Kandungan dan antara muka mesti boleh difahami.

• Teks boleh dibaca: tentukan bahasa halaman (atribut lang). Gunakan bahasa yang jelas dan mudah apabila boleh.
• Tingkah laku boleh diramal: navigasi mesti konsisten. Halaman tidak boleh menukar konteks secara tidak dijangka.
• Bantuan input: labelkan medan borang dengan jelas. Berikan mesej ralat yang membantu yang menerangkan apa yang salah dan cara membetulkannya.

Teguh (Robust)

Kandungan mesti cukup teguh untuk berfungsi dengan teknologi semasa dan masa hadapan.

• HTML yang sah: markup semantik yang betul yang boleh ditafsirkan secara andal oleh teknologi bantuan.
• Nama, peranan, nilai: komponen tersuai mesti mendedahkan tujuannya kepada API kebolehcapaian (melalui ARIA apabila diperlukan).

Tahap pematuhan

WCAG mentakrifkan tiga tahap:

Kebanyakan perundangan di seluruh dunia memerlukan pematuhan Tahap AA. Inilah tahap yang anda harus sasarkan.

Halangan biasa dan cara membetulkannya

Teks alt yang hilang pada imej

Masalahnya: pengguna pembaca skrin mendengar "imej" atau tidak mendengar apa-apa langsung.

Penyelesaiannya: tambah teks alt deskriptif pada setiap imej yang bermaklumat. Untuk imej hiasan, gunakan alt="" supaya pembaca skrin melangkauinya.

<!-- Good -->
<img
  src="chart.png"
  alt="Bar chart showing a 40% increase in sales from January to June 2025"
/>

<!-- Decorative -->
<img src="divider.svg" alt="" />

Kontras warna yang tidak mencukupi

Masalahnya: orang yang mempunyai penglihatan rendah atau buta warna tidak dapat membaca teks.

Penyelesaiannya: pastikan nisbah kontras minimum 4.5:1 untuk teks biasa dan 3:1 untuk teks besar (18px+ atau 14px tebal). Gunakan alat penyemak kontras untuk mengesahkan kombinasi warna anda.

Label borang yang hilang

Masalahnya: pengguna pembaca skrin tidak tahu untuk apa medan borang.

Penyelesaiannya: setiap medan input memerlukan elemen <label> yang kelihatan yang dipautkan melalui atribut for.

<!-- Good -->
<label for="email">Email address</label>
<input type="email" id="email" name="email" />

<!-- Bad: placeholder is not a label -->
<input type="email" placeholder="Email address" />

Tiada navigasi papan kekunci

Masalahnya: pengguna yang tidak dapat menggunakan tetikus tersekat.

Penyelesaiannya: gunakan elemen HTML asli (<button>, <a>, <select>) yang boleh diakses papan kekunci secara lalai. Jika anda membina komponen tersuai, pastikan ia boleh difokus dan bertindak balas terhadap peristiwa papan kekunci. Jangan sekali-kali membuang garis luar fokus tanpa memberikan alternatif.

Struktur halaman yang hilang

Masalahnya: pengguna pembaca skrin tidak dapat menavigasi dengan cekap.

Penyelesaiannya: gunakan HTML semantik. Satu <h1> setiap halaman, hierarki tajuk yang logik (tanpa melangkau tahap), penanda (<nav>, <main>, <footer>).

Media yang bermain secara automatik

Masalahnya: audio yang tidak dijangka mengganggu pengguna pembaca skrin. Video yang bermain secara automatik boleh mencetuskan sawan atau menyebabkan tekanan.

Penyelesaiannya: jangan sesekali mainkan audio secara automatik. Jika video bermain secara automatik, pastikan ia tiada audio secara lalai dan menyediakan kawalan jeda.

Warna sahaja tidak mencukupi

Jangan sekali-kali bergantung pada warna sebagai satu-satunya cara menyampaikan maklumat. Pertimbangkan:

• Medan borang dengan sempadan merah untuk ralat juga memerlukan ikon atau mesej teks
• Carta dengan garisan berwarna juga memerlukan corak, label, atau legenda
• Pautan dalam teks memerlukan garis bawah atau petunjuk visual lain, bukan hanya perubahan warna

Kira-kira 8% lelaki dan 0.5% wanita mempunyai beberapa bentuk kekurangan penglihatan warna. Mereka bentuk dengan mengambil kira perkara ini bukan kes khas — ia adalah inklusiviti asas.

Menguji kebolehcapaian

Pengujian automatik

Alat automatik mengesan kira-kira 30-40% masalah kebolehcapaian. Ia langkah pertama yang baik, bukan penyelesaian lengkap.

• axe DevTools (sambungan pelayar) — mengimbas halaman dan melaporkan pelanggaran WCAG
• Lighthouse (terbina dalam Chrome DevTools) — termasuk audit kebolehcapaian
• WAVE (alat berasaskan web) — tindanan visual yang menunjukkan masalah

Pengujian manual

Banyak masalah kebolehcapaian memerlukan pertimbangan manusia:

• Ujian papan kekunci: cabut tetikus anda dan navigasi keseluruhan laman dengan Tab, Enter, Escape, dan kekunci anak panah. Bolehkah anda mencapai semuanya? Adakah susunan fokus logik?
• Ujian pembaca skrin: cuba VoiceOver (Mac), NVDA (Windows, percuma), atau TalkBack (Android). Adakah kandungan bermakna apabila dibaca dengan kuat?
• Ujian zum: zum pelayar anda ke 200%. Adakah susun atur masih berfungsi? Adakah kandungan yang dipotong atau bertindih?
• Gerakan dikurangkan: aktifkan "kurangkan gerakan" dalam tetapan OS anda. Adakah animasi menghormati keutamaan ini?

Pengujian pengguna

Maklum balas yang paling bernilai datang daripada orang yang benar-benar menggunakan teknologi bantuan dalam kehidupan harian mereka. Jika bajet anda mengizinkan, libatkan pengguna kurang upaya dalam proses pengujian anda.

Kebolehcapaian adalah spektrum, bukan kotak semak

Kebolehcapaian bukan projek sekali sahaja dengan garisan penamat. Ia adalah amalan berterusan. Laman web berubah, kandungan ditambah, dan halangan baharu boleh muncul dengan setiap kemas kini.

Matlamat bukan kesempurnaan. Matlamat adalah penambahbaikan berterusan dan keprihatinan tulen terhadap orang yang menggunakan apa yang anda bina. Mulakan dengan perubahan yang paling memberi kesan — kontras warna, teks alt, navigasi papan kekunci, label borang — dan bina dari situ.

Setiap halangan yang anda keluarkan adalah pintu yang anda buka.

Senarai semak pantas

• Semua imej mempunyai teks alt yang bermakna (atau alt="" jika hiasan)
• Kontras warna memenuhi WCAG AA (4.5:1 untuk teks, 3:1 untuk teks besar)
• Semua medan borang mempunyai label yang kelihatan
• Laman boleh dinavigasi sepenuhnya dengan papan kekunci
• Tajuk mengikut hierarki yang logik
• Penunjuk fokus kelihatan
• Bahasa halaman ditetapkan (atribut lang pada <html>)
• Tiada maklumat yang disampaikan melalui warna sahaja
• Video mempunyai sari kata
• Animasi menghormati prefers-reduced-motion