Chỉ sr trong Bootstrap 3 là gì?

759
kanarifugl 2013-11-04 11:51.

Class sr-onlyđược sử dụng để làm gì? Nó quan trọng hay tôi có thể gỡ bỏ nó? Hoạt động tốt mà không cần.

Đây là ví dụ của tôi:

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

6 answers

785
8 revs, 6 users 73% anon 2013-11-04 11:53.

Theo tài liệu của bootstrap , lớp được sử dụng để ẩn thông tin chỉ dành cho trình đọc màn hình khỏi bố cục của trang được hiển thị.

Trình đọc màn hình sẽ gặp rắc rối với biểu mẫu của bạn nếu bạn không bao gồm nhãn cho mọi đầu vào. Đối với các biểu mẫu nội tuyến này, bạn có thể ẩn các nhãn bằng cách sử dụng lớp chỉ .sr.

Đây là một kiểu ví dụ được sử dụng:

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

Nó quan trọng hay tôi có thể gỡ bỏ nó? Hoạt động tốt mà không cần.

Nó quan trọng, đừng loại bỏ nó.

Bạn nên luôn xem xét trình đọc màn hình cho mục đích trợ năng. Việc sử dụng lớp sẽ ẩn phần tử, do đó bạn sẽ không thấy sự khác biệt trực quan.

Nếu bạn muốn đọc về khả năng tiếp cận:

35
Hrvoje Golcic 2013-11-28 02:47.

Như JoshC đã nói, lớp .sr-onlyđược sử dụng để ẩn thông tin được sử dụng cho trình đọc màn hình một cách trực quan. Nhưng không chỉ để ẩn nhãn. Bạn có thể cân nhắc việc ẩn nhiều yếu tố khác như liên kết "chuyển đến nội dung chính", các biểu tượng có văn bản thay thế, v.v.

BTW. bạn cũng có thể sử dụng .sr-only sr-only-focusablenếu bạn cần phần tử hiển thị khi được tập trung, ví dụ: "chuyển đến nội dung chính"

Nếu bạn muốn làm cho trang web của mình dễ truy cập hơn, tôi khuyên bạn nên bắt đầu tại đây:

Tại sao?

Theo Tổ chức Y tế Thế giới, 285 triệu người bị suy giảm thị lực. Vì vậy, làm cho một trang web có thể truy cập là quan trọng.

QUAN TRỌNG: Tránh đối xử khác biệt với người dùng tàn tật . Nói chung, hãy cố gắng tránh phát triển một nội dung khác cho các nhóm người dùng khác nhau. Thay vào đó, hãy cố gắng làm cho nội dung hiện có có thể truy cập được để nó đơn giản hoạt động hiệu quả và cho tất cả các mục tiêu không cụ thể, ví dụ như trình đọc màn hình. Nói cách khác, đừng cố gắng phát minh lại bánh xe. Nếu không, khả năng tiếp cận kết quả thường sẽ kém hơn nếu không có gì được phát triển. Chúng tôi các nhà phát triển không nên giả định rằng những người dùng đó sẽ sử dụng trang web của chúng tôi như thế nào. Vì vậy, hãy rất cẩn thận khi bạn cần phát triển các giải pháp như vậy. Rõ ràng "liên kết bỏ qua" là một ví dụ điển hình về nội dung như vậy nếu nó được hiển thị khi được tập trung. Nhưng cũng có nhiều ví dụ xấu. Như vậy sẽ ẩn khỏi trình đọc màn hình một nút "thu phóng" trên bản đồ giả sử rằng nó không liên quan đến người dùng mù. Nhưng đáng ngạc nhiên là một chức năng thu phóng thực sự được sử dụng cho những người mù! Họ thích tải xuống hình ảnh giống như nhiều người dùng khác (ngay cả ở độ phân giải cao), để gửi chúng cho người khác hoặc để sử dụng chúng trong một số ngữ cảnh khác. Nguồn - Đọc thêm @ADG: Các phương pháp ARIA không hợp lệ

30
Noname 2015-01-04 04:07.

Tôi tìm thấy điều này trong ví dụ về thanh điều hướng và đơn giản hóa nó.

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

Bạn thấy cái nào được chọn ( sr-onlyphần bị ẩn):

  • Mặc định
  • Đầu tĩnh
  • Đầu cố định

