一步步拆解设计决定
- 01
解释字段
用可见 label 告诉用户填什么，placeholder 只给示例。
- 02
选择校验时机
本例在提交时校验格式，避免用户还没写完就被报错。
- 03
补全状态
默认、格式错误、提交中、模拟网络失败和成功都设计出来。
- 04
让反馈可感知
错误关联输入，提交状态通过 live region 告知，焦点可见。
把规则带进代码
IMPLEMENTATION NOTE
<label htmlFor="email">邮箱地址</label>
<input id="email" type="email"
aria-invalid={Boolean(error)}
aria-describedby={error ? "email-error" : "email-help"} />
<p id="email-error" role="alert">{error}</p>