HTML中的aria-hidden屬性
阿新 • • 發佈:2019-01-05
HTML中的aria-hidden屬性
我們常常看到這樣的html,
<div id="modal" class="modal" aria-hidden="true">
<div class="modal-header">...</div>
<div class="modal-body">...</div>
<div class="modal-footer">...</div>
</div>
尤其是在作為頁面彈窗的元素(modal)上,通常會有一個屬性aria-hidden="true"
網上的專業資料通常會這樣寫:
現代的輔助技術能夠識別並朗讀由 CSS 生成的內容和特定的 Unicode 字元。為了避免螢幕識讀裝置抓取非故意的和可能產生混淆的輸出內容(尤其是當圖示純粹作為裝飾用途時),我們為這些圖示設定了 aria-hidden=“true” 屬性。
我的部落格裡會這樣寫:
讓這個元素對瀏覽器隱藏。
(這裡的“隱藏”更多指的是語義化的隱藏,實現彈窗效果需配合display: none等樣式使用)
後記:
aria-xxx還有很多有趣的用法,我也正在探索中,歡迎大家交流談論。