Bạn nghe thấy cái nào được chọn nếu bạn sử dụng trình đọc màn hình:

  • Mặc định
  • Đầu tĩnh
  • Đầu cố định (hiện tại)

Kết quả của kỹ thuật này là những người mù phải điều hướng dễ dàng hơn trên trang web của bạn.

12
Pegues 2017-01-05 06:11.

.sr-onlylà 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 nào, 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 tuân thủ trong tâm trí, thì nó có thể bị loại bỏ. Nó sẽ không ảnh hưởng đến giao diện người dùng 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òn thiếu một số thông tin ở đây về việc sử dụng .sr-onlyđể giải thích mục đích của nó và dành cho trình đọc màn hình. Đầu tiên và quan trọng nhất, điều rất quan trọng là phải luôn ghi nhớ những người dùng bị khiếm khuyết. Sự suy yếu 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 phông chữ, khả năng truy cập thông qua điều hướng, bộ mô tả, sử dụng aria và hơn thế 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 .sr-only. Một trong số ít tôi sử dụng 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 dành cho 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 nhìn thấy bởi trình đọc màn hình như JAWS: http://www.freedomscientific.com/Products/Blindness/JAWS . Đánh dấu ví dụ 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, phần tử đó sẽ không được nhìn thấy bởi DOM. Đây là lý do tại sao 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: 0width: 0, phần tử không được DOM nhìn thấy và do đó có vấn đề. Việc sử dụng CSS ở trên 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 ẩn với trình duyệt trên máy tính để bàn và thiết bị di động (không có overflow: hidden, nội dung của bạn vẫn hiển thị trên màn hình) và hiển thị với trình đọc màn hình. Việc ẩn nội dung khỏi trình duyệt trên 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: 1pxheight: 1pxđã đề 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 tốt về những gì trình đọc màn hình nhìn thấy và chuyển đến người dùng bị suy giảm, hãy tắt kiểu trang cho trình duyệt của bạn. Đối với Firefox, bạn có thể thực hiện việc 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 một người nào đó ngoài các phản hồi khác.

7
Jaroslav Kubacek 2015-01-25 01:17.

Đảm bảo rằng đối tượng được hiển thị (hoặc phải) chỉ cho người đọc và các thiết bị tương tự. Nó có ý nghĩa hơn trong ngữ cảnh với phần tử khác có thuộc tính 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 sẽ hiển thị trên tất cả các thiết bị khác, lỗi word : trên trình đọc văn bản.

6
Ch UmarJamil 2017-03-08 21:34.

Các .sr-onlylớp ẩn một yếu tố cho tất cả các thiết bị ngoại trừscreen readers:

Chuyển đến nội dung chính Kết hợp .sr-only với .sr-only-focusable để hiển thị lại phần tử khi nó được lấy tiêu điểm

.sr-only {
border: 0 !important;
clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
-webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;  /* 2 */
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
white-space: nowrap !important;            /* 3 */

}

Related questions

MORE COOL STUFF

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett đã bất chấp những lời khuyên hẹn hò điển hình khi cô gặp chồng mình.

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Michael Sheen là một diễn viên phi lợi nhuận nhưng chính xác thì điều đó có nghĩa là gì?

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Ngôi sao của Hallmark Colin Egglesfield chia sẻ về những cuộc gặp gỡ với người hâm mộ ly kỳ tại RomaDrama Live! cộng với chương trình INSPIRE của anh ấy tại đại hội.

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Bạn sẽ phải phủi sạch đầu đĩa Blu-ray hoặc DVD để xem tại sao Northern Exposure trở thành một trong những chương trình nổi tiếng nhất của thập niên 90.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

8 công dụng tuyệt vời của Baking Soda và Giấm

8 công dụng tuyệt vời của Baking Soda và Giấm

Bạn biết đấy, hai sản phẩm này là nguồn điện để làm sạch, riêng chúng. Nhưng cùng với nhau, chúng có một loạt công dụng hoàn toàn khác.

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Thủy điện rất cần thiết cho lưới điện của Hoa Kỳ, nhưng nó chỉ tạo ra năng lượng khi có nước di chuyển. Bao nhiêu nhà máy thủy điện có thể gặp nguy hiểm khi các hồ và sông cạn kiệt?

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Tóc tỉa từ các tiệm và các khoản quyên góp cá nhân có thể được tái sử dụng như những tấm thảm thấm dầu và giúp bảo vệ môi trường.

Tận dụng lợi thế của việc bán hàng nhân Ngày của Cha này

