全球共庆万维网诞生25周年——为每一个人服务的万维网

“我相信我们能够建造一个真正为每一个人服务的万维网,一个让任何人在任何设备上都能便捷实用的万维网,一个给予我们力量去实现我们的尊严、权利以及潜能的万维网。”

2014年3月12日,全球亿万用户与Tim Berners-Lee爵士一起庆祝万维网诞生25周年。为了纪念这一时刻,我们邀请您在社交网络上通过#Web25#这一话题分享您关于万维网25岁生日的寄语。我们会选取部分生日贺词发布在万维网25周年庆典官方网站webat25.org的虚拟生日贺卡上。

Tim Berners-Lee爵士与其发起的两个组织 —— 万维网基金会及万维网联盟—— 呼吁大家在2014年行动起来,保护并加强开放的万维网。

回想在2012年伦敦奥运会开幕式上那一条著名的微博“This is for Everyone”, Tim Berners-Lee爵士说,“万维网十几亿的用户才是推动万维网发展的根本力量。我希望大家能和我共同庆祝这个伟大的里程碑式的时刻。同时,我也希望万维网25周年庆典能够引发保卫万维网顺利发展的原则的思考与讨论,并尽可能的激发万维网的全部潜能。我相信我们能够建造一个真正为每一个人服务的万维网,一个让任何人在任何设备上都能便捷实用的万维网,一个给予我们力量去实现我们的尊严、权利以及潜能的万维网。通过#Web25#这一话题,告诉我们你对万维网的梦想吧。”

自1989年万维网技术首次提出以来,万维网深深的改变人类社会的通讯、创新以及合作模式。万维网打破了地理和社会分化的鸿沟,全球每五人当中就有两名是通过万维网连接起来的。在万维网上的每一分钟里,平均有亿万条信息在大众之间传递,人们分享两千万张照片,并交换价值一千五百万美元的商品和服务。万维网成功的原因可以追溯到它最初的设计理念,即万维网作为一个去中心化的系统,具有任何人都可以参与贡献的开放架构。

然而,万维网作为一种协助人类的工具,其潜能还没有被完全释放。甚至如果其面临的主要挑战不能被妥善处理,万维网的作用甚至会发生退步。从2014年开始,Tim Berners-Lee爵士希望与全球广大万维网用户、相关行业以及政策制定者共同协商讨论万维网目前遇到的诸多问题:

  • 目前世界上还有60%的人口不能享受万维网带来的便利,我们如何才能让他们也能便捷的访问万维网?
  • 互联网管控在全球范围内日益升级。什么样新颖的、包容性的解决方案才能避免这种管控给互联网带来的分裂?
  • 我们通过万维网发表意见以及组织活动的能力可能会受到审查和监控,并且我们的在线安全受到网络犯罪的威胁。我们如何才能满足人们对保护在线自由、安全及隐私的需求呢?
  • 放眼全球,只有不到10%的政府向在线用户免费开放了数据集以便这些数据被再次使用,这极大的约束了万维网上的创新活动,例如通过万维网技术改善公共交通以及反腐败。什么样的举措能够解锁并释放这些开放数据的真正价值呢?
  • 开放万维网平台(Open Web Platform)必须能够向更多行业延伸,以满足这些行业对万维网跨设备跨平台的互操作性、移动性以及性能表现的需求。我们应该如何应对这些极具多样化的工业需求?
  • 我们如何才能打造一个富有创造性的多样化万维网生态系统,而不是彼此分裂隔绝的贫瘠花园?

Tim Berners-Lee爵士憧憬道,“在接下来的25年里,我们应该继续追寻的是,万维网为人人,人人为万维网。”千里之行始于足下,从现在做起,我们邀请您加入如下的活动:

  • 在社交网络上以#Web25#为话题发表你对万维网25岁生日的寄语,并光临万维网25周年庆典官方网站
  • 在2014年3月12日,格林尼治时间19:00与Tim Berners-Lee爵士一起参加Reddit Ask Me Anything
  • 加入万维网基金会联合主办的 我们想要的万维网活动(Web We Want Campaign),了解如何参与本地区保护万维网用户权益的活动和信息
  • 参加(观看视频直播)或关注2014年10月29日在美国加州圣克拉拉举办的 W3C 20周年庆典研讨会, 参与关于万维网发展之未来的讨论

很多相关的国际组织都会参与本年度关于万维网25周年庆典的活动,了解更多请点击庆典官方活动网站webat25.org。关于媒体发布,请联系press@webat25.org。

万维网25周年庆典活动赞助商

