ARIA: presentation 角色

描述

雖然 ARIA 主要用於表達語義，但在某些情況下，從輔助技術中隱藏元素的語義是有幫助的。這透過 presentation 角色或其同義詞角色 none 來實現，它們宣告一個元素僅用於展示，因此沒有任何可訪問性語義。

編寫 <h2 role="presentation">民主死於黑暗</h2> 會移除 <a href="/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements">h2</a> 元素的標題語義，使其等同於 <div>民主死於黑暗</div>。標題角色的語義被移除，但內容本身仍然可用。

當一個元素有必需的後代時，例如各種 <a href="/en-US/docs/Web/HTML/Reference/Elements/table"><code>table</code></a>、元素和 <a href="/en-US/docs/Web/HTML/Reference/Elements/li"><code>li</code></a> 的 <a href="/en-US/docs/Web/HTML/Reference/Elements/ul"><code>ul</code></a> 或 <a href="/en-US/docs/Web/HTML/Reference/Elements/ol"><code>ol</code></a> 的子元素時，在 table 或 list 上應用的 presentation 或 none 角色會移除其應用的元素及其必需的後代元素的預設語義。

如果 presentation 或 none 應用於 <a href="/en-US/docs/Web/HTML/Reference/Elements/table"><code>table</code></a> 元素，則後代 <a href="/en-US/docs/Web/HTML/Reference/Elements/caption"><code>caption</code></a>、<a href="/en-US/docs/Web/HTML/Reference/Elements/thead"><code>thead</code></a>、<a href="/en-US/docs/Web/HTML/Reference/Elements/tbody"><code>tbody</code></a>、<a href="/en-US/docs/Web/HTML/Reference/Elements/tfoot"><code>tfoot</code></a>、<a href="/en-US/docs/Web/HTML/Reference/Elements/tr"><code>tr</code></a>、<a href="/en-US/docs/Web/HTML/Reference/Elements/th"><code>th</code></a> 和 <a href="/en-US/docs/Web/HTML/Reference/Elements/td"><code>td</code></a> 元素會繼承該角色，因此不會暴露給輔助技術。但是，<a href="/en-US/docs/Web/HTML/Reference/Elements/th"><code>th</code></a> 和 <a href="/en-US/docs/Web/HTML/Reference/Elements/td"><code>td</code></a> 元素中的元素，包括巢狀的表格，都會暴露給輔助技術。

<ul role="presentation">
  <li>
    <a href="#">Link 1</a>
  </li>
  <li>
    <a href="#">Link 2</a>
  </li>
  <li>
    <a href="#">Link 3</a>
  </li>
</ul>

由於 presentation 角色應用於 <a href="/en-US/docs/Web/HTML/Reference/Elements/ul"><code>ul</code></a> 元素，每個子 <a href="/en-US/docs/Web/HTML/Reference/Elements/li"><code>li</code></a> 元素都會繼承 presentation 角色。這是因為 ARIA 要求 listitem 元素必須有一個父 list 元素。儘管在這種情況下，<a href="/en-US/docs/Web/HTML/Reference/Elements/li"><code>li</code></a> 元素不會暴露給輔助技術，但這些必需元素的後代是暴露的。如果我們在其中一個 <a href="/en-US/docs/Web/HTML/Reference/Elements/li"><code>li</code></a> 中嵌套了一個列表，那麼它們將對輔助技術可見。對於沒有必需後代的元素，巢狀在具有 role="presentation" 或 role="none" 的元素內的任何元素都會保留其語義。在這種情況下，包含在這些 <a href="/en-US/docs/Web/HTML/Reference/Elements/li"><code>li</code></a> 元素內的 <a href="/en-US/docs/Web/HTML/Reference/Elements/a"><code>a</code></a> 元素會被暴露。

<a href="/en-US/docs/Web/HTML/Reference/Elements/a"><code>a</code></a> 是一個特殊情況。即使直接應用了 presentation 或 none 角色，它的角色也會被暴露。瀏覽器會忽略可聚焦元素（包括連結和輸入框，或任何帶有 <a href="/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex">tabindex</a> 屬性的元素）上的 role="presentation" 和 role="none"。如果元素包含任何全域性 ARIA 狀態和屬性，例如 <a href="/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby"><code>aria-describedby</code></a>，瀏覽器也會忽略該角色的包含。

關聯的 WAI-ARIA 角色、狀態和屬性

無。如果設定了全域性 ARIA 狀態和屬性，presentation 或 none 將被忽略，並使用元素的隱式角色。

示例

<hr role="none" />

規範

另見

• <a href="/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-hidden"><code>aria-hidden</code></a> 與 <a href="https://www.scottohara.me/blog/2018/05/05/hidden-vs-none.html" class="external" target="_blank"><code>role="presentation/none"</code></a> - by Scott O'Hara