可訪問文本框

Question

我有一個包含許多文本框的HTML頁面。我必須將其標記爲可訪問性目的。但是，我不希望標籤可見。是否有可能？或者，還有其他設計方案嗎？

Answer 1

水印文本框怎麼樣？

例如http://www.asp.net/AJAX/AjaxControlToolkit/Samples/TextBoxWatermark/TextBoxWatermark.aspx

Answer 2

在屏幕閱讀器用戶可訪問（例如高負面文本縮進）的情況下，可以通過多種方式在頁面中放置文本並將其隱藏給可視用戶。

但是，「無障礙」不是「使用網絡沒有問題的人」和「盲人」之間的界限。有很多人不適合任何一組，這對於作者來說太容易也太常見了，因爲他們忘記了可訪問性更多的是讓內容不能被人看到。

Answer 3

嘗試CSS：

label { 
    display: none; 
} 

確保這個樣式表僅適用於「屏幕」媒體：

<link rel="stylesheet" href="style.css" type="text/css" media="screen" /> 

Answer 4

標籤的點來描述輸入的目的，有點像給它一個標題。如果您不使用標籤，那麼您的使用者將如何知道要在輸入中輸入什麼內容？

無論給視力用戶提供視覺線索，也應該成爲輔助技術用戶的標籤。

Answer 5

使用display：none對此不好，我支持查詢，爲什麼要隱藏所有標籤 - 可能會有一些標籤用於通知用戶textarea包含什麼，所以只需將其標記爲相應的標籤和樣式。

如果您仍想隱藏標籤，將其置於屏幕外更好。最近有一個summary of this at the 456 Berea Street blog。

Answer 6

如前所述，最好對所有輸入元素都有一個可見標籤 - 這將有助於有視力和無視力的用戶。話雖如此，但在某些情況下這是不可行的，我猜你的情況屬於這種情況。對於這些情況，你有幾個選項。

第一種方法是使用「標題」屬性，其具有顯示爲視力正常的用戶工具提示的附加益處：

<input type="text" title="first name" /> 

幾個其他人所說的第二個選項，這涉及定位所述使用CSS標籤關屏幕：

<label for="first_name" 
    style="position:absolute;left:-1000px;width:1px;overflow:hidden;" /> 
<input type="text" id="first_name" /> 

與使用「display：none」不同，屏幕閱讀器仍會讀取標籤。選擇禁用CSS的用戶也會看到標籤，這也很優雅。

無論你走到哪裏，我絕對推薦從Freedom Scientific JAWS downloading a trial copy和測試您的解決方案。