Bootstrap - Tersembunyi secara Visual

Halo sana, para pengembang web masa depan! Hari ini, kita akan melihat fitur yang menarik dan sangat berguna di Bootstrap: kelas tersembunyi secara visual. Sebagai guru komputer tetangga yang ramah, saya sangat senang untuk memandu Anda dalam perjalanan ini. Jadi, ambil minuman favorit Anda, duduk nyaman, dan mari kita mulai petualangan ini bersama!

Apa Itu Tersembunyi secara Visual?

Sebelum kita masuk ke detilnya, mari kita mulai dari dasar. Kelas tersembunyi secara visual di Bootstrap seperti trik seorang penyihir untuk halaman web Anda. Ini memungkinkan Anda menyembunyikan konten secara visual tetapi tetap bisa diakses oleh screen reader. Bagusnya bukan?

Bayangkan Anda mendesain website untuk sekolah sihir ( mari kita sebutnya Hogwarts, baguskah?). Anda ingin menyertakan informasi penting bagi siswa dengan gangguan visual, tetapi Anda tidak ingin informasi ini membuat tata letak visual untuk siswa lain tampak kacau. Itu tempat kelas tersembunyi secara visual datang untuk menyelamatkan!

Bagaimana Cara Kerjanya?

Kelas tersembunyi secara visual menggunakan CSS untuk menyembunyikan konten dari pengguna ber mata saat masih bisa diakses oleh screen reader. Seperti memiliki mantel kecil untuk elemen HTML Anda!

mari kita lihat contoh sederhana:

<h1>Selamat Datang di Hogwarts</h1>
<p class="visually-hidden">Konten ini hanya untuk screen reader.</p>

Dalam contoh ini, pengguna ber mata hanya akan melihat "Selamat Datang di Hogwarts", sedangkan pengguna screen reader juga akan mendengar "Konten ini hanya untuk screen reader."

Implementasi Tersembunyi secara Visual di Bootstrap

Sekarang kita mengerti konsepnya, mari kita lihat bagaimana kita bisa mengimplentasikannya di Bootstrap. Bootstrap menyediakan kelas siap pakai yang disebut .visually-hidden.

mari kita lihat bagaimana Anda bisa menggunakannya:

<div class="visually-hidden">Konten ini disembunyikan secara visual tetapi dapat diakses oleh screen reader.</div>

Simple, kan? Hanya tambahkan kelas ke elemen mana saja yang Anda ingin disembunyikan secara visual.

Contoh Praktis

mari kita lihat beberapa contoh praktis di mana Anda mungkin menggunakan kelas tersembunyi secara visual:

1. Tautan Skip Navigation:

<a href="#main-content" class="visually-hidden">Lewati ke konten utama</a>
<nav>
<!-- Item menu navigasi -->
</nav>
<main id="main-content">
<!-- Konten utama -->
</main>

Ini memungkinkan pengguna screen reader melompat langsung ke konten utama, meningkatkan pengalaman navigasi mereka.

2. Label Form:

<label for="search" class="visually-hidden">Cari</label>
<input type="text" id="search" placeholder="Cari">

Di sini, kita menyediakan label bagi screen reader tanpa mengganggu tampilan visual input pencarian.

3. Kontek tambahan:

<button>
Hapus
<span class="visually-hidden">item ini dari keranjang Anda</span>
</button>

Ini menyediakan kontek tambahan bagi pengguna screen reader tanpa mencacat teks tombol bagi pengguna ber mata.

Magic di Balik Tersembunyi secara Visual

Sekarang, mari kita lihat di balik tabir dan lihat bagaimana Bootstrap mengimplentasikan kelas ini. Ini adalah CSS yang membuatnya bekerja:

.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}

Jangan khawatir jika ini terlihat seperti mantra dari kelas potion tingkat tinggi! mari kitauraikan:

1. position: absolute: Ini mengambil elemen keluar dari alur dokumen biasa.
2. width: 1px; height: 1px: Menjadikan elemen kecil.
3. padding: 0; margin: -1px: Menghapus ruang di sekitar elemen.
4. overflow: hidden: Menyembunyikan konten yang mungkin meluap.
5. clip: rect(0, 0, 0, 0): Memotong konten ke lingkaran 0x0.
6. white-space: nowrap: Menghindari pemotongan teks.
7. border: 0: Menghapus batas.

Deklarasi !important memastikan gaya ini tidak ditimpa oleh aturan CSS lain.

Tersembunyi secara Visual vs Display None

Anda mungkin bertanya-tanya, " Mengapa tidak hanya menggunakan display: none?" Well, murid yang curious, ada perbedaan penting:

Properti	Tersembunyi secara Visual	Display None
Penampilan Visual	disembunyikan	disembunyikan
Akses Screen Reader	Dapat diakses	Tidak dapat diakses
Kehadiran DOM	Ada	Ada
Impak Tata Letak	Tidak ada impak	Mengganggu tata letak

Seperti yang Anda lihat, visually-hidden adalah pilihan yang tepat saat Anda ingin menjaga aksesibilitas saat menyembunyikan konten secara visual.

Kenampakan Responsif

Bootstrap juga menyediakan kelas untuk mengganggu kenampakan berdasarkan ukuran layar. Kelas ini menggabungkan konsep tersembunyi secara visual dengan desain responsif:

• .d-none: disembunyikan untuk semua ukuran layar
• .d-{sm,md,lg,xl,xxl}-none: disembunyikan hanya pada ukuran layar tertentu
• .d-{sm,md,lg,xl,xxl}-block: tampak sebagai elemen blok pada ukuran layar tertentu

Misalnya:

<div class="d-none d-md-block">
Konten ini disembunyikan pada layar kecil tetapi tampak pada layar medium dan yang lebih besar.
</div>

Kesimpulan

Dan itu adalah dia, para penyihir web muda! Kita telah membongkar misteri kelas tersembunyi secara visual di Bootstrap. Ingat, dengan kekuatan yang besar datang tanggung jawab yang besar. Gunakan teknik ini bijaksana untuk menciptakan website yang tidak hanya menarik secara visual tetapi juga aksesibel bagi semua pengguna.

Saat kita menutup pelajaran ini, saya diingatkan oleh pengembang web tua yang pernah katakan kepadaku, "Magic sebenarnya dalam desain web terletak bukan dalam apa yang Anda lihat, tetapi apa yang Anda tidak lihat." Jadi, majulah, eksperimen, dan buat pengalaman web yang magical bagi semua!

Sampai petualangan berikutnya di dunia pengembangan web, terus coding dan tetap curius!

Credits: Image by storyset