如果沒有標簽，如何使 Select 元素可訪問？

Question

我正在學習 HTML 中的可訪問性，我遇到了一個 Select 下拉 HTML 元素的示例，該元素旁邊沒有任何文本標簽，只是頁面上方標題的上下文提供了一個想法元素包含例如關於國家的部分中的國家列表。

在其上運行可訪問性工具時，該工具抱怨沒有可訪問的名稱，我想知道是否有辦法為屏幕閱讀器指定名稱，而無需添加標簽，如果這不是設計？

Answer 1

簡答

這不是關於你想要什么作為你的設計的一部分，而是關於什么使頁面對盡可能多的人可用。 您應該使用可見且正確關聯的標簽使設計工作。

更長的答案

我們可以通過多種方式添加不可見的標簽，一種方式是aria-label ：

<select aria-label="label for the select">

</select>

或者我們可以在<label>元素上使用視覺隱藏的類，以便輔助技術（屏幕閱讀器等）仍然可以訪問它，但不會在視覺上顯示：

 .visually-hidden { border: 0; padding: 0; margin: 0; position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */ clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */ clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/ white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */ }

 <label for="select1" class="visually-hidden">Label Text</label> <select id="select1"> <option>Option 1</option> <option>Option 2</option> </select>

但是，盡管這對使用屏幕閱讀器等輔助技術 (AT) 的人有所幫助，但對其他人沒有幫助。

• 如果某人有學習困難並且無法將您選擇中的選項與進一步向上的標題相關聯怎么辦？
• 如果有人正在使用屏幕放大鏡並且需要靠近控件的標簽才能知道它的用途怎么辦？
• 如果有人使用自定義樣式表來更改您的布局並且基於布局的關聯不再起作用怎么辦？

因此，答案是添加一個可見且正確關聯的<label>以使其易於訪問且對每個人都更好。

設計不應受到可見標簽的影響（如果有，您的圖形設計師/UI 團隊需要提高他們的水平！）並且它可能有額外的好處，人們會覺得表單更容易填寫，增加轉化（當你減少“摩擦”時）。

所以最好的辦法是添加一個可見的標簽：

<label for="select1">The label</label>
<select id="select1">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

請注意使用使用for="IDofSelect"的顯式標簽，而不是隱式標簽 - 您將<select>包裹在<label> ，因為隱式標簽可能會導致語音軟件出現問題，例如 Dragon Naturally speak

Answer 2

您可以使用aria-label屬性。 還有更多信息在這里