Tận dụng lợi thế của việc bán hàng nhân Ngày của Cha này

Màn hình Samsung Galaxy S9 Plus. Chủ nhật này là Ngày của Cha⁠ — trong trường hợp nó khiến bạn suy nghĩ — và thay vì mua cho anh ấy một chiếc cà vạt trong năm nay, có lẽ đã đến lúc bạn mua cho anh ấy thứ mà anh ấy sẽ thực sự sử dụng.

Assassin's Creed Snuck Into Monster Hunter: World Last Night

Assassin's Creed Snuck Into Monster Hunter: World Last Night

Monster Hunter: World yêu thích các sự kiện chéo. Dù có nghĩa là hóa trang thành Dante của Devil May Cry, giả dạng Horizon: Zero Dawn's Aloy, hay chiến đấu với quái vật Final Fantasy, các nhiệm vụ sự kiện khác nhau của Thế giới được nâng cấp tự do so với các trò chơi khác.

Ava DuVernay Có Quà Tặng Ngày Của Mẹ cho Tất Cả Chúng Ta: Nếp Nhăn Thời Gian Sẽ Được Viết Lại Vào Cuối Tuần Ngày Của Mẹ!

Ava DuVernay Có Quà Tặng Ngày Của Mẹ cho Tất Cả Chúng Ta: Nếp Nhăn Thời Gian Sẽ Được Viết Lại Vào Cuối Tuần Ngày Của Mẹ!

Storm Reid, Oprah Winfrey, Mindy Kaling, Reese Witherspoon và Ava DuVernay tại buổi chiếu đặc biệt của A Wrinkle in Time tại Nhà hát Walter Reade ở Thành phố New York vào ngày 7 tháng 3 năm 2018 “Ava rất mong được nói chuyện với bạn,” một trong những người của Array dư luận viên nói qua điện thoại. (Array là tập thể phân phối, nghệ thuật và vận động chính sách của Ava DuVernay tập trung vào các bộ phim của người da màu và phụ nữ.

Nhiệm vụ bất khả thi 5 sẽ khôi phục niềm tin của bạn trong phim hành động Tentpole

Nhiệm vụ bất khả thi 5 sẽ khôi phục niềm tin của bạn trong phim hành động Tentpole

Mission Impossible: Rogue Nation bắt đầu ở một cấp độ khác. Theo nghĩa đen.

Edwin McCain ra mắt Grand Ole Opry: Quay cảnh hậu trường với nhạc sĩ 'I'll Be'

Edwin McCain ra mắt Grand Ole Opry: Quay cảnh hậu trường với nhạc sĩ 'I'll Be'

McCain, người đang làm việc cho một album mới, lần đầu tiên bước vào vòng kết nối vào tối thứ Sáu ở Nashville

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa. Từ Hollywood đến New York và mọi nơi ở giữa, hãy xem các ngôi sao yêu thích của bạn đang làm gì!

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

Các nhà điều tra đang xem xét liệu nhóm và nghi phạm có biết nhau trước vụ tấn công hay không

Tôi viết như thế nào

Tôi viết như thế nào

Đối với tôi, mọi thứ là về dòng đầu tiên đó và nó sẽ đưa bạn đến đâu. Một số nhà văn bị điều khiển bởi cốt truyện, sự sắp xếp tinh tế của các quân cờ, trong khi những người khác bị lôi cuốn bởi một nhân vật và khả năng thực hiện một cuộc hành trình với một người bạn hư cấu mới.

Đường băng hạ cánh

Đường băng hạ cánh

Cuối hè đầu thu là mùa hoài niệm. Những chiếc đèn đường chiếu ánh sáng của chúng qua những con đường đẫm mưa, và những chiếc lá dưới chân - màu đỏ cam tắt trong bóng chạng vạng - là lời nhắc nhở về những ngày đã qua.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Vào năm 2021, tôi khuyến khích bạn suy nghĩ lại mọi thứ bạn biết về khách hàng mà bạn phục vụ và những câu chuyện bạn kể cho họ. Lùi lại.

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Vào ngày sinh nhật thứ 9 của Felix The Cat, tôi nhớ về một trong những mất mát lớn nhất trong cuộc đời trưởng thành của tôi - Sophie của tôi vào năm 2013. Tôi đã viết bài luận này và chia sẻ nó trên nền tảng này một thời gian ngắn vào năm 2013.

Language