必填字段后面只有一个红色星号,读屏念成星号,用户完全不知道这是必填,提交被拦下也找不到原因。乍看像缓存或者权限的锅,追下去往往不是。
<input id='mail' required aria-required='true'> <span class='req'>*</span> <p class='hint'>带 * 的为必填项</p>
追下去是这么回事:星号只是视觉符号,没有 aria-required 也没有任何文字说明,读屏不会把它和必填这个概念联系起来,提交被拦下来只能瞎猜,改哪一项也不知道。
「必填项提示语义」这类改动最怕改一半,回滚脚本先准备好,再动生产。测试环境和线上的差别,往往就在版本号和那几行被忽略的配置上。
线上出问题先对时间点,跟发布、备份、任务执行的时刻排一排,能省掉一半功夫。日志级别临时调高可以,记得改回去,长期开着既占磁盘又掩盖真问题。
具体做法是,给每个必填的控件都加上必填属性,别只靠样式区分;星号旁边配一段能被读屏读到的必填文字说明;在表单图例里写清楚星号到底代表什么意思,别让人猜。
验收就看一点,读屏聚焦时能听到必填,不填直接提交会指出具体是哪一项。
