Metode penyembunyian halaman web

Pengembang web harus menyembunyikan elemen halaman web karena berbagai alasan. Misalnya, ada tombol yang harus terlihat saat melihat situs di perangkat seluler, dan disembunyikan - saat menggunakan browser desktop. Atau, misalnya, ada elemen navigasi tertentu yang harus disembunyikan di browser seluler dan ditampilkan di desktop. Elemen yang tidak terlihat pada halaman bisa di berbagai negara:

• Suatu elemen benar-benar tidak terlihat dan, apalagi, dihapus dari aliran dokumen.
• Elemen tidak bisa dilihat melalui mata, tetapi ia ada dalam dokumen dan tersedia untuk teknologi bantu seperti pembaca layar.
• Item terlihat tetapi disembunyikan dari pembaca layar.

Artikel, terjemahan yang kami terbitkan hari ini, dikhususkan untuk analisis metode untuk menyembunyikan elemen halaman web menggunakan HTML dan CSS. Di sini, masalah seperti aksesibilitas konten, animasi, dan skenario untuk menggunakan teknologi untuk menyembunyikan data pada halaman akan dibahas.

Atribut tersembunyi HTML5

Hidden adalah atribut HTML logis yang menyembunyikan elemen yang ditugaskan padanya. Ketika browser memuat halaman, itu tidak akan menampilkan elemen dengan atribut hidden , kecuali ketika visibilitas elemen diaktifkan secara manual menggunakan CSS. Efek dari atribut ini mirip dengan menerapkan display: none aturan untuk elemen CSS.

Perhatikan contoh berikut:

 <h1>Spring is on the way</h1> <img hidden src="landscape.jpg" alt=""> <p><!-- Description content --></p> 

Ada markup yang mengatur judul, gambar, dan deskripsi. Gambar harus ditampilkan hanya jika lebar viewport melebihi 400px . Saya telah menambahkan atribut hidden ke elemen <img> .

Di CSS, saya menggunakan atribut hidden untuk menampilkan elemen hanya jika area tampilan halaman adalah ukuran yang tepat.


Cuplikan halaman web

Berikut adalah kode CSS yang digunakan di sini:

 img[hidden] {  display: none; } @media (min-width: 400px) {  img[hidden] {    display: block;  } } 

→ Ini adalah contoh halaman ini di CodePen

Di sini Anda mungkin memiliki pertanyaan tentang mengapa tidak hanya menggunakan display: none . Pertanyaan yang bagus Ketika pemilih gambar dipanggil melalui atribut hidden , kita dapat yakin bahwa meskipun kode CSS karena alasan tertentu tidak dimuat, elemen tersebut akan disembunyikan.

▍ Atribut tersembunyi dan aksesibilitas konten

Jika kami mempertimbangkan atribut hidden dari sudut pandang aksesibilitas konten, ternyata atribut ini sepenuhnya menyembunyikan elemen tersebut. Akibatnya, pembaca layar tidak dapat bekerja dengan item ini. Jangan gunakan atribut ini dalam kasus di mana elemen halaman tertentu harus dibuat tidak terlihat oleh manusia, tetapi tidak untuk pembaca layar.

Properti tampilan CSS

Setiap elemen halaman web memiliki nilai properti display tertentu yang ditetapkan secara default. Bisa berupa inline-block , block , table dan sebagainya. Untuk menyembunyikan elemen menggunakan properti display , kita dapat menggunakan display: none konstruksi. Jika suatu elemen disembunyikan menggunakan konstruksi ini, maka semua turunannya akan disembunyikan dengannya.

Bayangkan kita ingin menyembunyikan gambar dari contoh sebelumnya dan memutuskan untuk menggunakan kode CSS berikut:

 img {  display: none; } @media (min-width: 400px) {  img {    display: block;  } } 

