Ads by Yasya El Hakim
Menyembuyikan dengan Tidak Mengabaikan Aksesbilitas Konten pada CSS

Dalam dunia Web Development, kita dapat menyembunyikan elemen atau bagian dari konten kapanpun jika kita menginginkannya. Jika kita hanya menggunakan satu cara untuk menyembunyikan konten, maka hal tersebut dapat mengganggu aksesbilitas karena pengguna yang menggunakan tekonologi Assistive (Teknologi Bantuan) tidak akan mendapatkan konteks halaman yang didapatkan oleh pengguna biasa. Pada artikel kali ini, kita akan membahas beberapa cara untuk menyembunyikan konten tergantung pada aksesbilitasnya.



Menyembunyikan Konten dari Semua Perangkat

Menggunakan property CSS seperti display:none;, visibility: hidden; atau atribut hidden pada HTML sangatlah sering digunakan ketika kita ingin menyembunyikan elemen atau bagian dari konten. Dengan menggunakan kedua property CSS diatas, kita dapat membuat tempilan perangkat dan teknologi Assistive (Seperti Screen Reader) mengabaikan semua elemen dan tidak menampilkan ke penggunanya.

Menyembunyikan konten (untuk sementara) sangatlah umum untuk digunakan. Contohnya seperti apa? yaitu kita dapat menggunakan property CSS pada Accordion, Tab, atau elemen Toggle lainnya.

Menyembunyikan Konten dari Layar Perangkat

Terkadang, terdapat kasus ketika kita ingin menyembunyikan beberapa elemen dari layar tetapi kita ingin membiarkan teknologi Assistive menampikan konten yang tersembunyi untuk penggunanya seperti: pada dokumen HTML terdapat input label. Biasanya, label disembunyikan dengan property display:none; tetapi kita ingin label tersebut dapat diakses oleh teknologi Assistive.

Cara atau solusi untuk mengatasi kasus diatas mungkin dapat terlihat agak aneh, tetapi sangatlah efektif. Kita dapat menggunakan kode CSS berikut:

.tersembunyi--visual {
    border: 0;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}


Menyembunyikan Konten dari Perangkat Assistive

Terdapat juga kasus lain dimana kita ingin menyembunyikan konten dari Screen Reader dan teknologi Assistive lainnya. Contoh, jika kita memliki Image Slider/Corousel yang memiliki tombol "sebelumnya" dan "selanjutnya" serta kita tidak ingin Screen Reader untuk membacanya. Kita dapat menyediakannya secara terpisah dengan kontrol yang dapat diakses tetapi tersembunyi secara visual.

Solusi untuk kasus ini adalah dengan menggunakan atribut HTML seperti aria-hidden="true".

Catatan

Sangatlah penting bagi kita untuk mengingat bahwa property CSS seperti display: none; akan mengabaikan aria-hidden="false", dan semua konten yang ada akan diabaikan oleh teknolgi Assistive.

0Komentar

Sebelumnya Selanjutnya