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

例子:

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

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

例子:

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

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

ARIA代表可访问的富互联网应用程序

来源: Paciello集团

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

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

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

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

语义的差异

根据HTML 5.2:

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

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

另一方面，咏叹调1.1表示:

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

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

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

有效的区别

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

hidden属性应该从所有表示中隐藏一个元素，包括打印机和屏幕阅读器(假设这些设备遵守HTML规范)。如果你想从可访问性树还有可视化媒体中删除一个元素，hidden可以做到。但是，不要使用hidden 仅仅因为你想要的效果。首先问问自己hidden在语义上是否正确(见上文)。如果hidden在语义上不正确，但你仍然想在视觉上隐藏元素，你可以使用其他技术，如CSS。

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

语法的区别

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

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

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

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

如

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


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

当你躲起来的时候

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