按钮标了 aria-disabled 仍能点,怎样区分语义禁用与原生 disabled
aria-disabled 只表达禁用语义,不自动阻断点击、键盘或脚本回调。若保留控件在焦点序列里以便说明原因,需要自行统一守卫所有激活入口;普通按钮也可以直接使用原生 disabled。
让三种方案接受相同输入
夹具依次是原生disabled、只有aria-disabled=true、以及aria-disabled加动作守卫三颗按钮。真实坐标点击不会激活原生禁用按钮,但语义禁用按钮仍写入动作;守卫组不写。脚本再对后两者使用Enter,结果仍是仅语义组执行。Playwright定位器可能因语义禁用拒绝普通click,所以实验明确使用浏览器坐标输入来观察元素本身行为。
可达性与可执行性分别约定
aria-disabled按钮仍可以保留在Tab序列中,让用户聚焦后了解为什么暂时不可用;原生disabled通常不进入常规Tab序列。是否需要保留入口取决于任务,不能仅因为设计要求灰色就选择其中一种。需要说明原因时应有可见文字或关联描述,不能把唯一提示放在鼠标悬停才出现的内容中。
守卫要覆盖真正的动作入口
本例将状态判断放在共享click处理函数顶部,所以鼠标与原生键盘激活都会经过同一守卫。若项目另有快捷键、菜单或程序调用直接进入业务函数,仍须在合适的业务边界检查当前条件。前端禁用只管理交互,不能替代服务器权限、设备互锁或危险动作安全机制,也不应据此承诺设备绝不会误动作。
验收时记录什么
对每个禁用状态保存原生属性、ARIA属性、Tab是否可达、激活是否产生副作用和恢复后能否正常执行。不要只截一张变灰的图。附件没有请求业务服务,也没有真实设备动作;它证明三种实现的浏览器差异。若目标应用由其他框架渲染,应检查状态变化后事件守卫读到的是最新值,避免闭包保存旧状态造成界面禁用而回调继续执行。
恢复可用也要测一遍
禁用阶段没有动作并不足够,还要在条件恢复后解除原生或语义禁用,并用同一键盘输入确认只执行一次。若守卫读了初始化时的旧布尔值,控件可能永远不可用;反过来旧值为false会让后续禁用失效。生产控件应从当前状态源判断,并同步更新可见原因。附件保留三组差异,不自动变更权限,也不模拟设备安全条件,避免把交互禁用当访问控制。
下载并复现
下载原创HTML夹具、独立验证程序、本次执行记录和依赖与运行说明,放在同一目录。安装Playwright 1.58.0及其Chromium后运行 python verify.py;程序使用两个随机本地端口,自动关闭浏览器与服务,不请求外网或业务接口。
本次实际环境为Python 3.12.4、Playwright 1.58.0、Chromium 145.0.7632.6。Playwright浏览器鼠标/键盘与页面API实跑;无实体硬件或业务控制。断言已通过;完整事件和数值保留在执行记录,不能把它改名后当目标展项测量。
自动化只检查焦点、控件行为和可查询语义,没有实际运行屏幕阅读器,也没有招募参与者。朗读顺序、触摸辅助技术和目标终端可用性需要另外验证。
继续核查与一级出处
基础背景见中控触摸界面(UI)设计规范。禁用守卫应覆盖原生按钮的鼠标与键盘激活,可继续用看起来像按钮的 div 按空格没反应,怎样对照原生 button 激活取证;相关工程入口在专题与产品对接说明。
- aria-disabled表达语义不自动实现原生禁用行为:2026-10-24已联网读取一级来源;WAI-ARIA 1.2,2023-06-06 Recommendation。
留言讨论
评论发布后会被人工复核,违规内容将被删除。
如果发表没有反应,可以前往联系我们告诉我们。