HTML中的【aria-*】标签

最新推荐文章于 2025-11-29 03:40:24 发布

原创最新推荐文章于 2025-11-29 03:40:24 发布 · 1w 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#html #bootstrap #w3c

笔记专栏收录该内容

8 篇文章

订阅专栏

本文介绍了ARIA（Accessible Rich Internet Applications）的概念及其在Web设计中的应用。ARIA是W3C的一项规范，用于提高动态及交互式Web内容的无障碍访问性，特别是对于视力障碍者。文章还解释了如何通过使用'aria-*'属性和'role'标签来增强页面元素的可访问性。

在进行Web设计时看到很多BootStrap文档中的示例代码中都使用了aria-*和role标签，但是以前并没有见过。

ARIA

ARIA是W3C的一个规范。其全称是’Accessible Rich Internet Applications’，是WAI-ARIA的一部分（它是W3C的Web无障碍推进组织(Web Accessibility Initiative / WAI)在2014年3月20日发布的可访问富互联网应用实现指南）。

WAI-ARIA是一个为残疾人士等提供无障碍访问动态、可交互Web内容的技术规范。主要针对的是视觉缺陷，失聪，行动不便的残疾人以及假装残疾的测试人员。尤其像盲人，眼睛看不到，其浏览网页则需要借助辅助设备，如屏幕阅读器，屏幕阅读机可以大声朗读或者输出盲文。

使用

在标签内使用'aria-*'属性，它描述了元素的属性和状态。

通常与其配合使用的标签是role，它的值表示一个元素的实际意义和作用。

例如：

<div class="btn-group" role="group" aria-label="first-group">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>