Apakah sr-hanya di Bootstrap 3?
Apa kelas sr-hanya
digunakan untuk? Apakah itu penting atau saya dapat menghapus itu? Bekerja dengan baik tanpa.
Berikut ini's 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>
718
6
Menurut bootstrap's dokumentasi, kelas ini digunakan untuk menyembunyikan informasi yang ditujukan hanya untuk pembaca layar dari tata letak dari halaman aslinya.
Berikut ini adalah sebuah [contoh][2] styling yang digunakan:
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.
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.
Anda melihat salah satu yang dipilih (
sr-hanya
bagian tersembunyi):Anda mendengar mana yang dipilih jika anda menggunakan pembaca layar:
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: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:
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 menggunakandisplay: none
dan pengaturan CSS untuktinggi: 0
danlebar: 0
, unsur ini tidak terlihat oleh DOM dan dengan demikian tidak bermasalah. Di atas CSS menggunakanwidth: 1px; height: 1px;
tidak semua yang anda lakukan untuk membuat konten terlihat untuk desktop dan browser mobile (tanpaoverflow: 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 dariwidth: 1px
danheight: 1px
yang disebutkan sebelumnya dengan menggunakan: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:
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".
Glyphicon akan ditampilkan pada semua perangkat lain, kata Kesalahan: pada teks pembaca.
The
.sr-hanya
kelas menyembunyikan sebuah elemen untuk semua perangkat kecualipembaca layar:
Loncat ke konten utama Menggabungkan .sr-hanya dengan .sr-hanya-focusable untuk menunjukkan elemen lagi ketika itu difokuskan