作者归档:rockywen

关于 rockywen

平等、美好、安逸、自由 Accessibility Strategist 你已经努力的创造了一个伟大的应用,不要错过这个让他能服务更多用户的机会。还有,这是一件对的事情。

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

一个高可访问性的网站,不仅仅依赖于网站开发人员。要使更多的人可以访问你的网站,特别是残障人士。其实是需要依赖于多个组件共同协作才可以达到这个目标。这些组成部分包括: 内容:一个网页或者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 … 继续阅读

发表在 技术 | 留下评论

如果没有水平滚动条

很多页面,甚至我所在的团队的最重要的门面也曾经有这样一个状况,无论怎样都不会显示水平的滚动条。在windows7系统中,如果你按“微软键”+“左”或者“右”。又或者用鼠标点住一个窗口的标题栏,然后把鼠标移动到桌面的左侧和右侧,出现一个扩散的效果后松开鼠标。这两种操作都会使窗口自动占据屏幕的左侧或者右侧,宽度是二分之一。这个体验很好,在屏幕分辨率还不大的时候,我们同时开几个窗口的时候,可能会人为的调整窗口大小以更好的利用桌面的空间。 而且并不是所有的人都喜欢全屏看网页的。当网页的宽度比较窄的时候,没有水平滚动条的话,右侧的内容很难访问,除非使用鼠标选中文字后拖拽。所以没有水平滚动条一定是一个很糟糕的体验,当然有一个例外——即使没有水平滚动条,水平的内容也可以很好的展示出来。这有两种状况,一种是利用js来模拟,另外一种是我们经常说的响应式布局(Responsive web design)。 在很多文章中介绍说,水平滚动条对于认知感和视觉差的用户是很难比感知的,但是如果你如果你因为这一点而使更多的用户无法查看右侧的内容,就更加的让你的产品更加有障碍了。 比较恰当的解决方式是响应式布局Responsive web design,无论窗口是什么宽度,都可以完整的显示水平方向的内容。这样你就可以舍弃你的水平滚动条了。并且可以给用户一个比较好的体验。而且你还多了一个噱头~好吧,其实很多团队都是为了响应式而响应式。都说到这了,我就再说几句吧。 算了,还是别说了。  

发表在 观点 | 留下评论

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

发表在 技术 | 留下评论

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

发表在 技术 | 留下评论