月归档:2013 年四月

新窗口打开链接的博弈

新窗口还是当前窗口打开,一直以来颇具争议。诚然,任何不分场景的强制使用某一种方式都是耍流氓。这里我就不一一分析场景了,这也需要用户研究同学提供的数据作为参考。在对用户使用场景做出了合理分析之后,我觉得还可以把细节做的更好。 继续阅读

发表在 技术 | 留下评论

雅安地震,前端开发者可以做什么?

写这些文字的时候,我的心情是凝重而复杂的。在自然灾害面前,人们是那么的脆弱。 在面对各种质疑的时候,你是否足够强大,也决定着你能走多远……那么在开发这种特殊类型的网页的时候,我们前端可以做什么? 继续阅读

发表在 观点 | 留下评论

光敏性癫痫

光敏性癫痫(photosensitive epilepsy,PSE)是反射性癫痫中最常见的一种形式,由视网膜受闪烁的刺激所诱发,于1885年由Gower首次报道。PSE在西欧国家十分常见(占癫痫患者的2%~10%),其中60%的患者首次发作由看电视引起。其他刺激如:电脑屏幕,舞厅的灯光,穿过树林的阳光,水面反光等亦常有报道。PSE在我国相对少见,近年来,由于我国城乡电视机、个人电脑及游戏机日益普及,PSE的研究理应受到重视。以下就近年来国外对PSE的研究进展作一综述。相关信息可查看http://www.cqvip.com/QK/90104X/200610/23033584.html 2007年6月,在介绍2012年伦敦奥运会的一段会徽的视频造成了一些人光敏性癫痫发作。虽然不及1997年日本的口袋妖怪事件。但这个视频使英国有23000人被置于癫痫发作的危险之下。 口袋妖怪事件:1997年12月16日18点51分34秒,日本观众正在收看动画《口袋妖怪》第38集“电脑战士3D龙”,当晚许多观众不约而同昏倒,造成六百多名大小观众送医。这事件成为动画界史无前例的轰动新闻,次日任天堂股票大跌,这事件也让口袋妖怪动画一度停播。 伦敦市长Ken Livingstone评论说:“如果你雇人设计会徽,但他们却没有进行基本的健康测试,你就得问他们拿这些钱都干了什么?” 衡量闪烁的方法很难,还好有工具可以分析。Photosensitive Epilepsy Analysis Tools(PEAP)能分析视频文件,找出闪烁的问题。

发表在 技术 | 留下评论

图片的alt属性

很多人都知道给图片添加alt属性,一方面来作为图片的替代文字,一方面作为对图片的说明,一方面为了SEO,另一方面是各方的要求。但是对于alt里到底要添加什么样的值绝大多数人是说不出所以然的。以下面的图片为例 看看各家网站对这个图片的alt值是如何定义的。 腾讯网:http://news.qq.com/a/20121115/001041.htm#p=2  无alt 新浪网:http://slide.news.sina.com.cn/c/slide_1_34240_27800.html#p=4  无alt 网易:http://news.163.com/photoview/00AN0001/29296.html#p=8GBO753D00AN0001&from=photoPrev  无alt 搜狐:http://pic.news.sohu.com/group-394394.shtml#0  无alt 有点无语了。看看这四个地址分别对应的title是什么。 腾讯网:高清:新一届中央政治局常委集体亮相_新闻_腾讯网 新浪网:新一届中央政治局常委亮相_高清图集_新浪网 网易:新一届中共中央政治局常委集体亮相_网易新闻 搜狐:新一届中央政治局常委亮相-新闻图片库-大视野-搜狐 现在应可以发现这个图片说的到底是什么了。从照片所处的上下文环境中,我们可以看出如果将这个网页的标题内容赋值给这个图片的alt是比较合适的(当然要去掉各个网站和频道的后缀)。 但是并不是说“新一届中共中央政治局常委集体亮相”是这个图片的唯一的alt值。一个图片的alt值一定要根据上下文来赋值,还是以这个图片为例子,我模拟一些上下文环境,并且赋予相应的比较合适的值。 可能是关于郑重场合着装的文章:alt=”在大多数的国家和政党事务中,与会者着黑色西服” 可能是关于绘画作品的文章:alt=”人民大会堂某厅的壁画某某某” 可能是特指某个人:alt=”中间的是习近平总书记” 可能是一个记者的微博:alt=”我在人民大会堂” 可能是描述新闻工作者:alt=”每逢重大会议记者们希望找到好的拍摄位置” 可能是描述如何投票的问题:alt=”决策参与人数为10人以内单数最佳” 而在本文中我使用的是:alt=”一个说明图片如何正确使用alt值的例子” alt值同样也不应该太长,一个简短的描述是比较合适的,保证用户一眼能看清楚的就好,屏幕阅读器用户1~2秒内听完。 屏幕阅读器会将<img />读作“图片 什么什么”。所以alt中的”的图像”、“高清组图”是多余的。

发表在 技术 | 留下评论

腾讯网无障碍说明

