分类目录归档:技术

VoiceOver知多少?

作为一名有业界良心的网页重构同学,以提高网站、移动端应用的可用性为己任,于是整理出来了一份关于盲人辅助工具 VoiceOver 重构使用说明文档,以帮助重构同学能够简单轻松地为移动端信息无障碍做一些力所能及的事情。 文档大纲: 一、  VoiceOver介绍 二、  VoiceOver开启与关闭 三、  VoiceOver设置 四、  VoiceOver手势操作 五、  如何输入文本 六、  VoiceOver转子操作 七、  HTML5标签测试结果 八、  HTML5标签无障碍开发规范 九、  Role值使用规范 一、VoiceOver介绍 概念: Voiceover功能是苹果公司在2009年4月推出的一种语音辅助程序。专门针对盲人或者是视障人士开发的智能设备上的辅助工具,用以帮助盲人或者视障人士能够轻松简单地获取到移动设备上的有效信息。 支持机型: iPod3/4/5/6/7代、iPod touch、Iphone3/4/4s/5/5c/5s、Ipad1/2/mini、Mac。 支持语种: 目前支持29种语言,包括中文、英文、捷克语、荷兰语、法语、德语、希腊语、意大利语、日语、波兰语、葡萄牙语、西班牙语、瑞典语、土耳其语。 用户可以通过开启功能使程序朗读所有可以看到的文字,只需触摸文字即可选中使程序朗读,并通过双击进入文字的链接。 版本: VoiceOver3,运行于OS X(为系统版本)系统上。Alex语音是Mac的语音功能。 功能: 手势支持、盲文显示器镜像、”网点”以及语音提示。此外,它还提供常用的功能,包括自动朗读网页、”全部朗读”、网页概况、网页表格支持、用户创建的标记、自定义显示信息详细程度。 VoiceOver与 OS X 紧密集成,当开发人员更新其 … 继续阅读

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

聊聊信息无障碍测试工程师的标准

运营腾讯无障碍用户测试群已经半年,最近深圳市信息无障碍研究会也在招聘全职和soho的盲人测试人员,对于信息无障碍测试工程师(人员),我个人认为应该有几个方面注意: 1.主观意识太强的人不适合,虽说无障碍是一种非机械的code校验,而是体验的测试,但是我们仍需要客观的反映出产品的缺陷 2.倾向给与方案的人不适合,除非他是无障碍领域的专业人士(最低标准也得是了解W3C的相关规范并且有实际的案例并且一定要对测试的产品有深入的了解) 欢迎大家讨论

发表在 技术 | 留下评论

网站内容无障碍指南2.0 / Web Content Accessibility Guidelines (WCAG) 2.0 中文版

指南地址:http://accessibilityunion.org/WCAG20/ 只翻译了WCAG 2.0中最核心的内容,采用中英文对照。 该指南与之前北京联合大学的李先生翻译有所不同,大家可以对照着看。由于笔者水平有限,如有翻译不妥支出,请大家及时指出。 网站内容无障碍指南2.0包含一个广泛的、使网站内容更易于访问的建议。遵循这些指南可以让网站内容对于广泛的残障人士同样拥有可访问性,包括全盲和低视力、失聪和听力衰退、学习障碍、精神局限、行动受限、语言障碍、光敏性以及多重残障。遵循这些指南也会让你的网站内容对正常用户更加容易使用。 WCAG2.0成功标准是不做技术限定的可测试说明。指南提供了单独的文档来说明满足成功标准的特定技术以及对成功标准解释的信息。访问网站无障碍指南概况 / Web Content Accessibility Guidelines (WCAG) Overview查看介绍和WCAG技术以及培训资料的链接。 WCAG2.0继承了W3C在1999年三月发布的推荐标准网站内容无障碍指南1.0 / Web Content Accessibility Guidelines 1.0[WCAG10]。虽然网站内容可能符合WCAG1.0或WCAG2.0,或者两者都符合,但是W3C建议新创建的以及升级的内容要使用WCAG2.0。W3C也建议网站无障碍政策应以WCAG2.0为参考。 目录 WCAG 2.0指南 1 可感知的 1.1 为所有非文本内容提供文本替代方案,使其可以转化为用户需要的其他格式,比如,大字排版、盲文、语音、符号或者更简单的语言。 1.2 为基于时间的媒体提供替代方案。 1.3 在不丢失信息和结构的情况下,创建的内容可以在不通的方式中展现。例如:更简单的布局。 1.4 使用户更容易看到和听到内容,包括区分前景色和背景色。 2 可操作的 2.1 让所有功能都能有效的通过键盘操作。 2.2 要提供给用户足够的时间去阅读和使用内容。 2.3 不要设计已知的可以导致癫痫发作的内容。 2.4 提供可以帮助用户导航、查找内容以及确定当前所在位置的方法。 3 可理解的 3.1 让文字内容可读并且可理解。 3.2 让网页在可预见的方式中呈现和交互。 3.3 帮助用户避免和纠正错误。 … 继续阅读

