Веб-доступность и qTip - PullRequest
Новая
       31

Веб-доступность и qTip

3 голосов
/ 02 апреля 2012

Я недавно внедрил плагин qTip jQuery, и мне это очень нравится.В недавнем обзоре кода с моим боссом, в обсуждении возникла проблема доступности веб-сайтов, и в частности был затронут вопрос qTip.

В настоящее время у меня работает qTip так, что при наведении указателя мыши на определенные значки на моих веб-страницах с поддержкой qTipподсказка будет отображаться для пользователя.Ну, это прекрасно работает для людей, которые используют мышь, но для тех, кто использует только клавиатуру, это не сработает ...

Я начал проводить некоторые исследования веб-доступности, и ячитать материалы в основном на W3C .

Что я хочу сделать, так это включить функциональность чтения с клавиатуры / экрана для qTip.

Кто-нибудь из вас делал какую-либо работу по созданиюqTip-совместимость с Web Accessibility?

Я абсолютно не ищу "кто-то, чтобы написать код" здесь.Просто ищу небольшие примеры и любые советы по реализации Web Accessibility с плагином qTip.

1 Ответ

8 голосов
/ 03 апреля 2012

Я бы сделал что-то в этом духе ...

Добавьте содержимое, которое вы хотите, в разметке HTML qTip (а не в атрибуте title): 

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

Скрытьq Подсказка содержимого с помощью CSS (еще лучше было бы использовать что-то вроде modernizr , чтобы скрыть содержимое, только если у пользователя включен JavaScript, viz : .js .hidden для селектора): 

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

Затем, после включения jQuery и сценариев qTip, создайте qTips, используя скрытое содержимое для содержимого qTip, и добавьте события 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/

...