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