W3C与万维网基金会对万维网25周年庆典的如下赞助商表示衷心感谢!

  • 福特基金会Ford Foundation
  • 互联网名称与数字地址分配机构ICANN
  • 英特尔Intel
  • 推特Twitter
  • 雅虎Yahoo!

早期万维网历史简介

  • 1989年3月: Tim Berners-Lee撰写了 “Information Management: A Proposal” 并在欧洲核子研究中心广泛征求意见。1990年10月,Tim Berners-Lee 开始进行使用NeXTStep开发环境开发超文本GUI浏览器及编辑器。他为这个项目命名为“万维网” 。
  • 1991年8月: 互联网上出现了通过FTP传送的万维网软件。
  • 1992年5月: Pei Wei的 “Viola” GUI 浏览器X测试版本诞生。
  • 1993年2月: 国家超级计算应用中心(National Center for Supercomputing Applications )发布了编写的“Mosaic for X” 的第一份alpha版本。
  • 1993年4月: 欧洲核子研究中心宣布万维网技术将可以被人们免费使用,欧洲核子研究中心将不收取和此项技术相关的费用。
  • 1994年5月: 第一节国际万维网大会在日内瓦的欧洲核子研究中心召开。
  • 1994年10月: 万维网联盟(World Wide Web Consortium ,即W3C)成立。

关于Tim Berners-Lee

万维网技术发明人Tim Berners-Lee爵士毕业于英国牛津大学。万维网技术最早作为一种基于互联网的全球信息共享超媒体研究计划,1989年诞生于欧洲核子研究中心欧洲粒子物理实验室。Tim Berners-Lee爵士于1990年编写了第一个Web客户端和服务器。他编写的关于URI、HTTP以及HTML的规范随着Web技术的广泛传播而不断得到改进。目前,Tim Berners-Lee爵士是万维网联盟董事及创始人,同时也兼任万维网基金会董事及创始人之一。除此之外,他还是3Com Founders工程学院的教授级工程师,并担任麻省理工学院分散化信息群的带头人,同时还被麻省理工学院任命为计算机科学与人工智能实验室(CSAIL)电机工程系教授。他也是英国南安普敦大学的计算机科学系教授。

关于万维网联盟

万维网联盟(World Wide Web Consortium,简称W3C)是由会员组织、全职工作人员、以及公众共同组成的致力于发展互联网标准的国际化组织。 W3C通过创立互联网标准及指导方针来保障互联网长期稳定的发展,开放万维网平台是万维网联盟目前的核心工作。截至今日,W3C在全球拥有375家会员单位。W3C主要由如下机构联合管理:美国麻省理工学院计算机科技与人工智能实验室(MIT CSAIL)、总部设于法国的欧洲情报学与数学研究联盟(ERCIM)、中国北京航空航天大学(Beihang University)以及日本庆应大学(Keio University),并且W3C在全球范围内设有办事处。更多信息请见http://www.w3.org。

关于万维网基金会(World Wide Web Foundation)

由Tim Berners-Lee爵士创立的万维网基金会(webfoundation.org)旨在将开放万维网建立成为一项全球公共福利和基本人类权利,创建一个任何人在任何地方都能够通过万维网自由的进行沟通、合作与创新的世界。

万维网基金会的20多名团队成员与60多个国家的90多个相关机构进行合作。我们目前的工作重点包括共同领导蓬勃发展的“我们想要的万维网运动”(Web We Want movement,webwewant.org),创建世界上第一份Open Data Contracting Standard,推进低成本互联网联盟发展(a4ai.org),将其打造成为该技术领域最广泛的联盟。

万维网基金会同时也发布万维网发展指数(Web Index,thewebindex.org),这是世界上第一个关于万维网普及、应用以及在不同国家的使用情况和影响力的多维度数据统计服务。自2012年服务发布以来,广受业界好评。2013版的万维网发展指数包括了超过20个国家的统计数据,并增加了万维网成本可负担程度(affordability)、互联网管理(censorship and surveillance)、数据开放情况等统计指标。

发表在 活动 | 留下评论

无障碍不是残奥会

今天在聊天的时候,接收到了这样一个对信息无障碍的看法:无障碍就跟残奥会一样,小众,没观众,你可以上升到很高的层次,但是基本就是雷声大、雨点小。

不可否认,很多人都是这一想法,这源于他们对一件事物的认知程度,无所谓对错。就像我总举的一个例子:北京地铁以前不允许导盲犬进入,全国各地绝大多数室内公共场所,交通工具都不允许。

在这,我大胆的预测,再过10年,信息无障碍一定是每一个web产品的必备特性。大家拭目以待吧。

发表在 观点 | 留下评论

网站无障碍的重要组成部分