Dengan pendekatan ini, gambar akan sepenuhnya dikecualikan dari dokumen (dari apa yang disebut aliran dokumen - "aliran dokumen"), itu tidak akan dapat diakses oleh pembaca layar. Mungkin Anda tidak terlalu menyadari konsep "aliran dokumen." Untuk menghadapi konsep ini, lihat gambar berikut.


Buku biru telah dihapus dari tumpukan.

"Alur dokumen" dibandingkan di sini dengan setumpuk buku. Jika display: none properti yang diterapkan ke buku biru, itu berarti bahwa itu hanya dihapus dari tumpukan. Pada saat yang sama, ruang yang digunakan untuk menempati buku ini akan ditempati oleh buku-buku lain. Hal yang sama terjadi ketika menyembunyikan elemen HTML. Tempat dimana elemen tersembunyi akan ditempati ditempati oleh elemen lain, ini mempengaruhi pengaturan elemen dalam dokumen. Dalam contoh kami, ini mempengaruhi posisi buku di tumpukan.

Berikut ini adalah versi animasi contoh dengan buku yang menunjukkan apa yang terjadi jika salah satunya dihapus dari tumpukan.


Jika Anda menghapus buku dari tumpukan, posisi buku lain di dalamnya akan berubah

▍ Apakah sumber daya disembunyikan oleh CSS dimuat?

Jawab secara singkat pertanyaan ini - lalu ya, pemuatan sumber daya semacam itu dilakukan. Misalnya, jika elemen <img> disembunyikan oleh CSS, dan kami menunjukkan elemen ini di beberapa titik di halaman, saat itu gambar sudah akan dimuat. Kehadiran pada halaman gambar, bahkan disembunyikan oleh CSS, akan mengarah pada pelaksanaan permintaan HTTP untuk mengunduhnya.

Di sini Anda dapat menemukan demo bekerja dengan gambar yang disembunyikan oleh CSS. Jika Anda menjelajahi contoh ini, dengan membuka Alat Pengembang Chrome dan melihat tab Network , Anda dapat melihat permintaan yang sesuai di sana.


Memeriksa halaman yang berisi gambar laten

▍ Gaya elemen

