.sr-onlylà một tên lớp được sử dụng đặc biệt cho trình đọc màn hình. Bạn có thể sử dụng bất kỳ tên lớp, nhưng .sr-onlyđược sử dụng khá phổ biến. Nếu bạn không quan tâm đến việc phát triển với sự tuân thủ trong tâm trí, thì nó có thể được gỡ bỏ. Nó sẽ không ảnh hưởng đến UI theo bất kỳ cách nào nếu bị xóa vì CSS cho lớp này không hiển thị với trình duyệt máy tính để bàn và thiết bị di động.
Dường như có một số thông tin còn thiếu ở đây về việc sử dụng .sr-onlyđể giải thích mục đích của nó và dành cho các trình đọc màn hình. Đầu tiên và quan trọng nhất, điều rất quan trọng là luôn luôn ghi nhớ người dùng bị suy yếu. Suy giảm là mục đích của việc tuân thủ 508: https://www.section508.gov/ , và thật tuyệt khi bootstrap xem xét điều này. Tuy nhiên, việc sử dụng .sr-onlykhông phải là tất cả những gì cần được xem xét để tuân thủ 508. Bạn có thể sử dụng màu sắc, kích thước của phông chữ, khả năng truy cập thông qua điều hướng, mô tả, sử dụng aria và nhiều hơn nữa.
Nhưng đối với .sr-only- CSS thực sự làm gì? Có một số biến thể hơi khác nhau của CSS được sử dụng cho .sr-only. Một trong số ít tôi sử dụng là dưới đây:
.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 ở trên ẩn nội dung trong các trình duyệt trên máy tính để bàn và thiết bị di động được bao bọc bởi lớp này, nhưng được trình đọc màn hình như JAWS: http://www.freedomscientific.com/ Products /Blindness / JAWS nhìn thấy . Ví dụ đánh dấu như sau:
<a href="#" target="_blank">
Click to Open Site
<span class="sr-only">This is an external link</span>
</a>
Ngoài ra, nếu một phần tử DOM có chiều rộng và chiều cao bằng 0, thì phần tử DOM không được nhìn thấy. Đây là lý do tại sao các CSS trên sử dụng width: 1px; height: 1px;. Bằng cách sử dụng display: nonevà đặt CSS của bạn thành height: 0và width: 0, phần tử không được DOM nhìn thấy và do đó có vấn đề. CSS ở trên sử dụng width: 1px; height: 1px;không phải là tất cả những gì bạn làm để làm cho nội dung không hiển thị với trình duyệt trên máy tính để bàn và thiết bị di động (nếu không overflow: hidden, nội dung của bạn vẫn sẽ hiển thị trên màn hình) và hiển thị cho trình đọc màn hình. Ẩn nội dung từ trình duyệt máy tính để bàn và thiết bị di động được thực hiện bằng cách thêm phần bù từ width: 1pxvà height: 1pxđược đề cập trước đó bằng cách sử dụng:
position: absolute;
margin: -1px 0 0 -1px;
overflow: hidden;
Cuối cùng, để có một ý tưởng rất hay về những gì trình đọc màn hình nhìn thấy và chuyển tiếp đến người dùng bị khiếm khuyết của nó, hãy tắt kiểu dáng trang cho trình duyệt của bạn. Đối với Firefox, bạn có thể làm điều này bằng cách truy cập:
View > Page Style > No Style
Tôi hy vọng thông tin tôi cung cấp ở đây sẽ được sử dụng thêm cho ai đó ngoài các phản hồi khác.