月归档:2013 年十二月

Judy Brewer:创建一个无障碍网络/Building an Accessible Web

2013年11月10日,深圳保利剧院,腾讯WE大会上,Judy Brewer在大会上分享《Building an Accessible Web》,附文本字幕(文本字幕与视频字幕在某些专业名词上的翻译有细微不同),先介绍一下世界信息无障碍领域的重要人物之一——Judy Brewer。 Judy Brewer,万维网联盟(W3C)技术无障碍技术领域负责人。负责万维网联盟(W3C, World Wide Web Consortium)技术无障碍(WAI, Web Accessibility Initiative)技术领域的活动。她的工作包括:确保万维网技术可以为残障人士使用;为网页内容、浏览器、媒体播放和编译工具建立操作指南;提升现有资源为网站进行评估和维护;为W3C开发Web信息无障碍化的教育和推广资源;并参与未来网络信息无障碍化的研发。 她负责W3C技术无障碍政策和标准相关事宜的联络,与全球组织一道致力于Web信息无障碍理念的普及和实施,并促成行业、参与社区、无障碍技术研究者,以及政府对信息无障碍解决方案达成共识。Web技术无障碍(WAI)标准和指南为全世界政府和机构所使用,保证了每个人融入信息社会的平等机会。 Judy 是麻省理工学院计算机科学实验室的科研人员。在加入W3C之前,她开创性地倡导残障人使用辅助技术、获取主流信息和接触通信技术。她拥有管理、科技写作、教育、应用语言学和保护残疾人权益方面的丰富经验,在信息交流和通信技术方面获得相关奖项。 今天,无论你是谁,无论你在哪里,通过网络你随时可以自由的链接与任何人合作和分享。 你们好,感谢大家光临,我想和大家聊一聊如何能让残障人士使用网络,如何让网络为每个人更好的服务,为各种通信和信息及技术的普及奠定基础。 世界上有10亿人有严重残障,这个数据来源于2011年世界卫生组织的报告,也就是说,地球上每七个人当中就有以为残障人士,如果网站设计的不合理,许许多多的人就会遇到障碍,同时,网络产品和服务的设计也是一个很大的市场,一些国家是有硬性要求的,政府在采购信息技术的时候,必须选择可供残障认识使用的产品,美国在这方面估计有几十亿美金的市场,欧洲也有同样规模的市场,因此开发信息技术产品的时候,很有必要考虑无障碍的问题。世界上有十亿残障人士,都期盼能在网络上进行学习、工作和娱乐,他们也希望能够参与到信息社会中。 作为世界网络联盟(W3C)的一名工作人员很高兴看到的一点,是Tim Berners-Lee(爵士,万维网联盟(W3C)创始人和领导者)提出的“网络为每个人所有”的愿景,在这合格具有包容性的网络愿景下,残障人士能够介入技术开发的阶段,网络完全可以支持各类残障人士的需求。我们一定要进行这方面的考虑,我们需要的技术应该能够支持盲人、聋哑人、缺乏运动能力的人士、协调能力欠缺的人士、技术还应该能够支持语言能力不佳的人士、没有语言能力的人士、有沟通和记忆问题的人士。而且对于某些人士,不能采用突然闪动的屏幕,因为这可能会引起癫痫。即使对于多重残障的人士,技术也是可以支持他们的需求的,技术还应能够支持老龄化的需求,因为随着年龄的增加,人们会遇到,轻微的行动不便,特别是在平均年龄不断上升的国家,这是市场要考虑的重要方面。 无障碍设计,其实是为了适应更多的人体需求,包括普适性的设计,或者说适用于所有人的设计,设计不能支持各种不同的需求,这种说法是不成立的。有时候非残障人士也会遇到暂时的不便,那么他们要怎么办呢?例如,日光照射在手机屏幕上,就很难看清屏幕上的内容;又比如,在嘈杂的环境中,很难听清电子设备的声音,还有在开车的时候,是不能用手去打字的;以及分神以后,需要提醒才能记起事情。无障碍、普适性的设计可以解决所有这些问题。 网络已经进入大众的生活,网络已经成为获取新闻和信息的重要途径,也是线上学习、求职的入口。任旻通过网络来了解身边发生的事情,还通过网络来参政议政。网络是医疗体系的载体,是联系医疗机构的途径,是人们联系朋友、观看电影、玩游戏的途径。作为残障人士,我们需要所有这些功能,根据联合国的一项条约,我们是有这个权利的。 在2006年,联合国通过了《残疾人权利公约》。公约中有两项条款是关于信息无障碍的。其中一项权利是应该保证残疾人独立生活的能力,以及充分参与社会各方面活动的能力,包括获取信息以及沟通。另外一项权利是与他人平等地自由的表达观点,包括信息和无障碍技术。 这是截至今年三月世界上计入了这项公约的国家,现在已经有158个国家签署了残疾人权利公约,世界上大多数国家都已经签署了这项公约。这是联合国历史上签署最快的公约之一。 G3ICT,即“信息和通信技术普适性国际组织”。它的功能是跟进公约在各国的实施情况。该组织2013年公布的数据显示:对于残障人士而言,在他们的生活中,网络已经成为其社会和经济活动的动力。信息技术是其中影响最大的,因此,信息和网络技术可访问性以及改善最基本和最重要的一点,就是网络的可访问性。 W3C,即“国际网络联盟”是一个独特的组织。联盟研究如何提升可访问性。从设计阶段开始,联盟就致力于提升可访问性。这根当前技术开发的流程非常不同。一般来说,在技术的开发阶段是不考虑残障人士意见的,这就意味着,大多数的技术,在投入日常使用以后必须再进行修改才能满足残障人士的使用需求,这样成本很高,可访问性也不理想,而且花的时间很长。W3C通常的做法则是残障人士和可访问性专家跟W3C核心网络技术设计师一同合作。 W3C正在开发的一项主要技术是一个完整的平台,这是一套免费的网络标准。它使得各种设备之间可以进行多样化的互动,并且提供接入数码设备、医疗体系、数据出版等等多个领域的途径。这些能实现的原因是开放网络基于HTML5核心技术,这个技术应用于各种设备,包括手机、平板电脑、台式机、电子书阅览器、游戏机、电视、录像机。 所以网络可访问性计划是W3C工作的一部分,我也参加了这个工作。我们与W3C所有技术的开发者合作。我们工作的基础是要保证W3C所有标准都支持无障碍设计,并且在必要的时候开发新的可访问性标准,我们还开发可访问性指导原则,针对于可访问性的评测、制定以及研究和开发。我们也开发出了一套资源。我们的重点是标准的兼容,因为这能加快可访问性的进度,也就是重点去协调全部的可访问性解决方案。同时,我们制定了教育和外宣的材料。我们的核心是“可访问性指导原则”。 在这里我大概介绍一下。这些原则“可访问性指导原则”。首先,把网络想象成一个虚拟的空间,一方面我们有负责开发的工作人员,他们使用开发工具以及评测工具来创建网络内容,另一方面我们有用户他们使用浏览器、媒体播放器、便携式设备,有些人还会使用辅助技术,也就是残障人士需要的特殊的辅助技术来接入网络内容。这一切的基础就是技术参数。参数是支持无障碍设计的。 我们有三个相辅相成的原则,第一个是针对于针对网络可访问性的,第二个是针对开发工具可访问性的,以及针对用户界面的可访问性。因为即使作为残障人士,我们也应该能够创建网络内容。第三个是针对浏览器、媒体播放器以及便携式设备的。它们之间,通过技术都是可以互相操作的。 在多年的可访问性原则开发项目中,约翰.司雷登,他是工作小组的老师。其中一段时间,他生了重病,当时只有很少的时间去寻找治疗方法,那个时候具有可访问性的医疗网站数量很少,于是约翰利用网络可访问性原则来呼吁这方面的改进,希望籍此帮助他自己以及他人获得医疗信息。当时他还希望写博客来讲述自己的故事,作为一个身患疾病的盲人的故事,但是当时的博客软件不具有可访问性,因此他又利用开发工具可访问性原则呼吁人们关注网络内容开发的可访问性。 我们在回到可访问性原则上来,其中一个核心原则就是网络内容可访问性原则,我们 称之为“WCAG2.0”。要使信息具有可访问性需要遵循四个原则。一是信息必须是可感知的,二是信息必须是可操作的,三是信息必须是可理解的,四是信息必须是健壮的。大家听起来会觉得比较抽象,我来详细地解释一下。 首先,可感知的信息,如果有一幅图、一个复杂的图表、一个视频,盲人是看不见的。那么我们就需要为这个内容制作一个文本的表达方式,如果是一个音频,那么我们需要给它加上字幕,这样才能适用于失聪人群。因此创建内容的时候,需要采用多种不同的形式,来表现内容,因为你无法预测需要了解内容的人群,他们的需求是怎么样的。如果有图像的内容,那么应特别注意对比度的问题,这样人们才能很容易地看到和听到信息。 信息的可操作性,就是要有各种操作模式,比如键盘、还要考虑到使用便携式设备的情况,应该采用独立用户界面,来保证界面的可访问性,另外要保证用户有足够的时间来阅读一项内容。一个例子就是,你在填表的时候,还没填完,表就消失了,因为你填表的过程中,要去查一些资料才能继续填下去,因此留出足够的时间是很重要的。还有不能采用闪动的内容,因为对某些人士而言,这会引起癫痫的发作。另外要合理引导人们去找到他们需要的内容,这种方式更简单好记。 下一个是文字的可读性和可理解性,属于可理解性原则的内容。对于某一个话题,不要使用过于深奥的词语,应该使用可预见的方式,这样才有助于理解和记忆。应设法避免用户出现错误,还有帮助他们修正错误,还是同样的例子,填表。你填错了一个地方,如果不能返回去修正错误,那就太不合理了。这些都是实实在在的设计,可以帮助到用户的设计。 然后我们讲信息的健壮性,内容与未来的兼容性。创建网络内容的时候,应该采用能与未来技术兼容的方式,以及能与残障人士辅助技术兼容的方式。 … 继续阅读

