Apa Itu Kebolehaksesan Web? WCAG dan Reka Bentuk Inklusif Dijelaskan

Kebolehaksesan web bermaksud membina laman web dan app supaya orang kurang upaya boleh menggunakannya — sama ada mereka buta dan menggunakan pembaca skrin, tidak boleh menggunakan tetikus, berpenglihatan rendah atau buta warna, pekak, atau mempunyai kurang upaya kognitif atau pembelajaran. Dalam amalan, ia bermuara kepada perkara seperti teks alternatif untuk imej, kontras warna yang mencukupi, borang dengan label yang betul, dan segala-galanya berfungsi dengan papan kekunci sahaja. Standard antarabangsanya ialah WCAG, Web Content Accessibility Guidelines daripada W3C.

Kebolehaksesan sering disingkatkan sebagai a11y — "a", kemudian 11 huruf, kemudian "y".

Mengapa kebolehaksesan penting apabila anda membina dengan AI

Pembina AI pandai menghasilkan app yang kelihatan betul. Kebolehaksesan kebanyakannya tentang perkara yang tidak dapat dilihat dalam tangkapan skrin: sama ada butang itu benar-benar butang, sama ada input mempunyai label yang boleh diumumkan oleh pembaca skrin, sama ada anda boleh sampai ke menu dengan kekunci Tab.

Sebab itulah penting untuk bertanya:

• Ia mudah terlepas pandang. Menu lungsur yang digayakan khas boleh kelihatan sempurna dan mustahil digunakan tanpa tetikus. Anda tidak akan perasan melainkan anda mengujinya.
• Lebih murah untuk betul dari awal. Meminta komponen yang boleh diakses dari arahan pertama hampir tidak menelan kos. Membaiki app yang sudah siap bermakna menyentuh setiap skrin.
• Ia membantu semua orang. Sari kata membantu orang di tempat bising, kontras yang baik membantu orang di telefon di bawah cahaya matahari, dan label yang jelas membantu semua orang mengisi borang dengan lebih pantas.
• Ia bertindih dengan SEO. Tajuk yang betul, pautan yang diterangkan dan teks alt membantu enjin carian memahami halaman anda juga — lihat SEO untuk laman web yang dibina dengan AI.
• Ia mungkin satu keperluan. Bergantung pada tempat anda beroperasi dan siapa yang anda layani, kebolehaksesan boleh menjadi kewajipan undang-undang.

Analogi harian

Bayangkan pintu masuk sebuah bangunan.

Tangga berfungsi untuk ramai orang. Ramp berfungsi untuk pengguna kerusi roda — dan juga untuk ibu bapa yang menolak kereta bayi, pekerja penghantaran dengan troli dan pengembara dengan beg bagasi. Pintu automatik, papan tanda yang jelas, braille pada butang lif dan pencahayaan yang baik menghapuskan satu halangan untuk seseorang.

Kebolehaksesan web ialah idea yang sama untuk ruang digital: ramp, papan tanda dan pemegang tangan bagi app anda. Dan seperti bangunan, lebih mudah untuk memasukkan ramp dalam pelan berbanding menambahnya selepas simen mengeras.

WCAG secara ringkas

WCAG diterbitkan oleh Web Accessibility Initiative W3C. Versi semasa ialah WCAG 2.2, pertama kali diterbitkan pada Oktober 2023. Ia serasi ke belakang: kandungan yang memenuhi WCAG 2.2 turut memenuhi 2.1 dan 2.0, dan W3C menggalakkan penggunaan versi terkini. WCAG 2.2 juga diluluskan sebagai standard antarabangsa, ISO/IEC 40500:2025. WCAG 3 yang sangat berbeza sedang dibangunkan sebagai draf awal, bukan standard yang telah siap.

WCAG disusun di bawah empat prinsip, sering diingati sebagai POUR:

Setiap garis panduan mempunyai kriteria kejayaan yang boleh diuji pada tiga tahap:

• Tahap A — minimum. Gagal memenuhi ini menghalang sesetengah orang sepenuhnya.
• Tahap AA — sasaran standard, dan tahap yang paling banyak undang-undang dan dasar rujuk.
• Tahap AAA — tahap tertinggi. Berguna untuk disasarkan di tempat tertentu, tetapi W3C tidak mengesyorkan untuk mewajibkannya bagi keseluruhan laman, kerana sesetengah kandungan tidak boleh memenuhinya.

