我應該使用視覺隱藏的宋體或標籤元素嗎？

Question

我正在創建一個包含兩個元素的搜索表單，一個輸入欄和一個按鈕。輸入字段沒有與其關聯的標籤。

爲了使字段更易於訪問，我可以添加<label for="searchfield">Search</label>並以可視方式隱藏它，例如，可供屏幕閱讀器訪問。

我也可以將aria-label="search"添加到輸入字段並保留沒有標籤的輸入字段。

我已經在Mac上使用「Voice Over」進行了測試，並且得到了相同的結果/輸出。我的問題是這些方法是否相同？或者一種方法比另一種更好？

這是pen。

Answer 1

在沒有具有網站的任何知識（？如何標記等表單域）或觀衆（什麼是他們的技能水平或技術的個人資料？），我處理這些問題有幾個參數：

1. ARIA的規則（該first rule可以在這裏申請）
2. 漸進增強

話雖這麼說，我常無ARIA並沒有CSS代碼的頁面（因爲可能會被阻塞，分塊等）並確保它可以訪問。

這意味着我編碼<label>。然後我將它隱藏起來。如果CSS中斷了，一切都還好。如果用戶的屏幕閱讀器不支持ARIA，則一切仍然順利。另外，如果您認爲用戶的所有屏幕閱讀器都支持ARIA，我鼓勵您對用戶進行技術評估（當地盲人協會是沒有任何真實用戶的良好開端）。許多人仍然運行舊版本的瀏覽器和SR。

對於有視力的用戶，我確定我會依賴上下文線索，如按鈕中的清晰搜索圖標（或單詞）（如Unor引用）。或者可能是一個placeholder與適當的對比（雖然你可以使用<label>作爲一個可視化的佔位符與一些CSS把戲隱藏在焦點上）。

如果您的提交按鈕使用SVG，那麼我會將ARIA摺疊到SVG替代文本方法不一致的支持中。

FWIW，我也不是title屬性的粉絲，部分原因是可訪問的名稱計算不一致，部分原因是我認爲它看起來像。

因此，要回答你的問題：

我的問題是在這些方法相同呢？

不，但它們之間的距離正在縮小。

或者是一種比另一種更好的方法？

這取決於我們沒有的上下文。

Answer 2

我相信aria-label="search"是正確的做法，因爲它產生的清潔標記（即沒有不必要label標籤），無需對CSS設置標籤的可見性 - 在​​等。

我相信使用CSS在視覺上隱藏label對於解決這個問題是一種有點'hacky'的方法，而ARIA是可訪問標記的標準，所以它應該是這種情況的明顯選擇。

另一方面，確保您打算支持的所有瀏覽器都可以正確使用ARIA，如果不支持，可能需要使用label方法來確保所有瀏覽器的兼容性。雖然，我認爲這些日子的支持非常好，所以這不應該是一種常見的情況。

Answer 3

使用aria-label優於依靠CSS來在視覺上隱藏label元素。

（相關技術：Using aria-label to provide an invisible label where a visible label cannot be used）

但要注意，對於you don’t have to provide a label搜索表單只包含搜索欄和提交按鈕。假設您使用標有「搜索」等按鈕的按鈕，它已經明確了文本字段的用途。

（相關技術：Using an adjacent button to label the purpose of a field）

在這種情況下，雖然不需要標籤，它仍然應該得到一個名。提供名稱的一種方法是使用input元素上的title屬性。技術Using the title attribute to identify form controls when the label element cannot be used在example 3中顯示了這個（沒有標籤的搜索表單，其title屬性在input）。