1. 程式人生 > >HTML中的aria-hidden屬性

HTML中的aria-hidden屬性

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還有很多有趣的用法,我也正在探索中,歡迎大家交流談論。



[email protected]