发表在 活动 | 留下评论

刘楠:创新信息无障碍化互联网,平台力量打造绿色品牌

本文是腾讯公司技术合作总监(时任)刘楠在2010年11月4日第七届中国信息无障碍论坛做的演讲,虽然是3年前的演讲,但是现在看来任然有很多可以学习的地方,同时此次演讲也客观的反映了腾讯公司在信息无障碍领域所做的贡献和思考。以下是讲稿: 谢谢主持人! 今天早上我过来一直在学习各位专家在无障碍化的技术和分享,包括对一些社会学的分享。在这里,我谨代表腾讯公司,我们是一家做互联网服务的提供商,向大家介绍一下我们的工作,包括我们在这个工作之中,对无障碍化的认识。 我的演讲主题是“创新信息无障碍化互联网 平台力量打造绿色品牌”。首先说一下腾讯公司的愿景,腾讯公司的愿景是通过责任关怀,全方位关注特殊群体的需求,分阶段帮助听障人士和普通人一样,享受无缝链接的“一站式在线生活”。 我们的开始是这样,因为腾讯有一个非常家喻户晓的国内产品叫QQ,最早QQ的2008年采用了最传统的Window的技术,当时对盲人读屏软件的支持能力比较强。随着我们技术的进步,有一个很大的版本,让效果更加绚,效果更加好。但是那种技术和传统界面技术有很大的区别,当时读取窗口的信息和Tool WTips信息,对读屏软件的支持度稍弱。一个普通员工发现这个问题,当时给到我们的总裁CEO、 CTO,还有几个EVP的邮件。 这里面讲一下这个邮件的内容,他是这样讲的,说新年好!我最近打球腰有点小伤,和太太去了一家盲人按摩店,他发现一个很有趣的事情,发现盲人师傅都有电脑,而且用读屏软件,他们可以通过搜索,方便找到相关信息和浏览网站。他特地注明一下,他说他太太最关心的是他的Baby,刚好两个师傅都有一个小于1岁的小孩。我们从他们知道了好多母婴的网站。我接触的两个师傅一个20多,一个30出头,问他们用不用QQ,我非常惊讶他们都用都有QQ号。问他们有什么问题,有趣的是,他们担心新的2009版本会有校验码无法登陆,他们想升级,但是一旦升级到显得QQ版本以后,包括界面,包括读屏软件的支持又不好。 这个是员工自发的对公司管理层需求的软件。2010年3月份,有一名普通的视障用户给我们的创始人发了一份邮件,这个邮件非常清楚,说电脑、网络和各种应用软件就像是盲人的眼睛,为处于黑暗中的盲人群体打开了一扇光明的大门。但是这些新技术的应用,让软件的操作界面越来越美观,但是也给广大的盲人用户带来很大的障碍。 这个邮件也牵住了腾讯公司大家的心,盲人是我们原来做互联网的产品完全不了解的群体,我们开始就想,视障用户他们在使用QQ的时候遇到什么问题,以及他们如何使用QQ,最后想到他们在用QQ到QQ遇到问题到他真正的需求是什么样子。当时我们做这些事情的时候,是有一定的困难,而且我讲了,这些困难现在还有,但是也不断的在跟我们的用户学习,包括跟在座的专家学习,我们不断在克服。 困难第一,视障用户的需求很难确认,我们做产品无论是开发人员也好,产品经理也好,对视障用户的群体不了解,我们就很难第一时间确定他们的需求。 第二个困难,我们也不知道用户在哪里,他们需要什么,他们用QQ哪些地方是最困难的事情。我们作为一个商业公司来讲,我们的团队,尤其是研发团队,当时很难评估工作效果。比如说我们开发一个产品,使用QQ的视障用户群体有多大,我们怎么去做用户研究,我们要做用户调研,怎么去做,我们怎么接受反馈信息,这些都是当时的困难。 当时我们也得到了政府部门,包括盲人协会,包括盲文出版社的帮助。这里我们做了一些行动,这是我们当时做用户调研的图片,我们在一个深圳福田按摩院,包括深圳图书馆一个盲人阅览室,包括我们的产品经理亲自去视障用户的家里面,我们一次又一次的走访他,我们做CE,去问他的需求到底是什么情况。 这里面只是一个很小的案例,当时我们在做一个事情时候的一个判断。小小的案例跟大家分享。当时因为QQ作为一个即时通讯软件,有一个验证码的问题,验证码是出于安全的考虑。什么时候会出现验证码呢?比如用户这次登陆跟上次登陆的IP地址不一样,比如跨省登陆,或者他的帐号存在一些异常行为,或者他的IP被封杀,还有一些被攻击的网址。这些都是读屏软件很难读出来的,有的时候明眼人都要看一下是1还是I。我们是一家技术型的公司,最开始我们想用语音的验证码方案,也是联系了很多公司去问,但最后的评价是,因为自动的语音识别现在的成功率比较高,验证码如果语音化,就会出现安全隐患。从盲文出版社获得联系,沟通,也有一个白名单的免验证方案。我们把盲人朋友的QQ号放在白名单的机制里面,我们分个案跟批次处理。这是一个手工方法,通过这个手工方法,我们也记录了2000多个手工白名单。这只是对验证码方案的一个简单介绍。 后面我还会介绍,我们也通过一些技术手段,增大了白名单。这个白名单是我们手工的白名单,另外还通过我们的技术方法,去扩大了白名单的范围。 经过一些工作,这里是我们目前做到的,设计的产品有即时通信平台,包括QQ邮箱,包括QQ空间,还有腾讯微博。这里做了几个工作,第一个是完善了验证码的策略,第二个QQ上解决界面元素的识别,第三推出了简洁版的QQ邮箱,提供了简洁版的Qzone服务。 通过后台建立数据模型,分析用户行为,自动甄别盲人QQ号。通过半年的努力,白名单从手工的2千增长到4万,并且实现持续更新。QQ后台是跟腾讯所有业务自动同步的,这样的话,验证码不光是QQ产品,腾讯公司所有相关产品只要进入这个白名单,都会实现完善的验证码策略。 在我们的QQ上,解决了界面元素的识别。比如说我们在2010版正式发布的时候,当时我们是以主流的读屏软件,比如像国内的阳光、永德同时发布。包括昨天还在跟几个读屏软件的公司提供我们的拦截函数、API接口,让QQ每个版本出去的时候,读取文字的方案能够跟国内的主流读屏软件实现持续的沟通。 还有一个成果是我们的Qzone,Qzone也是国内最大的博客社区。今天在座的有Qzone技术负责人,昨天跟他聊,我们这位同事是从深圳总部过来的,他明天也会给我们北京的同事,因为大家知道北京有腾讯网,有搜索,包括无线,有很多的团队都在腾讯北方总部,会给北方总部的技术跟开发的前台人员做相关的培训,介绍他们在Qzone这里面的一些成果。 这里是我们现阶段推出了简洁版的Qzone,简洁版的Qzone跟普通的Qzone实现了对读屏截取更好的支持。对于QQ邮箱的支持,推出的简洁版的QQ邮箱。这个QQ邮箱做完以后,口碑还是得到了很多盲人用户的认可。 我们也觉得很高兴,我们做的能得到盲人用户的认同和理解。这里是2010年7月,我们的一个视障用户给我们的肯定,文字很多,比如说我们的“网明行动”全面启动,让我们欢欣鼓舞。盲人讲,让我感到无比激动的是,仅仅过了两个月的时间渺茫的愿望实现了。而且当知道腾讯派专人为我们开发盲用QQ的时候,他激动的把这个消息第一时间告诉身边的朋友,他们的喜悦之情溢于言表。 这里是一些微博的反馈,大家可以看到,这是我们在腾讯微博里面的一个截图,这也是给我们CEO马化腾拍的像,他上面讲说今天很高兴和盲人按摩师朋友说了QQ2010又支持读屏软件了,一年前他告诉我2009版不支持读屏软件的,只好用08版。他感谢即通,他的电脑没有屏幕,只有电脑和耳机,说感谢我们给他带来了欢乐。 我们认为这些工作只是刚开始,这个工作是一个持续完善,而且我觉得尤其是这两天参加无障碍的会,我们感觉到我们的责任跟我们应该做的实际上还是应该更多的。这里是对后续产品策略的大致介绍,我们会对读屏软件支持,在QQ上,会调整功能优化区导航,定义一个黄金流程,比如说读屏的截取屏幕区域的跳转,这个逻辑怎么设计。这是我们在设计产品的时候的一个逻辑图(PPT)。 我们也即将推出的版本,会以人为本的原则,为视障用户从细节处来体验问题。比如说我们提供了焦点可读,视障用户通过移动焦点,就可以获得焦点的位置。 为界面的提示语无障碍化做了一个统一的规范。这里是在当时产品设计时候的一些逻辑框图(PPT)。昨天也在这个会场跟我们Qzone的同事那里得到Qzone那边的信息,Qzone提供一个简洁版的空间,现在普通版的QQ空间对读屏软件有一个更好的支持。现在QQ空间有一个“说说”,你可以发一两句话,这个“说说”可以同步到QQ签名上。目前做的比较好的体验是在QQ空间的“说说”上。 我们认为这不是我们的终点,是后面要做的。为了实现我们的愿景,我们的工作计划是,我们希望对无障碍的支持在内部形成标准化、流程化和个性化。标准化是说,我们正在摸索一套无障碍化产品的规范标准,定义完以后,会将腾讯公司所有的产品进行推广。 流程化是指,我们将与用户研究的同事一起讨论一套与视障用户长期保持沟通的流程,使得产品精力与视障用户典型代表进行经常沟通。个性化是指,我们会后续深度挖掘专注视障用户功能优化,以满足视障用户的不同需求。 在此也很感谢大家对腾讯QQ包括我们所有产品的支持。谢谢大家!

