大家好,合规专家们!
我被要求使我们的Web应用程序符合508部分和WCAG 2.0指南。对于大多数事情来说,这并不太棘手,但我遇到了一些问题。
我在应用程序中经常使用qtip,因为它使用wai-aria角色和described-by属性,所以它通常是符合标准的。但是,我添加工具提示的方式是在第一次鼠标悬停时才将其放在文本上,这显然在键盘导航时不会发生,我也不确定屏幕阅读器如何处理这种情况!
我在这里制作了一个fiddle:http://jsfiddle.net/patriciavandermeer/xkhy6/2/,演示了我的问题。工具提示是HTML,最终用户可以在其他地方设置它们,并且列表项可能有或可能没有工具提示。
我考虑让工具提示在:focus时应用并显示(并在失去焦点时隐藏),但是那样我需要给span添加tabindex,我不确定所有主要浏览器是否都能很好地处理它?
还是应该咬紧牙关,在文档准备就绪时连接工具提示?当我以那种方式设置它时,在一些繁忙的页面上会出现严重的性能问题。
编辑:这里是将用于连接工具提示到span的示例HTML和我使用的jQuery / JavaScript。
示例HTML:
<li >
<span class="InteractiveToolTipMe">Administration</span>
<div class="InteractiveToolTip NoDisplay"><p>This is a description</p>
<p> </p>
<p>For administration.....</p></div>
</li>
<li >
Board and Committees
</li>
<li >
Community Outreach
</li>
<li >
<span class="InteractiveToolTipMe">Fundraising</span>
<div class="InteractiveToolTip NoDisplay"><p><strong>test</strong></p>
<p> </p>
<ul>
<li><strong>test</strong></li>
<li>test</li>
<li>test</li>
</ul>
</div>
</li>
<li style="padding:2px;">
Physics
</li>
<li style="padding:2px;">
Public Speaking
</li>
<li style="padding:2px;">
Special Events
</li>
</ul>
JavaScript用于附加工具提示:
$('span.InteractiveToolTipMe').live("mouseover", function () {
var $this = $(this);
if (!$this.data("toolTipAttached")) {
var content = $(this).parent().find('.InteractiveToolTip').html();
$this.qtip({
content: {
text: content
},
position: {
target: 'mouse',
adjust: {
mouse: false
},
viewport: $(window)
},
hide: {
fixed: true,
delay:350,
when: 'mouseout'
},
show: {
solo: true,
delay: 350,
ready: true
},
style: {
widget: true,
tip:false,
classes: "LegendTip"
}
});
$this.data("toolTipAttached", true);
//$this.trigger("mouseover");
}
});