WCAG 2.2 menambah sembilan kriteria kejayaan kepada 2.1, termasuk Target Size (Minimum) pada tahap AA — sasaran yang boleh diklik umumnya sekurang-kurangnya 24 kali 24 piksel CSS, dengan pengecualian — dan Accessible Authentication (Minimum), yang mengehadkan langkah log masuk yang bergantung pada ingatan atau teka-teki, seperti perlu menaip semula kata laluan tanpa dibenarkan menampalnya. Ia juga mengeluarkan kriteria lama "Parsing" kerana sudah lapuk.

Contoh kerja: borang pendaftaran

Inilah borang pendaftaran yang mungkin dihasilkan AI, dan apa yang semakan kebolehaksesan dapati:

Tiada satu pun pembetulan ini banyak mengubah rupa borang. Kesemuanya mengubah sama ada sesetengah orang boleh menggunakannya sama sekali.

Istilah utama

Salah faham yang biasa

• "Kebolehaksesan hanya penting untuk pengguna buta." Ia meliputi kurang upaya penglihatan, motor, pendengaran, pertuturan dan kognitif, serta keadaan sementara seperti tangan patah.
• "Laman yang boleh diakses kelihatan biasa sahaja." Kebolehaksesan mengehadkan beberapa perkara — kontras, gaya fokus, saiz teks — tetapi laman yang boleh diakses dan kelihatan baik adalah kebiasaan, bukan pengecualian.
• "Pemeriksa automatik kata 100, jadi kita sudah selesai." Alat automatik hanya menangkap sebahagian isu. Sama ada teks alt benar-benar bermakna, atau sama ada satu aliran masuk akal dengan pembaca skrin, memerlukan manusia untuk menyemaknya.
• "Widget overlay akan menjadikan kami mematuhi." Bar alat yang dipasang di atas tidak boleh membetulkan label yang hilang atau akses papan kekunci yang rosak dalam kod anda. Betulkan sumbernya.
• "Kami tiada pengguna kurang upaya." Anda mungkin sekadar tidak tahu. Banyak kurang upaya tidak kelihatan, dan orang yang menghadapi halangan biasanya hanya pergi.

Apa yang perlu diminta daripada pembina AI anda

• "Bina ini untuk memenuhi WCAG 2.2 tahap AA."
• "Gunakan HTML semantik: butang, pautan dan tajuk yang sebenar mengikut susunan, serta label untuk setiap medan borang."
• "Pastikan setiap elemen interaktif berfungsi dengan papan kekunci sahaja dan mempunyai gaya fokus yang kelihatan."
• "Semak semua warna teks dan ikon untuk kontras — 4.5:1 untuk teks biasa, 3:1 untuk teks besar dan ikon."
• "Tambah teks alt yang bermakna untuk imej bermaklumat dan teks alt kosong untuk imej hiasan."
• "Tunjukkan ralat borang sebagai teks, dipautkan kepada medan, dan bukan hanya dengan warna."
• "Hormati tetapan gerakan dikurangkan pengguna untuk animasi."
• "Jalankan semakan kebolehaksesan automatik dan senaraikan apa yang tidak dapat diujinya, supaya saya boleh menyemaknya secara manual."

Kemudian uji sendiri: ketepikan tetikus dan cuba lengkapkan aliran utama anda hanya dengan Tab, Shift+Tab, Enter dan Space. Cuba pembaca skrin terbina dalam telefon anda pada halaman utama. Zum pelayar kepada 200% dan lihat sama ada ada yang rosak.

Kebolehaksesan dalam Mythex

Mythex tidak menyertakan pemeriksa kebolehaksesan khusus, jadi anggap kebolehaksesan sebagai sebahagian daripada arahan dan ujian anda. Minta WCAG 2.2 AA dari arahan pertama, semak hasilnya dalam Pratonton dengan papan kekunci, dan gunakan /test untuk meminta ejen mengklik melalui aliran utama anda sebelum anda menerbitkan — lihat Ujian App. Resipi SEO juga meminta tajuk semantik dan teks alt yang bermakna, yang berkhidmat untuk kedua-dua matlamat.

Untuk senarai semak praktikal, lihat cara menjadikan laman web anda boleh diakses. Untuk reka bentuk, baca cara mereka bentuk app yang menarik dengan AI, dan sebelum pelancaran, cara menguji app anda sebelum pelancaran. Sumber yang berwibawa ialah gambaran keseluruhan WCAG W3C sendiri.

Soalan lazim