2008 年，致力于开发 Web 标准的国际组织万维网联盟（World Wide Web Consortium，W3C）发布了 Web Content Accessibility Guideline (WCAG) 2.0。WCAG 2.0 文档定义了一系列指导方针，以提高 Web 内容对于残疾人的可访问性。

当前，越来越多的软件开发人员意识到可访问性 (Accessibility) 的重要性，发布的网页或应用程序必须能够被多种用户特别是残疾人群无障碍使用，美国、澳大利亚、爱尔兰、英国都颁布了相应的法律，要求网页符合 Accessibility，为残疾人、老年用户、色盲用户提供友好，可读的页面是有必要的。对 Web 开发人员来说，页面需要在任何解释环境下都具有良好的灵活性，充分考虑到页面设计过程中不同的情形，例如色盲、色弱人群在色觉上有所欠缺，他们可能无法容易地阅读网页内容，在访问网页时使用“高对比度显示设置 (High Contrast Mode)”。那么不好的网页设计会导致图片丢失，元素不能被访问到。本文主要探讨高对比度显示模式下背景图片不可见问题的优化处理，并提供示例代码。

简介

Web 页面图片显示方面，由于客户端每显示一张图片都会向服务器发送请求。所以，图片越多请求次数越多，造成延迟的可能性也就越大，Web 设计中大量应用 CSS Sprites 技术，它允许将一个页面涉及到的所有零星图片都包含到一张大图中去。这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地进行载入。利用 CSS Sprites 能很好地减少了网页的 http 请求数，从而大大的提高了页面的性能。由于 CSS Sprites 的原理是将一系列图片整合到一张图片文件中，再利用 CSS 的“background-image”，“background-position”属性的组合进行背景定位，分别显示。而色盲用户在使用 Windows 高对比显示设置时，”background-image”不能被识别出来，这就造成了背景图片的丢失，不可访问。若背景图片为装饰性图片，则此问题可以忽略。若此时背景图片为功能性图片，则会造成可访问性问题。利用 <img> Sprites 是一个解决方案。

回页首

高对比度显示设置 (High Contrast Mode)

显示器高对比度显示设置步骤：

1. 开始 (Start)-> 控制面板 (Control Panel)-> 辅助功能选项 (Accessibility Options)：

   
   
   图 1. 设置辅助功能
   
   
   

2. “显示 (Display)”tab 下，选择“使用高对比度 (Use High Contrast)”复选框：

   
   
   图 2. 使用高对比度
   
   
   
3. 应用 (Apply)

   你也可以使用快捷键 ：左 Alt + 左 Shift + Printscreen

回页首

示例截图

为了演示问题，对 Yahoo 网站在 Windows 高对比度模式下的显示进行截图如下。

类似的情况比较普遍，很多站点大量应用 CSS Sprites 技术来提高页面性能和用户友好性的同时，对于“高对比度模式用户”来说，却造成了可访问性问题。

回页首

<img> Sprites

谈到 CSS Sprites，大多数 CSSer 都知道，其基本原理就是把网站上用到的一些图片整合到一张单独的图片中，再利用 CSS 的“background-image”，“background-position”属性的组合进行背景定位，分别显示。可是 background-image 元素在高对比模式下却不能被识别，导致图片不可见，传递的信息丢失。

然而 <img> 元素却可以正常使用，我们何不尝试一下和 CSS Sprites 同样的原理，但却用 <img> 标签剪裁显示图片来优化？这就是 Image Sprites 的基本思想，并且这样做还有一个好处是，页面 <img> 元素是可以被打印出来的。

回页首

Demo 示例

先制作一张图片，将五个 LOGO(270*110px) 合并成一张图片 (270*550px)，如下：

				
 <h1>img Sprites demo</h1> 
 
 <ul> 
 <li class="baidu"><img src="logoset.jpg" alt="">Baidu Logo</li> 
 <li class="google"><img src="logoset.jpg" alt="">Google Logo</li> 
 <li class="taobao"><img src="logoset.jpg" alt="">Taobao Logo</li> 
 <li class="yahoo"><img src="logoset.jpg" alt="">Yahoo Logo</li> 
 <li class="ebay"><img src="logoset.jpg" alt="">Ebay Logo</li> 
 </ul> 

