轻松检查网页无障碍

原文:http://www.w3.org/WAI/eval/preliminary

不敢提翻译二字。内容有增加和删减。

本文可以帮助你通过简单的几个步骤来检测网页是否具备基本的无障碍,并且提供优化方法。

这些校验点是包含了简单的无障碍问题,这些问题可以快速简单的修复;就算通过的检测,但是网站仍然可能(一定)有其他的无障碍问题。更多的先关问题和知识请关注先关网站以及http://accessibilityunion.org

检测工具:IE环境推荐使用IE WAT(仅支持IE9 IE10),firefox环境推荐使用Web Developer extension

校验点如下:

1.页面的title

2.图片的alt(图片、插图、图表),其中个人觉得图表是最应该进行检查和优化的。

3.headings (h1,h2,h3,h4,h5,h6)

4.对比度

5.缩放

6.键盘可用性与视觉焦点

7.表单(包括搜索)

8.多媒体(音频、视频)替代

9.纯内容视图

页面的title

页面的title通常在浏览器的标题栏位置,如果打开多个页面title则在浏览器的选项卡上显示。同时在搜索引擎的搜索结果中也会显示;在浏览器的收藏夹中使用;屏幕阅读软件会阅读(通常是作为第一个阅读内容)。

通过网页代码中head标签里的title设置,例如:<title>联系rockywen</title>。

下面的图像以“Easy Checks – A First Review of Web Accessibility”这个网页的title为例子,展示在大多数浏览器中是如何显示的。图中有4个页面被打开,在四个选项卡中都显示了各个页面的title,但是在浏览器的标题栏中显示的是当前做访问的页面的title。

浏览器中网页title一般显示在标题栏上

好的网页title是一个重要的信息来源,屏幕阅读软件用户在切换浏览器选项卡的时候,第一个听到的就是title的内容。一个好的title应该是一个可以描述概括整个网页内容的,切记不要使用与网页内容不符的title,这点跟SEO里的很像。

在有些版本chrome和ie中,浏览器木有标题栏,只要把鼠标移动到相应的选项卡上才能看到完整的网页title。不过不要担心,屏幕阅读软件是可以读出来的。

如何做?

1.查看网页的title,或者使用屏幕阅读软件倾听。

2.查看网站中其他页面的title

原文中这里提到了一个好的和坏的title的对比。先说他的例子,然后,我再说几点吧。

坏的:

  • Welcome to home page of Acme Web Solutions, Inc.
  • Acme Web Solutions, Inc. | About Us
  • Acme Web Solutions, Inc. | Contact Us
  • Acme Web Solutions, Inc. | History

好的:

  • Acme Web Solutions home page
  • About Acme Web Solutions
  • Contact Acme Web Solutions
  • History of Acme Web Solutions

原则:跟SEO相同,但是别搞罗列和关键字堆砌。自然语言,倒装树形结构。对SEO有要探讨的也欢迎讨论。

图片的alt

关于如何正确设置图片的alt值,请参看《图片的alt属性》一文。

盲人看不到图片,绝大多数屏幕阅读软件会阅读alt中的值,这几乎是盲人认知当前图片内容唯一的途径。对于图片的alt值,我在强调一点,有写图片是要描述其功能而不是其内容,比如,一个搜索的按钮,他设计成了一个放大镜的样子,如果你使用的是img标签,那你就不能在alt里填写“放大镜”, 而是要添加“搜索按钮”。当然,如果你非要使用一个img作为按钮的话,我真心建议你把这个修饰性的东西利用css来实现。关于什么是图片什么是修饰这个问题,不在这里赘述了。

可以利用浏览器插件来检查图片的alt值,这中插件很多,一些SEO插件也包括。IE环境推荐使用IE WAT(仅支持IE9 IE10),firefox环境推荐使用Web Developer extension。下面两张图片展示了IE WAT与FF WDE

IE WAT

FF WDE

关于详细的文本替代技术过阵子会更新。

headings(h1,h2,h3,h4,h5,h6)

网页通常使用视觉标题来分格不通的信息。很多屏幕阅读软件可以在headings之前快速切换,以帮助用户快速了解网页大纲和切换。

良好的headings的层级结构,大家仔细回顾下毕业设计的论文。

检查什么?

1.网页都该有heading。且至少有一个

2.设计成向heading的文字,考虑是否应使用heading元素编码

3.使用heading编码的文字应该真的是内容章节的heading

4.heading的级别是有意义的!理想情况下是从h1开始。

5.heading中一定要有文字,设计师为了美观设计了很多好看的heading,作为编码的你,一定 不要只用图片或者装饰,文字是必须的!

对比度

如果没有足够的对比度,有些人是无法分辨文本和背景的,如下图这种千背景,灰色字。

浅色背景,灰色文字,对比度低

高对比度,比如深色文字在浅色背景或者亮色文字在深色背景下,使一些视障和老年视力衰退的人士也能较好的分别出内容。

