无障碍网页（Web Accessibility ，缩写：A11Y）指在物理条件和技术条件限制下，保证网站达到最佳可用性的实践。
- 更便于开发 — 使HTML更易于理解，并且可以毫不费力的获得一些功能。
- 更适配移动端 — 语义化的HTML文件比非语义化的HTML文件更加轻便，并且更易于响应式开发。
- 更便于SEO优化 — 比起使用非语义化的标签，搜索引擎更加重视在“标题、链接等”里面的关键字，使用语义化可使网页更容易被用户搜索到。
- 文本内容使用标准的标题、段落、列表的语义结构
- 页面布局使用标准的header、footer、main、nav、article语义化标签
- 尽量使用默认情况下浏览器允许用户通过键盘操作的UI控件。主要包括与用户交互的文档部分。通常是按钮、链接和表单控件
- 使用
tabindex=0tabindex=-1重新建立键盘的可访问性。 通过document.activeElement.onclick（）运行存储在按钮的onclick处理函数中的函数。 - 使用有意义的文字标签
- 可访问的表格
- 文本替代品-针对媒体元素，例如图片、视频
- 使用空的alt属性，使屏幕阅读器读出完整的url地址
WAI-ARIA 是一项技术，它可以通过浏览器和一些辅助技术来帮助我们进一步地识别以及实现语义化，这样一来能帮助我们解决问题，也让用户可以了解发生了什么
- 角色： 定义了元素是什么或者具有什么功能
- 属性： 定义了元素的属性，可用于赋予元素额外的含义或语义。
- 状态： 定义元素当前条件的特殊属性
状态和属性的差异：属性通常在整个app的生命周期中不会改变，而状态可以通过jacascript修改。例如：属性：aria-required="true";状态：aria-disabled:"true"
- 作为地标用来标示语义化标签的含义，甚至超越标签的含义。例如：
search,tabgroup,tab,listbox - 动态内容更新，使用
aria-live来通知动态内容的更新 off: 默认值，更新不会提醒。 polite: 只有用户空闲的情况下提醒。 assertive: 尽快提醒。 rude: 会以打断用户操作的方式直接提醒。 - 优化键盘的无障碍操作，例如使用
tabindex使div等默认不可被键盘聚焦的元素获取焦点 - 非语义控件的可访问性，例如当div与css/js有比较复杂的ui操作时，屏幕阅读器很难找到语义的内容，可以通过添加
role，或者aria-required等属性提高网页的可访问性