关于界面的价值观与方法论
234567891011

可恶的盲道

29June2009

标题说的是下面两张图片:

先博君一笑。

可恶之处,其实并不在于有树或障碍物,而在于,既然有树,为什么还要修盲道?如果没有盲道,盲人自然会小心。但这里修了盲道,然后再将盲道引向一个障碍的地方,这就是真正可恶的地方。

OK,说正题吧。百度在07年4月推出了“百度盲道”,同年8月宣布“百度盲道升级”。据百度称,“现在的‘盲道’虽然看上去和百度首页没有太大区别,但是从界面到功能,都更符合盲人的使用习惯”。

所以我们打开HTML源代码,看一下百度盲道的首页(http://dao.baidu.com)究竟在哪些地方与百度首页(http://www.baidu.com)不同:

1. 盲道把<title>标签移到<meta>标签前面,也就是说,两个交换了一下位置。

2. 盲道把原来在底部的JS移到<head>标签里了。

3. 盲道在body标签里增加了属性:text=000000 link=0000cc vlink=0000cc alink=ff6600

4. 百度首页里有一个id=u的div,里面写着“登录”,而盲道则把这个div置空,但仍保留这个空层,以及它的样式

5. 盲道LOGO的img标签里,增加了alt属性,取消了百度首页LOGO里的一个图片映射区

6. 盲道的导航tab里,取消了字和字之间的&nbsp;。但仍然保留a标签上的onclick脚本。整个导航tab的代码位置与百度首页一样,仍在搜索框之前。

7. 搜索框右边,百度首页为“设置”和“高级”,盲道为“帮助”,链接到盲道帮助页面。

8. 盲道,底部icp证的图片和百度首页一样,没有加alt。

这就是所有的改动。除了第5条,我没有在首页看到任何所谓的“从界面到功能,都更符合盲人的使用习惯”。如果说我只是从技术角度来评价,或许不够权威,毕竟我不是盲人,我也没有使用过屏幕阅读器。那请看看“盲道帮助”里推荐的“盲道吧”:http://tieba.baidu.com/f?kw=%C3%A4%B5%C0,里面有不少盲人的发帖,可以看看他们是如何评价这个产品的。我摘取一条来:

“也不能说lz说的一点都不对。我就是个盲人。说实在的,我也没有觉得这个盲道给我们带来了多大的帮助,当然要说没有帮助也是不对的,毕竟在搜索的时候有一些不需要的东西给去掉了。但是我觉得这个不怎么实用。而且有一个最头疼的问题没有解决,我通过盲道进入百度知道想提个问题,可是在注册用户名的时候依然要我们盲人输入图片里显示的验证码,这对我们来说是不可能完成的任务。现在其它网站也是这样,盲人反映的绝大多数都不是主页无法操作,而是验证码的困扰。希望百度能解决这个问题。”(http://tieba.baidu.com/f?kz=373509925

坦率的说,我看了这一条之后,心里很难过。这位盲人网友在贴吧里发这个帖子,可以想象有多艰难。他在第5楼发的,也就是说,他必须等阅读器从LOGO开始,读完导航 ,读完顶部的广告,读完左侧的广告,再读完前面四个帖子的发帖人、IP、帖子内容,最后才能到达底部的输入框,然后输入他的这段文字。

但更让我难过的是,这位网友说到“我通过盲道进入百度知道……”。请大家试试看,从盲道首页,点到盲道导航里的“知道”,然后再点击里面任何一个分类,你发现你到哪儿了么?你到的页面,和从百度首页的“知道”点进去的分类,没有任何区别,因为它们就是同一个URL!

盲人网友原本以为从盲道进入,可以到达如百度所说的“更符合盲人的使用习惯”的页面,但发现没有“太多的区别”。可怜的他大概永远都不知道,其实是“根本没有任何区别”。

事实上,盲道除了刚才那个首页,以及几个二级页,是在“dao.baidu.com”下的以外,其后续的跳转,全是到达百度的正常页面。也就是说,盲道这个产品,加起来也不过就是一个dao.baidu.com的域名,一个盲人永远都看不见的盲道LOGO图片,以及几个“优化过的”静态HTML页。为此,百度“在产品开发前期,产品开发专家与技术专家组成专门小组,在中国残联和盲人协会支持与帮助下,做了大量调研工作”。真是互联网界最大的笑话!

所以,不要跟我讲什么从资源或技术上,无法将百度所有的产品全部调整至盲人版,所以目前只能先做一个盲道的首页。这跟我在文章开头发的两张图有什么区别?你可以不用做盲道,但既然做了盲道,请把盲道做通。否则,这就不只是一个垃圾产品,而更是一个黑心产品了。

当然,无论如何,百度作为互联网的龙头老大,做“百度盲道”的出发点还是要鼓励的(哪怕这些“出发点”只是用来给那些不招聘盲人的各大媒体公关用的)。因此,我还是愿意给出几点建议,希望百度能从此继续改善:

1. 不管是网页搜索、新闻还是知道,无论如何请将其中至少一个产品做到真正的“更符合盲人的习惯”。

具体的优化措施,可以参看我之前写的“可访问性——前端的使命(一)(二)(三)”。

2. 将未优化的产品,另开导航说明:这些产品未经盲道优化。

3. 如果说,“百度盲道”是为了“忽悠”盲人更多的使用百度,我倒不反对这个商业考量。但既然已经起了这贪念,不如更贪一些吧:将用户群扩大到所有的“使用障碍人群”,其中包括并不限于:

视觉障碍人士:盲人;弱视;无法辨析细小字体的老年人等等。
行动障碍人士:无法使用鼠标、无法使用键盘打字的人等等。
技术障碍人士:对互联网不熟悉的人,电脑配置极其低的人,带宽极其慢的人,使用非主流浏览器,以及用GPRS上网的手机用户等等。

百度愿意做“盲道”,至少比我所在的公司,以及业内大多数的知名网站,更具有超前的理念和对社会的责任感。那既然选择走出这一步,就请继续走下去吧。毕竟,算到今日,盲道上线也两年了,仍旧是一个域名一张图片加几个HTML,实在有点寒酸。

他之前,他之后

28June2009

1983年3月25日,帕萨德纳市民会堂里举行了Motown唱片二十五周年庆典。在这个晚会上,Jackson Five,一个从Motown出道并曾红极一时的黑人团体,重新出现在了舞台上,并为观众演唱了“I’ll be there”等招牌歌曲。之后,这个团体的其他成员退场,留下了他们曾经的主唱——Michael Jackson。
  
时年25岁的Michael Jackson还是一个生涩的年轻人,他对观众说,谢谢大家,我很喜欢这些曾经辉煌的歌曲,但是,我更喜欢,新的歌——
  
说完,他转身戴上他的帽子,节奏响起。接下来他表演的歌曲,叫做《Billie Jean》:
  

可能你已经发现了,在此后的26年里,所有,所有所有对MJ的模仿舞蹈,都源自这段表演。
  
83年3月25日,是我出生后大约两周的日子。也就是说,我生于一个有MJ的时代。所以其实对于我们这一代,包括大多数喜欢MJ的我的同龄人,并不一定了解这一段表演对于整个流行音乐行业的意义。
  
而事实上,从这一天,这一段表演起,音乐工业的历史就被明确分为了两个时代——MJ之前和MJ之后。如果你觉得这是一个修辞说法,那你就错了。下面的地址,是当晚Motown 25周年的全部表演:

你只用稍微看看其他的表演,就会发现那些表演是多么的乏味,和我们现在看到的流行乐完全不同。再拖到72分钟的地方,看看MJ的Billie Jean,你就会知道,说MJ的这段表演开辟了一个新时代,决不夸张。
  
当你看过这段表演,以及我所讲的这些背景之后,你应该能体会,我们后来之所以能看到Backstreet Boys、Britney Spears、Justin Timberlake或是Usher等等,并为之着迷和疯狂,皆因为我们生活在这个时代,这个由MJ开辟的时代。你也会因此明白,为什么MJ的离去,会有这么多的大腕明星纷纷发表声明悼念。美国国会甚至为他的去世中止辩论,集体默哀。
  
所以,无论他是否值得喜爱,他绝对值得尊重——流行音乐史上当之无愧的流行之王。

可访问性——前端的使命(三)

27June2009

其实这个系列还没写完,我看到已经被转载了。下次应该写个未完待续。

15. 忽略空白图片(Ignoring spacer images)
一定记得给图片加上alt属性,哪怕它为空。其原因是如果不写alt,有些阅读器会直接把它的文件名或URL读出来。

这让我想起小时候读过,说在发明数字0以前,人们都是用空位来表示的。这样就很不方便啊。所以alt=”"就相当于数字0这个伟大的发明。

16. 使用真实的列表(或者正确的把它们伪装起来)
这一条其实也是在讲如果要用图片作为列表前的icon,最好用CSS。但是没有提到为什么要用<ul>。其实这也是我一直纠结的问题:目前看起来,除了出于“标签语义化”的原教旨主义信仰,没有更好的理由一定要用<ul>或<ol>。盼知情者告知。

17. 为图片提供替换文本(Providing text equivalents for images)
18. 为图片映射提供替换文本(Providing text equivalents for image maps
)
这两条同15。
这里我只是想说说两个题外话:
a) 到目前这个年代,<map>标签是否还有用?同样的还让我想起<applet>标签。
b) 除了alt,还有两个属性:lowsrc和longdesc。有时间我会来看看目前的浏览器对这两个属性的支持是怎样的。

