工具提示，輔助功能

Question

建立一個很好的可訪問網頁很難。目前，我試圖讓一個工具提示網絡可訪問，我需要幫助。你們有任何建議嗎？像什麼詠歎調屬性我應該使用。或者你想添加一些其他重要的東西！

此外，如何防止屏幕閱讀器讀取工具提示，如果未顯示？我的方法是使用javascript，添加和刪除aria-hidden屬性，但我想盡可能避免使用JS。

Answer 1

你必須表現出聚焦元素的工具提示（如果這個元素是不可作爲焦點，你應該設置tabindex屬性）

<input type="text" id="mytextbox" aria-describedby="mytooltip" /> 
<span id="mytooltip" role="tooltip" class="tooltip" aria-hidden="true">Tooltip for the textbox</span> 

的aria-describedby將設置你的聚焦元素和之間的關係提示。 tooltip角色支持並不是非常重要，但您應該使用它，因爲它是專門爲此主題設計的。

一旦做到這一點，你只需要設置初始狀態的CSS：

.tooltip[aria-hidden='true'] {display: none} 
    .tooltip[aria-hidden='false'] {display: block} 

，並使用自己喜歡的JavaScript代碼定義上focus或mouseover事件aria-hidden屬性爲true，並且爲false blur和mouseout事件。