发表在 技术 | 留下评论

W3C发布可访问富互联网应用(WAI-ARIA 1.0)的正式推荐标准

2014年3月20日,W3C的协议与格式工作组(Protocols and Formats Working Group / PFWG)发布了可访问富互联网应用(Accessible Rich Internet Applications / WAI-ARIA)1.0版及WAI-ARIA 1.0用户代理实现指南(WAI-ARIA 1.0 User Agent Implementation Guide)的W3C的正式推荐标准(W3C Recommendation)。 WAI-ARIA是一个为残疾人士等提供无障碍访问动态、可交互Web内容的技术规范。在WAI-ARIA概述中对WAI-ARIA及其他支持文档进行了介绍。 W3C董事兼创始人Tim Berners-Lee 评论说,“ARIA可以被广泛的用于增强很多不同技术的可访问性上。目前,HTML5已经开始使用ARIA,并且W3C发布的很多其他标准也开始使用ARIA。今日的Web是动态且交互的,所以对于向无障碍软件描述一个Web页面不同部分的功能是至关重要的,这样残障人士就可以有效的获取信息了” 。 WAI-ARIA填补了开放万维网平台所具有的诸多先进性能与实现其可访问性需求之间的空白。Web开发者创建了越来越多的用户界面控件,这些控件允许用户获取新的页面内容,而不必请求一个完整的页面刷新。当用户在页面上使用例如扩展菜单以及拖拽功能等交互特性时,WAI-ARIA支持浏览器和辅助软件之间的互操作性,这就为符合网站与应用的可访问性相关的国际标准“万维网内容无障碍性指南”(Web Content Accessibility Guidelines,简称WCAG)2.0提供了关键性支撑。   跨平台与跨设备可访问性解决方案 IBM主管新兴软件技术的副总裁Rod Smith先生说道,“今年我们庆祝万维网诞生25周年,在这25年的发展当中,Web延伸到越多越多的智能设备,比如智能手机和汽车,保证应用在这些移动智能设备上的可用性和可访问性,是至关重要的。当IBM把这项技术引进到W3C的时候,我们的目标就是打造一个更具包容性的富Web。WAI-ARIA通过跨设备的普世解决方案,降低残障人士访问Web信息的门槛,开创了此方面技术的先河” 。 WAI-ARIA把台式机应用的无障碍特性带到了万维网上。在台式电脑上,使用特别辅助软件的人们需要通过正针对特定操作系统的无障碍应用程序接口实现对其电脑的操作。WAI-ARIA使得同一类型的信息可以直接使用在Web应用上。 W3C同时也发布了WAI-ARIA 1.0用户代理实施指南(User Agent Implementation Guide),这份指南指导广大开发者在不同平台上实现无障碍支持特性,展示了浏览器,媒体播放器和移动应用程序如何可以从这些特性中受益。使用WAI-ARIA的内容开发者可以更容易的在不同平台上使用相同的Web内容,且不用担心丢失对无障碍性的支持。 实施进展 … 继续阅读

发表在 技术 | 留下评论

“跳过导航”链接