一个高可访问性的网站,不仅仅依赖于网站开发人员。要使更多的人可以访问你的网站,特别是残障人士。其实是需要依赖于多个组件共同协作才可以达到这个目标。这些组成部分包括:

  • 内容:一个网页或者web应用中的信息,比如像文字、图片、声音这种自然信息以及用来实现结构、展示的代码和标记语言
  • 网页浏览器,媒体播放器以及其他用户代理
  • 辅助技术:大多数情况下指屏幕阅读软件、替代性键盘、开关装置、扫描软件、盲文显示器等等
  • 用户:依赖与他们的经验、知识以及当时的网络和硬件环境使用web
  • 开发者:设计师、工程师、作者等等,包括残疾人开发者以及贡献产生内容的用户
  • 开发工具:可以创建web的软件
  • 评估工具:网站无障碍评估工具、HTML校验工具、CSS校验工具等等

各个组件之间的关系,如下图:

网站无障碍组件相互关系

网站开发者通常使用开发工具和评估工具来创建网站内容。

人们(用户)使用网页浏览器、媒体播放器、辅助技术或者其他的用户代理去获取以及与内容进行交互。

各个组件相互依赖。为了网站无障碍这些组件必须共同工作。以为图片上的替代文字为例(<img alt=”替代文字”/>):

  1. 技术规范:用来实现替代文本(HTML定义图片(img)的文字替代属性(alt))
  2. WAI指南:WCAG、ATAG、UAAG定义了针对不同的组成部分如何实现无障碍(文字替代方案)
  3. 开发者:提供恰当的替代文本
  4. 开发工具:支持、促进、推动提供web中的替代文本方案
  5. 评估工具:用户帮助检测替代文本是否存在
  6. 用户代理:为替代文本提供人机接口
  7. 辅助技术:提供文本替代方案人机接口用来满足多种形式
  8. 用户:知道如何从他们的用户代理以及(或者)辅助技术中获取他们所需要的替代文本

各个组件相互作用形成闭环。其中一个环节实现了相应的特性,其他环节就很可能去实现这个特性。

网站无障碍各个组件闭环

当网页浏览器、媒体播放器、辅助技术以及其他的用户带来支持了一个无障碍特性,用户就更可能需要它,开发者就更可能在他们的内容中实现它。

当开发者希望在他们的内容中实现一个无障碍特性,他们就很可能去实现它如果开发工具可以轻松实现这个特性。

当开发工具可以轻松的实现这个特性,开发者就更可能在他们的内容中去实施它。

当一个无障碍特性已经在大量的内容中实施的时候,开发者和用户就会更加需要用户代理去支持它。

相反,如果一个无障碍特性在一个组成部分中没有被实现,当它无法到达一个用户体验的结果的时候,其他的组件也就几乎没有实现这个特性的动机。比如:开发者并不想实施这个特性因为开发工具不支持并且大多数的网页浏览器和辅助技术也没有实现这个特性。

网站无障碍各个组件相互影响

如果一个组件对无障碍支持的不好,那么其他的组成部分就得通过变通的方式来达到某个效果,这对整个的无障碍也并不是好事。比如:开发者需要增加他们的工作量来拟补开发工具的不足,利用纯手工的方式来替代工具。用户则要利用不同的浏览器或者辅助技术来获取内容中信息,克服不同的可访问性问题。

大多数情况下,采用变通的方案是不现实的。由于一些组件的对可访问性支持的不好,所以导致很多残障人士只能使用特定的网站、网页或者功能。

不同组成部分的指南。W3C为不同的组件开发了相应的指南,分别是:ATAG,UAAG,WCAG。这些指南都是基于基本的Web标准技术。

WAI指南基于Web标准技术

如果你对任何一个组件感兴趣,请联系我们,我们正在寻找对web accessibility感兴趣并且可以为之付出的人。

 

发表在 技术 | 标签为 , , , | 留下评论

当元素获得焦点的时候使用CSS使之易感知

基于Techniques for WCAG 2.0 C15: Using CSS to change the presentation of a user interface component when it receives focus

当一个可以交互的元素的获得焦点的时候,使用CSS使之在视觉上有一个明显的反馈,比如:高亮。提供视觉反馈。

Exa1


<ul id="mainnav">
  <li class="page_item">Home</li>
  <li class="page_item"><a href="/services">Services</a></li>
  <li class="page_item"><a href="/projects">Projects</a></li>
  <li class="page_item"><a href="/demos">Demos</a></li>
  <li class="page_item"><a href="/about-us">About us</a></li>
  <li class="page_item"><a href="/contact-us">Contact us</a></li>
  <li class="page_item"><a href="/links">Links</a></li>
