最佳回答

2015-01-06

这个是用于屏幕阅读器的，帮助残障人士更好的访问网站。

 w3cplus

 回复  8

银他妈 (提问者)

非常感谢！

#12015-01-06 回复

oookooo

图标的可访问性

现代的辅助技术能够识别并朗读由 CSS 生成的内容和特定的 Unicode 字符。为了避免 屏幕识读设备抓取非故意的和可能产生混淆的输出内容（尤其是当图标纯粹作为装饰用途时），我们为这些图标设置了 aria-hidden="true" 属性。

如果你使用图标是为了表达某些含义（不仅仅是为了装饰用），请确保你所要表达的意思能够通过被辅助设备识别，例如，包含额外的内容并通过 .sr-only 类让其在视觉上表现出隐藏的效果。

如果你所创建的组件不包含任何文本内容（例如， <button> 内只包含了一个图标），你应当提供其他的内容来表示这个控件的意图，这样就能让使用辅助设备的用户知道其作用了。这种情况下，你可以为控件添加 aria-label 属相。

 

2015-05-19

 回复  25

lu在脚下

这个回复好，够专业，本来对aria-不够清楚现在，总算是全通了，谢谢楼上

#12015-08-19 回复

qq_陪你歇斯底里_0

什么鬼，不能用简便的话叙述吗

#22017-04-11 回复

ylxykym

原话能说清楚不很好吗？

#32017-06-12 回复

点击展开后面2条评论

天地4638

残障人士如失明的人使用识读设备（自动读取内容并自动播放出来），播放到带此属性的内容时会自动跳过，以免残障人士混淆！

2017-07-31

 回复  9

心子22222

没什么用，建议以后类似role和aria-hidden的东西完全不要理会。这样能降低学习难度，和排除学习干扰。

2015-09-08

 回复  4

小水葱

有用的，某些行业的美国站点是要求DOT的，达不到无障碍阅读是不让上线的

#12016-10-22 回复

慕尼黑123390 回复 小水葱：

所以还是跟我们没有任何关系

#22019-08-29 回复

中商leeh

醉了，are you sure

2015-04-15

 回复  0

前端无忧网

这类标签应该不是必须添加的吧，看到bootstrap里用的比较多

2015-05-02

 回复  0

qq_凯凯_1

是啊，什么用吗，真不懂

来自 https://www.imooc.com/qadetail/62014

HTML中的aria-hidden属性

我们常常看到这样的html，

<div id="modal" class="modal" aria-hidden="true">

   <div class="modal-header">...</div>

   <div class="modal-body">...</div>

   <div class="modal-footer">...</div>

</div>

尤其是在作为页面弹窗的元素(modal)上，通常会有一个属性aria-hidden="true"，那么它有什么作用呢？

网上的专业资料通常会这样写：
  现代的辅助技术能够识别并朗读由 CSS 生成的内容和特定的 Unicode 字符。为了避免屏幕识读设备抓取非故意的和可能产生混淆的输出内容（尤其是当图标纯粹作为装饰用途时），我们为这些图标设置了 aria-hidden=“true” 属性。

我的博客里会这样写：
  让这个元素对浏览器隐藏。
  （这里的“隐藏”更多指的是语义化的隐藏，实现弹窗效果需配合display: none等样式使用）

后记：
aria-xxx还有很多有趣的用法，我也正在探索中，欢迎大家交流谈论。

来自  https://blog.csdn.net/qq846294282/article/details/83537306