使cluetip鍵盤可以訪問（在選項卡焦點上顯示）

我在努力弄清楚如何在使用懸停的觸發器文本鏈接的焦點上製作jQuery cluetip顯示。我需要它在通過內容實現可訪問性目的的tab（onfocus）時工作。使cluetip鍵盤可以訪問（在選項卡焦點上顯示）

<script> 
$(function(){  

    $('a.tip').cluetip({width:200, local:true, cursor:'pointer', sticky: true,closePosition: 'title', arrows: true, titleAttribute: 'title', showTitle:true }); 
    $(".tip-content").hide();   

    $('a.tip').focus(function() { 
    $(this).click(); 
    }); 

}); 
</script>

HTML：

<a id="load-local" class="tip" href="#cc" rel="#cc" title="Tooltip">Tooltip link</a> 
<span class="tip-content" id="cc">Tool tip content</span>

完全受挫。這似乎應該是一件簡單的事情，但我沒有運氣。

來源

2011-11-16 Jon Fin

好奇，注意到你已經在這裏設置了title屬性 - 你是否也使用該屬性作爲提示效果？由於鍵盤用戶無法顯示標題，因此出於訪問性的原因，標題往往不受歡迎。 – BrendanMcK

標題用於設置工具提示的標題。這就是clueTip的工作原理：P – scumah

明白了。（這實際上似乎是一個不錯的想法;如果JS被禁用，那麼至少標題將出現在懸停上，因爲這是標題的工作原理 - 但它仍然存在其他標題問題。）因此，似乎clueTip本身有一些可訪問性問題;需要使用標題，而不是鍵盤可訪問。所以真正的問題是：如何使這個插件更容易訪問。理想可能是「子類」或等價物，並添加一個轉發到其現有鼠標輸入/離開處理程序的焦點/模糊處理程序。 – BrendanMcK

如果你想要的工作，你需要將activation屬性添加到clueTip呼叫，像這樣：

$('a.tip').cluetip({activation: 'click', width:200, local:true, cursor: 'pointer', sticky: true, closePosition: 'title', arrows: true, titleAttribute: 'title', showTitle: true });

這樣一來，你的代碼應該工作，但你的clueTips只能在點擊觸發，不在懸停。

編輯：爲了保持懸停效果，並且由於事實clueTip沒有任何方法以編程方式顯示提示，我想你會需要兩個插件調用，一個與activation: 'click'和另外一個沒有它：

$('a.tip').cluetip({activation: 'click', width:200, local:true, cursor: 'pointer', sticky: true, closePosition: 'title', arrows: true, titleAttribute: 'title', showTitle: true }); 
$('a.tip').cluetip({width:200, local:true, cursor: 'pointer', sticky: true, closePosition: 'title', arrows: true, titleAttribute: 'title', showTitle: true });

這樣的提示彈出懸停和點擊，並且這樣一來，通過鏈接Tab鍵將觸發焦點事件，因此點擊。

來源

2011-11-16 12:35:50 scumah

謝謝，但不幸的是我想保持mouseusers懸停狀態，並允許鍵盤用戶有焦點或onclick。 –

在這種情況下，如果我們試圖將其清理乾淨，您需要一些clueTip方法來顯示您的電話提示，但恐怕沒有這樣的事情：/這就是說，您可以使用兩個提示電話，一個點擊激活，另一個沒有它。這不是世界上最乾淨的東西，但它可能會做到這一點。請參閱編輯。 – scumah

使cluetip鍵盤可以訪問（在選項卡焦點上顯示）

回答

相關問題