製作一個搜索表單殘障：標籤與ARIA標籤VS詠歎調，labelledby

我的搜索表單目前的HTML看起來像這樣：製作一個搜索表單殘障：標籤與ARIA標籤VS詠歎調，labelledby

<form action=「/search/」 method="post"> 
<input onclick="this.value='';" type="text" name="searchquery" id="searchbox" value="Search this site」 class="swap_value" /> 
<input type="image" src=「/images/searchbutton.gif" id="searchbutton" alt="" /> 
</form>

我想使搜索形式訪問。據我瞭解，從W3.org無障礙：https://www.w3.org/WAI/tutorials/forms/labels/和a11ymatters.com：http://www.a11ymatters.com/pattern/accessible-search/，我需要補充，不會在視覺上顯示一個標籤，並給予說明，以搜索按鈕，如下所示：

隨着添加CSS：

.search-label { 
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px; 
}

的W3.org文章說，你可以使用標籤，ARIA標籤，或唱段，labelledby識別表單控件，但它並沒有說這是最好的做法。有誰知道哪一個是首選/最佳實踐？ alt標籤是否足以識別我的搜索按鈕，還是需要標籤？

非常感謝！

來源

2017-05-08 Mary James

只是一個快速評論，標籤應與您的示例中的輸入文本框「搜索框」相關聯，而不是搜索按鈕。 –

最好的做法，可以說是使用<label>。它提供了一個更大的命中區域，並提供了一個視覺標籤，當字段獲得焦點時不會消失（這是您的示例中會發生的情況）。

由於設計有時會在視覺上隱藏標籤文本，因此使用<label>並將其完全隱藏並沒有多大好處。在這種情況下，在搜索表單的上下文中使用aria-label可能很好。

aria-labelledby需要指向某個文本的id作爲標籤，所以如果您打算在這種情況下執行此操作，那麼您不妨返回使用<label>。

對於您的提交按鈕，0屬性是正確的使用方式，但不太詳細。

在你的情況，你可以逃脫這樣的：

<input type="text" value="" placeholder="Search" aria-label="Search"> 
<input type="image" src="/searchbutton.gif" alt="Submit">

的placeholder做什麼你試圖通過留在現場，你再清除出的值做。屏幕閱讀器會將該字段宣佈爲「輸入，文本，搜索」，並將該按鈕標記爲「按鈕，搜索」。簡要的，可操作的標籤是最好的。

對於其他代碼示例和例子，我做了開始只作爲圖標（按照客戶的要求）可訪問的搜索字段：http://codepen.io/aardrian/pen/bVQzJj

來源

2017-05-09 03:02:22 aardrian

謝謝，這非常有幫助！ –

如果你想訪問的（不僅是屏幕閱讀器的用戶），您必須提供明顯指示。

G167: Using an adjacent button to label the purpose of a field：

這可以通過以下方式實現。
依託於input場的placeholder屬性（但這是不夠的，沒有互動的調整，因爲一旦該領域已經填補了說明會消失）

這並不妨礙你從給定標籤，可見或不可見，讀屏軟件用戶：

H44: Using label elements to associate text labels with form controls。如果您使用此解決方案，請勿隱藏文本。沒有屏幕閱讀器的人不會受益於說明。
H65: Using the title attribute to identify form controls when the label element cannot be used。
ARIA6: Using aria-label to provide labels for objects。請注意，單獨使用ARIA絕不是一個好主意，因爲這不會給不使用屏幕閱讀器的用戶提供指導。

請注意，爲了獲得更好的支持，同時使用H65和ARIA6技術是您可以選擇的最佳選擇。

來源

2017-05-09 07:39:20 Adam

製作一個搜索表單殘障：標籤與ARIA標籤VS詠歎調，labelledby

回答

相關問題