Kode sumber kasus:
https://codepen.io/shadeed/pen/03caf6b36727accb692eecbc38f95d39?editors=1100
5. Dampak aksesibilitas terhadap visibilitas: tersembunyi
Elemen disembunyikan, turunannya dihapus dari pohon aksesibilitas, dan pembaca layar tidak merender elemen tersebut.
(1) Penentuan posisi
Untuk menyembunyikan elemen dengan atribut position, kita harus memindahkannya keluar layar dan mengatur ukurannya menjadi 0 (lebar dan tinggi). Contohnya adalah link navigasi lompat. Perhatikan diagram berikut:
Untuk menempatkan tautan di luar layar kita harus menambahkan yang berikut ini
「css」
.skip-link {
posisi: mutlak;
atas: -100%;
}Nilai -100% akan mendorong elemen hingga 100% dari ketinggian area pandangnya. Akibatnya, itu akan tersembunyi sepenuhnya. Setelah di fokuskan pada keyboard maka akan muncul tampilan seperti ini
.skip-link:fokus {
posisi: mutlak;
atas: 0;
}Kode sumber kasus:
https://codepen.io/shadeed/pen/707992e7c98ea633fc6606e576ef8a04?editors=0100
6. Dampak aksesibilitas terhadap posisi: mutlak |
Elemen ini dapat diakses oleh pembaca layar dan dapat difokuskan pada keyboard. Itu hanya tersembunyi dari viewport.
Clip Path Ketika clip-path digunakan pada suatu elemen, ini menciptakan area kliping yang menentukan bagian mana yang harus ditampilkan dan disembunyikan.
Pada contoh di atas, area hitam transparan memiliki jalur klip. Saat jalur klip diterapkan ke suatu elemen, apa pun yang berada di bawah area hitam transparan tidak akan muncul.
Untuk mendemonstrasikan hal di atas secara lebih visual, saya akan menggunakan alat clippy. Dalam GIF di bawah, saya memiliki jalur klip berikut:
Tetapkan nilai poligon di setiap arah menjadi 0 0 dan area pemotongan akan diubah ukurannya menjadi 0. Akibatnya gambar tidak akan ditampilkan. Hal serupa juga dapat dilakukan dengan mengganti poligon dengan lingkaran:
gambar {
jalur klip: lingkaran(0 pada 50% 50%);
} 
7. Dampak aksesibilitas pada clip-path
Elemennya hanya tersembunyi secara visual, pembaca layar dan fokus keyboard masih dapat menggunakannya.
Kode sumber kasus:
https://codepen.io/shadeed/pen/9fdbd7be9fd9dac17a614c96ba7f64b1?editors=0100
3. Kontrol warna dan ukuran font
Meskipun kedua teknik ini tidak umum seperti yang kita bahas sebelumnya, keduanya mungkin berguna untuk kasus penggunaan tertentu.
1. Warna transparan
Dengan membuat warna teks menjadi transparan, teks tersebut akan tersembunyi secara visual. Ini berguna untuk tombol yang hanya memiliki ikon.
2. Ukuran huruf
Selain itu, berguna untuk mengatur ukuran font ke 0, karena ini menyembunyikan teks secara visual. Perhatikan contoh berikut, dimana terdapat tombol dengan struktur sebagai berikut:
<tombol> <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="false" focusable="false"> <!-- Data jalur --> </svg> <span>Suka</span> </tombol>
Tujuan kami adalah menyembunyikan teks dengan cara yang mudah diakses. Untuk ini saya menambahkan CSS berikut
.rentang tombol {
warna: transparan;
ukuran font: 0;
}Dengan cara ini, teksnya disembunyikan. Bahkan berfungsi tanpa mengubah warna, tetapi saya menambahkannya untuk tujuan penjelasan.
Kode sumber kasus:
https://codepen.io/shadeed/pen/4eacdf50c3339fced7f787156c569372?editors=1100
3. Aria Tersembunyi
Saat Anda menambahkan atribut aria-hidden ke sebuah elemen, elemen tersebut akan dihapus dari pohon aksesibilitas, sehingga dapat meningkatkan pengalaman bagi pengguna pembaca layar. Perhatikan bahwa ini tidak menyembunyikan elemen secara visual, ini hanya ditujukan untuk pengguna pembaca layar
<tombol> Menu <svg aria-hidden="benar"><!-- --></svg> </tombol>
Pada contoh di atas, kita memiliki tombol menu dengan label dan ikon. Untuk menyembunyikan ikon dari pembaca layar, aria-hidden telah ditambahkan.
Menurut Mozilla Developer Network (MDN), berikut adalah kasus penggunaan properti
Sembunyikan konten dekoratif seperti ikon dan gambar. Sembunyikan teks yang disalin. Sembunyikan konten di luar layar atau diciutkan.
4. Dampak aksesibilitas pada aria-hidden="true"
dirancang untuk pembaca layar karena menyembunyikan konten hanya dari pembaca layar. Namun, konten tetap terlihat oleh pengguna yang dapat melihat, dan keyboard dapat difokuskan.
(1) Animasi dan interaksi
Saat kita ingin menganimasikan elemen tersembunyi, misalnya untuk menampilkan navigasi seluler yang tersembunyi, hal itu perlu dilakukan dengan cara yang dapat diakses. Untuk pengalaman yang dapat diakses, kami akan mempelajari beberapa contoh baik untuk dipelajari, dan beberapa contoh buruk untuk menghindari kesalahan yang dapat menciptakan pengalaman buruk bagi pengguna pembaca layar.
Animasi Menu - Contoh Buruk
Kami memiliki menu yang perlu memiliki animasi geser saat diperluas. Cara termudah adalah dengan menambahkan yang berikut ini ke menu Anda:
jalan {
opacity: 0;
transformasi: terjemahkanX(100%);
transisi: kemudahan 0,3 detik;
}
ul.aktif {
opacity: 1;
transformasi: terjemahkanX(0);
}Dengan cara di atas, menu akan diperluas dan diciutkan berdasarkan kelas .active, yang akan ditambahkan melalui JavaScript sebagai berikut:
menuToggle.addEventListener('klik', fungsi(e){
e.preventDefault();
navMenu.classList.toggle('aktif');
});
Hasilnya mungkin terlihat bagus, tetapi ada bug yang besar. Menggunakan opacity: 0 tidak akan menyembunyikan navigasi pohon aksesibilitas. Meskipun navigasinya tersembunyi secara visual, navigasi tersebut tetap dapat difokuskan melalui keyboard dan dapat diakses oleh pembaca layar. Itu harus disembunyikan untuk menghindari membingungkan pengguna.
Berikut tangkapan layar pohon aksesibilitas dari Chrome Dev Tools:
Sederhananya, pohon aksesibilitas adalah daftar semua konten yang dapat diakses oleh pengguna pembaca layar. Dalam kasus kami, daftar navigasi ada di sana, meskipun tersembunyi secara visual. Kita perlu menyelesaikan dua masalah:
Hindari menggunakan fokus keyboard saat menu disembunyikan. Hindari memberitahukan navigasi melalui pembaca layar saat navigasi disembunyikan
Tangkapan layar di bawah menunjukkan bagaimana rotor VoiceOver di Mac OS melihat halaman tersebut. Daftar navigasi ada di sana saat disembunyikan
Kode sumber kasus:
https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0100
Animasi Menu - Contoh yang Baik
Untuk memperbaiki kesalahan ini, kita perlu menggunakan visibilitas: tersembunyi untuk menu navigasi. Ini akan memastikan bahwa menu disembunyikan dari pembaca visual dan layar.
「css」
jalan {
visibilitas: tersembunyi;
opacity: 0;
transformasi: terjemahkanX(100%);
transisi: kemudahan 0,3 detik;
}
ul.aktif {
visibilitas: terlihat;
opacity: 1;
transformasi: terjemahkanX(0);
}Setelah ditambahkan, menu akan disembunyikan dari pembaca layar. Mari kita uji lagi dan lihat apa yang akan ditampilkan VoiceOver:
Kode sumber kasus:
https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0110
5. Kotak centang khusus
Desain kotak centang default sulit untuk disesuaikan, oleh karena itu, kita perlu membuat desain khusus untuk kotak centang tersebut. Mari kita lihat HTML dasar:
<p kelas="c-kotak centang"> <input class="sr-only" type="checkbox" name="" id="c1"> <label class="c-checkbox__label" for="c1">Kotak centang khusus</label> </p>
Untuk menyesuaikan kotak centang, kita perlu menyembunyikan masukan dengan cara yang mudah diakses. Untuk tujuan ini posisi dan properti lainnya harus digunakan. Ada kelas CSS umum yang disebut sr-only atau visual-hidden yang hanya menyembunyikan elemen secara visual dan membuatnya dapat diakses oleh pengguna keyboard dan pembaca layar.
.sr-saja {
batas: 0;
klip: lurus(0 0 0 0);
-jalur klip-webkit: poligon(0px 0px, 0px 0px, 0px 0px);
jalur klip: poligon(0px 0px, 0px 0px, 0px 0px);
tinggi: 1 piksel;
margin: -1 piksel;
meluap: tersembunyi;
bantalan: 0;
posisi: mutlak;
lebar: 1 piksel;
spasi putih: nowrap;
}Kode sumber kasus: https://codepen.io/shadeed/pen/b722aa72dbe3574617f6506d14e5ac03?editors=1100
Tombol sembunyikan
Di Twitter, ada tombol bernama "Lihat Tweet Baru" yang disembunyikan untuk pembaca layar dengan konten aria-tersembunyi dan hanya muncul ketika tweet baru tersedia.
Meringkaskan
Ini menyimpulkan artikel ini tentang tutorial terperinci tentang metode dan kelebihan dan kekurangan menyembunyikan elemen di Web. Untuk informasi lebih lanjut tentang menyembunyikan elemen di Web, silakan cari artikel sebelumnya di downcodes.com atau lanjutkan menelusuri artikel terkait di bawah I harap Tolong dukung downcodes.com lebih lanjut di masa depan!