Question

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

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

我已经开始对Web辅助功能进行一些研究，我主要在W3C上阅读材料。

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

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

我绝对不在这里寻找“有人写代码”。只是寻找关于使用qTip插件实现Web辅助功能的小例子和任何建议。

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时才隐藏内容， viz ：.js .hidden for选择器）：

.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/

Web辅助功能和qTip

1 个答案: