輔助功能：輸入元素輔助功能的幫助文本

Question

我有一個文本input ，要求用戶輸入具有特定約束的密碼。 這些約束的幫助文本在單獨的DOM元素中指定。

我希望屏幕閱讀器在用戶關注輸入字段時閱讀此幫助文本。 我找到了兩種方法：

1. 在輸入文本上使用aria-describedby="help-text-id" 。

    <label for="password"> Password </label> <input type="text" aria-describedby="help-text" id="password" /> <span id="help-text"> The password should at least be 8 characters</span> 

2. 在輸入文本上使用aria-labelledby="label-id help-text-id"來讀取相應的標簽以及幫助文本作為標簽

    <label id="password-label"> Password </label>
    <input type="text" aria-labelledbyby="password label help-text" />
    <span id="help-text"> The password should at least be 8 characters</span>

我喜歡第一個，因為在語義上這個幫助文本是描述輸入的東西，而不是標記輸入的東西。 我只是不確定這是否是處理這個問題的正確方法。 是否有其他模式用於宣布幫助文本？

此外， aria-describedby似乎不適用於ChromeVox擴展，也不適用於Windows 10屏幕閱讀器。

參考文獻： https ： //developer.paciellogroup.com/blog/2018/09/describing-aria-describedby/

Answer 1

您始終可以在與input元素關聯的label中包含幫助文本。 這將保證與任何屏幕閱讀器/瀏覽器組合100％兼容。

除了整體說明之外，在表單控件的標簽內提供相關說明也很重要。 例如，在標簽文本中指示所需的輸入字段和數據格式。 https://www.w3.org/WAI/tutorials/forms/instructions/

您甚至可以使用CSS僅向 label內的屏幕閱讀器用戶提供此文本，因為這是您在原始示例中提供的行為。

在您提供的兩個解決方案之間，我會使用aria-describedby因為它提供了跨瀏覽器的更高級別的支持使用 。