频道、专题页快捷键列表(有相应提示则表示此页面已部署) 12-27-2012 建立 按alt+Q 访问网页大纲(通过网页大纲,您可以在各个内容区域间进行快速切换) 新闻底层页快捷键列表(已部署频道:新闻、财经、娱乐、体育、公益、数码、科技、女性、时尚、健康) 10-29-2012 建立, 12-27-2012 更新 按alt+0 访问无障碍说明链接 按alt+1 访问首页链接 按alt+2 访问导航 按alt+3 访问正文 按alt+4 访问评论 按alt+5 访问相关新闻列表链接 当听到“视频区域,按回车播放(视频载入可能需要几秒),在播放过程中,按空格键暂停或者继续,您也可以按Esc键跳出视频。”的时候,可根据相关提示进行操作。 支持WAI-ARIA landmark 屏幕阅读器测试环境 NVDA 争渡读屏软件公益版 永德读屏软件6.3 可访问性代码校验点参考 10-29-2012 建立, 11-09-2012 更新 基于Federal Acquisition Regulation中的508&Illinois Center for Information … 继续阅读

发表在 技术 | 留下评论

淘宝信息无障碍设计标准

淘宝信息无障碍设计标准 编写部门:淘宝无障碍小组 前 言4 淘宝信息无障碍设计标准6 1 范围6 2 概述6 3 定义和缩略语8 4 内容的可感知性13 4.1 为所有非文本内容提供替代文本13 4.1.1 等级1 要求14 4.1.2 等级2 要求14 4.1.3 等级3要求15 4.1.4 等级4 要求15 4.1.5 等级5 要求16 4.2 为多媒体信息提供同步替代文本16 4.2.1 等级1 要求16 4.2.2 等级2 要求16 4.2.3 等级3 要求17 4.2.4 等级4 要求17 4.2.5 等级5 要求17 4.3 保证信息和结构可以与表现相分离18 4.3.1 等级1 要求18 4.3.2 等级2 要求19 4.3.3 等级3 要求19 4.3.4 等级4 要求19 4.3.5 等级5 要求20 4.4 前景文字和背景要容易区分20 4.4.1 等级1 要求20 4.4.2 等级2 要求20 4.4.3 等级3 要求20 4.4.4 等级4 要求21 4.4.5 等级5 要求21 5 内容中的接口组件的可操作性21 5.1 所有功能都可通过键盘接口操作21 5.1.1 等级1 要求22 5.1.2 等级2 要求22 5.1.3 等级3 要求23 5.1.4 等级4 要求23 5.1.5 等级5 要求23 5.2 用户在阅读或与网页交互时可以控制时限24 … 继续阅读

发表在 技术 | 留下评论

页面或文字禁止缩放

当你到了可以得花眼的年纪或者你的长辈跟你说你们的网站文字怎么这么小又或者你的BOSS用的是11寸的air……这时候你就明白为什么不能禁止网页或文字的缩放了。 比较滥用的导致文字无法缩放的属性值-webkit-text-size-adjust:none。将none改为100%,应该不会影响你原有的需求,也保证了可以缩放。

发表在 技术 | 留下评论

页面重定向

原来我们就犯了这样一个错误,当用户访问到某一个不存在的页面时,在页面中间显著的位置写着“3秒钟后自动跳转到首页”或者设计一个让人感觉此页面不能用的界面然后几秒钟后跳转。所谓告知用户跳转时间点的“人性化”设计,在屏幕阅读器用户中几乎没有积极的效果,也许用户刚刚听完页面的title或者刚刚到达导航的时候,页面就跳转了,你所谓的“人性化”设计根本是无法到达的。不要剥夺用户对网站的控制权,如果你非要设置跳转,请设置为0秒。 个人推荐的一个好的方式是腾讯公益的404页面。

发表在 技术 | 留下评论

弹窗

很多次使用屏幕阅读软件测试我们自己的产品的时候都想骂娘,原因就是页面刚刚载入之后,还没等焦点移动到有意义的内容之前,焦点瞬间就被弹出的小窗口广告给争夺了过去。完全打断了原先希望的操作流程。 试想,当你蒙上双眼,焦点被莫名其妙的移动到一个弹窗上之后,你如何能返回到原来的流程中,你的安全感是不是受到了挑战?

发表在 技术 | 留下评论

成语与俚语

上一篇文章中提到了一个成语“大相径庭”,而且并未给出这个成语的含义。这也是一个常见的会给用户带来障碍的问题,很可能对一个词语的理解的偏差给用户造成不符合他们预期的体验或者读者压根就不明白这个词语的意思。在这篇文章最后,我会注明“大相径庭”的含义。我先列举几个大家经常用错的成语从而体会使用成语和俚语等词汇时候附带解释的好处。 首当其冲:比喻最先遭受攻击或者遭遇灾害。经常被误用成先接受人物,先做某事。 差强人意:原指还能振奋人的意志,现在表示大体上能让人满意。经常被误用为不能使人满意。 炙手可热:比喻权势大,气焰盛,(多指权贵气势盛)使人不敢接近。经常被误用为热门的事物。 大相径庭: 【读音】 dà xiāng jìng tíng 成语:大相径庭 【释义】径:门外的路;庭:门院里的地。《庄子·逍遥游》:“大有径庭,不近人情焉。”后来用“大相径庭”表示彼此相差很远或矛盾很大。例句:他们的意见大相径庭,无法折中。 【出处】庄周《庄子·逍遥游》:“吾惊怖其言,犹河汉而无极也。大有径庭,不近人情焉?” 【解释】指事物区别明显,意见、看法截然不同。一般作谓语。 【结构】偏正式。 【近义词】泾渭分明、截然不同 、天壤之别、大异其趣 【反义词】一模一样、如出一辙、大同小异

发表在 技术 | 留下评论