Web Accessibility und qTip

Question

Ich habe vor kurzem das qTip jQuery Plugin implementiert und ich liebe es absolut. Als ich kürzlich mit meinem Chef einen Code-Review durchführte, kam Web Accessibility in die Diskussion und speziell qTip wurde angesprochen.

Momentan funktioniert qTip so, dass wenn ich über bestimmte Symbole auf meinen qTip-fähigen Webseiten schwebe, ein Tooltip für den Benutzer angezeigt wird. Nun, das funktioniert gut für Leute, die eine Maus verwenden, aber für diejenigen, die nur eine Tastatur verwenden, wird das nicht funktionieren ...

Ich habe begonnen, etwas über Web Accessibility zu tun, und ich habe Material gelesen in erster Linie auf W3C.

Was ich tun möchte, ist Keyboard/Screen Reader-Funktionalität für qTip aktivieren.

Hat jemand von Ihnen irgendeine Arbeit getan, um qTip mit Web Accessibility kompatibel zu machen?

Ich bin absolut nicht auf der Suche nach "jemand den Code schreiben" hier. Suchen Sie nur nach kleinen Beispielen und Ratschlägen zur Implementierung von Web Accessibility mit dem qTip-Plugin.

Answer 1

ich etwas in dieser Richtung tun würde ...

Fügen Sie den Inhalt, den Sie in der QTIP HTML Markup wollen (und nicht im Titel-Attribut):

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

ausblenden QTIP Inhalt mit CSS (noch schöner wäre etwas zu verwenden, wie modernizr nur den Inhalt zu verstecken, wenn der Benutzer hatte JavaScript aktiviert ist, nämlich: .js .hidden für den Wähler):

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

Dann

nach wie jQuery und die QTIP Skripte erstellen, um die qTips die versteckten Inhalte für die QTIP Inhalte mit und das Hinzufügen von focusin und focusout Ereignisse zum Anzeigen/Ausblenden der 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/