</ul>
<style type="text/css">
#mainnav a:hover, #mainnav a:active, #mainnav a:focus {
  background-color: #DCFFFF;
  color:#000066;
</style>
}

Exa2


<html>
  <head>
    <style type="text/css">
      input.text:focus {
        background-color: #7FFF00; 
        color: #000;
      }
      input[type=checkbox]:focus + label, input[type=radio]:focus + label {
        background-color: #FF6; 
        color: #000; 
      }
    </style>
  </head>
  <body>
    <form method="post" action="form.php">
      <p><label for="fname">Name: </label>
        <input class="text" type="text" name="fname" id="fname" />
      </p>
      <p>
        <input type="radio" name="sex" value="male" id="sm" /> <label for="sm">Male</label><br />
        <input type="radio" name="sex" value="female" id="sf" /> <label for="sf">Female</label>
      <p>
    </form>
  </body>
</html>

复选框和单选框获得焦点的时候,他的背景色和文字颜色都会发生显著的变化。

这个技术方案,无论是对键盘用户还是普通用户都是极好的。与用户界面有任何交互的时候,都会立即给与一个视觉的反馈,让你很确信你已经操作成功。

发表在 技术 | 留下评论

如果没有水平滚动条

很多页面,甚至我所在的团队的最重要的门面也曾经有这样一个状况,无论怎样都不会显示水平的滚动条。在windows7系统中,如果你按“微软键”+“左”或者“右”。又或者用鼠标点住一个窗口的标题栏,然后把鼠标移动到桌面的左侧和右侧,出现一个扩散的效果后松开鼠标。这两种操作都会使窗口自动占据屏幕的左侧或者右侧,宽度是二分之一。这个体验很好,在屏幕分辨率还不大的时候,我们同时开几个窗口的时候,可能会人为的调整窗口大小以更好的利用桌面的空间。

而且并不是所有的人都喜欢全屏看网页的。当网页的宽度比较窄的时候,没有水平滚动条的话,右侧的内容很难访问,除非使用鼠标选中文字后拖拽。所以没有水平滚动条一定是一个很糟糕的体验,当然有一个例外——即使没有水平滚动条,水平的内容也可以很好的展示出来。这有两种状况,一种是利用js来模拟,另外一种是我们经常说的响应式布局(Responsive web design)。

在很多文章中介绍说,水平滚动条对于认知感和视觉差的用户是很难比感知的,但是如果你如果你因为这一点而使更多的用户无法查看右侧的内容,就更加的让你的产品更加有障碍了。

比较恰当的解决方式是响应式布局Responsive web design,无论窗口是什么宽度,都可以完整的显示水平方向的内容。这样你就可以舍弃你的水平滚动条了。并且可以给用户一个比较好的体验。而且你还多了一个噱头~好吧,其实很多团队都是为了响应式而响应式。都说到这了,我就再说几句吧。

算了,还是别说了。

 

发表在 观点 | 留下评论

像盲人一样使用一周互联网后,我学到了什么

原文:Things I learned by pretending to be blind for a week By David Ball on silktide blog

由http://tomy.im/原创翻译,转载请注明出处http://tomy.im/2013/07/things-learned-pretending-to-be-blind-for-a-week/

Things-I-Learned-By-Pretending-To-Be-Blind

虽然我是一个视力健全的普通人,但是我知道在这个世界上有一些人在用不一样的方式和我们一起感受互联网所带来的变革。最近一段日子,“多屏互动浏览”成为了互联网上最热门的Geek话题,许多前端工程师都在关注如何在让使用移动设备的用户流畅地使用互联网。但是我们不应该忘记还有一些互联网用户也有着与常人不一样的上网体验,可能你从未意识到,盲人用户是在以我们无法想象的方式使用互联网。

因此,我决定试着使用读屏软件来操控电脑,来看(或者我应该说“感受一下”)一个盲人用户是如何浏览一个网站的。在文章开始之前我希望先说明我并不是一个对“无障碍访问”领域一窍不通的菜鸟。我在过去的几年中建立了许多符合W3C标准的网站,参与建立相关的Web标准,并且给我的每一个图片都附上alt标签,还给每一个Flash动画都加上了正确的文字说明。

即便如此,当我真正开始使用读屏软件之后,下面这些发现还是让我大吃一惊。

一、读屏软件可以操控整个操作系统,而不仅仅是读出浏览器里的内容。

我总是下意识地以为读屏软件只识别出浏览器内的内容,但实际上并不是这样的。读屏软件是为辅助使用整个操作系统设计的软件,从你打开电脑电源之后,你就要在它的帮助下使用键盘命令来启动你的浏览器。

