files/zh-cn/web/accessibility/aria/aria_techniques/使用aria-hidden属性/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

---
title: 使用aria-hidden属性
slug: Web/Accessibility/ARIA/ARIA_Techniques/使用aria-hidden属性
tags:
  - HTML
  - Rôle
  - 代码脚本
  - 可访问性
  - 可访问的富网络应用
  - 客户端
  - 警告
translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute
---
<p>{{draft}}</p>

<p>本文用来说明如何使用aria-hidden属性。aria-hidden属性可以用来控制一系列可访问API中的非交互内容的显示或隐藏。</p>

<h2 id="描述">描述</h2>

<div class="summary">
<p>把 <code>aria-hidden="true"</code> 加到元素上会把该元素和它的所有子元素从可访问性树上移除。这样做可以通过隐藏下列内容来提升使用辅助技术的用户体验：</p>

<ul>
 <li>纯装饰性的内容，如图标、图片</li>
 <li>重复的内容，如重复的文本</li>
 <li>屏幕外或被折叠的内容，如菜单</li>
</ul>

<p>根据<a href="https://www.w3.org/TR/using-aria/#fourth">可访问性的第四条规则</a>，<code>aria-hidden="true"</code> 不应该被用在可聚焦的元素上。 而且，由于这个属性是可以被子元素继承的，它也不应该被用在可聚焦元素的父元素上。</p>

<p>如果父元素带有 <code>aria-hidden="true"</code> ，那么即使使用 <code>aria-hidden="false"</code> 也无法将该元素显示出来。</p>
</div>

<div class="blockIndicator warning">
<p>WAI-ARIA Authoring Practices 1.1 提示 <code>aria-hidden="false"</code> 在现阶段 <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-hidden">各个浏览器中表现不同</a>.</p>
</div>

<h3 id="比较_aria-hiddentrue，_rolepresentation_和_rolenone">比较 <code>aria-hidden="true"</code>， <code>role="presentation"<font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="background-color: #333333;"> 和 </span></font></code><code>role="none"</code></h3>

<p>表面上，<code>aria-hidden="true"</code>，<code>role="presentation"</code>，和<code>role="none"</code> 很相似，因为这三者都有以下特性:</p>

<ul>
 <li>根据辅助即使隐藏页面内容</li>
 <li>无法在可聚焦元素上使用</li>
 <li>无法在可互动元素的父级元素上使用</li>
</ul>

<p dir="ltr">尽管有上面这些相同点，但是各个属性的意图是不同的。</p>

<ul dir="ltr">
 <li><code>aria-hidden="true"</code> 会把整个元素从可访问性API中移除</li>
 <li><code>role="presentation"</code> 和<code>role="none"</code> 会将元素从语义上移除，仍然会将元素暴露给辅助技术。</li>
</ul>

<p dir="ltr"></p>

<h3 id="可选值">可选值</h3>

<dl>
 <dt><code>false</code></dt>
 <dd>（默认）元素会暴露给可访问性API。</dd>
 <dt><code>true</code></dt>
 <dd>元素不会暴露给可访问性API。</dd>
 <dt><code>undefined</code></dt>
 <dd>（默认）客户端决定元素是否暴露给可访问性API。</dd>
</dl>

<h2 id="示例">示例</h2>

<pre class="brush: html"> &lt;i class="icon" <code>aria-hidden="true" /&gt;</code>
 </pre>

<h2 id="无障碍问题">无障碍问题</h2>

<h2 id="最佳实践">最佳实践</h2>

<p> <code>aria-hidden="true"</code> 在以下场景不应该被使用:</p>

<ul>
 <li>HTML的<code>hidden</code>属性被设置了</li>
 <li>祖先元素被<code>display: none</code>属性设置成不显示状态</li>
 <li>祖先元素被<code>visibility: hidden</code>属性设置成不显示状态</li>
</ul>

<p dir="ltr">在以上三个场景中，元素已经被隐藏，从可访问树种移除了，无需再添加<code>aria-hidden="true"</code>属性。</p>

<h2 dir="ltr" id="技术规格">技术规格</h2>

<h2 dir="ltr" id="另见">另见</h2>

<ul dir="ltr">
 <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role">使用展示角色</a></li>
 <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_none_role">role="none"</a></li>
</ul>