为图片设置”alt”属性，可以使屏幕阅读器忽略它，文字”Baidu Logo”有利于搜索引擎，提升 SEO，在图片被禁止显示时，也有相应的文字描述，提高友好性。

				
 li { 
	 overflow: hidden; 
	 position: relative; 
	 height:110px; 
	 width: 270px; 
	 float:left; 
	 margin:5px; 
 } 

 li img { 
	 position: absolute; 
 } 

 li.baidu img { 
	 top: 0; 
 } 
 li.google img { 
	 top: -110px; 
 } 
 li.taobao img { 
	 top: -220px; 
 } 
 li.yahoo img { 
	 top: -330px; 
 } 
 li.ebay img { 
	 top: -440px; 
 } 

采用子容器绝对定位，利用 top，left 属性切割图片，将图片部分显示于相应的位置，如有需要，也可以为 img 设置 width，height。

回页首

测试页面

快捷键 左 Alt + 左 Shift + Printscreen 启动高对比模式。对比一下 CSS Sprites demo 和 Img Sprites demo 页面之间的差别。

• CSS Sprites Demo
• Img Sprites Demo

用 img Sprites 在高对比模式下图片正常显示，对于 text only browser 来说，也有相对应的文本显示图片内容信息。同时，当需要打印页面时，background-image 是默认不会被打印出来时，而 img Sprites 也顺便解决了这个问题。

回页首

Img Sprites 的局限性

• 它必需包含在一个块级元素 (block element) 或是内联元素 (inline element) 中。
• 在 <fieldset>、<legend>、<input>、<button>、<table>、<tr>、<td>、<th> 中失效。
• :hover 鼠标翻转图片效果不得不利用 JS 处理。而 CSS Sprites 可以轻易处理 hover 效果。
• 当图片禁止显示时 (text-only-browser)，对文字进行放大或 re-size 时，超出宽高的文字部分会被剪裁掉。

回页首

总结

由于 CSS Sprites 的原理是利用 CSS 的“background-image”、“background-position”属性的组合进行背景图片定位并显示，而“高对比度”模式下 background-image 不能识别出来，从而导致可访问性问题，而 image Sprites 原理是使用 <img> 标签替代，可以有效解决高对比度下背景图片不可见的问题。作为一个解决方案，Img Sprites 也有弊端，实际应用中还需要视情况而权衡。譬如 Image Sprites 应用在网站 LOGO 显示上就是不错的选择。而当使用 CSS Sprites 时，我们也可以在背景图片背后藏上文字，这样即使背景图片消失，对于色弱用户，也有相应的文字解释，也是一种较省力的解决办法。

回页首

下载

关于下载方法的信息

参考资料

学习

• 口碑网 logo 分析：image Sprites 技术实例分析，口碑网 LOGO 的剪裁显示。
  
  
• CSS Sprites: How Yahoo.com and AOL.com Improve Web Performance：yahoo.com 和 AOL.com 利用 css Sprites 提升页面性能。
  
  
• Web Content Accessibility Guidelines (WCAG) 2.0：WCAG 2.0 内容可访问性指南 2.0。
  
  
• High Contrast: Choose a High Contrast Color Combination to Improve Screen Resolution：高对比模式设置步骤参考。
  
  
• Section 508 of the Rehabilitation Act ：康复法案，508 条例。
  
  
• developerWorks Web development 专区：通过专门关于 Web 技术的文章和教程，扩展您在网站开发方面的技能。
  
  
• developerWorks Ajax 资源中心：这是有关 Ajax 编程模型信息的一站式中心，包括很多文档、教程、论坛、blog、wiki 和新闻。任何 Ajax 的新信息都能在这里找到。
  
  
• developerWorks Web 2.0 资源中心，这是有关 Web 2.0 相关信息的一站式中心，包括大量 Web 2.0 技术文章、教程、下载和相关技术资源。您还可以通过 Web 2.0 新手入门栏目，迅速了解 Web 2.0 的相关概念。
  
  
• 查看 HTML5 专题，了解更多和 HTML5 相关的知识和动向。
  
  

讨论

• 加入 developerWorks 中文社区。查看开发人员推动的博客、论坛、组和维基，并与其他 developerWorks 用户交流。
  
  

关于作者

张群是 IBM 中国开发实验室的一名软件工程师，她对交互设计，用户体验及页面开发较有兴趣。你可以通过 enjoy_365@hotmail.com 与她联系。

为本文评分

评论

回页首

内容

• 简介
• 高对比度显示设置 (High Contrast Mode)
• 示例截图
• <img> Sprites
• Demo 示例
• 测试页面
• Img Sprites 的局限性
• 总结
• 下载
• 参考资料
• 关于作者
• 评论