Penambahan pada 2.2: Tampilan Fokus dan Ukuran Target
Terapkan kriteria yang baru pada versi terbaru.
Penambahan pada 2.2: Tampilan Fokus dan Ukuran Target adalah pelajaran Web Accessibility Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Web Accessibility Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Web Accessibility Academy mencakup 4 pelajaran total.
Hal yang Dibawa oleh 2.2
WCAG 2.2 menambahkan sembilan kriteria keberhasilan baru pada 2023. Dua yang paling praktis untuk antarmuka sehari-hari adalah Tampilan Fokus dan Ukuran Target.
Fokus Tidak Tertutup
Aturan baru 2.4.11 (Fokus Tidak Tertutup) pada tingkat AA menyatakan bahwa elemen yang difokuskan tidak boleh sepenuhnya tersembunyi di balik header tetap atau bilah cookie.
Mengapa Fokus yang Tersembunyi Menyulitkan
Jika banner tetap menutupi kontrol yang difokuskan, pengguna papan ketik akan kehilangan jejak posisi mereka. Mereka harus dapat melihat elemen yang baru saja dituju dengan Tab.
Tampilan Fokus pada AAA
Kriteria 2.4.13 (Tampilan Fokus) berada pada tingkat AAA. Kriteria ini menentukan luas indikator minimum dan kontras 3:1 agar cincin fokus terlihat jelas.
Ukuran Target (Minimum)
Aturan AA 2.5.8 (Ukuran Target Minimum) mengharuskan target ketuk berukuran setidaknya 24 kali 24 piksel CSS, atau memiliki jarak yang cukup di sekelilingnya.
Mengapa 24 Piksel
Target kecil menyulitkan orang yang mengalami tremor atau memiliki jari besar. Batas minimum 24px mengurangi salah ketuk tanpa memaksa semua desain menjadi besar dan kaku.
Pengecualian Jarak
Target berukuran kurang dari 24px tetap dapat memenuhi aturan jika lingkaran 24px di sekeliling titik tengahnya tidak bertumpang tindih dengan target lain. Jarak yang cukup dapat menggantikan ukuran.
Menentukan Ukuran Target dalam CSS
Berikan tombol kecil ukuran minimum yang nyata agar ukurannya melampaui batas minimum 24px dengan nyaman.
button {
min-width: 24px;
min-height: 24px;
}Tautan Sebaris Dikecualikan
Tautan di dalam kalimat dikecualikan dari 2.5.8, karena mengecilkan teks hanya untuk memperbesarnya akan mengganggu pengalaman membaca.
Bantuan yang Konsisten: 3.2.6
Tambahan 2.2 lainnya, 3.2.6 (Bantuan yang Konsisten) pada tingkat A, menjaga tautan bantuan dan informasi kontak berada di tempat relatif yang sama di seluruh halaman.
Entri Berulang: 3.3.7
Kriteria 3.3.7 (Entri Berulang) pada tingkat A menyatakan agar pengguna tidak diminta mengetik ulang informasi yang sudah mereka berikan, kecuali informasi tersebut penting, seperti kata sandi.
Pemeriksaan Singkat
Ingat kembali ukuran minimum target sentuh dari WCAG 2.2.
Rangkuman: Tambahan 2.2
2.2 menambahkan aturan tentang fokus dan target: jaga agar fokus tetap terlihat, buat target berukuran 24px atau beri jarak yang cukup, dan hentikan entri berulang. Berikutnya: menyeret dan autentikasi. 🎯
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Penambahan pada 2.2: Tampilan Fokus dan Ukuran Target” gratis?
Ya — teks lengkap “Penambahan pada 2.2: Tampilan Fokus dan Ukuran Target” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Web Accessibility Academy, upgrade ke CoddyKit PRO. Kursus Web Accessibility Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Penambahan pada 2.2: Tampilan Fokus dan Ukuran Target”?
Terapkan kriteria yang baru pada versi terbaru. Kamu berlatih Web Accessibility Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Web Accessibility Academy?
Tidak diperlukan pengalaman sebelumnya. Web Accessibility Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “Penambahan pada 2.2: Tampilan Fokus dan Ukuran Target” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Web Accessibility Academy ini?
Ya. Setiap pelajaran Web Accessibility Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- A, AA, AAA: Memilih Target yang Tepat
- Penambahan pada 2.2: Tampilan Fokus dan Ukuran Target
- Gerakan Menyeret dan Autentikasi yang Dapat Diakses
- Menulis Pernyataan Kesesuaian yang Dapat Dipertanggungjawabkan