本文主要讲的WAI-ARIA指无障碍网页应用。ARIA全称“Accessible Rich Internet Applications（可访问的富互联网应用）”，在当下讨论ARIA基本上都是为读屏设备或软件，而读屏设备或软件的使用者多是视力障碍人员，因此，ARIA约定俗成就成了对视障用户的无障碍访问支持技术的代称了。
WAI-ARIA指无障碍网页应用。主要针对的是视觉缺陷，失聪，行动不便的残疾人以及假装残疾的测试人员。尤其像盲人，眼睛看不到，其浏览网页则需要借助辅助设备，如屏幕阅读器，屏幕阅读机可以大声朗读或者输出盲文。 而ARIA就是可以让屏幕阅读器准确识别网页中的内容，变化，状态的技术规范，可以让盲人这类用户也能无障碍阅读！为满足残障人士的使用要求，希望在页面中的按钮、图片、文字上增加焦点和描述，增加内容的可访问性。
首先，了解下移动端常见的读屏软件，如下列表：
- Android: TalkBack
- Android: Funtouch
- iPhone: VoiceOver
开启读屏服务的方法步骤（不同手机型号可能存在差异）：
- Android: 设置 -> 智能辅助 -> 无障碍 -> 屏幕阅读器（开启）
- iPhone: 设置 -> 辅助功能 -> 旁白（开启）
开启读屏功能后，便不能像之前那样使用手机了，操作手势如下图所示：
仅通过手机自带的屏幕阅读器有时候并不能准确的读出屏幕中的内容, 因此，需要添加无障碍属性辅助屏幕阅读器，那就需要在使用的组件中中，支持role属性、aria属性、aria状态属性的透传，使业务方能直接使用这些属性，为页面上的元素自定义无障碍属性，使得屏幕阅读更加准确。
ARIA中role属性值，根据不同的功能给元素设置相应的无障碍角色，让屏幕阅读器准确识别，下面列出常用role属性值
ARIA Roles值示意及说明表
| Role属性值 | 含义 |
|---|---|
| alert | 表示警告 |
| textbox | 表示文本输入框 |
| alertdialog | 表示警告弹出框 |
| button | 表示按钮 |
| radio | 表示单选 |
| checkbox | 表示复选框 |
| tab | 表示标签 |
| tabpanel | 表示标签面板 |
| timer | 表示计数 |
| tooltip | 表示提示文本 |
ARIA 属性值示意及说明表
| 属性名 | 属性值 | 说明 |
|---|---|---|
| aria-label | 字符串 | 定义一个字符串值标记当前元素。 |
| aria-hidden | 字符串。可选值为true和false, true表示元素隐藏(不可见)，false表示元素可见。 | 该属性使用非常普遍。几乎所有涉及到显示与隐藏这类交互或没有交互的地方都可以应用该属性。 |
| aria-haspopup | 字符串。true表示点击的时候会出现菜单或是浮动元素;false表示没有pop-up效果。 | 该属性定义了元素点击后是否会出现菜单或浮动元素 |
| aria-disabled | 字符串。表禁用状态，true表示当前是非激活状态；false表示清除非激活状态。 | 表禁用状态 |
| aria-checked | 字符串。表示检查的状态。true表示元素被选择；false表示元素未被选择；mixed表示元素同时有选择和为选择状态。 | 表示选中的状态，常用于radio的选中状态 |
| aria-required | 字符串。元素值是否必需。默认为false, 表示元素值可以为空；true表示元素值是必需的。 | 多半用在表单控件中。对应HTML5中required属性。 |
| aria-selected | 字符串。表示选择状态。可选值有：true, false, undefined. 默认为undefined，表示元素选择状态未知。true表示元素已选择；false表示未被选中。 | 表示选择状态，常用于tab的选中状态 |
参考文章：