有用户在我们的Facebook上留言说,使用像lynx或者w3m这样的纯文本浏览器就可以轻松体验盲人用户的上网感受了。但是我想告诉你,这样的文本浏览器的内容,跟绝大多数盲人用户的日常感受并没有什么相像之处。

二、使用读屏软件真的很难。

使用读屏软件的学习曲线非常地陡峭!

那些用来屏幕上自由移动光标的快捷键实在是太难记住了,更别说在蒙住你的眼睛后在键盘上找到这些按键。嗯是的,获得百分百真实的感受,我用黑布蒙住了我的眼睛。其实一开始并没有胆量这么干,当我慢慢熟悉了读屏软件的操作之后我才逐渐有了自信。即使这样,在把自己的光标困在了一个角落,或者遇到了一个我不熟悉的选项之后,我还是会偷偷地掀开眼罩瞟一眼到底哪里出了问题。

举个例子来说明究竟发生了什么。当你使用读屏软件浏览一个网页时,它会读出这个网页上的每一条内容,是的每一条,直到通过机械化的声音,用每一个单词把你的大脑塞满,搅得你头晕脑胀为止。但是后来我在这个Youtube视频里了解到了,其实是可以自己来尝试控制读屏软件来浏览我想要的内容的。这样做之后感觉好多了,但是其实你仍然要准备好,在你找到你想浏览的内容或者你想要跳转的链接之前,先听上几百个几千个标题和链接。

 

三、浏览器的兼容性还是有问题的。

根据WebAIM在2012年五月的这个统计,在盲人用户中最为流行的浏览器是IE8(30.4%),IE9(28.5%)和Firefox(20%)。在蒙上眼睛之前我最喜欢的浏览器一直是Chrome,所以我最开始也选择了它作为主力浏览器。但是很快我便意识到不同浏览器对于读屏软件的兼容是有差距的,所以在我换到了在无障碍访问浏览中做的最棒的Firefox浏览器之后,它终于很好地担起了这个重任。

当我阅读无障碍访问研究者Sina Bahram的一个示范网页的时候,我发现Firefox在没有指定ARIA角色的情况下,自动在网页中添加了一个HTML5的<nav>landmark元素。我问Sina为什么他不按照我理解的标准做法,在元素中添加一句a role =”navigation”时,他回复:

当有一个HTML5元素可以起到同样的作用的时候,我倾向于使用更语义化的元素。

他说的很对,但是我测试的所有浏览器中,只有firefox建立了这个landmark元素。 这个Youtube视频中是Sina如何使用读屏软件浏览网络的一个演示。

四、你首先需要的是拥有一个足够敏捷的听力。

当我第一次意识到我可以在我的PlayStation3上用1.5倍速看DVD,也就是说我可以在一个半小时内看完一部120分钟的电影并且了解剧情的时候,我惊讶地想:“这样我就成功延长了半个小时寿命!”,接下来我就听到了快放后那被门挤过一样的声音。当然,没过多久我就受不了了,调回了正常的速度。但是这跟Sina Bahram听他的读屏软件的速度(看上面那个视频链接中的前四十秒)根本算不了什么。

就算是使用一个相对轻松的速度,这么大量的信息一下子涌过来,常常让我一再的倒车重来,不厌其烦一遍又一遍地听网页上的种种选项。

五、一些著名网站依然很难用。

我一直尝试着能够用读屏软件去浏览我日常生活中最喜欢的那些网站。

Facebook……算了别提了。不管这篇文章说Facebook理论上是多么地无障碍化,Facebook上的JavaScript和瀑布流页面还是导致读屏软件把我的电脑卡成了渣。在这个视障用户Robert William所录制的Youtube视频中,他因为不能使用读屏软件正常访问Facebook,干脆转而使用更加无障碍化的移动版Facebook。

我还尝试了Amazon.co.uk,但是完全不能Hold住首页上的………等等我看看………超过一千个链接!而且任何人都根本不可能成功切换到首页上的搜索框去搜索一个商品(开始我“听”这个页面的时候我还真心抱有幻想,直到我发现搜索框藏在了两个其他的选项之中),并且页面完全没有ARIA标记。非常令人失望。后来在一次交流中一个盲人朋友劝说我在亚马逊也使用更加无障碍化的移动端网站。但是,在电脑端却必须去使用这个一个移动端的网站是件非常恼人的事情,何况要不是这样一个有经验的朋友的帮助,我连这样一个可以使用的移动版网站都不知道。

六、链接标题没有用。

这是最让我吃惊的事情之一。我一直以为读屏软件会读出来使用“title”属性添加到链接上的文本,而不是读出来链接本身。这样我就可以把关于链接所包含的信息都写在这个属性中了。但是其实这个属性根本不管用,除非在这个链接本身没有文字的极端情况下。所以所有被写在“title”属性里的想象中“有用”的文本都被读屏软件彻彻底底地无视了。

