aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/accessibility/aria/aria_techniques/使用aria-hidden属性
diff options
context:
space:
mode:
authorFlorian Merz <me@fiji-flo.de>2021-02-11 12:56:40 +0100
committerFlorian Merz <me@fiji-flo.de>2021-02-11 12:56:40 +0100
commit310fd066e91f454b990372ffa30e803cc8120975 (patch)
treed5d900deb656a5da18e0b60d00f0db73f3a2e88e /files/zh-cn/web/accessibility/aria/aria_techniques/使用aria-hidden属性
parent8260a606c143e6b55a467edf017a56bdcd6cba7e (diff)
downloadtranslated-content-310fd066e91f454b990372ffa30e803cc8120975.tar.gz
translated-content-310fd066e91f454b990372ffa30e803cc8120975.tar.bz2
translated-content-310fd066e91f454b990372ffa30e803cc8120975.zip
unslug zh-cn: move
Diffstat (limited to 'files/zh-cn/web/accessibility/aria/aria_techniques/使用aria-hidden属性')
-rw-r--r--files/zh-cn/web/accessibility/aria/aria_techniques/使用aria-hidden属性/index.html94
1 files changed, 0 insertions, 94 deletions
diff --git a/files/zh-cn/web/accessibility/aria/aria_techniques/使用aria-hidden属性/index.html b/files/zh-cn/web/accessibility/aria/aria_techniques/使用aria-hidden属性/index.html
deleted file mode 100644
index 8b7f706afa..0000000000
--- a/files/zh-cn/web/accessibility/aria/aria_techniques/使用aria-hidden属性/index.html
+++ /dev/null
@@ -1,94 +0,0 @@
----
-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>