accessibilityqtip

How to enable keyboard/screen reader functionality for qTip

I've recently implemented the qTip jQuery plugin. In doing a code review recently with my boss, Web Accessibility came up in the discussion and specifically qTip was addressed.

Currently, I have qTip working such that when hovering over certain icons on my qTip-enabled web pages, a tool tip will display for the user. Well, that works great for folks that use a mouse, but for those who only use a keyboard, that's not going to work.

I've started to do some research on Web Accessibility, and I've read material primarily on W3C.

How could I enable keyboard/screen reader functionality for qTip?

Solution

  • I'd do something along these lines...

    Add the content you want in the qTip HTML Markup (rather than in the title attribute):

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

    Hide the qTip content with CSS (even nicer would be to use something like modernizr to only hide the content if the user had JavaScript enabled, viz: .js .hidden for the selector):

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

    Then after including jQuery and the qTip scripts, create the qTips using the hidden content for the qTip content and adding focusin and focusout events 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/