所以不要以为你可以只放一些类似于“点击此处”或者“阅读更多”的链接,然后在“title”属性中放上描述这些链接的说明文字放就万事大吉了,这完全没有用。

我甚至在Twitter上问HTML专家Jeffrey Zeldman是否有任何原因来使用“title”属性,他干脆地回复“没,不要用”。

zeldman

七、自动定位非常烦人。

所有把光标自动弹到输入框的网站都会让盲人用户不知所措。想象下,你正在阅读一个页面,忽然JavaScript劫持了你的读屏软件的声音,然后跳到了某个完全不一样的地方。你一点也不知道你在哪里,也许是页面顶部,也许是底部,你被弄得头晕转向,并且可能会错过一些可能真正重要的内容。

八、通过W3C认证说明不了什么。

我一直在努力使我的网站通过W3C检测,但是就算获得了一个绿油油亮闪闪的大对勾,你可能也只是刚刚使你的网站开始无障碍化,而已。我知道你可以找到很多很多自动化测试工具。但是实际上很多无障碍化体验优化的活儿必须需要人工测试才能找得出来。

九、最简单的方法就是通过标题来浏览。

在听过了足够多的关于ARIA标记的讨论,以及那些关于HTML5语义化元素的激情澎湃的演讲后,我期待着能有一个办法在网站的不同板块中简单快速地跳转。特别是像 <header>, <nav>, <aside> 和<footer> 这样的我认为可以掠过的元素。其实,如果所有网站都有这样的元素的话是可以做到的。但是令人惊讶的是有很多网站根本没有用这些元素,更别说像role=”main” 用来标记主要内容,role=”navigation”来标记网站的主要导航链接这样的ARIA标记角色了。

因此我发现我后来很少再去尝试搜寻网页上的路标角色(即使他们碰巧真正存在的话),而是干脆按顺序阅读每一片内容,或者跳转到下一个标题上。因为至少大部分网页开发者们是知道怎么用Heading标签,嗯这样就导致了通过在标题间跳转来浏览成为了最可靠的浏览网页的方法了。

这里有一个视频演示一个人是怎么通过标题来浏览网页。

十、盲人用户的脾气都太好了。

最后一点,作为总结,我不得不说我所发现的这些事情实在是太让人心灰意冷了。

当你只能聆听从你耳边呼啸而过的成千上万个链接时,你需要非常地专注和意志坚定。但是是当绝大多数的链接根本没用时,我全部的意志力都用在了忍住不把耳机砸向显示器上。

很明显许多网站根本没考虑过盲人用户。可能是因为缺乏无障碍化测试,或者只是大概以为他们没有足够的时间去迎合这么一小部分用户而已。我想,我们每个人都有着道德上的义务去帮助盲人用户流畅使用互联网,并且需要亲身感受下这样的体验,勿以善小而不为。

原文:Things I learned by pretending to be blind for a week By David Ball on silktide blog

第一次翻译博文,如有翻译错误欢迎留言指正。

发表在 观点 | 留下评论

利用rel属性标记文档之间的关系

rel属性是用来标记文档和文档之间关系的属性。

<a href="B" rel="">A</a>
或者
<link href="B" rel />

可以解释为B是当前文档的“rel值”关系,这是一个“隐秘而伟大的”接口。他无私的等待着被搜索引擎、被辅助技术、被浏览器或者被其他技术激活。在被激活之前,这个属性几乎就是在那“无聊”的呆着。

下面看看他的取值。

描述
alternate 文档的替代版本(比如打印页、翻译或镜像)。
stylesheet 文档的外部样式表。
start 集合中的第一个文档。
next 集合中的下一个文档。
prev 集合中的上一个文档。
contents 文档的目录。
index 文档的索引。
glossary 在文档中使用的词汇的术语表(解释)。
copyright 包含版权信息的文档。
chapter 文档的章。
section 文档的节。
subsection 文档的小节。
appendix 文档的附录。
help 帮助文档。
bookmark 相关文档。

隐秘而伟大的海报

发表在 技术 | 留下评论

创建符合逻辑的Tab序列

网站无障碍是否成功很大程度上取决于Tab序列(Tab order)

先对中国开发者说一句话,其实绝大多数的技术方案,外国同行跟我们的想法是高度的一致。通过Techniques for WCAG 2.0就会发现。如果要我说,中国的开发者除了语言以外,和国外开发者唯一的差距就是——腼腆,也就是很少参与国际上的交流。其实我也一样。大家共勉!