黑色文字,白色背景,高对比度

黄色文字,黑色背景,高对比度

虽然有些人需要高对比度,但是有些人需要低亮度。想想一下在黑暗的屋子中看某些电子设备的感觉,刺眼得狠。看书的话推荐kindle。:)

灰色文字,黑色背景,低亮度

黑色文字,灰色背景,低亮度

这个对比度的感觉找人测试一下吧,单纯依靠检测数据也是不完全靠谱的。

检查什么?

网页应该有一个最低对比度,值为4.5:1

通过三种方法检查对比度

1.对比度表格:列出网页中所有对比度,有一些工具可以自动取出页面中的颜色。虽然比较全面,但是并不直观和真实。

2.吸管工具:用工具取出文字颜色和背景色,有点是很准确,缺点是比较麻烦

3.关闭颜色:使网页变为灰度,有点是比较直观,缺点是是没有对比度数值

利用IE WAT可以检查,如下图:

利用IE WAT检查网页对比度

缩放

一些人需要放大文字来阅读网页。可参看《网页或文字禁止缩放》一文。

主流的浏览器都提供了缩放的功能,切记在webkit的浏览器中不要使用-weblit-text-size-adjust:none。只检查文字是否能缩放就好了。

由于编码方式的问题,网页有可能在缩放的时候出现重叠或者部分隐藏的现象。如下对比图:

正常显示的文字

放大之后的文字,有重叠和隐藏的现象

检查什么?

1.仅文字缩放:保证所有文字可以放大

2.网页缩放:所有东西都可以变大,包括导航、广告等等

3.文字不能消失或者截断

4.文字、图片和其他内容不重叠

5.所有按钮、表单域和其他控制器要可视与可用。

最好的实践是当网页缩放,文字行数不发生变化,网页横向增宽,用户通过拖拽水平滚动条来阅读。这一点个人暂时保留意见。

如何检查?

利用浏览器中的缩放功能,按Ctrl+4次,逐步放大

注意,MAC平台更需如此,大领导很多都喜欢用11寸的air。

键盘可用性与视觉焦点

一些人无法使用鼠标,他们使用键盘来进行网页交互。盲人需要使用键盘命令(如语音输入)和辅助技术来进行网页交互。网站应该使用户利用键盘完成所有的功能,包括不限于:;链接、表单、媒体控制等等。键盘焦点应该是可见并且符合元素交互逻辑的(万万不可有键盘陷阱)。

做什么?

浏览器支持使用Tab键进行导航。

1.点击地址栏,然后把鼠标放在一边不使用

2.按Tab键去移动焦点到页面上的元素上

3.将焦点移动到如select boxes或者menu bar或者tablist上,按箭头键,看看是否可以进行内部的操作,比如展开选中等等

4.将焦点移到特殊的项目上,比如drop-down list,然后按回车或者空格键看看是否可以进行交互。

检查什么?

1.检查是否可以使用Tab到所有的元素上(这里应该是可聚焦的元素)。

2.tab序列(焦点顺序)是否合理,就是每个可以通过Tab键可以访问的元素的先后顺序。

3.检查焦点不会在页面最后停止;他应该可以回到顶部或者是浏览器的控制面板。

4.检查焦点是否清晰可见,ie一般默认是浅浅虚线,chrome一半默认是较粗的黄线。通过样式也可以设置。

5.检查所有鼠标hover的事件是否有可视的变化,比如高亮。通过键盘也可以引发。

6.类下拉列表等控件,因通过箭头键来交互

7.图片作为链接时候,要有清晰的视觉焦点,并且可以通过键盘激活。

很多时候,不了解无障碍的需求方要我们认为屏蔽元素得到焦点的样子,比如ie中的链接虚线以及chrome默认的黄色实线。一定要告诉他们,这样做不是一个好的事情。

表单

labels,键盘可用、清晰的指示、有效的容错机制对于表单无障碍非常重要。

表单域和其他的表单控件通常都有可视的label,比如下图中的E-mail address是文本域的label。

一般的文本域都有可视的label

当编码时加入了label后,人们可以只使用键盘,语音输入,屏幕阅读软件与表单元素进行交互。label本身可以点击,这就帮助那些点击小按钮或者复选框的用户通过label来点击这些元素。

做什么?

找到页面上所有的表单。一个表单可能有一个独立的文本框,比如搜索,或者可能有一组复杂的表单域、单选按钮、多选按钮、下拉列表和按钮。

检查什么?

1.键盘可用,检测所有表单控件是否可以使用键盘进行访问。

2.检查每一个表单空间拥有的label,并且使用for指向目标id。

3.检查labels的位置是否合适,比如文本域的label在左侧,选项的label在右侧,如下两图。

通常文本域的label在右侧

通常选项的label在右侧

4.任何必填字段一定要清晰的标识出来
a.不能只利用颜色所谓必填字段的区分
b.检查标识,比如*,应该包含在相关控件的label代码中,并且应该在合适的位置著名*的含义。