译者注:文章的英文原名为”Skip Navigation” Links,来自WebAIM。WebAIM组织为网站信息无障碍提供了全面的解决方案。所谓网站信息无障碍指任何人(无论是健全人还是残疾人,无论是年轻人还是老年人)在任何情况下都能平等的、方便地、无障碍地从网站上获取信息、利用信息。最近在学习无障碍相关标准与技术,本文主要探讨如何在页面上设置一个“跳过导航”链接以方便视障人群来使用网站功能。 英文原文:http://webaim.org/techniques/skipnav/ 译文原文:http://tid.tenpay.com/?p=4203 一、概况 在许多模板设计中都存在一个问题:页面的主要内容并不在页面的最开始的位置。使用屏幕阅读器的用户常常要听完一长串导航链接、次导航链接、网站logo、网站搜索框和其他元素后,才能到达主要内容区域。事实上,键盘使用者为了要到达主内容区域,必须tab过所有的顶部导航链接。如下图,由于页面布局,导航链接分布在顶部和左侧,用户需要跳过118个链接才能到达内容区。 二、创建“跳过导航“链接 很简单:在页面顶部提供一个可以使用户可以直接跳到主要内容的链接。在大多数情况下,它确实很容易,有不只一种方法来实现。一些方法也优于其他。这里要讨论的方法如下: 在页面顶部提供可见的链接 在页面其他地方提供可见的链接 使链接隐藏 先隐藏链接,直至它获得键盘焦后再显示 (1)在页面顶部提供可见的链接 创建一个跳过导航链接最简单的方法就是把它放在页面顶部,把响应锚点放到主内容区域开始的位置。 链接在左边、右边还是中间的位置不重要,最重要的是要确保这个链接是屏幕阅读器使用者进入页面后最先听到的内容,同时也是键盘最先tab到的内容。否则,用户可能完全没有意识到还有一个“跳过导航”链接,然后浪费时间在跳过那些无关的链接。屏幕阅读器使用者很容易对此感到不耐烦。 <body> <a href=”#maincontent”>跳过导航</a> … <h1><a name=”maincontent”id=”maincontent”></a>标题</h1> <p>第一段</p> </body> 总结:这种方法是非常有效可行的。 (2)在页面其他位置放置可见的链接 一些开发者认为这样放置跳过导航链接会不美观,破坏了页面布局。所以把链接移到其他不那么影响页面整体布局的地方。下面这个例子中,开发者就把链接移到了页面左下角的位置。 这样不会显得那么突兀。但是带来了一个问题:它不再是这个页面的第一个链接。屏幕阅读器使用者不能首先听到这个链接,键盘使用者也不能第一个tab到它。虽然可以通过设置链接的tabindex属性来解决,但是假使阅读器使用者并没有使用TAB键来听网页呢? 总结:这种方法并不是对所有用户都适合。 (3)不可见的链接 一些开发者决定隐藏这个链接。最常用的方法就是在页面顶部放一个透明的图片,并设置它的alt属性为“跳过导航”。 这解决了在布局的美观性上的问题。这对阅读器使用者也是完美的解决方案。然而,那些视力正常的键盘使用者看不到这个链接。当他们tab到这个链接的时候,他们不知道有一个链接在那,除非他们看到了浏览器底部的状态栏地址。 另一个类似的方法是使用CSS隐藏链接。这个方法比隐藏图片的方法更好,但是CSS会引起另一个问题:可能阅读器使用者也读不到这个链接了。更多信息查看“CSS in Action: Invisible Content Just for Screen … 继续阅读

发表在 技术 | 一条评论

提供客户端的校验和警告

虽然ajax已经普及,但仍然有一些政府网站和非IT类网站会有这样的机制——对用户的表单输入的校验程序由服务端进行,这对用户来说是一个很糟糕的体验,对于记忆力衰退以及盲人和性情偏狂躁的人来说,这种模式显得难以使用。在客户端进行脚本控制可以有效的解决此类人群的困难。 一旦发现错误,警告框将有相应的文本描述。当用户关闭对话框,我们利用脚本将焦点移动到相应的出错的文本域。 Exa <label for=”date”>Date:</label> <input type=”text” name=”date” id=”date” onchange=”if(isNaN(Date.parse(this.value))) alert(‘输入不符合格式,请重新输入’);” /> 另外,为用户提供一个标准的数据格式提供参考是个很好的方法,这样会增加用户输入的成功率。特别是对网络经验尚浅的人群。 在网页的文本域中输入不符合格式的数据,并且检验是否有相应的提示以及焦点管理。然后记录测试结果。

