Web Accessibility和qTip

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> 

隱藏qTip含量CSS（甚至更好的辦法是使用類似modernizr只隱藏的內容，如果用戶已啓用瀏覽，即：對於選擇.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/