Image Sprites 对“高对比度”模式下背景图片显示优化 （1）

look_w

当前，越来越多的软件开发人员意识到可访问性 (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)显示器高对比度显示设置步骤：

• 开始 (Start)-> 控制面板 (Control Panel)-> 辅助功能选项 (Accessibility Options)：
  图 1. 设置辅助功能
• “显示 (Display)”tab 下，选择“使用高对比度 (Use High Contrast)”复选框：
  图 2. 使用高对比度
• 应用 (Apply)                        你也可以使用快捷键 ：左 Alt + 左 Shift + Printscreen