在使用Angular Material时，我一直在看到aria属性。有人可以向我解释，咏叹调前缀是什么意思？但最重要的是，我想要了解的是aria-hidden和hidden属性之间的区别。
答案 0 :(得分：308)
ARIA（可访问的富Internet应用程序）定义了一种使残障人士更容易访问Web内容和Web应用程序的方法。
hidden属性是HTML5中的新属性，告诉浏览器不显示该元素。 aria-hidden属性告诉屏幕阅读器是否应该忽略该元素。有关更多详细信息，请查看w3文档：
https://www.w3.org/WAI/PF/aria/states_and_properties#aria-hidden
使用这些标准可以让残障人士更容易使用网络。
答案 1 :(得分：29)
隐藏属性是布尔属性（True / False）。在元素上使用此属性时，它将删除与该元素的所有相关性。当用户查看html页面时，不应显示具有隐藏属性的元素。
示例：
resultRDD.reduceByKey((x, y) => x++y).collect()
Aria-hidden属性表示该元素及其所有后代在浏览器中仍然可见，但对于辅助功能工具（如屏幕阅读器）将不可见。
示例：
<p hidden>You can't see this</p>
看看this。它应该回答你所有的问题。
注意： ARIA代表Accessible Rich Internet Applications
来源： Paciello Group
答案 2 :(得分：6)
根据HTML 5.2：
当在元素上指定时，[
hidden属性]表示该元素尚未或不再与页面的当前状态直接相关，或者它被用于声明内容是由页面的其他部分重用，而不是由用户直接访问。
示例包括一些选项卡列表，其中某些面板未公开，或者登录屏幕在用户登录后消失。我喜欢将这些内容称为“暂时相关”，即它们与时间相关。
另一方面，ARIA 1.1说：
[
aria-hidden州]表示元素是否向辅助功能API公开。
换句话说，具有aria-hidden="true"的元素将从accessibility tree中删除，这是大多数辅助技术所尊重的，而aria-hidden="false"的元素肯定会暴露给树。没有aria-hidden属性的元素位于＆＃34; undefined（默认）＆＃34; state，表示用户代理应根据其呈现将其公开给树。例如。如果用户代理的文本颜色与其背景颜色匹配，则用户代理可以决定将其删除。
语义在浏览器/用户代理中具有可预测的效果。我区分的原因是用户代理行为推荐，但规范不是 required 。
hidden属性应隐藏所有演示文稿中的元素，包括打印机和屏幕阅读器（假设这些设备符合HTML规范）。如果要从辅助功能树以及可视媒体中删除元素，hidden可以解决问题。但是，请不要仅因为而使用hidden 。首先问问自己hidden语义是否正确（见上文）。如果hidden在语义上不正确，但您仍希望在视觉上隐藏元素，则可以使用其他技术，例如CSS。
并且，假设用户的辅助技术符合ARIA规范，它不会向用户公开带有aria-hidden="true"的元素。这对于“视觉天赋”是有用的，例如图标，图像等对用户来说不是必不可少的。
最后，两个属性之间的语法有所不同。
hidden是一个布尔属性，这意味着如果属性存在则它是真的 - 无论它可能具有什么值 - 如果属性不存在则为false。对于真实情况，最佳做法是根本不使用任何值（<div hidden>...</div>）或空字符串值（<div hidden="">...</div>）。我不推荐hidden="true"，因为有人阅读/更新您的代码可能会推断hidden="false"会产生相反的效果，这是完全错误的。
aria-hidden是枚举属性，允许其中一个有限的值列表。如果存在aria-hidden属性，则其值必须为"true"或"false"。如果你想要＆＃34; undefined（默认）＆＃34; state，完全删除属性。
进一步阅读： https://github.com/chharvey/chharvey.github.io/wiki/Hidden-Content
答案 3 :(得分：-1)
将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();