Bagaimanakah Kelas `sr-only` Bootstrap 3 Meningkatkan Kebolehcapaian Web untuk Pengguna Pembaca Skrin?

Memahami Peranan sr-only dalam Bootstrap 3

Apabila menavigasi halaman web, adalah penting untuk mempertimbangkan pengalaman pengguna dengan teknologi bantuan seperti pembaca skrin. Di sinilah kelas sr sahaja dalam Bootstrap 3 dimainkan.

Apakah itu sr-only?

sr-only ialah kelas CSS yang menyembunyikan kandungan daripada reka letak visual tetapi menjadikannya boleh diakses oleh pembaca skrin. Ini amat berguna dalam situasi di mana anda perlu memberikan maklumat kepada pembaca skrin tetapi tidak mahu ia mengacaukan halaman.

Kepentingan sr-sahaja

Menggunakan sr-only adalah penting untuk kebolehcapaian web. Ia membantu memastikan pembaca skrin boleh menavigasi dan memahami kandungan tapak web anda dengan betul, meningkatkan pengalaman pengguna untuk individu yang cacat penglihatan.

Cara Menggunakan sr-sahaja

Penanda HTML berikut menunjukkan cara menggunakan sr-sahaja:

<button type="button" class="btn btn-info btn-md">
    <span class="sr-only">Toggle Dropdown</span>
</button>

Dalam contoh ini, kelas sr sahaja digunakan pada teks "Togol Dropdown". Teks ini akan disembunyikan daripada pandangan tetapi masih boleh diakses oleh pembaca skrin.

Contoh Penggunaan sr-only

Dokumentasi Bootstrap menyediakan senario khusus di mana sr-only adalah penting : borang sebaris. Apabila menyembunyikan label untuk borang sebaris menggunakan .sr-sahaja, anda memastikan pembaca skrin masih boleh mengakses label tanpa menjejaskan penampilan visual borang.

Kesimpulan

Walaupun sr-sahaja mungkin tidak dapat dilihat secara visual di tapak web anda, kepentingannya terletak pada meningkatkan kebolehcapaian tapak anda untuk individu yang mempunyai visual kemerosotan. Sebagai pembangun, pertimbangkan penggunaan sr-only untuk memastikan pengalaman web yang inklusif dan mesra pengguna untuk semua.

Atas ialah kandungan terperinci Bagaimanakah Kelas `sr-only` Bootstrap 3 Meningkatkan Kebolehcapaian Web untuk Pengguna Pembaca Skrin?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!