輔助功能：我可以在 label 及其相關輸入之間添加內容嗎？

Question

我有一個與<input> (for="inputID") 關聯的<label> 。

例如，如果我在<label>和<input>之間添加了一個鏈接，我會遇到可訪問性問題嗎？

例子：

 <div class="c-input"> <label for="input-1">Label</label> <a href="#">Link</a> <input id="input-1" type="text" placeholder="Placeholder"> </div>

謝謝。

Answer 1

這不是技術 WCAG（可訪問性）故障。 您使用for屬性將 label 與<input>相關聯。 這允許在屏幕閱讀器用戶切換到輸入字段時宣布label ，這太棒了。 它還允許鼠標用戶單擊 label 文本並將焦點自動移動到輸入字段。

但是，將兩者聯系起來有點奇怪。 類似的布局對於復選框（不是輸入字段）來說有些常見，尤其是“同意條款和條件”類型的復選框。 “條款”通常是 label 中包含的鏈接，而在您的示例中，該鏈接位於 label 之外。

<input type="checkbox" id="mycheck">
<label for="mycheck">Agree to <a href="terms.html">terms and conditions</a></label>

與您的示例類似，屏幕閱讀器用戶在選中復選框時會聽到label （ “同意條款和條件，復選框，未選中” ）。 如果他們再次點擊，他們會聽到“條款和條件，鏈接” 。 如果他們單擊 label 的非鏈接部分，復選框將切換。 如果他們單擊 label 的鏈接部分，該鏈接將導航到“條款”頁面，並且復選框不會切換。 這有點時髦，但不會讓 WCAG 失敗。

所以回到你的例子，鏈接應該是 label 的一部分還是應該在 label 之外？ 無論哪種方式，它都不是可訪問性故障。 你必須決定你想要哪種行為。 如果您需要將鏈接宣布為輸入字段 label 的一部分，則該鏈接應嵌入到 label（ <label>的子元素）中。