必填状态需要同时提供视觉与非视觉的可感知标识
别名: aria-required · 必填双通道 · required not only asterisk
概念解释
一项是必填,视力用户要能在标签上看出来,辅助技术要能在进入字段时听到必填状态。同时提供指两条通道都在:可见的标记或「必填」二字,加上程序化的必填状态。只画星星、不暴露状态,阅读器用户会把必填当成选填来跳过,直到提交失败。只设状态、屏幕上什么都没有,视力用户同样会跳过。标少数派、给星号写图例,是可见标记怎么设计;这里要的是可见与非可见成对出现。错误描述怎么挂,是失败之后的事。
机制
必填是控件状态,不是装饰。视觉通道靠标记做搜索;非视觉通道靠状态位,阅读器在名称之后读「必填」。只做一条,另一类用户的搜索策略失效。第二层是状态与可见标记必须同指:屏幕标了必填、程序化没标,或反过来,两组用户会对「能不能空着」得出相反结论,提交时其中一组被突然拦住。动态把选填改成必填(选了企业之后税号变成必填)时,两条通道要同一拍更新,并最好用一句短宣布,否则阅读器用户还按旧状态跳过。required HTML 属性通常会同时贡献校验和可访问状态;自制控件没有这个钩子,必须显式暴露状态,不能以为画了星就够。
怎么研究
做「只星号」「只程序化必填」「两者都有且文案一致」「两者不一致」四种。视力用户看哪些能空;阅读器用户听哪些报必填。再加一次动态把选填改必填。
自变量:可见标记有无、程序化状态有无、两者是否一致、状态是否随条件更新。 因变量:两组用户对「可跳过集合」的判断是否一致、提交时哪一组被意外拦住、动态变更后阅读器是否仍报旧状态。
WCAG 审计可以列为检查项,但要通过听测和看测成对做。不要用「有 legend 解释星号」代替程序化状态——legend 是给看得见星号的人解码的。
边界
整表都是必填、表头已写「全部必填」时,可见标记可以收敛,但每个控件仍应暴露必填状态,因为阅读器用户不一定读表头。法律声明复选框的必填同时是同意,状态和可见文案都要说「必须勾选」而不是只标星。选填的程序化状态应是未标必填,而不是标「选填」的第三种状态——多数平台没有「optional」状态位,可见侧的「选填」二字够了。打印件只剩视觉通道。
怎么落地
- 必填字段同时具备可见标识(词或已解释的标记)和程序化必填状态;缺一不得上线。
- 条件把字段改为必填时,同一拍更新可见标识与状态;必要时短宣布「此项现在必填」。
- 不要让屏幕上的必填集合与树里的必填集合不同;用自动化列出两边差集。
- 验证:阅读器进入必填项听到必填,进入选填项不听到。遮住辅助技术,视力用户仅凭屏幕标出同一集合。把税号在条件后改为必填,确认星星(或「必填」)出现且阅读器改报必填。做只画星不设状态的对照,确认阅读器用户会跳过该项。