Apa itu sr-only di Bootstrap 3?

Untuk apa kelas itu sr-onlydigunakan? Apakah ini penting atau dapatkah saya menghapusnya? Bekerja dengan baik tanpa.

Inilah contoh saya:

<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>

Menurut dokumentasi bootstrap , kelas ini digunakan untuk menyembunyikan informasi yang dimaksudkan hanya untuk pembaca layar dari tata letak halaman yang diberikan.

Pembaca layar akan mengalami masalah dengan formulir Anda jika Anda tidak menyertakan label untuk setiap input. Untuk formulir inline ini, Anda bisa menyembunyikan label menggunakan kelas .sr-only.

Berikut adalah contoh gaya yang digunakan:

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

Apakah ini penting atau dapatkah saya menghapusnya? Bekerja dengan baik tanpa.

Ini penting, jangan dihapus.

Anda harus selalu mempertimbangkan pembaca layar untuk tujuan aksesibilitas. Penggunaan kelas akan menyembunyikan elemen, oleh karena itu Anda tidak akan melihat perbedaan visual.

Jika Anda tertarik membaca tentang aksesibilitas:

• Inisiatif Aksesibilitas Web (WAI)

• Dokumentasi Aksesibilitas MDN

Seperti yang dikatakan JoshC, kelas digunakan untuk menyembunyikan informasi yang digunakan untuk pembaca layar. Tetapi tidak hanya untuk menyembunyikan label, Anda mungkin mempertimbangkan untuk menyembunyikan dari pengguna yang melihat sebuah tautan internal "lompat ke konten utama" yang diinginkan untuk pengguna tunanetra jika Anda memiliki navigasi yang kompleks atau iklan sebelum konten utama.

Jika Anda ingin situs Anda lebih banyak berinteraksi dengan pembaca layar, gunakan atribut ARIA standar W3C dan saya merekomendasikan untuk mengunjungi kursus online Google , yang akan memakan waktu hanya 1-2 jam atau setidaknya menonton video 40 menit Google .

Menurut Organisasi Kesehatan Dunia, 285 juta orang mengalami gangguan penglihatan. Jadi membuat situs web dapat diakses adalah penting.

PEMBARUAN 2019:

Sebagai pengembang, kita harus membuat konten yang dapat diakses yang hanya berfungsi untuk semua out-of-the-box dan tidak secara khusus menargetkan pembaca layar. Itu tidak selalu mungkin tetapi hati-hati menggunakan penyesuaian ARIA dan "pembaca layar" . Jangan lakukan itu jika Anda tidak sepenuhnya memahaminya. Implementasi yang salah mungkin jauh lebih buruk daripada tidak menggunakannya sama sekali. Silakan baca panduan-aksesibilitas-pengembang pada contoh-contoh buruk ARIA . Di sana Anda akan menemukan komponen / widget yang sepenuhnya dapat diakses yang tidak memerlukan intervensi "pembaca layar" saja.

Saya menemukan ini dalam contoh navbar , dan menyederhanakannya.

<ul class="nav">
  <li><a>Default</a></li>
  <li><a>Static top</a></li>
  <li><b><a>Fixed top <span class="sr-only">(current)</span></a></b></li>
</ul>

Anda melihat mana yang dipilih ( sr-onlybagian disembunyikan):

• Default
• Atasan statis
• Memperbaiki puncak

Anda mendengar yang mana yang dipilih jika Anda menggunakan pembaca layar:

• Default
• Atasan statis
• Fixed top (saat ini)

Sebagai hasil dari teknik ini, orang buta seharusnya menavigasi lebih mudah di situs web Anda.

.sr-onlyadalah nama kelas yang khusus digunakan untuk pembaca layar. Anda dapat menggunakan nama kelas apa saja, tetapi .sr-onlycukup 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-onlyuntuk 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-onlytidak 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: nonedan mengatur CSS Anda ke height: 0dan 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: 1pxdan yang height: 1pxsebelumnya 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.

Memastikan bahwa objek ditampilkan (atau seharusnya) hanya untuk pembaca dan perangkat serupa. Ini memberi arti lebih dalam konteks dengan elemen lain dengan atribut aria-hidden = "true" .

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

Glyphicon akan ditampilkan di semua perangkat lain, kata Kesalahan: pada pembaca teks.

The .sr-onlykelas menyembunyikan elemen untuk semua perangkat kecualiscreen readers:

Lewati ke konten utama Gabungkan .sr-only dengan .sr-only-focusable untuk menampilkan elemen itu lagi ketika difokuskan