accessibility - Web 可访问性和 qTip

Question

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

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

我已经开始对 Web Accessibility 进行一些研究，并且我主要阅读了 W3C 上的资料。 .

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

你们中的任何人都做过使 qTip 与 Web 可访问性兼容的工作吗？

我绝对不是在这里寻找“编写代码的人”。只是寻找关于使用 qTip 插件实现 Web 可访问性的小示例和任何建议。

Answer 1

我会按照这些思路做一些事情......

在 qTip HTML 标记中添加您想要的内容(而不是在标题属性中):

<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 用于选择器):

.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);
   });
});

fiddle :http://jsfiddle.net/MnB6Q/