超文本标记语言“隐藏”和“隐藏”属性有什么区别？

Question

在使用Angular材质时，我一直在看aria属性。有人能给我解释一下，aria前缀是什么意思吗？但最重要的是，我试图理解的是aria-隐藏和隐藏属性之间的区别。

Answer 1

根据HTML 5.2：

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

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

另一方面，ARIA 1.1说：

[aria隐藏状态]指示元素是否暴露于可访问性API。

换句话说，带有aria hidden=“true”的元素将从可访问性树中删除，这是大多数辅助技术所推崇的，带有aria hidden=“false”的元素肯定会暴露在树中。没有aria hidden属性的元素处于“未定义（默认）”状态，这意味着用户代理应根据其呈现将其公开给树。E、 g.如果其文本颜色与其背景颜色匹配，则用户代理可以决定将其删除。

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

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

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

带有aria hidden=“true”的元素不会显示在可访问性树中，例如，屏幕阅读器不会公布它们。这项技术应该小心使用，因为它将为不同的用户提供不同的体验：可访问的用户代理不会宣布/呈现它们，但它们仍然在可视代理上呈现。如果做得正确，这可能是一件好事，但它有可能被滥用。

最后，这两个属性在语法上存在差异。

隐藏是一个布尔属性，这意味着如果该属性存在，则无论它可能具有什么值，该属性都为真；如果该属性不存在，则该属性为假。对于真正的情况，最佳做法是要么根本不使用任何值（<代码>

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

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

Answer 2

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

例子：

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

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

例子：

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

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

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

资料来源： Paciello集团

Answer 3

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

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

https://www.w3.org/WAI/PF/aria/states_and_properties#aria-隐藏的

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