ARIA：presentation 角色

presentation 角色及其同義詞 none 會阻止元素的隱式 ARIA 語義在無障礙樹中顯示。

該元素的內容仍然可供輔助技術訪問；僅容器的語義（在某些情況下，包括必需的關聯後代）不再將它們的對映公開到無障礙 API。

描述

雖然 ARIA 主要用於表達語義，但在某些情況下，將元素的語義隱藏在輔助技術中會很有幫助。這是透過 presentation 角色或其同義詞角色 none 來完成的，它們宣告該元素僅用於展示，因此不包含任何無障礙語義。

編寫 <h2 role="presentation">民主消亡於黑暗之中</h2> 會刪除 h2 元素的標題語義，使其等效於 <div>民主消亡於黑暗之中</div>。標題角色語義已刪除，但內容本身仍然可用。

當元素包含必需的後代時，例如各種 <table> 元素以及 <li> 作為 <ul> 或 <ol> 的子元素，表格或列表上的 presentation 或 none 角色會刪除應用了該角色的元素及其必需後代元素的預設語義。

如果 presentation 或 none 應用於 <table> 元素，則後代 <caption>、<thead>、<tbody>、<tfoot>、<tr>、<th> 和 <td> 元素會繼承該角色，因此不會公開給輔助技術。但是，<th> 和 <td> 元素內部的元素（包括巢狀表格）會公開給輔助技術。

html
<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 角色應用於 <ul> 元素，每個子元素 <li> 元素都會繼承 presentation 角色。這是因為 ARIA 要求 listitem 元素具有父 list 元素。在這種情況下，雖然 <li> 元素不會公開給輔助技術，但這些必需元素的後代會公開。如果我們在其中一個 <li> 中嵌套了一個列表，那麼該列表將對輔助技術可見。對於沒有必需子元素的元素，在具有 role="presentation" 或 role="none" 的元素內部巢狀的任何元素都將保留其語義。在這種情況下，包含在這些 <li> 元素內的 <a> 元素會公開。

<a> 是一個特例。即使直接應用了 presentation 或 none 角色，它的角色也會公開。瀏覽器會忽略可聚焦元素（包括連結和輸入）或任何設定了 tabindex 屬性的元素上的 role="presentation" 和 role="none"。如果元素包含任何全域性 ARIA 狀態和屬性，例如 aria-describedby，瀏覽器也會忽略角色的包含。

注意： 具有 role="presentation" 的元素不是無障礙樹的一部分，不應該有無障礙名稱。不要使用 aria-labelledby 或 aria-label。

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

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

示例

html
<hr role="none" />

規範

規範
無障礙富網際網路應用程式 (WAI-ARIA)
# presentation

另請參閱