发表在 活动 | 留下评论

aria-label及aria-labelledby应用

aria-label属性 正常情况下,会在表单里给input组件指定对应的label,当用户tab到输入框时,读屏软件就会读出相应label里的文本。 如:<label for=”username”>用户名:</label><input type=”text” id=”username”/> 当没有给输入框设计对应的label文本的位置时,aria-label属性为组件指定内置的文本标签。它不在视觉上呈现。 如:<input type=”text” aria-label=”用户名”/> 此时,当焦点落到该输入框时,读屏软件就会读出aria-label里的内容,即“用户名”。 经测试,aria-label只有加在可被tab到的元素上,读屏才会读出其中的内容。 以下情况,也是可以读出的:<span tabindex=”0″ aria-label=”标签提示内容”>可被tab的span标签</span>   aria-labelledby属性 当想要的标签文本已在其他元素中存在时,可以将其值为该元素的id。 <div role=”form” aria-labelledby=”form-title”> <span id=” form-title”>使用手机号码注册</span> <form>……</form> </div> 表单区添加了landmark标识role=”form”,在争渡中使用字母”D“键会在lankmark标识之间跳转。 当跳转到该区域时,不仅会读出”表单区“,也会读出”使用手机号码注册“。 如果一个元素同时有aria-labelledby和aria-label,读屏软件会优先读出aria-labelledby的内容。 测试软件:争渡读屏            浏览器:IE9

发表在 技术 | 留下评论