Web page accessibility and qTip
I recently implemented the qTip jQuery plugin and I love it very much. Having recently looked at a code review with my boss, web accessibility came up in the discussion and it was qTip that was considered.
I am currently running qTip so that when hovering over certain icons on my qTip enabled web pages, a tooltip is displayed to the user. Well, this works great for people who use a mouse, but for those who only use the keyboard, it won't work ...
I started doing some research on web accessibility and I read the stuff mostly on the W3C .
What I want to do is enable keyboard / screen reader functionality for qTip.
Do you have any work to do to make qTip compatible with web accessibility?
I am absolutely not looking for "someone to write code" here. Just look for small examples and any tips for implementing web accessibility using the qTip plugin.
source to share
I would do something along these lines ...
Add the content you want to the qTip HTML Markup (not the title attribute):
<p>
<a href="#">
<span class="hidden">This is the qtip content</span>
And this is the link content
</a>
</p>
Hide qTip content with CSS (even better would be to use something like modernizr to only hide content if the user had JavaScript, namely .js .hidden
for the selector):
.hidden {
position: absolute;
display: block;
top: -10000px;
left: -10000px;
font-size: 1px;
}
Then, after including the jQuery and qTip scripts, create qTips using the hidden content for the qTip content and add the focusin
and events focusout
to show / hide the 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/
source to share