19. 使用真实的水平分割线(Using real horizontal rules)
它说的是使用<hr>比使用一张装饰用的图片好。(P.S. 原来hr是horizontal rule的缩写哦,hoho)但似乎不用<hr>更好吧。

20. 使用相对字号(Using relative font sizes)
我好想遵守这个规则,但可恶的微软把宋体做得除了12px,更小的字号就不能看。不过现在浏览器都有zoom功能,相对字号或许也不像以前那么迫切需要了吧。不管怎么说,都怪IE!

21. 使用真实的标题(Using real headers)
除了SEO之外,文中提到,有浏览器是可以专门撷取文中的标题,以提供方便的文内导航。这个功能就类似word里面自动生成目录的方法。

不过有一点值得注意,<h1>标签的使用。它其实是指最能概括本页内容的文字,而不是指看起来在标题的位置的文字(比如网站顶部LOGO)。我之前一直犯一个错误,就是把网站的LOGO作为H1。事实上,比如搜索结果页,很明显“搜索XXX,一共XXX个结果”才应该作为h1标题。

22. 给表单元素加上label标签(labeling form elements)
这里只有一个想和大家讨论的:到底是用id和for来联系,还是直接用label标签把表单元素和文字框起来?你们的习惯是怎样的?

23. 让所有的内容都可被搜索(Making everything searchable)
这一条是个比较宽泛的产品层面的问题,这里就不作讨论了。

24. 建立可访问性声明(Creating an accessibility statement)
这个蛮好,详情还是建议看原文。我有时间也会做掉。

呼,总算写完啦。再次呼吁,请通读原文:http://www.diveintoaccessibility.org。

接下来就开始批判百度盲道啦~~敬请期待。