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

Bantuan Pembaca Skrin: Mendedahkan Peranan sr-sahaja dalam Bootstrap 3

Dalam Bootstrap 3, kelas sr-only memainkan peranan yang penting peranan dalam kebolehcapaian web. Ia menyembunyikan maklumat semata-mata untuk pembaca skrin, memastikan pengguna teknologi bantuan boleh menavigasi dan memahami halaman web dengan berkesan.

Menurut dokumentasi Bootstrap, elemen sr sahaja disembunyikan daripada pemaparan visual dan tidak menempati ruang dalam reka letak. Ini membolehkan pembangun menyediakan label dan teks maklumat lain untuk pembaca skrin tanpa mengacaukan antara muka pengguna.

Pertimbangkan contoh berikut:

<div class="btn-group">
    <button type="button" class="btn btn-info btn-md">Departments</button>
    <button type="button" class="btn btn-info dropdown-toggle btn-md" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">Sales</a></li>
        <li><a href="#">Technical</a></li>
        <li class="divider"></li>
        <li><a href="#">Show all</a></li>
    </ul>
</div>

Dalam contoh ini, kelas sr sahaja pada elemen span menyembunyikan teks "Togol Dropdown" daripada paparan visual. Walau bagaimanapun, teknologi bantuan akan membaca teks ini dengan kuat, memaklumkan pengguna tentang fungsi butang.

Adalah penting untuk mengekalkan kelas sr sahaja untuk tujuan kebolehaksesan. Mengalih keluarnya boleh menghalang kefungsian pembaca skrin dan menjadikan tapak web anda kurang inklusif.

Kelas menggunakan gaya CSS untuk menyembunyikan elemen, termasuk:

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

Jika anda mengutamakan kebolehaksesan, pertimbangkan sumber seperti dokumentasi Inisiatif Kebolehcapaian Web (WAI) dan Kebolehcapaian MDN untuk meningkatkan pengalaman pengguna bagi individu kurang upaya.

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