一个元素,其隐含的原生角色语义不会映射到辅助应用程序接口中。参见同义词 none
。
注意
在 ARIA 1.1 中,工作组将 none
作为
presentation
角色的同义词引入,这是由于作者对词语“presentation”或“presentational”预期含义的混淆。许多人错误地认为
role="presentation"
与 aria-hidden="true"
等同,而我们认为
role="none"
能更明确地传达实际含义。
在充分支持 role="none"
的实现出现之前,建议网络作者仅使用 presentation
角色
(role="presentation"
),或作为 none
角色的备用冗余使用
role="none presentation"
。
预期用途是在一个元素用于改变页面外观但不具备该元素类型所暗示的全部功能、交互或结构相关性时使用,或者在旧版不支持 WAI-ARIA 的浏览器中,为辅助可访问性提供后备。
示例用例:
- 一个其内容完全用于呈现的元素(例如占位图像、装饰性图形或用于清除布局的元素);
- 一个图像,位于具有
img
角色的容器中,并且其完整的文本替代信息可用,并且用 aria-labelledby
(以及在需要时用 aria-describedby
)进行了标记;
- 一个作为额外标记 “钩子” 供 CSS 使用的元素;或
- 一个布局表格及其任何相关的行、单元格等。
对于任何具有 presentation
角色且不可聚焦的元素,用户代理不得将该元素的隐含原生语义(即角色及其状态和属性)暴露给辅助API。然而,用户代理必须暴露那些没有显式或继承 presentation
角色的内容和子元素。因此,presentation
角色会使一个元素被视为没有角色或从辅助树中移除,但不会导致该元素内的内容被从辅助树中移除。
例如,根据某个辅助API,以下标记元素看起来将具有相同的角色语义(无角色)以及完全相同的内容。
<h1 role="presentation"> Sample Content </h1>
<span> Sample Content </span>
<span role="presentation"> Sample Content </span>
Sample Content
presentation
角色用于具有隐式原生语义的元素上,
这意味着该元素有一个默认的可访问性 API 角色。某些元素
只有在提供了额外的后代元素时才是完整的。例如,在 HTML 中,表格元素(匹配 table
角色)需要 tr
后代(row
角色),而 tr
后代又
需要 th
或 td
子元素(cell
、columnheader
、rowheader
角色)。类似地,列表需要列表项
子元素。完成元素语义的后代元素在 WAI-ARIA 中
被描述为 必需的拥有元素。
当显式或继承的 presentation
角色应用于具有
WAI-ARIA 角色的隐式语义的元素时,
该角色具有 必需的拥有元素,除了具有显式 presentation
角色的元素之外,用户代理
必须 将继承的 presentation 角色应用于任何没有定义显式角色的拥有元素。
此外,当显式或继承的 presentation 角色应用于主机语言元素时,该元素具有主机语言规范定义的必需子元素,
除了具有显式 presentation 角色的元素之外,用户代理 必须 将继承的 presentation
角色应用于任何没有定义显式角色的必需子元素。
在 HTML 中,<img>
元素 被视为一个单一实体,无论图像文件的类型如何。因此,在
HTML img
上使用
role="presentation"
或 role="none"
相当于使用 aria-hidden="true"
。为了使图像内容可访问,作者
可以使用 <object>
或 <iframe>
元素 嵌入对象,或者使用内联
SVG 代码,并遵循图像内容的可访问性指南。
对于任何具有显式或继承的 presentation 角色且不可聚焦的元素,用户代理 必须 忽略该元素的特定于角色的 WAI-ARIA 状态和属性。例如,在 HTML 中,具有 presentation
角色的
ul
或 ol
元素将删除其 li
元素的隐式原生语义,因为 ul
或
ol
对应的 list
角色具有 必需的拥有元素 listitem
。同样,HTML table
元素的
thead
/tbody
/tfoot
/tr
/th
/td
后代的隐式原生语义也将被删除,因为 HTML 规范表明这些是 table
元素的必需结构后代。
注意
仅删除与 WAI-ARIA 必需的拥有元素 相对应的元素的隐式原生语义。所有其他内容保持不变,
包括嵌套的表格或列表,除非这些元素也应用了显式的 presentation
角色。
例如,根据可访问性 API,以下标记元素看起来具有相同的角色语义(没有角色)和相同的内容。
<ul role="presentation">
<li> Sample Content </li>
<li> More Sample Content </li>
</ul>
<foo>
<foo> Sample Content </foo>
<foo> More Sample Content </foo>
</foo>
注意
还有其他 WAI-ARIA
角色具有必需的子元素,这种情况也适用(例如,radiogroups 和
listboxes),但表格和列表是最常见的实际案例,其中
presentation 继承可能适用。
对于任何具有显式或继承的 presentation
角色的元素,用户代理 必须 将继承的
presentation
角色应用于
presentational 元素的所有特定于宿主语言的标签元素。例如,具有 presentation
角色的
table
元素将删除其 caption
元素的隐式原生语义,因为 caption 仅仅是
presentational 表格的标签。
当将 presentation
角色应用于图像时,作者 不应该 提供有意义的替代文本(例如,在 HTML 中使用
alt=""
)。
在以下代码示例中,包含的 img
元素被 caption
段落正确地标记。在此示例中,img
元素可以标记为 presentation,因为
角色和文本替代方案由包含元素提供。
<div role="img" aria-labelledby="caption">
<img src="example.png" role="presentation" alt="">
<p id="caption">一个可见的文本标题,用于标记图像。</p>
</div>
在以下代码示例中,由于锚点(HTML a
元素)充当
treeitem,因此列表项(HTML li
元素)被分配了显式的 WAI-ARIA presentation
角色,以覆盖用户代理对列表项的隐式原生语义。
<ul role="tree">
<li role="presentation">
<a role="treeitem" aria-expanded="true">一个展开的树节点</a>
</li>
…
</ul>
解决 presentational 角色冲突的方法有很多。
用户代理 必须不 在可访问性树中公开具有显式或继承的 presentational 角色的 元素,但以下情况除外:
- 如果一个元素是可聚焦的,或者以其他方式是可交互的,用户代理 必须 忽略
presentation
角色,并以其隐式角色公开该元素,以确保该元素是 可操作的。
- 如果一个 必需的拥有元素 具有显式的非 presentational 角色,用户代理 必须 忽略继承的 presentational
角色,并以其显式角色公开该元素。如果公开显式角色的操作导致可访问性树格式错误,则预期结果未定义。
- 如果一个元素具有全局的 WAI-ARIA
状态或属性,用户代理 必须 忽略
presentation
角色,并以其隐式角色公开该元素。但是,如果一个元素只有非全局的、特定于角色的 WAI-ARIA 状态或属性,则 必须不 公开该元素,除非 presentational 角色是继承的,并且应用了显式的非 presentational 角色。
例如,aria-describedby
是一个全局属性,并且将始终应用;aria-level
不是一个全局属性,因此仅在元素不是 presentational 状态时才适用。
<h1 role="presentation" aria-describedby="comment-1"> 示例内容 </h1>
<h1 role="presentation" aria-level="2"> 示例内容 </h1>