HTML 'hidden' 和 'aria-hidden' 属性有什么区别？

What's the difference between HTML 'hidden' and 'aria-hidden' attributes?

提问by Daniel Kobe

I have been seeing the aria attribute all over while working with Angular Material. Can someone explain to me, what the aria prefix means? but most importantly what I'm trying to understand is the difference between aria-hiddenand hiddenattribute.

在使用 Angular Material 时，我一直在看到 aria 属性。有人可以向我解释，aria 前缀是什么意思吗？但最重要的是我想了解的是aria-hidden和hidden属性之间的区别。

回答by Leo Farmer

ARIA (Accessible Rich Internet Applications) defines a way to make Web content and Web applications more accessible to people with disabilities.

ARIA（Accessible Rich Internet Applications）定义了一种使残障人士更容易访问 Web 内容和 Web 应用程序的方法。

The hiddenattribute is new in HTML5 and tells browsersnot to display the element. The aria-hiddenproperty tells screen-readersif they should ignore the element. Have a look at the w3 docs for more details:

该hidden属性是 HTML5 中的新属性，它告诉浏览器不要显示该元素。该aria-hidden属性告诉屏幕阅读器他们是否应该忽略该元素。查看 w3 文档以获取更多详细信息：

https://www.w3.org/WAI/PF/aria/states_and_properties#aria-hidden

https://www.w3.org/WAI/PF/aria/states_and_properties#aria-hidden

Using these standards can make it easier for disabled people to use the web.

使用这些标准可以使残疾人更容易使用网络。

回答by UnknownOctopus

A hidden attribute is a boolean attribute (True/False). When this attribute is used on an element, it removes all relevance to that element. When a user views the html page, elements with the hidden attribute should not be visible.

隐藏属性是布尔属性（真/假）。当在元素上使用此属性时，它会删除与该元素的所有相关性。当用户查看 html 页面时，具有 hidden 属性的元素不应该是可见的。

Example:

例子：

    <p hidden>You can't see this</p>

Aria-hidden attributes indicate that the element and ALL of its descendants are still visible in the browser, but will be invisible to accessibility tools, such as screen readers.

Aria-hidden 属性表示该元素及其所有后代在浏览器中仍然可见，但对辅助工具（如屏幕阅读器）不可见。

Example:

例子：

    <p aria-hidden="true">You can't see this</p>

Take a look at this. It should answer all your questions.

看看这个。它应该回答你所有的问题。

Note:ARIA stands for Accessible Rich Internet Applications

注意：ARIA 代表 Accessible Rich Internet Applications

Sources:Paciello Group

资料来源：Paciello 集团

回答by chharvey

Semantic Difference

语义差异

According to HTML 5.2:

根据HTML 5.2：

When specified on an element, [the hiddenattribute] indicates that the element is not yet, or is no longer, directly relevant to the page's current state, or that it is being used to declare content to be reused by other parts of the page as opposed to being directly accessed by the user.

当在元素上指定时，[该hidden属性] 表示该元素尚未或不再与页面的当前状态直接相关，或者它正被用于声明要被页面其他部分重用的内容为与用户直接访问相反。

Examples include a tab list where some panels are not exposed, or a log-in screen that goes away after a user logs in. I like to call these things “temporally relevant” i.e. they are relevant based on timing.

示例包括某些面板未暴露的选项卡列表，或用户登录后消失的登录屏幕。我喜欢称这些东西为“时间相关”，即它们是基于时间相关的。

On the other hand, ARIA 1.1says:

另一方面，ARIA 1.1说：

[The aria-hiddenstate] indicates whether an element is exposed to the accessibility API.

[aria-hidden状态] 指示元素是否公开给可访问性 API。

In other words, elements with aria-hidden="true"are removed from the accessibility tree, which most assistive technology honors, and elements with aria-hidden="false"will definitely be exposed to the tree. Elements without the aria-hiddenattribute are in the "undefined (default)" state, which means user agents should expose it to the tree based on its rendering. E.g. a user agent may decide to remove it if its text color matches its background color.

换句话说，aria-hidden="true"从可访问性树中删除元素 with ，这是大多数辅助技术所尊重的，并且元素 witharia-hidden="false"肯定会暴露在树中。没有该aria-hidden属性的元素处于“未定义（默认）”状态，这意味着用户代理应根据其呈现将其暴露给树。例如，如果其文本颜色与其背景颜色匹配，则用户代理可能决定将其移除。

