Apakah sr-hanya di Bootstrap 3?

Menurut bootstrap's dokumentasi, kelas ini digunakan untuk menyembunyikan informasi yang ditujukan hanya untuk pembaca layar dari tata letak dari halaman aslinya.

Layar pembaca akan memiliki masalah dengan bentuk anda jika anda don't dilengkapi label untuk setiap input. Ini bentuk inline, anda dapat menyembunyikan label menggunakan .sr-satunya kelas.

Berikut ini adalah sebuah contoh styling 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 itu penting atau saya dapat menghapus itu? Bekerja dengan baik tanpa.

It's penting, don't menghapusnya.

Anda harus selalu mempertimbangkan pembaca layar untuk aksesibilitas tujuan. Penggunaan kelas akan menyembunyikan elemen lagian, oleh karena itu anda seharusnya't melihat perbedaan visual.

Jika anda're tertarik untuk membaca tentang aksesibilitas:

• Web Accessibility Initiative (WAI)

• MDN Aksesibilitas dokumentasi

Sebagai JoshC mengatakan, kelas ini digunakan untuk menyembunyikan informasi yang digunakan untuk layar pembaca. Tapi tidak hanya untuk menyembunyikan label, anda mungkin mempertimbangkan untuk menyembunyikan dari mata pengguna internal link "skip to main content" yang diinginkan untuk pengguna buta jika anda memiliki navigasi yang kompleks atau iklan sebelum konten utama.

Jika anda ingin situs anda untuk berinteraksi lebih banyak dengan pembaca layar, menggunakan W3C standar ARIA atribut dan saya sangat merekomendasikan anda untuk mengunjungi Google online saja, yang akan mengambil hanya sampai 1-2h atau di setidaknya menonton Google's 40 menit video.

Menurut Organisasi Kesehatan Dunia, 285 juta orang mengalami gangguan penglihatan. Jadi membuat sebuah website yang dapat diakses adalah penting.

UPDATE 2019:

Sebagai pengusaha kita harus membuat dapat diaksesnya konten yang hanya bekerja untuk semua out-of-the-box dan tidak secara khusus menargetkan pembaca layar. Yang's tidak selalu mungkin, tapi hati-hati menggunakan ARIA dan "pembaca layar hanya" penyesuaian. Don't melakukan hal ini jika anda don't memahami hal itu. Penerapan yang salah mungkin akan jauh lebih buruk daripada tidak menggunakannya sama sekali. Silakan baca aksesibilitas-pengembang-panduan ARIA contoh buruk. Di sana anda akan menemukan juga sepenuhnya dapat diakses komponen/widget yang tidak memerlukan "pembaca layar hanya" intervensi.

Saya menemukan ini di navbar contoh, dan modern itu.

<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 salah satu yang dipilih (sr-hanya bagian tersembunyi):

• Default
• Statis atas
• Tetap top

Anda mendengar mana yang dipilih jika anda menggunakan pembaca layar:

• Default
• Statis atas
• Tetap atas (saat ini)

Sebagai hasil dari teknik ini buta orang-orang yang seharusnya untuk menavigasi dengan mudah pada website anda.

.sr-satunya adalah nama kelas yang digunakan khusus untuk pembaca layar. Anda dapat menggunakan nama kelas, tapi .sr-hanya cukup umum digunakan. Jika anda don't peduli berkembang dengan kepatuhan dalam pikiran, maka dapat dihapus. Itu tidak akan mempengaruhi UI dengan cara apapun jika dihapus karena CSS untuk kelas ini tidak terlihat untuk desktop dan perangkat mobile browser.

Tampaknya ada beberapa informasi yang hilang di sini tentang penggunaan .sr-hanya untuk menjelaskan tujuan dan untuk pembaca layar. Pertama dan terpenting, itu adalah sangat penting untuk selalu menjaga gangguan pengguna dalam pikiran. Gangguan adalah tujuan dari 508 kepatuhan: https://www.section508.gov/, dan itu adalah besar bahwa bootstrap mengambil ini menjadi pertimbangan. Namun, penggunaan .sr-satunya adalah tidak semua yang perlu dipertimbangkan untuk 508 kepatuhan. Anda memiliki penggunaan warna, ukuran font, aksesibilitas melalui navigasi, deskriptor, penggunaan aria dan banyak lagi.

Tetapi untuk .sr-satunya - apa CSS benar-benar lakukan? Ada beberapa varian yang sedikit berbeda dari CSS digunakan untuk .sr-satunya. Salah satu dari beberapa yang saya gunakan adalah sebagai berikut:

.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;
    }

Di atas CSS menyembunyikan konten di desktop dan browser mobile dibungkus dengan kelas ini, tapi yang 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 dari 0, elemen yang tidak terlihat oleh DOM. Ini adalah mengapa di atas CSS menggunakan width: 1px; height: 1px;. Dengan menggunakan display: none dan pengaturan CSS untuk tinggi: 0 dan lebar: 0, unsur ini tidak terlihat oleh DOM dan dengan demikian tidak bermasalah. Di atas CSS menggunakan width: 1px; height: 1px; tidak semua yang anda lakukan untuk membuat konten terlihat untuk desktop dan browser mobile (tanpa overflow: hidden, konten anda akan tetap ditampilkan pada layar), dan terlihat oleh pembaca layar. Menyembunyikan konten dari desktop dan browser mobile ini dilakukan dengan menambahkan offset dari width: 1px dan height: 1px yang disebutkan sebelumnya dengan menggunakan:

position: absolute;
margin: -1px 0 0 -1px; 
overflow: hidden;

Terakhir, untuk memiliki ide yang sangat baik dari apa yang pembaca layar melihat dan relay untuk gangguan pengguna, matikan halaman styling untuk browser anda. Untuk Firefox, anda dapat melakukan ini dengan pergi ke:

View > Page Style > No Style

Saya harap informasi yang saya berikan di sini adalah penggunaan lebih lanjut untuk seseorang selain tanggapan lain.

Memastikan bahwa objek yang ditampilkan (atau harus) hanya untuk pembaca dan perangkat sejenis. Hal ini memberikan lebih banyak arti dalam konteks dengan unsur lain dengan atribut aria-hidden="benar".

<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 pada semua perangkat lain, kata Kesalahan: pada teks pembaca.

The .sr-hanya kelas menyembunyikan sebuah elemen untuk semua perangkat kecuali pembaca layar:

Loncat ke konten utama Menggabungkan .sr-hanya dengan .sr-hanya-focusable untuk menunjukkan elemen lagi ketika itu difokuskan