无障碍网页应用技术了解

Posted tianheitianyu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了无障碍网页应用技术了解相关的知识,希望对你有一定的参考价值。

一、概述

     引自下百度百科的定义:

      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无障碍网页应用属性完全展示

以上是关于无障碍网页应用技术了解的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js 中的片段

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

译文 对无障碍网页应用(ARIA)的选择

WAI-ARIA无障碍网页资料

移动网页设计与开发 HTML5+CSS3+JavaScript

无障碍开发之初认识