5.检查在表单填写之前是否有相关说明
a一般表单说明应该在表单最上面或者各自相关区域。
b.检查必要的格式说明,比如有些网站的日期要求是2010-12-01,要明确提示给用户。

6.明确指出表单格没有被提交的原因,并且给出指导性文字

7.通常错误信息出现在表单前面比表单后面要好一些。

8.检测之后某些字段就算是正确输入也需要重新输入,比如,信用卡卡号,或者密码等重要信息。

9.检查label,看看是不是通过for和id的配合来标识。如果通过其他方式进行关联的话,这点不是必须的,当他仍可能通过WCAG2.0。

多媒体(音频、视频)替代

音频对听力有障碍的人士是不可用的,所以可以提供文字的替代方案。视频对视觉有障碍的人士也是不完全可用的,可以提供音频或者文字替代方案。文字可以通过屏幕阅读软件、盲文显示器或者放大使视觉有障碍的人士方便使用。音频和视频的替代方案是很复杂的,所以下面的检查是不全面的。

检查什么?

1.键盘可访问播放器上的控件

2.音频视频最好不要自动播放,如果自动播放,最好在3秒钟后停止,并提供暂停和停止按钮以及音量条件按钮,当然这些一定是通过键盘是可访问的。

3.字幕,自动字母不一定准确,可以检查这几点,字幕是否同步,字幕是否标识出了说话人,字母是否包含重要的环境音,比如,脚步临近,关门,玻璃破碎等等。

4.类似剧本的描述视频和音频的副本(这个成本就太大了),副本中每一段话附近都应该有原始的视频或者音频段落。

纯内容视图

内容才是网页的本质,使用屏幕阅读软件你就会发现,装饰其实就是装饰。保持线性阅读顺序(就是根据代码顺序,如果你不是认为控制焦点序列的话)。切记不要使用表格布局

做什么?(IE WAT和FF WDE有相关功能)

1.关闭图像显示替代文字

2.关闭样式,查看文本顺序

3.线性网页或表格

检查什么?

1.线性顺序

2.替代文字

3.headings

如何使用工具检查

IE WAT

  • Open the web page you are checking.打开要检查的网页
  • In the toolbar, select “Images”, then “Remove Images”.
    Or, with the keyboard: Ctrl+Alt+4, then arrow down to “Remove Images”.(选择工具条上的Images,然后选“Remove Images”,或者使用快捷键Ctrl+Alt+4然后用箭头键选择“Remove Images”)
  • In the toolbar, select “CSS”, then “Disable CSS”
    Or, with the keyboard: Ctrl+Alt+3, then arrow down to “Disable CSS”.(选择工具条上的CSS,然后选“Disable CSS”;或者使用快捷键Ctrl+Alt+3然后使用箭头键选择“Disable CSS”)
  • In the toolbar, select “Tables”, then “Linearize”.
    Or, with the keyboard: Ctrl+Alt+7, then arrow down to “Linearize”.(选择工具条上的“Tables”,然后选择“Linearize”;或者使用快捷键Ctrl+Alt+7然后使用方向键选择“Linearize。”)

FF WDE

  • Open the web page you are checking.(打开要检查的网页)
  • In the toolbar, select “Images”, then “Disable Images”, then “Disable All Images”.
    Or, with the keyboard: Alt+T, W (to Web Developer Extension), I, D, D.(选择工具条上的Images,然后选“Remove Images”,然后选“Disable All Images”,或者使用快捷键Alt+T,W , I, D, D)
  • In the toolbar, select “CSS”, then “Disable Styles”, then “Disable All Styles”.
    Or, with the keyboard: Alt+T, W (to Web Developer Extension), S, D, D.(选择工具条上的CSS,然后选“Disable Style”,然后选“Disable All Styles”;或者使用快捷键Alt+T, W, S, D, D)
  • In the toolbar, select “Miscellaneous”, then “Linearize Page”.
    Or, with the keyboard: Alt+T, W (to Web Developer Extension), M, I.(选择工具条上的“Miscellaneous”,然后选择“Linearize Page”;或者使用快捷键Alt+T, W , M, I.)

下一步

如果你对信息无障碍有了一个想法,哪怕是一点点,希望你可以分享出来,如果能在http://accessibilityunion.org上注册作者并且分享是最好的了。进行彻底的无障碍检查。如果你没有时间,请关注网络信息无障碍联盟,与我们一起推动网络信息无障碍。

水平有限,如有错误请联系我,感激不尽。rockywen在tencent.com(将“在”改为@)

关于 rockywen

平等、美好、安逸、自由 Accessibility Strategist 你已经努力的创造了一个伟大的应用,不要错过这个让他能服务更多用户的机会。还有,这是一件对的事情。
此条目发表在 技术 分类目录。将固定链接加入收藏夹。

发表评论

电子邮件地址不会被公开。 必填项已用*标注