如何使Twitter Bootstrap工具提示可訪問？

正如您所知，Twitter引導工具提示不可訪問（I.E.他們不被屏幕閱讀器讀取）。要做到這一點，下面的事情要做到：如何使Twitter Bootstrap工具提示可訪問？

在調用tooltip()功能，生成的文本元素（包含工具提示文本的）應該得到一個新的屬性添加到它：aria-hidden="true"。
原始元素（已調用tooltip()）應該添加一個屬性：aria-describedby="#<tooltip-id>"，其中tooltip-id引用上面剛創建的新元素的id。

由於目前的Javascript工作原理是選擇所有與.tooltip類的元素和應用tooltip()功能的方式，我想知道我怎麼能做到這一點，而無需修改tooltip()功能的源代碼。

這裏是一個按鈕的代碼示例：

<span role="button" rel="tooltip" title="Add Youtube Video" class="fancyPostButton span1" tabindex="0" style="-webkit-user-select: none;padding-top: 10px"> 
    <div id="fancyPostVideoPicker" class="fancyPostAttachment videoAttachment glyphicons film centerMe"> 
     <i></i> 
    </div> 
</span>

來源

2013-10-10 Parham Doustdar

那麼，這個問題真的：「我怎麼了騎在Twitter的引導功能」（無需修改源代碼）。我會建議標題改變，動機是可訪問性（很好），但技術更加面向JavaScript。 – AlastairC

什麼版本的bootstrap？ 2.x還是3.x？ – davidkonrad

@AlastairC：事情是，我不確定是否最好的方法是重寫函數;這是我試圖找出的一件事情：我應該重寫該函數，還是將添加，例如，一個事件回調解決問題？ –

從引導文檔的main example的長相他們是通過鍵盤訪問（即秀鍵盤僅用戶）natively-使用時可聚焦的元素，並且它們使用文本內容作爲按鈕。

所以默認引導的例子是不是太糟糕了，如果提示文本中需要了解的按鈕（如你的例子），也就是當他們創造一個無障礙的問題。

所以最重要的是該按鈕沒有內容，所以屏幕閱讀器將不知道它是什麼開始。（注意：如果是原生鏈接或按鈕，某些屏幕閱讀器可能會回到標題，但不應該依賴於該標題。）

要做一個顯示字體圖標的按鈕，您需要內容和圖標，所以兩個元素：

<a href=」target.html」>   
    <span class=」icon-home」 aria-hidden="true"></span>   
    <span class=」alt」>Add YouTube Video</span>   
</a>

然後使用CSS將文本隱藏在屏幕外。隱藏的ARIA意味着字體字符不會被讀出。

我也建議實際使用一個按鈕或鏈接，而不是span或div，因爲那時你不需要使用javascript來模擬onclick等。在這種情況下，你也有一個內聯元素（span ）環繞一個塊元素（div），它也是無效的HTML。

如果你使用上面的屏幕閱讀器用戶的技術會聽到項目的內容，無論如何，我不認爲有任何其他文本讀出來？

如果您無法在源代碼中添加隱藏文本，則可以通過動態添加動態提示元素進行循環。

來源

2013-10-15 13:31:42 AlastairC

好吧，我們的按鈕/鏈接將其rel設置爲「tooltip」，所以我無法真正瀏覽整個應用程序並分別爲每個應用程序編寫代碼。我更喜歡將它寫入可運行於所有應用程序的地方。此外，他們沒有任何文字，只有字形。由於圖標位於''標籤中，我目前所做的是將內部''的'aria-hidden'屬性設置爲'true'。然而，正如我所說的，我不想爲每一個工具提示做這個 - 因爲它們中有很多。 –

按鈕/鏈接glyphicons的內容或工具提示的內容？你可以添加一個按鈕/鏈接的HTML呈現源的例子嗎？我認爲你可能會有比工具提示更大/其他的問題。 – AlastairC

我編輯了問題以包含代碼。 –

-2

可以看看W3C & ARIA的方向http://www.w3.org/WAI/PF/aria-practices/#tooltip

來源

2014-07-02 01:38:14

我是一個盲人電腦用戶，所以我非常清楚標準及其對屏幕閱讀器的影響。但是，我的問題特定於Bootstrap工具提示。 –

不是一個有用的答案，該鏈接只是說如何工具提示應該可以行事，而不是做什麼來獲得引導彈出那裏。 –

如何使Twitter Bootstrap工具提示可訪問？

回答

相關問題