发表在 技术 | 留下评论

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

一个高可访问性的网站,不仅仅依赖于网站开发人员。要使更多的人可以访问你的网站,特别是残障人士。其实是需要依赖于多个组件共同协作才可以达到这个目标。这些组成部分包括: 内容:一个网页或者web应用中的信息,比如像文字、图片、声音这种自然信息以及用来实现结构、展示的代码和标记语言 网页浏览器,媒体播放器以及其他用户代理 辅助技术:大多数情况下指屏幕阅读软件、替代性键盘、开关装置、扫描软件、盲文显示器等等 用户:依赖与他们的经验、知识以及当时的网络和硬件环境使用web 开发者:设计师、工程师、作者等等,包括残疾人开发者以及贡献产生内容的用户 开发工具:可以创建web的软件 评估工具:网站无障碍评估工具、HTML校验工具、CSS校验工具等等 各个组件之间的关系,如下图: 网站开发者通常使用开发工具和评估工具来创建网站内容。 人们(用户)使用网页浏览器、媒体播放器、辅助技术或者其他的用户代理去获取以及与内容进行交互。 各个组件相互依赖。为了网站无障碍这些组件必须共同工作。以为图片上的替代文字为例(<img alt=”替代文字”/>): 技术规范:用来实现替代文本(HTML定义图片(img)的文字替代属性(alt)) WAI指南:WCAG、ATAG、UAAG定义了针对不同的组成部分如何实现无障碍(文字替代方案) 开发者:提供恰当的替代文本 开发工具:支持、促进、推动提供web中的替代文本方案 评估工具:用户帮助检测替代文本是否存在 用户代理:为替代文本提供人机接口 辅助技术:提供文本替代方案人机接口用来满足多种形式 用户:知道如何从他们的用户代理以及(或者)辅助技术中获取他们所需要的替代文本 各个组件相互作用形成闭环。其中一个环节实现了相应的特性,其他环节就很可能去实现这个特性。 当网页浏览器、媒体播放器、辅助技术以及其他的用户带来支持了一个无障碍特性,用户就更可能需要它,开发者就更可能在他们的内容中实现它。 当开发者希望在他们的内容中实现一个无障碍特性,他们就很可能去实现它如果开发工具可以轻松实现这个特性。 当开发工具可以轻松的实现这个特性,开发者就更可能在他们的内容中去实施它。 当一个无障碍特性已经在大量的内容中实施的时候,开发者和用户就会更加需要用户代理去支持它。 相反,如果一个无障碍特性在一个组成部分中没有被实现,当它无法到达一个用户体验的结果的时候,其他的组件也就几乎没有实现这个特性的动机。比如:开发者并不想实施这个特性因为开发工具不支持并且大多数的网页浏览器和辅助技术也没有实现这个特性。 如果一个组件对无障碍支持的不好,那么其他的组成部分就得通过变通的方式来达到某个效果,这对整个的无障碍也并不是好事。比如:开发者需要增加他们的工作量来拟补开发工具的不足,利用纯手工的方式来替代工具。用户则要利用不同的浏览器或者辅助技术来获取内容中信息,克服不同的可访问性问题。 大多数情况下,采用变通的方案是不现实的。由于一些组件的对可访问性支持的不好,所以导致很多残障人士只能使用特定的网站、网页或者功能。 不同组成部分的指南。W3C为不同的组件开发了相应的指南,分别是:ATAG,UAAG,WCAG。这些指南都是基于基本的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 … 继续阅读

发表在 技术 | 留下评论

利用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 … 继续阅读

发表在 技术 | 留下评论

创建符合逻辑的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 = 默认可聚焦的元素) … 继续阅读

发表在 技术 | 留下评论