.sr-only
adalah nama kelas yang khusus digunakan untuk pembaca layar. Anda dapat menggunakan nama kelas apa saja, tetapi .sr-only
cukup umum digunakan. Jika Anda tidak peduli tentang pengembangan dengan kepatuhan, maka itu dapat dihapus. Ini tidak akan memengaruhi UI dengan cara apa pun jika dihapus karena CSS untuk kelas ini tidak terlihat oleh peramban desktop dan perangkat seluler.
Tampaknya ada beberapa informasi yang hilang di sini tentang penggunaan .sr-only
untuk menjelaskan tujuannya dan untuk pembaca layar. Pertama dan terpenting, sangat penting untuk selalu mengingat pengguna yang terganggu. Kerusakan adalah tujuan kepatuhan 508: https://www.section508.gov/ , dan sangat bagus bahwa bootstrap mempertimbangkan hal ini. Namun, penggunaan .sr-only
tidak semua yang perlu dipertimbangkan untuk kepatuhan 508. Anda memiliki penggunaan warna, ukuran font, aksesibilitas melalui navigasi, deskriptor, penggunaan aria dan banyak lagi.
Tetapi untuk .sr-only
- apa yang sebenarnya dilakukan CSS? Ada beberapa varian CSS yang sedikit berbeda .sr-only
. Salah satu dari sedikit yang saya gunakan adalah di bawah ini:
.sr-only {
position: absolute;
margin: -1px 0 0 -1px;
padding: 0;
display: block;
width: 1px;
height: 1px;
font-size: 1px;
line-height: 1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
outline: 0;
}
CSS di atas menyembunyikan konten di browser desktop dan seluler yang dibungkus dengan kelas ini, tetapi dilihat oleh pembaca layar seperti JAWS: http://www.freedomscientific.com/Products/Blindness/JAWS . Contoh markup adalah sebagai berikut:
<a href="#" target="_blank">
Click to Open Site
<span class="sr-only">This is an external link</span>
</a>
Selain itu, jika elemen DOM memiliki lebar dan tinggi 0, elemen tersebut tidak terlihat oleh DOM. Inilah sebabnya mengapa CSS di atas digunakan width: 1px; height: 1px;
. Dengan menggunakan display: none
dan mengatur CSS Anda ke height: 0
dan width: 0
, elemen tidak terlihat oleh DOM dan karenanya bermasalah. Penggunaan CSS di atas width: 1px; height: 1px;
tidak semua yang Anda lakukan untuk membuat konten tidak terlihat oleh browser desktop dan seluler (tanpa overflow: hidden
, konten Anda masih akan ditampilkan di layar), dan dapat dilihat oleh pembaca layar. Menyembunyikan konten dari desktop dan browser seluler dilakukan dengan menambahkan offset dari width: 1px
dan yang height: 1px
sebelumnya disebutkan dengan menggunakan:
position: absolute;
margin: -1px 0 0 -1px;
overflow: hidden;
Terakhir, untuk memiliki gagasan yang sangat bagus tentang apa yang dilihat dan disampaikan pembaca layar kepada pengguna yang mengalami gangguan, matikan penataan halaman untuk browser Anda. Untuk Firefox, Anda dapat melakukan ini dengan masuk ke:
View > Page Style > No Style
Saya harap informasi yang saya berikan di sini dapat digunakan lebih lanjut untuk seseorang selain tanggapan lainnya.