課程
/前端開發
/Bootstrap
/玩轉Bootstrap(基礎)
<span class="sr-only">Toggle Navigation</span>
這句意義在哪?
2017-06-13
源自:玩轉Bootstrap(基礎) 6-7
正在回答
sr-only?代表元素只在屏幕閱讀器中顯示:sc (screen-reader),為殘障人士 設計,體現人文關懷;
這是專門為殘障人士瀏覽網頁設計的。
在前端開發中,有些時候設計圖上面會出現僅供正常視覺用戶看的元素。比如:導航欄菜單當前頁面選中高亮狀態,這些狀態只有視力正常的人才能正常使用。
而殘障人士,弱勢或盲人是很難或者根本看不出導航菜單高亮的。他們上網可能借助的是屏幕閱讀器,也就是 screen reader(sr),屏幕閱讀器需要找到能辨識的文本說明然后“讀”出來給用戶聽。
問題是:一些元素,比如選中高亮狀態無法讀出。因此我們還要寫上這些元素的文本說明,但是又不需要展示給普通用戶看到,于是加上 sr-only 的意義就在于能保證屏幕閱讀器正確讀取且不會影響正常人的使用。
比如:導航欄首頁鏈接被選中高亮,我們可以這樣表示。
<li class="active">
? <a href="#">首頁 <span class="sr-only">(current)</span></a>
</li>
這樣正常人看起來只有首頁兩個字,而屏幕閱讀器卻可以讀首頁 current
舉報
告訴你使用Bootstrap,并且能夠獨立定制出適合自己的Bootstrap
1 回答<span class="sr-only">Toggle Navigation</span>這句什么意思?
6 回答<span class="sr-only">Toggle Navigation</span> 干嗎用的?
4 回答我想問下<span class="sr-only">Toggle Navigation</span>這個是干嘛的?
2 回答<span class='sr-only'>40% Complete</span>
1 回答<span class="sr-only">Close</span>有什么用途?
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2017-06-14
sr-only?代表元素只在屏幕閱讀器中顯示:sc (screen-reader),為殘障人士 設計,體現人文關懷;
這是專門為殘障人士瀏覽網頁設計的。
在前端開發中,有些時候設計圖上面會出現僅供正常視覺用戶看的元素。比如:導航欄菜單當前頁面選中高亮狀態,這些狀態只有視力正常的人才能正常使用。
而殘障人士,弱勢或盲人是很難或者根本看不出導航菜單高亮的。他們上網可能借助的是屏幕閱讀器,也就是 screen reader(sr),屏幕閱讀器需要找到能辨識的文本說明然后“讀”出來給用戶聽。
問題是:一些元素,比如選中高亮狀態無法讀出。因此我們還要寫上這些元素的文本說明,但是又不需要展示給普通用戶看到,于是加上 sr-only 的意義就在于能保證屏幕閱讀器正確讀取且不會影響正常人的使用。
比如:導航欄首頁鏈接被選中高亮,我們可以這樣表示。
<li class="active">
? <a href="#">首頁 <span class="sr-only">(current)</span></a>
</li>
這樣正常人看起來只有首頁兩個字,而屏幕閱讀器卻可以讀首頁 current