開發中經常發現bootStrap中有sr-only類，如下圖

但是，好像在瀏覽器中并沒有顯現出什么效果。你作為正常用戶覺得沒效果就對了。

作用

這是專門為殘障人士瀏覽網頁設計的。

在前端開發中，有些時候設計圖上面會出現僅供正常視覺用戶看的元素。比如：導航欄菜單當前頁面選中高亮狀態，這些狀態只有視力正常的人才能正常使用。

而殘障人士，弱勢或盲人是很難或者根本看不出導航菜單高亮的。他們上網可能借助的是屏幕閱讀器，也就是?screen reader（sr），屏幕閱讀器需要找到能辨識的文本說明然后“讀”出來給用戶聽。

問題是：一些元素，比如選中高亮狀態無法讀出。因此我們還要寫上這些元素的文本說明，但是又不需要展示給普通用戶看到，于是加上 sr-only 的意義就在于能保證屏幕閱讀器正確讀取且不會影響正常人的使用。

比如：導航欄首頁鏈接被選中高亮，我們可以這樣表示。

<li class="active">
    <a href="#">首頁 <span class="sr-only">(current)</span></a>
</li>

這樣正常人看起來只有首頁兩個字，而屏幕閱讀器卻可以讀首頁?current

總結

以上是生活随笔為你收集整理的bootstrap中sr-only是什么属性？用途是什么？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。