𝗛𝗼𝘄 𝘁𝗼 𝗪𝗶𝗿𝗲 𝗔𝗥𝗜𝗔 𝗙𝗼𝗿 𝗙𝗼𝗿𝗺 𝗘𝗿𝗿𝗼𝗿𝘀
大多数表单对视力正常的用户来说运行良好，但对于使用辅助技术的人来说却无法正常工作。视力正常的用户可以看到红色边框和错误消息，而屏幕阅读器用户通常什么也听不到。
你可以通过两个 ARIA 属性和一个小的 live region 来修复这个问题。这项改动所需的代码不到 50 行。
以下是将错误与输入框连接的方法。
- 使用 aria-describedby
输入框需要指向错误元素。在你的输入框中添加
aria-describedby，并将其值设置为错误div的 ID。
示例：
- 输入框 ID：email-input
- 错误 ID：email-error
- 代码：
aria-describedby="email-error"
这会告诉屏幕阅读器，当用户聚焦到输入框时，读取错误消息。如果你还有帮助文本，可以添加多个 ID。
- 使用 aria-invalid
该属性告知用户输入有误。当错误出现时，将
aria-invalid设置为true；当错误清除时，将其设置为false。
一个常见的错误是给外层包装 div 设置红色样式，却只在输入框上添加 aria-invalid。这会导致不匹配。请确保你的视觉样式和 ARIA 属性针对的是同一个元素。
- 添加一个 live region
如果用户在输入过程中出现了错误，他们可能会错过。在你的错误
div上使用aria-live="polite"。
aria-live="polite"告诉屏幕阅读器在自然的停顿期间播报错误。- 除非是紧急情况，否则不要使用
"assertive"。表单错误并不属于紧急情况。
- 处理异步验证 如果你在后台检查用户名或地址，用户需要知道系统正在运行。
- 模式 A：在检查运行时，在输入框上使用
aria-busy="true"。 - 模式 B：使用一个隐藏的 live region 来播报状态更新，例如“正在验证用户名...”
模式 B 在不同的屏幕阅读器中更加可靠。
测试是强制性的。自动化工具很有帮助，但它们无法取代手动测试。请在 Windows 上使用 NVDA，或在 macOS 上使用 VoiceOver。
你的测试清单：
- Tab 键进入输入框。应该播报标签。
- 输入一个无效值。应该播报错误。
- Tab 键回到输入框。应该同时播报标签和错误。
- 修复错误。错误消息应该消失。