月归档:2014 年三月

当元素获得焦点的时候使用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 … 继续阅读

发表在 技术 | 留下评论

如果没有水平滚动条

很多页面,甚至我所在的团队的最重要的门面也曾经有这样一个状况,无论怎样都不会显示水平的滚动条。在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/ 虽然我是一个视力健全的普通人,但是我知道在这个世界上有一些人在用不一样的方式和我们一起感受互联网所带来的变革。最近一段日子,“多屏互动浏览”成为了互联网上最热门的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 … 继续阅读

发表在 观点 | 留下评论

利用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 = 默认可聚焦的元素) … 继续阅读

发表在 技术 | 留下评论

WebP的可访问性

有些文件在有些时期,“天生”没有高可访问性。 今天下午一直在聊WebP,现在从网站无障碍的角度阐述一下这个文件的可访问性。WebP现阶段只支持webkit内核的浏览器,具体情况见下图。 从浏览器的角度来讲,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 … 继续阅读

发表在 观点 | 留下评论

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

基于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 … 继续阅读

发表在 技术 | 留下评论

提升无障碍开发效率的JavaScript键盘事件库

键盘事件可以提高网站的易用性,提高用户与网站的交互体验,或者是页面需要通过键盘输入来触发事件。这些都非常有必要使用快捷键或者是键盘输入条目。 将这些事件处理整合到 HTML 文档中,通过 JavaScript 来定义相关的功能,是另一个非常好的方法,让 web 应用像桌面应用一样方便操作。接下来我们要介绍收集到的 20 款 JavaScript 处理键盘事件的库,帮助用户处理各种键盘事件,方便实用,好好欣赏吧:) Keypress Keypress 是个有着许多特别功能的输入捕捉库,它非常容易使用,有个极小的脚本(约9kb),而且没有任何依赖。这个库支持所有主流的浏览器和操作系统,但是没在非英文的键盘上测试过。 Mousetrap Mousetrap 是个没有外部依赖的独立库,它最小约为 1.9kb,Mousetrap 非常容易扩展,只要页面中包括 Mousetrap 和需要扩展的 JavaScript 库就可以了。 Mousetrap支持的浏览器有: Internet Explorer 6+, Safari, Firefox 和 Chrome。 jQuery Hotkeys jQuery.Hotkeys 允许用户在源代码中添加或者删除各种键盘事件,几乎支持任何组合键。只需要一行代码就可以绑定或者解绑快捷键。支持(Win/Mac/Linux)平台上 的浏览器: IE 6/7/8, FF … 继续阅读

发表在 技术 | 留下评论

高中生开发Chrome插件,帮助色盲患者更为清晰的看到网上图片

尽管有这样的插件,但我们还是希望、越来越多的网站能够遵循信息无障碍的技术规范。帮助更多人享受到互联网、移动互联网的福祉。 本文转自:36kr。原文链接:http://www.36kr.com/p/210170.html 据统计,世界上有 8% 的男性和 0.5% 的女性有红绿色盲。也就是说,全世界上上亿人眼中是没有红色和绿色的,并且目前没有任何操作系统内置帮助色盲患者分辨颜色的功能。因此,印度高中生Animesh Tripathi编写了 Chrome 插件ReColor,帮助色盲患者更好的辨识色彩。 Tripathi 之所以编写 ReColor 是因为他的一个高中同学一直梦想成为飞行员,然而却因为被诊断出红绿色盲而无法达成梦想。Tripathi 这才开始关注世界上大量的色盲患者。Tripathi 设计了一套算法,对网页和视频中出现的红色和绿色进行一些处理,从而使这两种颜色在他们眼中是不同的,避免了这两种颜色的混淆。 凭借 ReColor,Tripathi 获得了去年Google Science Fair的印度第一名,并将代表印度参加今年的英特尔国际科学与工程大奖赛(Intel ISEF)。Tripathi 今年秋天会进入大学学习计算机科学,他希望进入大学后继续这项研究,造福更多色盲患者。 上图中,1是普通人眼中的图片,可以分辨出五堆水果;2是红绿色盲患者眼中的图片,只能分辨出三堆水果;3是普通人眼中经过ReColor处理的图片;4是红绿色盲患者眼中经过ReColor处理的图片,可以分辨出五堆水果。 [本文参考以下来源:mashable.com, vischeck.com]

发表在 技术 | 留下评论

使用CSS实现装饰性图片

基于Techniques for WCAG 2.0 C9: Using CSS to include decorative images 这点其实本来没什么可说的,学过CSS的人都应该知道这个,所以就介绍几个常见的用img替代装饰图片的错误做法。 首先,实现装饰性的图片有几下几个方法: background background-image content配合:before和:after list-style-image 下面说说可能会出现问题的地方 为低级浏览器做边框或者圆角的时候,很多人喜欢以“九宫格”的形成,然后在相应的边和角插入图片。这种情况不应该使用img。 导航设计的字体和背景还有鼠标划过以及当前状态,必须使用图片,否则单纯css达不到效果的时候,很多人直接上图。这种情况不应该使用img 某些页面的头图,这些页面多为事件,当然也有单纯的公司名字或者口号,很多人用背景来做。这种情况不应该使用CSS来把头图作为单纯的装饰,在代码层面,必须要有替代文字。使用img的时候,也必须书写完整的alt,或者根据实际情况切分成几个“小图”,每个“小图”赋予正确的alt。以下面的头图为例,采用CSS把头图作为装饰性的方案的话,在代码层面,推荐图片下面的代码内容。 推荐HTML: <div class=”undis” itemscope itemtype=”http://data-vocabulary.org/Event”> <a itemprop=”url” href=”http://news.qq.com/zt2014/2014chunyun/index.htm”><h1 itemprop=”summary”>2014春运-让爱回家</h1></a> <img itemprop=”photo” src=”http://mat1.gtimg.com/news/2014/chunyun/page-bg2.jpg” /> <span itemprop=”description”>腾讯网2014年春运特别报道-让爱回家</span> 时间: <time itemprop=”startDate” datetime=”2014-1-16T00:00-24:00″></time> … 继续阅读

发表在 技术 | 留下评论