Web辅助功能和qTip

Question

我最近实现了qTip jQuery插件,我非常喜欢它.在最近与我的老板进行代码审查时,Web Accessibility出现在讨论中,特别是qTip得到了解决.

目前我有qTip工作,当我将鼠标悬停在支持qTip的网页上的某些图标上时,会为用户显示工具提示.嗯,这适用于使用鼠标的人,但对于那些只使用键盘的人来说,那是行不通的......

我已经开始对Web Accessibility进行一些研究,我主要在W3C上阅读材料.

我想要做的是为qTip启用键盘/屏幕阅读器功能.

你有没有做过任何使qTip与Web Accessibility兼容的工作？

我绝对不是在寻找"有人写代码".只是寻找关于使用qTip插件实现Web Accessibility的小例子和任何建议.

Answer 1

我会沿着这些方向做点什么......

在qTip HTML标记中添加所需内容(而不是在title属性中):

<p>
<a href="#">
  <span class="hidden">This is the qtip content</span>
  And this is the link content
</a>
</p>

使用CSS隐藏qTip内容(更好的是使用类似modernizr的东西,只有在用户启用了JavaScript时才隐藏内容,即:.js .hidden对于选择器):

.hidden {
   position: absolute;
   display: block;
   top: -10000px;
   left: -10000px;
   font-size: 1px;
}

然后在包含jQuery和qTip脚本之后,使用qTip内容的隐藏内容创建qTips,并添加focusin和focusout显示/隐藏qTip的事件:

$('a').qtip({
   content: {
      text: function(api) {
         return $(this).children('.hidden').text();
      }
   }
});

$(document).ready(function(){
   $('a').focusin(function() {
      $(this).qtip('toggle', true);
   });
   $('a').focusout(function() {
      $(this).qtip('toggle', false);
   });
});

小提琴:http://jsfiddle.net/MnB6Q/