HTML 'hidden' 和 'aria-hidden' 属性有什么区别？
What's the difference between HTML 'hidden' and 'aria-hidden' attributes?
我在使用 Angular Material 时到处都看到了 aria 属性。有人可以向我解释一下 aria 前缀是什么意思吗？但最重要的是我想了解的是 aria-hidden 和 hidden 属性之间的区别。
隐藏属性是布尔属性 (True/False)。当此属性用于某个元素时，它会删除与该元素的所有相关性。当用户查看 html 页面时，具有隐藏属性的元素不应可见。
示例：
<p hidden>You can't see this</p>
Aria-hidden 属性表示该元素及其所有后代在浏览器中仍然可见，但对于屏幕阅读器等辅助工具不可见。
示例：
<p aria-hidden="true">You can't see this</p>
看看this。它应该可以回答您的所有问题。
注意： ARIA 代表可访问的富互联网应用程序
来源： Paciello Group
ARIA（Accessible Rich Internet Applications）定义了一种使残障人士更容易访问 Web 内容和 Web 应用程序的方法。
hidden 属性是 HTML5 中的新属性，它告诉 浏览器 不要显示该元素。 aria-hidden 属性 告诉 屏幕阅读器 他们是否应该忽略该元素。查看 w3 文档了解更多详情：
https://www.w3.org/WAI/PF/aria/states_and_properties#aria-hidden
使用这些标准可以让残障人士更轻松地使用网络。
语义差异
根据HTML 5.2：
When specified on an element, [the hidden attribute] 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.
示例包括未显示某些面板的选项卡列表，或在用户登录后消失的登录屏幕。我喜欢将这些东西称为“时间相关”，即它们基于时间相关。
另一方面，ARIA 1.1 说：
[The aria-hidden state] indicates whether an element is exposed to the accessibility API.
换句话说，具有 aria-hidden="true" 的元素从 accessibility tree 中删除，这是大多数辅助技术的荣誉，并且具有 aria-hidden="false" 的元素肯定会暴露给树。没有 aria-hidden 属性的元素处于 "undefined (default)" 状态，这意味着用户代理应该根据其渲染将其暴露给树。例如。如果其文本颜色与其背景颜色匹配，则用户代理可能会决定将其删除。
现在让我们比较一下语义。使用 hidden 是合适的，但 而不是 aria-hidden，对于尚未“暂时相关”但可能在未来变得相关的元素（在在这种情况下，您将使用动态脚本删除 hidden 属性）。相反，在始终相关但又不想干扰可访问性的元素上使用 aria-hidden，而不是 hidden 是合适的 API；此类元素可能包括“视觉风格”，例如图标 and/or 图像，这些图像对用户来说并非必不可少。
有效差异
语义在browsers/user代理中具有可预测的效果。我做出区分的原因是用户代理行为是 推荐的 ，而不是规范 要求的 。
hidden 属性应该隐藏 所有 演示文稿中的元素，包括打印机和屏幕阅读器（假设这些设备符合 HTML 规范）。如果您想从辅助功能树 以及 视觉媒体中删除一个元素，hidden 就可以了。但是，不要仅仅因为 你想要这种效果就使用 hidden 。首先问问自己 hidden 在语义上是否正确（见上文）。如果 hidden 在语义上不正确，但您仍想在视觉上隐藏该元素，则可以使用其他技术，例如 CSS.
具有 aria-hidden="true" 的元素不会向辅助功能树公开，因此例如屏幕阅读器不会宣布它们。这种技术应该谨慎使用，因为它会为不同的用户提供不同的体验：可访问的用户代理不会 announce/render 他们，但他们仍然在视觉代理上呈现。如果做得正确，这可能是一件好事，但它有可能被滥用。
语法差异
最后，这两个属性在语法上有所不同。
hidden 是一个 布尔属性 ，这意味着如果属性存在则为真——不管它可能有什么值——如果属性不存在则它是假的。对于真实情况，最佳做法是根本不使用任何值 (<div hidden>...</div>)，或者使用空字符串值 (<div hidden="">...</div>)。我 不 推荐 hidden="true" 因为有人 reading/updating 你的代码可能会推断 hidden="false" 会产生相反的效果，这是不正确的。
相比之下，aria-hidden 是一个 枚举属性 ，允许有限值列表中的一个。如果 aria-hidden 属性存在，其值必须是 "true" 或 "false"。如果您想要 "undefined (default)" 状态，请完全删除该属性。
进一步阅读：
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();
我在使用 Angular Material 时到处都看到了 aria 属性。有人可以向我解释一下 aria 前缀是什么意思吗？但最重要的是我想了解的是 aria-hidden 和 hidden 属性之间的区别。
隐藏属性是布尔属性 (True/False)。当此属性用于某个元素时，它会删除与该元素的所有相关性。当用户查看 html 页面时，具有隐藏属性的元素不应可见。
示例：
<p hidden>You can't see this</p>
Aria-hidden 属性表示该元素及其所有后代在浏览器中仍然可见，但对于屏幕阅读器等辅助工具不可见。
示例：
<p aria-hidden="true">You can't see this</p>
看看this。它应该可以回答您的所有问题。
注意： ARIA 代表可访问的富互联网应用程序
来源： Paciello Group
ARIA（Accessible Rich Internet Applications）定义了一种使残障人士更容易访问 Web 内容和 Web 应用程序的方法。
hidden 属性是 HTML5 中的新属性，它告诉 浏览器 不要显示该元素。 aria-hidden 属性 告诉 屏幕阅读器 他们是否应该忽略该元素。查看 w3 文档了解更多详情：
https://www.w3.org/WAI/PF/aria/states_and_properties#aria-hidden
使用这些标准可以让残障人士更轻松地使用网络。
语义差异
根据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.
示例包括未显示某些面板的选项卡列表，或在用户登录后消失的登录屏幕。我喜欢将这些东西称为“时间相关”，即它们基于时间相关。
另一方面，ARIA 1.1 说：
[The
aria-hiddenstate] indicates whether an element is exposed to the accessibility API.
换句话说，具有 aria-hidden="true" 的元素从 accessibility tree 中删除，这是大多数辅助技术的荣誉，并且具有 aria-hidden="false" 的元素肯定会暴露给树。没有 aria-hidden 属性的元素处于 "undefined (default)" 状态，这意味着用户代理应该根据其渲染将其暴露给树。例如。如果其文本颜色与其背景颜色匹配，则用户代理可能会决定将其删除。
现在让我们比较一下语义。使用 hidden 是合适的，但 而不是 aria-hidden，对于尚未“暂时相关”但可能在未来变得相关的元素（在在这种情况下，您将使用动态脚本删除 hidden 属性）。相反，在始终相关但又不想干扰可访问性的元素上使用 aria-hidden，而不是 hidden 是合适的 API；此类元素可能包括“视觉风格”，例如图标 and/or 图像，这些图像对用户来说并非必不可少。
有效差异
语义在browsers/user代理中具有可预测的效果。我做出区分的原因是用户代理行为是 推荐的 ，而不是规范 要求的 。
hidden 属性应该隐藏 所有 演示文稿中的元素，包括打印机和屏幕阅读器（假设这些设备符合 HTML 规范）。如果您想从辅助功能树 以及 视觉媒体中删除一个元素，hidden 就可以了。但是，不要仅仅因为 你想要这种效果就使用 hidden 。首先问问自己 hidden 在语义上是否正确（见上文）。如果 hidden 在语义上不正确，但您仍想在视觉上隐藏该元素，则可以使用其他技术，例如 CSS.
具有 aria-hidden="true" 的元素不会向辅助功能树公开，因此例如屏幕阅读器不会宣布它们。这种技术应该谨慎使用，因为它会为不同的用户提供不同的体验：可访问的用户代理不会 announce/render 他们，但他们仍然在视觉代理上呈现。如果做得正确，这可能是一件好事，但它有可能被滥用。
语法差异
最后，这两个属性在语法上有所不同。
hidden 是一个 布尔属性 ，这意味着如果属性存在则为真——不管它可能有什么值——如果属性不存在则它是假的。对于真实情况，最佳做法是根本不使用任何值 (<div hidden>...</div>)，或者使用空字符串值 (<div hidden="">...</div>)。我 不 推荐 hidden="true" 因为有人 reading/updating 你的代码可能会推断 hidden="false" 会产生相反的效果，这是不正确的。
aria-hidden 是一个 枚举属性 ，允许有限值列表中的一个。如果 aria-hidden 属性存在，其值必须是 "true" 或 "false"。如果您想要 "undefined (default)" 状态，请完全删除该属性。
进一步阅读： 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();