diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:56:40 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:56:40 +0100 |
commit | 310fd066e91f454b990372ffa30e803cc8120975 (patch) | |
tree | d5d900deb656a5da18e0b60d00f0db73f3a2e88e /files/zh-cn/web/accessibility/aria/aria_techniques/使用aria-hidden属性 | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-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.html | 94 |
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"> <i class="icon" <code>aria-hidden="true" /></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> |