ARIA: 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

Element 介面的 ariaHidden 屬性反映了 aria-hidden 屬性的值，該屬性指示元素是否暴露給可訪問性 API。

ElementInternals.ariaHidden

ElementInternals 介面的 ariaHidden 屬性反映了 aria-hidden 屬性的值。

相關角色

用於 **所有** 角色

規範

另見

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