和W3C的信息无障碍专家张昆先生聊天的时候,他向我转达了一个W3C对腾讯的疑惑:“为什么腾讯如此大力的支持W3C,主办TPAC2013(这也是W3C第一次来中国举办会议),但是参与的却很少(去到各个工作组中和国外的技术人员一起探讨制定标准)。”

基于Techniques for WCAG 2.0 H4: Creating a logical tab order through links, form controls, and objects

有时候,特别是在登录页面,搜索页面,提交订单页面等等页面, 一个高效的、符合逻辑的Tab序列不能基于DOM本身的顺序(如果不完全理解上面这句话,请查看本站早期的文章)。相对于基于DOM的Tab序列,网站作者需要制定一个特殊的Tab序列。我们可以使用tabindex来设计各个元素的tab序列。tabindex的取值为-1,0~32767。如果一个元素的tabindex=”-1″,则无法使用tab键进行聚焦;tabindex=”0″,可以使一个非可聚焦元素“转变为”可聚焦元素,他的顺序并不优先,仍然取决于他的所在的DOM中的顺序。而1~32767则是主要负责为各个设置了tabindex的元素进行排序。数字的值越大,其数序越靠后,也就是说,如果一个元素的tabindex是1,而另一个元素的tabindex是4,那么按一下tab键首先到1,因为1小于4。

tanindex的值不必是连续的,并且不必是唯一的。也就是说你可以给多个元素设置相同的tabindex值。这些相同tabindex的元素的顺序就取决于他们在DOM中的顺序了。

下面的公式,左侧的最大:

1 > 2 > 3 > …… > 23767 > (0 = 默认可聚焦的元素)

以微信的公共平台登录页面为例,页面主要的功能是登录,所以在页面载入的时候,利用js将焦点赋予了用户名的input。

微信公共平台登录页面

接着再按Tab键,就按照DOM顺序往下继续走:密码,记住帐号,无法登录,登录。(根据DOM顺序继续移动)。但是用户名之前的可聚焦元素如何访问?比如右上角的立即注册。

如果不使用js将焦点聚焦到用户名位置,而是为用户名,密码,记住帐号,无法登录,登录这几个元素设置tabindex=”1″。结果会怎样?各位可以试试。当然这里有一个权衡。或者两者结合又是一个什么样的体验。(重点在于tab序列和普通用户与键盘用户的综合体验)

下面的三个例子是H4: Creating a logical tab order through links, form controls, and objects给出的,可以体会一下。

Exa1:典型的表格,表格默认是从左到右,从上到下。利用tabindex,让键盘操作(Tab序列)更加有逻辑

<form action="#" method="post">
 <table summary="第一列是新郎的搜索条件,第二列是新娘的搜索条件">
 <caption>搜索结婚记录</caption>
 <tr>
   <th>搜索条件</th>
   <th>新郎</th>
   <th>新娘</th>
 </tr>
 <tr>
  <th>姓</th>
  <td><input type="text" size="30" value="" name="groomxing" 
      title="新郎的姓氏" tabindex="1"></td>
  <td><input type="text" size="30" value="" name="bridexing" 
       title="新娘的姓氏" tabindex="4"></td>
 </tr>
 <tr>
  <th>名</th>
  <td><input type="text" size="30" value="" name="groomming" 
      title="新郎的名字" tabindex="2"></td>
  <td><input type="text" size="30" value="" name="brideming" 
      title="新娘的名字" tabindex="5"></td>
 </tr>
 <tr>
  <th>Place of birth</th>
  <td><input type="text" size="30" value="" name="groombirth" 
      title="新郎的出生日期" tabindex="3"></td>
  <td><input type="text" size="30" value="" name="bridebirth" 
      title="新娘的出生日期" tabindex="6"></td>
 </tr>
</table>
</form>

Exa2:一个网页中包含了一个搜索域,它在页面的右上角。为这个搜索域设置tabindex=”1″,那么页面再入后按tab会首先将焦点移动到这个搜索域中。再按tab,会到原有的序列,也就是DOM中第一个可聚焦的元素。

Exa3

 <a href="xxx" tabindex = "1">First link in list</a>
<a href="xxx" tabindex = "1">Second link in list</a>
<a href="xxx" tabindex = "1">Link that was added long 
  after the original list was created</a>
<a href="xxx" tabindex = "1">Third link in list</a>
  ...
<a href="xxx" tabindex = "1">Twentieth link in list</a>

实际工作中,可以先检测是否有tabindex属性,如果没有的话,一定是基于DOM。如果有tabindex,查看代码。最后无论是否使用,都可以利用人工或者工具来检测和标注当前页面的Tab顺序。

