分类目录归档:技术

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

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

发表在 技术 | 留下评论

使用CSS的letter-spacing属性来控制文字间距

以前我们说这个问题的时候,都是从代码是否干净的层面来切入。今天我们从网站无障碍的角度来阐述这个问题。 基于Techniques for WCAG 2.0 C8: Using CSS letter-spacing to control spacing within a word 我们最常见到的例子就是中国人的名字,当你把一些两个字和三个字的人名排列在一起的时候,一般都会有这样一个潜在的需求,就是要求两个字名字的中间需要一个空白,从而保证两个字和三个字的名字看起来一样宽。不讨论这样一个要求是否合理,但从实现的角度来看有以下集中方法。 第一,两个字中间输入全角的空格(汉字) 第二,给其中一个字添加一个dom,然后利用样式修改这个DOM的盒模型或者添加text-indent 第三,为两个字的名字增加一个class, 定义letter-spacing,以及较为精准的测试width与文字实际宽度。如果你定义width:4em,letter-spacing:1em,这就意味着只能显示两个文字,因为空白还占据了一个em。另外,每一个文字的实际宽度是文字本身与它右边空白的宽度的总和,也就是说,当文字是12px,空白是1em,如果你的容器小于48px,那么你无法把两个字显示在同一行里面。 第一种方法,在辅助技术解释的时候,很大程度上中间的空格会导致停顿和真正的空白,从而破坏一个词语;而第二种,几乎可以完全肯定,辅助技术会将其处理为两个对象。所以从这点来看,第三种的可访问性是最强的,然后是第一种,最后是第二种。 CSS: h2 { letter-spacing: 1em; } HTML: <h2>Museum</h2> 当你发现页面中文字的间距是不正常的话,你可以检查一下是否是使用letter-spacing来控制的空白,并且可以将结果记录为:#1 是

发表在 技术 | 留下评论

利用脚本构建是否显示“非必要alert”的选项

基于Techniques for WCAG 2.0 SCR14: Using scripts to make nonessential alerts optional 这个技术方案主要针对显示给用户的对话框信息(alert)。当alert显示的时候,它强行的接收焦点(浏览器特性),用户必须点击“确定”按钮才能关闭这个对话框。当这些alert显示的时候可能会分散用户的注意力,打断用户的操作,甚至造成焦点的迷失,特别是那些非紧急(重要)的信息(无需用户必须点击“确定”确认的),比如单纯的显示某个信息。那么在网页中提供一个可以控制是否显示这些非紧急(重要)的信息(alert)的机制,就是这个技术方案的目的。 可以提供一个全局的javascript变量用来存放用户配置是否显示这些alert的信息。默认的值是false。在alert显示之前,包裹它的函数判断这个变量的值。使用这个包裹他的函数来调用原生的alert()函数。在页面中提供一个按钮,让用户选择是否在页面中显示alert。每次页面载入的时候,除非用户手动的选择开启,否则alert都是默认不显示的。网站作者可以利用cookie来存储用户与网站回话中的所选择的设置。 其实上面所说的这个机制与在chrome中多次弹出alert之后就会弹出是否禁止alert的机制一样。在代码之后,我会谈谈对这个技术方案的看法。 javascript: <script type=”text/javascript”> var bDoAlerts = false; function modifyAlerts(isEnabled) { bDoAlerts = isEnabled; } function doAlert(aMessage) { if (bDoAlerts) { alert(aMessage); } } var gCounter … 继续阅读

发表在 技术 | 留下评论

使用CSS隐藏链接文本的一部分

基于Techniques for WCAG 2.0 C7: Using CSS to hide a portion of the link text 这个技术的目标是为了在那些支持CSS的用户代理中,利用样式不显示为描述链接特征而增加的文本。这么做的主要目的是,一方面屏幕需要显示较少的链接文本,另一方面辅助技术(比如屏幕阅读软件或者点字显示器)或者某些情况需要阅读或显示更详细的链接文本。 在C7的代码实例是想描述一种可以被屏幕阅读软件阅读隐藏本文的方法,所以它推荐利用一个一像素宽高、溢出隐藏并结合定位在显示区域以外的方式,并且明文阐述不要使用visibility:hidden或display:none这样的属性。这是因为几乎所有的屏幕阅读软件遇到这两个属性都不会阅读应用了这个属性的容器中的内容。实现对辅助技术可见,对屏幕不可见的样式方法另外还有以下两种:text-indent;clip。大家可以自己尝试,切记,一定程度取决于辅助技术的实现机制,所以无论什么时候,请在目标辅助技术中进行测试。 由于上面描述的情景并不一定是每个网页都需要的,所以这一条并不是一个通用技术,切记。下面的例子隐藏了一部分文字,但它对辅助技术仍然有效,可以使辅助技术用户更加确定链接的目的。 CSS: a span { height: 1px; width: 1px; position: absolute; overflow: hidden; top: -10px; } HTML Exa1: <?xml version=”1.0″ encoding=”UTF-8″?> <!DOCTYPE html … 继续阅读

