无障碍网页应用技术了解

Posted 2021-02-06 tianheitianyu

一、概述

     引自下百度百科的定义：

      WAI-ARIA, 是Web Accessibility Initiative - Accessible Rich Internet Applications 的缩写，指无障碍网页应用技术。她主要解决的一个问题：让残障人士能无障碍地访问网页上的动态内容。

     概括性的描述下就是

• ARIA是W3C的一个独立规范，帮助Web应用程序和Web页面变得更具可访问性
• ARIA主要是为了提升网页的可用性，网页对残疾人士的无障碍化
• html5已经开始使用ARIA，并且W3C发布的很多其他标准也开始使用ARIA
• ARIA 是对 HTML 语义化的补充。它具备比现有的HTML元素和属性更完善的表达能力，并让你页面中元素的关系和含义更明确
• ARIA 规范为浏览器和解析HTML文档的辅助性技术提供了一种可以让人们以多种方式访问和使用Web的标准方法

二、如何使用

    ARIA主要由两部分组成，分别是：

1. role(角色)，标示这个dom元素是做什么用的
2. aria-属性描述了与之有关的事物（特征）及其是什么样的（状态）

例子：

<a class="btn btn-default dropdown-toggle" role="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Dropdown</a>

 在这里面我们就能看到aira在里面的应用，例如role="button"代表这个a标签是个按钮，不能当做链接来解读。aria-haspopup="true"这个表示点击这个dom元素后，会出现菜单或者是浮动元素。aria-expanded="true"表示当前元素是展开的。

 

参考文章：

1.无障碍开发系列之WAI-ARIA

2.WAI-ARIA无障碍网页应用属性完全展示