aria-hidden

aria-hidden 屬性可用於從無障礙訪問 API 中隱藏非互動式內容。

將 aria-hidden="true" 新增到元素會從無障礙訪問樹中刪除該元素及其所有子元素。這可以透過隱藏以下內容來改善輔助技術使用者的體驗：

• 純裝飾性內容，例如圖示或影像
• 重複內容，例如重複的文字
• 螢幕外或摺疊的內容，例如選單

aria-hidden 屬性的存在會將內容隱藏在輔助技術之外，但不會在視覺上隱藏任何內容。

aria-hidden="true" 不應用於可以接收焦點的元素。此外，由於此屬性會被元素的子元素繼承，因此不應將其新增到可聚焦元素的父元素或祖先元素上。

元素的隱藏狀態取決於它是否已呈現。呈現通常由 CSS 控制。例如，透過 CSS 將其 display 屬性設定為 none 的元素不會呈現。如果元素或其任何祖先未呈現或其 aria-hidden 屬性值設定為 true，則該元素被視為隱藏。請注意，在其上聲明瞭 aria-hidden="true" 的元素及其子元素仍將可見，除非也透過 CSS 隱藏。

使用 aria-hidden 將視覺上呈現的內容隱藏在輔助技術之外時，請謹慎操作。除非這樣做可以透過刪除冗餘或無關的內容來改善輔助技術使用者的體驗，否則您不應隱藏可見內容。只有當相同或等效的含義和功能公開給輔助技術時，才能考慮將可見內容從無障礙訪問 API 中移除。

從表面上看，aria-hidden="true" 與 role="presentation" 及其同義詞 role="none" 看起來很相似，但它們背後的意圖卻不同。

• aria-hidden="true" 將從無障礙訪問 API 中刪除整個元素。
• role="presentation" 和 role="none" 將刪除元素的語義含義，同時仍將其及其內容公開給輔助技術。

aria-hidden="true" 不應在以下情況下新增

• 存在 HTML hidden 屬性
• 元素或元素的祖先使用 display: none 隱藏
• 元素或元素的祖先使用 visibility: hidden 隱藏

在這三種情況下，都不需要新增該屬性，因為該元素已從無障礙訪問樹中刪除。使用 display 或 visibility 視覺上隱藏元素會將內容從螢幕和輔助技術中隱藏。

如果任何父元素指定了 aria-hidden="true"，則使用 aria-hidden="false" 不會將元素重新公開給輔助技術。

將 aria-hidden="true" 新增到圖示會隱藏圖示字元，使其不包含在可訪問名稱中。

<button>
  <span class="fa fa-tweet" aria-hidden="true"></span>
  <span class="label"> Tweet </span>
</button>

我們有一個帶有 Font Awesome 圖示 的按鈕。我們使用 aria-hidden="true" 將圖示隱藏在輔助技術之外，因為將圖示公開給輔助技術可能會導致冗餘，或者如果圖示的內容與可見文字不相同，則會導致混淆。

false

元素公開給無障礙訪問 API，就像它已呈現一樣。

true

元素從無障礙訪問 API 中隱藏。

undefined (預設)

元素的隱藏狀態由使用者代理根據其是否已呈現來確定。

Element.ariaHidden

ariaHidden 屬性（Element 介面的一部分）反映了 aria-hidden 屬性的值，該屬性指示元素是否公開給無障礙訪問 API。

ElementInternals.ariaHidden

ariaHidden 屬性（ElementInternals 介面的一部分）反映了 aria-hidden 屬性的值

在**所有**角色中使用

• aria-disabled
• aria-modal
• aria-expanded
• HTML hidden 屬性
• CSS display 屬性
• CSS visibility 屬性