高对比度显示模式下常见 Accessibility 问题分析及解决（2）按钮消失

look_w

问题一：按钮消失而在 Web 程序中，大量使用了图片元素传达信息，如按钮或链接，利用 CSS 加背景图达到美化效果，但由于高对比模式下，背景图片 (background-image) 会消失，导致按钮不可见，造成可访问性问题。以下截图用于演示问题。
示例截图Microsoft 首页，高对比模式下，下拉菜单按钮（倒三角型）消失
图 3. Microsoft 首页截图Youtube 首页， 编辑按钮，关闭按钮消失
图 4.Youtube 首页截图解决方案

• 改用前景图方式，采用 <img> 标签的 src 属性指定前景图片，并设置 alt 属性，代替 CSS 的 background，避免用背景图片显示方式。尤其是对功能性的按钮、链接的处理。
• 避免只用图片传达功能性信息，可以图片后加以文字描述，但这种方法受页面视觉设计的限制。不是所有场合都可以应用。
• 利用 image sprites 技术，详见：http://www.ibm.com/developerworks/cn/web/1108_zhangqun_imagesprite/index.html
• 利用 Dojo 的 widget，使用 Dojo.a11y.testAccessible() 方法来探测浏览器是否处于高对比度模式下，进行不同的输出，在显示背景图片的 DOM 节点里，正常模式下会将显示 backgorund-image 指定的图片 pulldown-icon.gif，用户可点击它展开菜单，在此 DOM 节点内新增一个用于显示图片替代字符的节点 <div class="pulldown-text"> ▼ </div>，用 CSS 指定它默认状态下不显示，即 display:none；但在高对比度模式下，Dojo 的 WAIState API 提供了一种方式来判断系统是否处于高对比模式，如果是则在 body 上增加一个名为 dijit_a11y 的类。那么我们可以结合 CSS 的后代元素选择器，在 CSS 里预定义，.dijit_a11y .pulldown-text {display:inline}，即 class 名为 dijit_a11y 节点下的 class 名为 pulldown-text 子节点，将在行内被显示出来。此时就达到了高对比度模式下，背景图片不可见，但替代字符被显示出来的目的。保证了信息的完整度。
• 利用 jQuery, 探测浏览器是否处于高对比状态来进行不同的输出。如：对高对比度模式下，使用文字来代替背景图片，保证信息的完整度。如：微软首页下拉菜单按钮，在高对比度模式下可采用字符“▼”来代替。

针对第五种方案，以下是思路及简单的示例代码。
方案五基本原理及步骤

• 如何来探测浏览器是否处于高对比模式下呢？在高对比模式下，所有的文字会变成黑色，链接变成蓝色，背景色也会变化。
• 利用背景色会变化这一现象，我们可以在 body 节点下新增一个 id 为 hcmtest 的 P 节点，并设置背景色，利用 left:-99999px 将它移出屏幕之外，不显示出来，当浏览器处于高对比模式下，将 p#hcmtest 的背景色值读取出来，
• 此时不再需要 p#hcmtest 节点，将其删除。并判断此节点的背景色是否已经发生变化，以此来检测 Web 页面是否处于高对比模式下。
• 由于不同的浏览器返回的颜色代码格式不同，所以需要比较 16 进制数值和 RGB 值，当发生变化时，即为 body 节点新增一个 CSS class，名为 a11y，而在 CSS 代码部分，由于 .a11y .pulldown-test{display:inline} 会生效，所以字符▼将会被显示出来。

代码片断示例DOM：

1	<div class="pulldown"><div class="pulldown-text">▼</div></div>

CSS 部分：

1 2 3

.pulldown{background-image:url(pulldown-icon.gif)} .pulldown-text {display:none} .a11y .pulldown-text {display:inline}

JS 部分：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

$(document).ready(function () {   // 增加一个额外的元素节点并赋于一个黑白两色除外的任意背景色，并将其移出屏幕显示范围之外 $("body").append(" <p id='hcmtest' style='position:absolute; top:0;left:-99999px;background-color:#878787;'>T</p>"); var testcolor = $("#hcmtest").CSS("background-color").toLowerCase(); // 获取此节点的背景颜色值 $("#hcmtest").remove(); // 不再需要此节点，将其删除 // 不同的浏览器返回的颜色代码值格式不完全相同 if (testcolor != "#878787" && testcolor != "rgb(135, 135, 135)") { // 在此为高对比度下显示设置特定的类 $("body").addClass("a11y"); } });

方案五优势与局限性

• 优点：对于色弱用户，提供了相应的文字解释，保证了功能的完整性。并对当面的代码结构不需要较大面积的更改，较省力。
• 缺点：需要刷新页面，才可探测到。利用 Dojo 的 Dojo.a11y.testAccessible() 无需刷新页面，这方面来说，代码还可以进一步改善。