Tersembunyi Secara Visual hingga Mendapat Fokus
Sembunyikan tautan dari pengguna tetikus, lalu tampilkan saat tombol Tab ditekan.
Tersembunyi Secara Visual hingga Mendapat Fokus adalah pelajaran Web Accessibility Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.
Ketegangan dalam Desain
Tautan lewati sangat penting, tetapi banyak tim khawatir tautan tersebut mengacaukan tata letak. Jawaban klasiknya: sembunyikan secara visual, tetapi tetap siapkan untuk pengguna papan ketik.
Jangan Pernah Gunakan display none
Jangan gunakan display none atau visibility hidden. Keduanya menghapus tautan dari pohon aksesibilitas, sehingga tidak ada yang dapat memberikan focus kepadanya.
Tersembunyi Secara Visual, Tetap Ada
Tujuannya adalah keadaan tersembunyi secara visual: tidak terlihat di layar, tetapi sepenuhnya tersedia untuk papan ketik dan pembaca layar.
Pola Pemotongan
Salah satu trik umum adalah mengecilkan tautan menjadi satu piksel lalu memotong tampilannya. Tautan tetap berada di DOM dan urutan focus, hanya saja tidak terlihat.
.skip-link { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }Tampilkan Saat Mendapat Focus
Bagian pentingnya adalah keadaan focus. Saat Tab mendarat pada tautan, CSS Anda mengembalikan ukurannya dan menariknya kembali ke dalam tampilan.
.skip-link:focus { width: auto; height: auto; clip: auto; top: 0; }Mengapa focus, Bukan hover
Gunakan focus, jangan hover. Pengguna papan ketik tidak dapat melakukan hover, sehingga tampilan yang hanya muncul saat hover akan membuat tautan tetap tidak terlihat bagi mereka.
Buat Terlihat Jelas
Saat ditampilkan, berikan latar belakang dan padding yang solid. Tampilannya harus seperti tombol yang jelas, bukan teks samar yang mungkin terlewatkan pengguna.
Pertahankan Garis Besar Focus
Jangan menghapus garis besar focus pada tautan yang ditampilkan. Pengguna perlu melihat dengan tepat di mana focus mereka berada.
Perhatikan Perhitungan Posisi
Sering kali tautan yang tersembunyi berada di luar layar dengan top negatif, lalu bergeser ke top nol saat mendapat focus. Pergeseran ini membuat kemunculannya terasa disengaja.
Utilitas yang Dapat Digunakan Ulang
Pola tersembunyi secara visual ini sangat berguna sehingga sebagian besar tim menyimpannya sebagai kelas utilitas bersama untuk konten sr-only apa pun.
Uji Kemunculannya
Tekan Tab setelah memuat halaman dari awal. Tautan lewati seharusnya langsung muncul. Berpindahlah dengan Tab, dan tautan tersebut seharusnya menghilang lagi. ✅
Pemeriksaan Singkat
Pendekatan mana yang benar untuk menyembunyikan tautan lewati sampai diperlukan?
Rangkuman
Sembunyikan tautan lewati dengan pemotongan, jangan pernah gunakan display none, dan tampilkan saat mendapat focus dengan garis besar yang jelas. Tidak terlihat sampai diperlukan. 🎯
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Tersembunyi Secara Visual hingga Mendapat Fokus” gratis?
Ya — teks lengkap “Tersembunyi Secara Visual hingga Mendapat Fokus” 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 “Tersembunyi Secara Visual hingga Mendapat Fokus”?
Sembunyikan tautan dari pengguna tetikus, lalu tampilkan saat tombol Tab ditekan. 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 3 dari 4.
Berapa lama pelajaran “Tersembunyi Secara Visual hingga Mendapat Fokus” 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
- Mengapa Lewati ke Konten Utama Diperlukan
- Membuat Tautan Lewati yang Benar-Benar Berfungsi
- Tersembunyi Secara Visual hingga Mendapat Fokus
- Beberapa Tautan Lewati untuk Halaman Besar