.sr-onlyözellikle ekran okuyucular için kullanılan bir sınıf adıdır. Herhangi bir sınıf adını kullanabilirsiniz, ancak .sr-onlyoldukça yaygın olarak kullanılır. Uyumluluk göz önünde bulundurularak geliştirilmeyi umursamıyorsanız, kaldırılabilir. Bu sınıfın CSS'si masaüstü ve mobil cihaz tarayıcıları tarafından görülmediğinden, kaldırılırsa kullanıcı arayüzünü etkilemez.
Burada .sr-onlyamacını açıklamak ve ekran okuyucular olmak için bazı bilgiler eksik görünüyor . Her şeyden önce, engelli kullanıcıları daima akılda tutmak çok önemlidir. Değer düşüklüğü 508 uyumluluğunun amacıdır: https://www.section508.gov/ ve bootstrap'ın bunu dikkate alması harika. Bununla birlikte, kullanımı .sr-only508 uyumluluğu için dikkate alınması gereken tek şey değildir. Renk, yazı tipi boyutu, navigasyon yoluyla erişilebilirlik, tanımlayıcılar, aria kullanımı ve çok daha fazlasına sahipsiniz.
Ama .sr-onlygelince - CSS aslında ne yapıyor? Kullanılan CSS'nin biraz farklı varyantları vardır .sr-only. Kullandığım birkaç kişiden biri:
.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;
}
Yukarıdaki CSS, bu sınıfla sarılmış masaüstü ve mobil tarayıcılardaki içeriği gizler, ancak JAWS gibi bir ekran okuyucu tarafından görülür: http://www.freedomscientific.com/Products/Blindness/JAWS . Örnek işaretleme aşağıdaki gibidir:
<a href="#" target="_blank">
Click to Open Site
<span class="sr-only">This is an external link</span>
</a>
Ayrıca, bir DOM öğesinin genişliği ve yüksekliği 0 ise, öğe DOM tarafından görülmez. Bu nedenle yukarıdaki CSS kullanmaktadır width: 1px; height: 1px;. Kullanarak display: noneve CSS ayarlayarak height: 0ve width: 0, eleman DOM görülmeyecek şekilde problemlidir değildir. Yukarıdaki CSS width: 1px; height: 1px;kullanımı, içeriği masaüstü ve mobil tarayıcılar için görünmez yapmak için yaptığınız tek şey değildir ( overflow: hiddeniçeriğiniz hala ekranda görünmez) ve ekran okuyucuları tarafından görülebilir. İçeriği masaüstü ve mobil tarayıcılardan gizlemek, aşağıdakilerden bir ofset ekleyerek width: 1pxve height: 1pxdaha önce bahsedilenleri kullanarak yapılır:
position: absolute;
margin: -1px 0 0 -1px;
overflow: hidden;
Son olarak, bir ekran okuyucunun gördüğü ve engelli kullanıcısına ne aktardığı hakkında çok iyi bir fikre sahip olmak için tarayıcınızın sayfa stilini kapatın. Firefox için şunları yapabilirsiniz:
View > Page Style > No Style
Umarım burada verdiğim bilgiler, diğer yanıtlara ek olarak bir başkası için de yararlıdır.