Now let's compare semantics. It's appropriate to use hidden, but notaria-hidden, for an element that is not yet “temporally relevant”, but that might become relevant in the future (in which case you would use dynamic scripts to remove the hiddenattribute). Conversely, it's appropriate to use aria-hidden, but not hidden, on an element that is always relevant, but with which you don't want to clutter the accessibility API; such elements might include “visual flair”, like icons and/or imagery that are not essential for the user to consume.

现在让我们比较语义。对于尚未“暂时相关”但将来可能变得相关的元素，使用hidden而不是是合适的aria-hidden（在这种情况下，您将使用动态脚本来删除hidden属性）。相反，在始终相关的元素上使用aria-hidden而不是是合适的，但hidden您不想用它来弄乱可访问性 API；此类元素可能包括“视觉天赋”，例如对用户消费而言不是必需的图标和/或图像。

Effective Difference

有效差异

The semanticshave predictable effectsin browsers/user agents. The reason I make a distinction is that user agent behavior is recommended, but not requiredby the specifications.

该语义有可预见的效果在浏览器/用户代理。我进行区分的原因是用户代理行为是推荐的，但不是规范所要求的。

The hiddenattribute should hide an element from allpresentations, including printers and screen readers (assuming these devices honor the HTML specs). If you want to remove an element from the accessibility tree as well asvisual media, hiddenwould do the trick. However, do not use hiddenjust becauseyou want this effect. Ask yourself if hiddenis semantically correct first (see above). If hiddenis not semantically correct, but you still want to visually hide the element, you can use other techniques such as CSS.

该hidden属性应该对所有演示文稿隐藏一个元素，包括打印机和屏幕阅读器（假设这些设备遵守 HTML 规范）。如果您想从可访问性树和视觉媒体中删除一个元素，hidden就可以了。但是，不要hidden仅仅因为您想要这种效果就使用它。首先问问自己在hidden语义上是否正确（见上文）。如果hidden在语义上不正确，但您仍然希望在视觉上隐藏元素，则可以使用其他技术，例如 CSS。

Elements with aria-hidden="true"are not exposed to the accessibility tree, so for example, screen readers won't announce them. This technique should be used carefully, as it will provide different experiences to different users: accessible user agents won't announce/render them, but they are still rendered on visual agents. This can be a good thing when done correctly, but it has the potential to be abused.

元素aria-hidden="true"不会暴露给可访问性树，因此例如，屏幕阅读器不会宣布它们。这种技术应该谨慎使用，因为它会为不同的用户提供不同的体验：可访问的用户代理不会宣布/呈现它们，但它们仍然在视觉代理上呈现。如果做得正确，这可能是一件好事，但它有可能被滥用。

Syntactic Difference

句法差异

Lastly, there is a difference in syntax between the two attributes.

最后，这两个属性在语法上有所不同。

hiddenis a boolean attribute, meaning if the attribute is present it is true—regardless of whatever value it might have—and if the attribute is absent it is false. For the true case, the best practice is to either use no value at all (<div hidden>...</div>), or the empty string value (<div hidden="">...</div>). I would notrecommend hidden="true"because someone reading/updating your code might infer that hidden="false"would have the opposite effect, which is simply incorrect.

hidden是一个布尔属性，这意味着如果该属性存在，则它为真——无论它可能具有什么值——如果该属性不存在，则为假。对于真实情况，最佳做法是根本不使用任何值 ( <div hidden>...</div>)，或者使用空字符串值 ( <div hidden="">...</div>)。我不会推荐，hidden="true"因为有人阅读/更新您的代码可能会推断出这hidden="false"会产生相反的效果，这是完全不正确的。

aria-hidden, by contrast, is an enumerated attribute, allowing one of a finite list of values. If the aria-hiddenattribute is present, its value must be either "true"or "false". If you want the "undefined (default)" state, remove the attribute altogether.

aria-hidden相比之下，是一个枚举属性，允许一个有限的值列表。如果该aria-hidden属性存在，则其值必须是"true"或"false"。如果您想要“未定义（默认）”状态，请完全删除该属性。

---

---

Further reading: https://github.com/chharvey/chharvey.github.io/wiki/Hidden-Content

进一步阅读：https: //github.com/chharvey/chharvey.github.io/wiki/Hidden-Content

回答by Moiz

setting aria-hidden to false and toggling it on element.show() worked for me.

将 aria-hidden 设置为 false 并在 element.show() 上切换它对我有用。

e.g

例如

<span aria-hidden="true">aria text</span>

$(span).attr('aria-hidden', 'false');
$(span).show();

and when hiding back

和躲起来的时候

$(span).attr('aria-hidden', 'true');
$(span).hide();