输入验证：当 aria-describedby 所引用的元素不在 DOM 中时的最佳实践
Input validation: Best practice when element to which aria-describedby is refering to is not in the DOM yet
情况是这样的：输入字段（文本、电子邮件、密码）被标记为 aria-describedby="some-id"。如果用户输入不符合要求，则呈现带有 id="some-id" 的元素。在此之前，该元素不存在于 DOM.
中
当 运行 Google Lighthouse 测试时，这被标记为错误，因为 aria-describedby 所指的 id 在 DOM 中不存在只要输入为空或满足要求即可。
我在考虑两个解决方法：
- 使用
id="some-id" 渲染元素，但将其留空。并在用户输入不符合要求时立即插入内容。
- 渲染带有
id="some-id" 的元素，并在用户输入不满足要求时立即插入标签 aria-describedby="some-id"。
对于这种情况下可访问性的最佳做法有什么建议吗？
aria-describedby 必须指向现有元素。在设置属性之前 div 必须存在。
你的两个解决方案都有效：
- 您可以将
aria-describedby 属性指向一个空元素，并在需要时插入内容
- 或者您可以在检测到错误时设置
aria-describedby。
情况是这样的：输入字段（文本、电子邮件、密码）被标记为 aria-describedby="some-id"。如果用户输入不符合要求，则呈现带有 id="some-id" 的元素。在此之前，该元素不存在于 DOM.
当 运行 Google Lighthouse 测试时，这被标记为错误，因为 aria-describedby 所指的 id 在 DOM 中不存在只要输入为空或满足要求即可。
我在考虑两个解决方法：
- 使用
id="some-id"渲染元素，但将其留空。并在用户输入不符合要求时立即插入内容。 - 渲染带有
id="some-id"的元素，并在用户输入不满足要求时立即插入标签aria-describedby="some-id"。
对于这种情况下可访问性的最佳做法有什么建议吗？
aria-describedby 必须指向现有元素。在设置属性之前 div 必须存在。
你的两个解决方案都有效：
- 您可以将
aria-describedby属性指向一个空元素，并在需要时插入内容 - 或者您可以在检测到错误时设置
aria-describedby。