发表在 技术 | 留下评论

基于结构化标记定位内容

基于Techniques for WCAG 2.0 C6: Positioning content based on structural markup 这个技术是为了验证如何通过样式表增强视觉外观,当没有应用样式表的时候仍然可以保证有意义的展示。使用CSS中的定位属性,内容可以显示在用户视图中的任何位置。使用结构化元素,当样式无效的时候确保仍然可以确定内容的含义。 下面的例子利用结构化元素<dl>(自定义列表)来标记内容。利用样式让内容转化为两列的形式。每一个class都采用绝对定位并且设置外边距来覆盖默认的HTML样式,比如<dd>的缩进。 HTML: <div class=”box”> <dl> <dt class=”menu1″>Products</dt> <dd class=”item1″>Telephones</dd> <dd class=”item2″>Computers</dd> <dd class=”item3″>Portable MP3 Players</dd> <dt class=”menu2″>Locations</dt> <dd class=”item4″>Idaho</dd> <dd class=”item5″>Wisconsin</dd> </dt> </dl> </div> CSS: .item1 { left: 0; … 继续阅读

发表在 技术 | 留下评论

详解腾讯正文中视频区域的无障碍方案

在腾讯视频组件升级以前(你可以理解为中国互联网现在大部分的播放器还是在升级之前的状态),很少有人会去实现键盘对它的操作问题。作为第三方的页面(腾讯新闻页面),在正文中潜入相关的腾讯视频。其实这里想说的重点不是关于播发器的可访问性问题,而是说如何“无缝”的让视频称为周围上下文的一部分。 当屏幕阅读器用户听完摘要之后,在按光标键很可能就到到视频播放器的位置,当焦点到达这个区域的时候,我要说的重点就来了——“操作提示”,我们要告诉用户现在在视频区域了,你可以按空格键播放和暂停视频,按Esc键退出视频,按左右键调整播放进度,按上下键调节音量。这些操作上的提示要如数的告知给用户。 然后你就要看播放器的接口了,是否有相应的方法可供调用,然后实现。 当按Esc的时候,退出(停止)视频,这里有一个注意事项,焦点应该去哪里?按理说,应该是到视频的后面,是的。同样我也给用户一个提示,告诉用户,现在已经退出视频区域,你可以按下键阅读下面的正文,你还可以按上键重新回到视频区域。核心就是告知用户当前的位置和后续的操作提示。让用户可理解,可操作。 这篇和上一篇《详解腾讯网文章页无障碍方案》较为详细的阐述了腾讯网新闻页面的无障碍方案,没有什么特殊的代码,因为这些功能实现起来并不复杂,是不过要搞好tab order和焦点管理。 随着对知识的理解,整个新闻页的技术方案,现在看来并不太好,如果要我级打分的话,以现在的认知我会打60分。在我脑中现在有了一个更好的方案,待到实践检验之后,再和大家分享。

发表在 技术 | 留下评论

详解腾讯网文章页无障碍方案

中国农历年交替之际,发布一些无障碍方案,供大家讨论和参考。 阅读新闻是屏幕阅读器用户上网的一个重要活动,对于承载着最终信息的页面,其访问量和重要性是整个站点的重中之重,特别是对于门户网站。无论在北京五道口搜狐大厦中的宣传语,还是在腾讯网的项目组架构上都能看到这一点。 屏幕阅读器用户如何浏览文章页? 屏幕阅读器依靠焦点来整合DOM本身语义,属性以及标记的内容,那么阅读的顺序,一般来说就是基于DOM的顺序,所以这里重新强调一次,视觉顺序和DOM顺序的问题,作为一个重构者,你要可以分辨出信息的重要性,从而编写出符合逻辑的DOM顺序。那么一般的文章页面,其DOM顺序从上到下基本为:全站导航、登录、广告、面包屑、搜索、文章标题、文章相关信息、正文、其他信息、评论。 参见:李克强总理看完留守儿童的相关新闻 http://news.ifeng.com/mainland/special/2014chunjie/content-3/detail_2014_01/27/33418402_0.shtml http://news.sohu.com/20140128/n394302855.shtml http://news.sina.com.cn/c/2014-01-28/020529362593.shtml http://news.163.com/14/0127/14/9JJR959V00014JB6.html http://news.qq.com/a/20140128/000817.htm 先来还原下一般的屏幕阅读器用户是如何浏览正文的(这也是最重要的目标,难道你会到新闻页面去查看其他什么其他东西么?当然可能网易不太一样,因为网易跟帖在我看来比新闻正文还有吸引力)。首先页面载入,用户听到title,由于各个新闻页面的title采用倒装面包屑,所以首先听到的就会是该页面(该文字的标题),从而了解文字标题和访问正确与否。接着按tab键或者是光标键,遍历到正文,浏览正文。刚才说过,在正文前面有很多功能组件,一个一个的听,越过起码小50个元素(带有内容的DOM和表单元素以及对象),然后开始听正文。正文前面的这些东西对目标来说,是“无用”的,快速的越过它们是我们需要做的。而很多用户其实也是通过自己的办法这么做的。 有一些经验的用户是这样操作的,他们在听过一定次数的文章之后,就会发现,好像这个网站所有的文章页面的架构几乎都是一样的。这事一个重要的发现,他们没有视觉,你想一下用听觉来辨认两个东西是相同的是以一件多么困难的事情。但他们发现每个新闻页面技术是一样的时候,他们就会视图寻找一些可以快速到达正文方式,比如一般的正文前面都有一个搜索框,这个搜索框是一个表单,这些有经验的用户就会使用读屏软件本身拥有的遍历表单的快捷键来先遍历表单到这个搜索框,比如e键。这样基本按一下就到这个搜索框了,然后再按几下光标键就到达正文处了。 作为网站作者,我们可以通过一点点的代码,让用户可以通过某些快捷键快速到达正文的位置,具体技术并不复杂,腾讯网文章页讲数字3作为快捷键,为正文区域添加了tabindex=”-1″,然后使用js将焦点移动到这个区域上,从而完成到达正文的功能。 为什么是tabindex=”-1″?div本身并不是一个可以聚焦的元素,所以需要设置tabindex来使其可以被聚焦,理想的值应该是tabindex=”0″(数字零),这样可以使用鼠标、键盘、js来聚焦。但是为什么设置了tabindex=”-1″呢?这是因为所在环境的无奈,大家知道当一个元素可以被聚焦的时候,当其拥有焦点,ie浏览器中相关区域产生一个虚边,而chrome等浏览器中该元素会有一个比较粗的高亮的边框,比如黄色。这种虚边或者粗线边框是产品经理所不能接纳的,他们认为不美。没办法,谁叫团队不是技术主导呢。只能如此了,所以设置成-1就避免了这些个问题,当然为了健壮我们还要将ouline设置成“看不见”的样子。 本着这个思路,腾讯网文章页共设置了6个快捷键,详见http://www.qq.com/accessibility/ 拥有了这六个快捷键,但是用户如何能知道呢?当一个元素拥有accesskey属性,当这个元素获得焦点的时候,屏幕阅读软件会读出类似快捷键alt+值的信息(不通读屏软件细节不通,但肯定都可以辨识),虽然可以辨识,但是用户可能并不能认知。这样我们就需要通过一种方式告诉用户,我们的页面提供了某些“额外”的功能。 那么,我就在页面最开始的位置写一个简短的提示,告诉用户我们的页面提供哪些功能,这个提示不能太长,这样听起来麻烦,也不简约(如果不理解为什么要简约,建议脑补)。但一个简单的提示并不能概括我们提供的所有的功能,所以我把文字提示作为链接,链接指向的页面有详细的无障碍说明,这样保证,你想听所有功能,你就跳转过去,否则也不影响你主要的体验,因为提示的重要内容就是告诉用户如何跳转到正文。相见腾讯网新闻页面的代码。 <a accesskey=”0″ style=”width: 0; height: 0; overflow: hidden; display: block; font: 0/0 Arial;” title=”按alt+3阅读正文,您也可以现在按回车查看详细的无障碍说明,或者使用上下键进行线性阅读” href=”http://www.qq.com/demo/accessibility.htm” target=”_blank”>无障碍说明</a> 这种模式很快的被大家所认可,所以你在QQ空间、QQ信箱、腾讯微博等产品上都可以看到这种提示的身影,并且都对应一个较为详细的无障碍说明。 在腾讯文章页的内部,还有另外一个功能,就是对视频的键盘支持,将视频“无缝”的嵌入在正文中,让盲人用户也可以听视频了。这都是前所未有的体验。 正文中视频区域的无障碍方案,相见《详解腾讯正文中视频区域的无障碍方案》

发表在 技术 | 留下评论