aria-hidden="true"有什麼用

a瑶池發表於2024-08-16

指示輔助技術忽略特定的HTML元素

aria-hidden="true"的主要作用是指示輔助技術忽略特定的HTML元素,使其在‌螢幕閱讀器等輔助裝置中不可見,從而減少冗餘資訊的輸出,提高網頁的可訪問性。 當一個元素被設定為aria-hidden="true"時,輔助技術將不會讀取該元素及其內容,這對於純裝飾性的影像或其他不需要被螢幕閱讀器讀取的元素非常有用。‌12

在不同場景中,aria-hidden="true"的應用包括:

  • 圖示和裝飾元素:當圖示僅用於裝飾目的時,設定aria-hidden="true"可以避免螢幕閱讀器讀取不必要的圖示資訊,保持頁面內容的簡潔性。‌23
  • 頁面彈窗元素:在頁面彈窗(modal)上使用aria-hidden="true"可以避免螢幕閱讀器讀取非必要的彈窗內容,提高使用者體驗。‌45
  • 表達含義的圖示:如果圖示用於表達特定含義,而不是僅作為裝飾,應確保其含義可透過輔助裝置識別。在這種情況下,可以結合使用aria-label屬性來提供額外的資訊。‌23

此外,aria-hidden屬性是‌HTML5中的一個全域性屬性,用於指示輔助技術忽略特定的HTML元素。透過將其設定為"true",可以減少輔助技術使用者瀏覽頁面時遇到的冗餘資訊,從而提高網頁的可訪問性。

相關文章