发表在 技术 | 留下评论

WebP的可访问性

有些文件在有些时期,“天生”没有高可访问性。

今天下午一直在聊WebP,现在从网站无障碍的角度阐述一下这个文件的可访问性。WebP现阶段只支持webkit内核的浏览器,具体情况见下图。

支持WebP的浏览器列表

从chrome31,opera19以及android4.2以上浏览器才完全支持WebP

从浏览器的角度来讲,WebP的可访问性很差。不过,就像facebook一样,我们可以分级支持,比如在chrome浏览器下使用WebP格式,但是这样就真的对使用chrome的用户有很高的可访问性么?不尽然。

考虑这样一个场景,用户使用chrome在你的web上下载了WebP,然后他希望在自己的PC上进行浏览或者二次编辑,结果无功而返。比如Windows。当然这个图片一定可以打开,不过是利用chrome打开而已。另外介于apple与google的专利的关系,像WebP ,WebM这种格式,在MAC的OS,IOS中你不要抱有太大希望,比如safari就不支持。另外如果你想在本地转换图片格式的话,还需要去google的网站下载相关的文件。https://developers.google.com/speed/webp/download?hl=zh-CN

所以,如果你希望在你的产品中使用WebP,需要满足一下几点:1.分级支持;2.不存在保存到本地的场景。否则使用WebP必然会带来巨大的可访问性问题。

下面是WebP的介绍:

WebP is a new image format that provides lossless and lossy compression for images on the web. WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller in size compared to JPEG images at equivalent SSIM index. WebP supports lossless transparency (also known as alpha channel) with just 22% additional bytes. Transparency is also supported with lossy compression and typically provides 3x smaller file sizes compared to PNG when lossy compression is acceptable for the red/green/blue color channels.

WebP是一种新的图片格式,它为web上的图片提供了无损压缩和有损压缩。WebP无损压缩比相同尺寸的PNG小26%。WebP的有损压缩比相同尺寸的在相同SSIM指标的image小25%~34%。WebP支持无损的透明度(也称为alpha通道)且只有22%额外的字节。透明度还支持有损压缩以及当有损压缩允许接受的红色/绿色/蓝色通道的时候,通常压缩PNG至3倍以下。

WebP(发音weppy),是一种同时提供了有损压缩与无损压缩的图片文件格式 ,派生自图像编码格式VP8,是由Google在购买On2 Technologies后发展出来,以BSD授权条款发布。

WebP最初在2010年发布,目标是减少文件大小,但达到和JPEG格式相同的图片质量,希望能够减少图片档在网络上的传送时间。 2011年11月8日,Google开始让WebP支持无损压缩和透明色的功能,而在2012年8月16日的参考实做libwebp 0.2.0中正式支持。根据Google较早的测试,WebP的无损压缩比网络上找到的PNG档少了45%的文件大小,即使这些PNG档在使用pngcrush和PNGOUT处理过,WebP还是可以减少28%的文件大小。

发表在 观点 | 留下评论

合并临近的链接相同资源的图片和文字

基于Techniques for WCAG 2.0 H2: Combining adjacent image and text links for the same resource

对于如何编写HTML,每个人可能都有自己的看法和理解,对于下面这样一个列表,很多人编写列表项的时候,分别为图片添加一个链接,为文字添加一个链接;也有很多人用一个链接包裹图片和文字。

图片和文字指向相同资源的列表项

在视觉上,大多数人都会感知为点击图片和文字会到达一个相同的资源,但是当利用鼠标或者键盘或者辅助技术聚焦的时候,会产生两个区域,这会使人感到困惑和冗余。当一个链接将图片和文字包裹在一起的时候,需要注意一点,如果没有必要,你应该将图片的alt值清空或者不应该与文字一样,因为大多数情况下,图片的目的是增强理解和视觉效果,他并不承载除文件之外的其他信息。

前两个是正确的例子,后三个是错误的例子

例子一

 <a href="products.html">
   <img src="icon.gif" alt="" />
   Products page
 </a>

例子二

<a href="foo.htm">
  <img src="house.gif" alt="home page icon"/>
  Go to the home page
</a>

例子三

<a href="products.html">
   <img src="icon.gif" alt="Products page" />
 </a>
 <a href="products.html">
   Products page
 </a>

例子四

<a href="products.html">
   <img src="icon.gif" alt="" />
 </a>
 <a href="products.html">
   Products page
 </a>

例子五

<a href="products.html">
  <img src="products.gif" alt="Products page"/>
  Products page
</a>

两步检查,第一,检查相邻的拥有链接图片和文字和他们的描述;第二,相同表格中类似的问题。

发表在 技术 | 留下评论