语义的差异

根据HTML 5.2:

当在元素上指定时，[hidden属性]表示该元素还没有或不再与页面的当前状态直接相关，或者它正在用于声明内容，以供页面的其他部分重用，而不是由用户直接访问。

例如，一些面板不公开的选项卡列表，或者在用户登录后消失的登录屏幕。我喜欢把这些东西称为“时间相关”，即它们是基于时间相关的。

另一方面，ARIA 1.1说:

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

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

Now let’s compare semantics. It’s appropriate to use hidden, but not aria-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 hidden attribute). 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.

有效的区别

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

The hidden attribute should hide an element from all presentations, 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 as visual media, hidden would do the trick. However, do not use hidden just because you want this effect. Ask yourself if hidden is semantically correct first (see above). If hidden is not semantically correct, but you still want to visually hide the element, you can use other techniques such as CSS.

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

语法的区别

最后，这两个属性在语法上有区别。

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

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

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

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

e.g

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

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

当你躲起来的时候

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

语义的差异

根据HTML 5.2:

当在元素上指定时，[hidden属性]表示该元素还没有或不再与页面的当前状态直接相关，或者它正在用于声明内容，以供页面的其他部分重用，而不是由用户直接访问。

例如，一些面板不公开的选项卡列表，或者在用户登录后消失的登录屏幕。我喜欢把这些东西称为“时间相关”，即它们是基于时间相关的。

另一方面，ARIA 1.1说:

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

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

Now let’s compare semantics. It’s appropriate to use hidden, but not aria-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 hidden attribute). 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.

有效的区别

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

The hidden attribute should hide an element from all presentations, 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 as visual media, hidden would do the trick. However, do not use hidden just because you want this effect. Ask yourself if hidden is semantically correct first (see above). If hidden is not semantically correct, but you still want to visually hide the element, you can use other techniques such as CSS.

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

语法的区别

最后，这两个属性在语法上有区别。

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

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

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

隐藏属性是一个布尔属性(True/False)。当此属性用于元素时，它将删除与该元素的所有相关性。当用户查看html页面时，具有隐藏属性的元素不应该是可见的。

例子:

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

Aria-hidden属性表示元素及其所有子元素在浏览器中仍然可见，但对于屏幕阅读器等辅助工具来说是不可见的。

例子:

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

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

注意:ARIA代表可访问富Internet应用程序

资料来源:Paciello Group

ARIA(可访问富Internet应用程序)定义了一种使Web内容和Web应用程序对残疾人更容易访问的方法。

hidden属性是HTML5中的新属性，它告诉浏览器不要显示元素。aria-hidden属性告诉屏幕阅读器是否应该忽略元素。查看w3文档了解更多细节:

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

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