什么是网页无障碍

举个简单的例子,一个页面上背景是白色的,然后你再把字体颜色设成白色,那么通过视觉浏览的人在看这个页面的时候,就无法获取到这段信息,那么这个网页就是有障碍的。

或者,某一段重要信息,例如客服电话、链接地址。是以图片的形式呈现在网页上的,如果哪一天由于网络问题,这个图片显示不出来,那么访问者就无法通过视觉看到这个信息,这个网页同样也是有障碍的。

当然,通过视觉来判断一个网页是有障碍还是无障碍是很片面的。我们一般可以把访问者分为两种群体:普通用户群体和特殊用户群体。

普通用户群体
主要是指视觉正常的用户群,由于网页的绝大部分受众就使他们,所以首先需要保证网页对于这个群体是无障碍的,否则就会被测试人员作为BUG处理。

特殊用户群体
视觉异常的用户都可以归在此类。因为由于视觉的原因,对于普通用户很正常的页面,对月这类特殊人群来说,就可能是混乱不堪,甚至无法使用的。例如:图片上的文字,对于普通人来说是毫无问题的,但盲人用户就无法识别,是完全不可用的。那么这种文字图片化的实现方式对于盲人而言就是有障碍的。

特殊用户如何访问网页

现在有不少辅助阅读设备,可以用来帮助残疾的特殊人群进行网页访问。比如比较常用的屏幕阅读器。例如争渡读屏软件, mac自带的VoiceOver等等。

读屏软件是用来将文字、图形以及电脑接口的其他部分(藉文字转语音技术)转换成语音及/或点字,从而方便盲人以及视力异常人使用。

盲人是一个很大的群体,从中国盲人协会网站上看,中国视力残疾人数量为1263万。这里视力残疾主要是指完全看不见,和双眼视力都很低的群体。而这些人中很大一部分也是过个或我们类似的生活,例如上QQ,网购,看小说等等。所以一个好的网站,也应该将这部分的人群同时考虑进去。

现在网站上常见的有障碍的地方:

  • 图片式文字
  • 键盘上tab切换时焦点的顺序
  • 一些验证码
  • 文字的字号,颜色

对于屏幕阅读器而言,我们还需要告知一下几点:

  • 访问区域的类型,如h1,a
  • 交互响应的告知
  • 自定义组件
  • 元素之间的关系

通过HTML5提高可访问性

HTML5新增加的一些标签可以大大增加页面的可访问性,方便屏幕阅读器的识别。例如 header,nav等标签可以告知用户所访问的区域内容类型。在一些input输入控件上加上required属性,可以告知用户该处为必填项。

但是,在PC上,还是有很大一部分网站任然在使用XHTML,另外HTML5不是万能的,例如一些自定义控件和模拟控件上,屏幕阅读器还是无法识别出来,
于是就有了ARIA。

什么是ARIA

ARIA其实是一种技术规范,在现有的HTML代码上面添加一些属性,通过这些属性可以帮助屏幕阅读器识别页面上的元素,从而输出正确的信息。

例如,我们有的时候会这样写一个按钮。

<table><tbody><tr><td></td><td>

<div title="添加">添加</div>

</td></tr></tbody></table>

这样的按钮我们通过css已经处理成按钮的外形了,普通人一眼就能看出来这是个按钮。但是对于屏幕阅读器来说,这个“按钮”只会被当成普通的文字来处理,那么盲人用户就无法正确的进行后续的操作。

但是,如果我们写成这样:

<table><tbody><tr><td></td><td>

<div title="添加">添加</div>

</td></tr></tbody></table>

屏幕阅读器就能正确的得知,这块是个按钮。

role=”button”
直译来看,role表示角色,那么加了这个属性就等同于:<button title="”添加”">添加</button>,表示这个标签其实是个按钮。
tabindex=”0″
这个属性表示这个div可以被foucs,通俗一点就是可以获取到焦点,再通俗一点就是你按tab键的时候,这个div事可以被选中的。
aria-pressed=”false”
这个属性一眼就可以明白是判断按钮是否被按下的属性,普通人可以看出按钮是否被按下,盲人用户在页面上只能通过阅读器获取按钮的状态,那么这时候flase,就表示没有被按下。
aria-disabled=”false”
有的时候,页面上某一个按钮会被禁用,例如权限不足的时候,编辑按钮会被置灰,然后禁用一些操作事件。这时aria-disabled就能明确的告诉你该按钮时候被禁用。

看到这里有人问了,为什么不使用<button title="”添加”">添加</button>这样的代码呢?因为梦想是美好的,现实是骨感的。往往产品提出的需求,设计提供的设计师无法通过这些原生的控件实现,那么就需要通过别的手段来默认这些控件,既然有“模拟”二字,就说明我们很难达到原生的水准,那么就需要依照这个规则,添加相应的属性,来尽量的还原原生控件的效果。

ARIA内容多而杂,各个浏览器之间还有支持不支持的差异,所以从成本和收益来说,不可能每一个项目都全面的使用这项技术,所以我们可以一点点渐进式的使用。先把一些核心流程的规范完善,然后再对其它的部门一点点改进。总之,先要有这样的思想,这样在平时的工作中就能无形的解决很多问题。

以下附了一个W3C出的常见属性的图标,大家可以在使用的时候查一查。

w3c常见属性