WebアクセシビリティとqTip

Question

最近、私はqTip jQueryプラグインを実装しました。私はそれを絶対に愛しています。最近私の上司とコードレビューをする際に、Web Accessibilityが議論に入り、具体的にはqTipが取り上げられました。

現在、qTipが有効なWebページの特定のアイコンにカーソルを合わせると、そのツールチップが表示されます。さて、マウスを使っている人にはうってつけですが、キーボードだけを使う人にとってはうまくいきません...

私はWebアクセシビリティに関するいくつかの研究を始めました。主にW3Cにあります。

私が探しているのは、qTipのキーボード/スクリーンリーダー機能を有効にすることです。

qTipをWebアクセシビリティに対応させる作業を行った人はいますか？

私はで、絶対にを探しています。「誰かがコードを書く人」を探しています。 qTipプラグインでWebアクセシビリティを実装するための小さな例とアドバイスを探しています。私はこれらの線に沿って何かをしたい

Answer 1

...

（むしろtitle属性に比べて）QティップHTMLマークアップにしたいコンテンツを追加します。

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

が持つQティップコンテンツを非表示にします

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

：CSSは（： .js .hiddenセレクタのためにもよりよいが VIZ、ユーザーはJavaScriptが有効になっていた場合にのみコンテンツを非表示に modernizrのようなものを使用することです） jQueryとQティップスクリプトを含む後

その後、Qティップを表示/非表示するためにQティップコンテンツのための隠されたコンテンツを使用してfocusinとfocusoutイベントを追加qTipsを作成します。

$('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/