Perlu disebutkan bahwa ada elemen HTML yang display properti-nya tidak diatur secara default. Misalnya, ini adalah elemen <style> yang dapat ditambahkan ke badan laman HTML. Properti display dapat diubah untuk block dan membuat terlihat.
Berikut adalah kode HTML untuk badan halaman:

 <body>    <style>       .title { color: #000; }    </style> </body> 

Berikut ini adalah CSS yang dengannya kami membuat elemen style terlihat:

 style {    display: block; } 

Teknik seperti itu bisa berguna jika Anda ingin blok style terlihat dan, selain itu, dapat diedit. Untuk membuat blok tersebut dapat diedit, Anda dapat menambahkan atribut contenteditable=true ke tag style .

Ini tampilannya.


Blok gaya yang dapat diedit

→ Ini adalah contoh dari contoh ini

▍CSS menampilkan properti dan aksesibilitas konten

Saat menggunakan display: none properti, elemen menjadi tidak terlihat dan, di samping itu, tidak dapat diakses oleh pembaca layar.

Properti opacity CSS

Dengan mengatur properti opacity CSS ke 0 , Anda dapat menyembunyikan elemen dan semua elemen yang bersarang di dalamnya. Properti ini tidak diwariskan. Namun, properti ini menyembunyikan elemen hanya dari orang yang melihat halaman, dan bukan dari pembaca layar. Di sini perlu dikatakan bahwa elemen yang nilai opacity nya berbeda dari 1 menciptakan konteks overlay baru.

Berikut ini sebuah contoh.


Buku biru itu tidak kasat mata, tetapi tempat yang ditempatinya masih dipesan

Gambar sebelumnya menunjukkan bahwa buku biru menjadi tidak terlihat oleh pengamat. Tapi tempat yang dia tempati disediakan. Urutan buku-buku lain di tumpukan tidak berubah. Bandingkan ini dengan apa yang digunakan display: none mengarah.

Di CSS, menggunakan properti opacity terlihat seperti ini:

 img {    opacity: 0; } 

Jika kita kembali ke contoh pertama kita dan berasumsi bahwa kita ingin menyembunyikan gambar menggunakan properti opacity , hasilnya akan seperti yang ditunjukkan di bawah ini.


Gambar disembunyikan menggunakan properti CSS opacity

Seperti yang Anda lihat, gambar masih ada di halaman, tetapi tempatnya tidak diambil oleh apa pun. Itu disembunyikan hanya dari pengamat, tetapi tidak hilang dari halaman. Setelah publikasi materi, mereka mengatakan kepada saya bahwa properti pointer-events: none | auto pointer-events: none | auto dapat digunakan untuk menonaktifkan acara mouse pada elemen yang disembunyikan menggunakan properti opacity: 0 . Ini adalah ide yang penting, karena pengguna mungkin bingung dengan berinteraksi dengan elemen tersembunyi (mengkliknya, mengarahkannya dengan mouse, memilih teks).

→ Ini adalah demonstrasi penggunaan properti opacity

Properti opacity CSSS dan aksesibilitas konten

Elemen yang disembunyikan dengan opacity: 0 tetap dapat diakses oleh pembaca layar. Elemen seperti itu bisa mendapatkan fokus saat bekerja dengan halaman menggunakan keyboard.

Properti visibilitas CSS

Menggunakan visibility: hidden properti visibility: hidden , Anda dapat menampilkan atau menyembunyikan elemen, melakukannya dengan cara yang sama seperti yang kami lakukan dengan opacity: 0 . Ini tidak mempengaruhi aliran dokumen.


Saat menggunakan visibilitas: disembunyikan, buku itu menghilang, tetapi tempatnya tetap kosong

Harap dicatat bahwa buku biru telah hilang, tetapi ini tidak memengaruhi pengaturan buku lain di tumpukan.

Perlu dicatat bahwa ketika visibility: hidden digunakan untuk elemen induk, semua turunannya disembunyikan, tetapi jika visibility: visible properti visibility: visible ditugaskan ke salah satu keturunan, maka keturunan ini akan terlihat.


Tumpukan buku disembunyikan, tetapi buku biru dibuat terlihat.

Mari kita kembali ke contoh biasa kita dengan tajuk, gambar, dan deskripsi. Kami menulis ulang kode HTML-nya seperti ini:

 <article>  <h1>Spring is on the way</h1>  <img align="center" src="landscape.jpg" alt="">  <p><!-- Desc --></p> </article> 

Kami memberinya style dengan kode CSS berikut:

 article {    visibility: hidden; } img {    visibility: visible; } 

Setelah itu, mari kita lihat bagaimana halaman yang stilisasi serupa belum diterapkan akan berbeda dari halaman bergaya.


Elemen bersarang terlihat

Di sini, visibility: hidden properti CSS visibility: hidden ditetapkan ke elemen <article> . Dan jika Anda menambahkan visibility: visible properti visibility: visible ke elemen <img> , gambar akan terlihat. Sekali lagi, intinya di sini adalah bahwa properti yang bersangkutan diterapkan pada turunan elemen, tetapi dapat ditimpa dalam elemen turunan.

→ Ini adalah demo bekerja dengan properti visibility

Visibilitas properti accessibilityCSS dan aksesibilitas konten

Saat Anda menggunakan visibility: hidden properti visibility: hidden , elemen disembunyikan. Itu juga dihapus dari pohon aksesibilitas dan, akibatnya, pembaca layar tidak menyadarinya.

Menyembunyikan elemen dan posisi

Untuk menyembunyikan elemen dengan bertindak pada posisinya di halaman, Anda harus membawanya di luar area yang terlihat dari halaman dan mengatur dimensinya (lebar dan tinggi) menjadi 0 . Sebagai contoh menggunakan teknik serupa untuk menyembunyikan elemen, Anda bisa mengutip tautan yang memungkinkan Anda dengan cepat melompat ke konten utama halaman. Perhatikan gambar berikut.


Tautan tersembunyi di luar visibilitas halaman

Untuk memposisikan elemen di luar area visibilitas halaman, Anda dapat menggunakan kode CSS berikut:

 .skip-link {    position: absolute;    top: -100%; } 

Nilai top: -100% menghapus elemen dari viewport pada ketinggian 100%. Akibatnya, elemen tersebut akan sepenuhnya tidak terlihat. Tetapi jika dia menerima fokus setelah pengguna mencapainya menggunakan tombol pada keyboard, elemen ini dapat ditampilkan:

 .skip-link:focus {    position: absolute;    top: 0; } 

→ Ini adalah demonstrasi metode menyembunyikan elemen ini

▍CSS memposisikan properti dan aksesibilitas konten

Elemen yang ditampilkan di luar area tampilan tersedia untuk pembaca layar, Anda juga bisa menggunakannya menggunakan keyboard. Itu hanya ternyata tidak terlihat selama pekerjaan normal dengan halaman.

Properti jalur klip CSS

Jika properti CSS clip-path diterapkan ke suatu elemen, properti itu memungkinkan Anda untuk menggambarkan wilayah yang menentukan bagian elemen mana yang harus disembunyikan dan mana yang harus terlihat.


Area Pemangkasan Gambar

Pada contoh sebelumnya, properti clip-path diterapkan pada fakta bahwa sisi kiri gambar menjadi gelap. Ketika properti ini diterapkan, fragmen gambar yang gelap menghilang.

Untuk melihat properti ini sedang beraksi, kami menggunakan alat clippy . Pekerjaan dimulai dengan nilai clip-path berikut yang ditentukan dalam CSS dan menggambarkan topeng sebagai poligon:

 img {    clip-path: polygon(0 0, 0 0, 0 0, 0 0); } 

Eksperimen dengan properti jalur klip, area pemangkasan ditentukan sebagai poligon

Jika semua properti polygon diatur ke 0 , maka gambar hanya akan disembunyikan. Area pemotongan gambar dapat diatur tidak hanya dalam bentuk poligon, tetapi juga dalam bentuk lingkaran:

 img {    clip-path: circle(0 at 50% 50%); } 

Ini tampilannya.


Eksperimen dengan properti jalur klip, area pemangkasan ditetapkan sebagai lingkaran

Anda dapat bereksperimen dengan properti ini di sini.

▍CSS properti klip-jalur dan aksesibilitas konten

Elemen yang menerapkan properti clip-path hanya disembunyikan secara visual. Dapat dijangkau menggunakan keyboard, tersedia untuk pembaca layar.

Manipulasi dengan warna teks dan ukuran font

Meskipun menyembunyikan teks dengan mengubah warna atau ukuran fontnya tidak seluas seperti yang dibahas sebelumnya untuk menyembunyikan elemen, dalam beberapa kasus ini mungkin berguna.

▍Mengatur transparansi warna

Jika Anda menggunakan warna transparan untuk teks, teks ini tidak akan terlihat. Ini dapat berguna saat membuat tombol yang hanya menggunakan ikon.

▍ Sesuaikan ukuran font

Selain itu, jika Anda mengatur ukuran font menjadi 0 , ini juga akan menyembunyikan teks.

Perhatikan contoh berikut. Ada tombol di sini, strukturnya ditentukan oleh kode HTML berikut:

 <button>  <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="false" focusable="false">    <!-- Path data -->  </svg>  <span>Like</span> </button> 

Tujuan kami adalah menyembunyikan teks tombol ini, tetapi pada saat yang sama membiarkannya tersedia untuk teknologi bantu. Untuk melakukan ini, saya menggunakan kode CSS berikut:

 .button span {    color: transparent;    font-size: 0; } 

Sekarang teksnya disembunyikan. Perlu dicatat bahwa teknik ini akan bekerja tanpa mengubah warna teks. Tapi saya, untuk membuat pilihan yang berbeda untuk menyembunyikan teks, mengubah warna di sini.


1. Isi tombol berada di tengah. 2. Teks diberi warna transparan. 3. Ukuran font diatur ke 0

→ Ini demo untuk contoh ini

Atribut HTML disembunyikan aria

Ketika atribut aria-hidden ditambahkan ke elemen, elemen ini dihapus dari pohon aksesibilitas. Ini memudahkan pengguna menggunakan pembaca layar untuk menggunakan halaman tersebut. Perhatikan bahwa elemen dengan atribut ini terlihat di halaman. Itu tidak terlihat hanya untuk teknologi bantu.

 <button>    Menu    <svg aria-hidden="true"><!-- --></svg> </button> 

Dalam contoh ini, ada tombol Menu dengan ikon dan label. Atribut aria-hidden="true" memungkinkan Anda menyembunyikan tombol ini dari pembaca layar.

Atribut ini, sesuai dengan materi MDN, digunakan dalam skenario berikut:

• Menyembunyikan elemen dekoratif seperti ikon dan gambar.
• Sembunyikan teks rangkap.
• Sembunyikan item yang diminimalkan atau item yang berada di luar layar.

Atribut tersembunyi dan aksesibilitas konten

Atribut ini dibuat khusus untuk menyembunyikan konten dari teknologi bantu. Tetapi elemen-elemennya terlihat pada halaman, Anda dapat berinteraksi dengannya menggunakan keyboard.

Animasi dan interaktivitas

Sebelum kita masuk ke contoh, saya ingin memikirkan cara-cara yang sebelumnya dibahas untuk menyembunyikan elemen. Kami akan melakukan ini untuk membandingkan mereka dan memilih apa yang akan memenuhi kebutuhan kami. Tabel berikut, yang dapat ditemukan di sini , didasarkan pada artikel yang luar biasa ini.

Jika Anda ingin menghidupkan elemen yang tersembunyi, misalnya, bilah navigasi seluler, elemen ini harus dibuat dengan mempertimbangkan ketersediaannya. Di bawah ini kami akan mempertimbangkan contoh-contoh bekerja dengan elemen yang tidak berhasil dan berhasil dalam hal aksesibilitas. Ini akan memungkinkan kami untuk menghindari kesalahan yang menyulitkan pekerjaan dengan situs untuk pengguna yang menggunakan teknologi bantu.

▍ Animasi menu: pendekatan yang salah

Kami memiliki menu yang, ketika dibuka, harus pergi ke luar layar. Cara termudah untuk melakukan ini adalah dengan CSS berikut:

 ul {    opacity: 0;    transform: translateX(100%);    transition: 0.3s ease-out; } ul.active {    opacity: 1;    transform: translateX(0); } 

Berkat kode ini, menu akan meluas dan runtuh berdasarkan kelas .active , yang akan ditambahkan menggunakan kode JavaScript berikut:

 menuToggle.addEventListener('click', function(e){  e.preventDefault();  navMenu.classList.toggle('active'); }); 

Inilah yang bekerja dengan menu seperti itu.


Meninggalkan menu dalam aksi

Tampaknya kita telah mencapai hasil yang baik dengan membuat menu ini, tetapi di sini satu kesalahan besar telah dibuat. Menggunakan opacity: 0 properti opacity: 0 tidak akan menghapus elemen navigasi dari pohon aksesibilitas. Bahkan jika menu pada halaman tidak terlihat, dapat dijangkau menggunakan keyboard, pembaca layar dapat menggunakannya. Agar tidak membingungkan pengguna menggunakan alat tersebut, menu juga harus disembunyikan dari alat ini.

Berikut adalah pohon aksesibilitas untuk halaman tersebut, dibuat menggunakan alat tab Accessibility Alat Chrome.


Pohon aksesibilitas dari menu tersembunyi yang dirancang dengan buruk

Singkatnya, pohon aksesibilitas adalah daftar segala sesuatu yang dapat diakses oleh pengguna yang menggunakan pembaca layar. Dalam kasus kami, mereka memiliki akses ke semua item menu yang tidak terlihat di layar. Di sini Anda dapat menemukan dua masalah yang perlu kami pecahkan:

1. Penting untuk memastikan bahwa item menu yang tersembunyi tidak dapat dijangkau menggunakan keyboard.
2. Pembaca layar tidak perlu melihat menu tersembunyi dan tidak membaca konten yang sesuai.

Gambar berikut menunjukkan bagaimana halaman tersebut terlihat untuk VoiceOver dari Mac OS. Sangat mudah untuk memperhatikan bahwa alat ini melihat menu dengan sempurna walaupun menu ini tidak ada di layar.


Pembaca layar melihat apa yang seharusnya tidak dilihat

→ Ini adalah versi yang berfungsi dari contoh ini

Mari kita perbaiki kesalahan di atas.

▍ Animasi Menu: Perbaikan Bug

Untuk meningkatkan menu dan memperbaiki kesalahan, Anda perlu menggunakan visibility: hidden properti CSS visibility: hidden . Ini akan memungkinkan Anda untuk menyembunyikan menu dari halaman dan mencegah cara membaca dari layar untuk bekerja dengannya. Berikut adalah kode CSS untuk memperbaiki masalah:

 ul {    visibility: hidden;    opacity: 0;    transform: translateX(100%);    transition: 0.3s ease-out; } ul.active {    visibility: visible;    opacity: 1;    transform: translateX(0); } 

Setelah menerapkan kode ini, menu yang diperkecil akan menghilang dari layar dan dari "bidang pandang" teknologi bantuan. Jelajahi halaman lagi dengan VoiceOver.


Pembaca layar tidak melihat apa-apa ekstra

→ Ini adalah proyek yang menggambarkan contoh

Elemen kotak centang khusus

Elemen kotak centang

Bendera standar, elemen <input> checkbox tipe, sulit dikonfigurasikan. Jika kita perlu mengonfigurasinya, ini berarti kita perlu membuat implementasi elemen itu sendiri. Lihatlah kode HTML dasarnya:

 <p class="c-checkbox">  <input class="sr-only" type="checkbox" name="" id="c1">  <label class="c-checkbox__label" for="c1">Custom checkbox</label> </p> 

Untuk mengonfigurasi kotak centang, Anda harus dapat menyembunyikan elemen dengan mempertimbangkan kebutuhan teknologi bantu. Untuk melakukan ini, Anda perlu menggunakan properti position , serta properti lainnya. Berikut adalah kelas CSS yang dapat disebut sr-only atau visually-hidden , yang menyembunyikan elemen hanya secara visual, tetapi membuatnya dapat diakses untuk pembaca layar dan untuk navigasi keyboard.

 .sr-only {  border: 0;  clip: rect(0 0 0 0);  -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);  clip-path: polygon(0px 0px, 0px 0px, 0px 0px);  height: 1px;  margin: -1px;  overflow: hidden;  padding: 0;  position: absolute;  width: 1px;  white-space: nowrap; } 

Berkat penggunaan kelas ini, elemen checkbox dari desain kami sendiri tidak kehilangan aksesibilitas. Berikut ini adalah kisah yang lebih rinci tentang elemen semacam itu. Dan di sini ada demonstrasi bekerja dengan elemen serupa.

Sembunyikan konten dari pembaca layar

▍

,

, , . , , , :

 Hiding On The Web grinning face with open mouth 

, . , , , . , , , - . , aria-hidden . , <span> aria-hidden="true" .

 <h1>Hiding On The Web <span aria-hidden="true"></span></h1> 

, , .

▍

Twitter See New Tweets , aria-hidden . ( ) .

▍

. aria-hidden="true" , «» .

Ringkasan

- . , , .

Pembaca yang budiman! - ?