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

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

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

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

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

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

例：

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

隐藏Aria的属性表示该元素及其所有后代在浏览器中仍然可见，但对可访问性工具（如屏幕阅读器）将不可见。

例：

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

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

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

资料来源： Paciello集团

语义差异

根据HTML 5.2：

在元素上指定时，[ hiddenattribute]表示该元素与页面的当前状态尚不相关，或不再与该页面的当前状态直接相关，或者该元素用于声明内容以供页面的其他部分重用，例如：反对被用户直接访问。

例如，其中一些面板未暴露的选项卡列表，或用户登录后消失的登录屏幕。我想称这些为“暂时相关”，即它们基于时间相关。

另一方面，ARIA 1.1说：

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

换句话说，具有辅助功能的树aria-hidden="true"从辅助功能树中删除了元素，并且具有元素aria-hidden="false"肯定会暴露在树中。没有aria-hidden属性的元素处于“未定义（默认）”状态，这意味着用户代理应根据其呈现方式将其公开给树。例如，如果用户代理的文本颜色与背景颜色匹配，则可以决定将其删除。

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

有效差异

该语义有可预见的效果在浏览器/用户代理。我做出区分的原因是建议使用用户代理行为，但规范不要求这样做。

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

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

句法差异

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

hidden是一个布尔属性，意味着如果该属性存在，则为true（不管它可能具有什么值），而如果该属性不存在，则为false。对于真实情况，最佳实践是完全不使用任何值（<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（）上切换对我有用。

例如

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

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

当躲起来

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