AI生成的页面看着很漂亮,按一下Tab就露馅了

简介: 本文探讨网页键盘可访问性验证:仅鼠标可用≠真正可用。需用Tab/Enter/Escape模拟真实用户操作,检查弹窗焦点流转、背景禁用、关闭后焦点回归等关键路径。指出常见缺陷(如div冒充按钮、缺失键盘事件),倡导优先使用原生语义元素,并提供Playwright自动化检测示例。

鼠标点开弹窗,输入内容,点击保存。自动化截图和设计稿也对得上。

换一种操作方式:把鼠标放到一边,只用Tab、Shift+Tab、Enter和Escape再走一遍。

按钮可能根本接不到焦点;弹窗打开后,焦点还留在背景页面;按了关闭,下一次Tab又不知道跳到哪里。

这些现象不需要复杂模型才能发现,却很容易被一套只会“找到元素然后click”的测试漏掉。

页面能被看见、能被鼠标点击,还需要进一步验证能否被键盘和辅助技术正确操作。

先试一段最短的键盘路径

用“编辑订单备注”的教学页面举例。要检查的行为可以很具体:Tab到编辑按钮,Enter打开弹窗,焦点进入备注框;在弹窗内顺序移动,Escape关闭,焦点回到打开它的按钮。

01.png

先不要急着安装一堆扫描工具。这条路径一旦走不通,就已经有了可复现的用户阻塞。

常见根源是用div画出一个“像按钮”的控件,只绑定鼠标事件;或者给弹窗加了视觉遮罩,却没处理背景交互和焦点位置。加上role也不能自动补齐全部行为。

优先使用具有相应语义与交互能力的原生元素,可以减少需要自己实现的部分。下面是一份可保存为HTML的小演示:

<!doctype html>
<html lang="zh-CN"><meta charset="utf-8">
<button id="open-editor">编辑备注</button>
<dialog id="editor" aria-labelledby="editor-title">
  <h2 id="editor-title">编辑订单备注</h2>
  <form method="dialog">
    <label>备注 <textarea id="note" autofocus></textarea></label>
    <button>关闭</button>
  </form>
</dialog>
<script>
const opener = document.querySelector("#open-editor");
const editor = document.querySelector("#editor");
opener.addEventListener("click", () => editor.showModal());
editor.addEventListener("close", () => opener.focus());
</script>
</html>

这段示例演示弹窗打开、焦点与关闭,不包含真实保存业务。生产里有危险操作、长正文或不同类型弹窗时,初始焦点应按任务选择,不能机械地全部放在第一个输入框。

自动化要按用户的动作走,才能发现这一层问题

如果测试直接调用locator.click,浏览器会帮你完成鼠标操作,测试可能绕开“用户能否用键盘到达它”的问题。

下面是Playwright Python的关键检查函数。调用前,page应已经打开上面的演示页:

from playwright.sync_api import expect

def check_keyboard(page):
    opener = page.get_by_role("button", name="编辑备注", exact=True)
    page.keyboard.press("Tab")
    expect(opener).to_be_focused()
    page.keyboard.press("Enter")
    expect(page.get_by_role("dialog")).to_be_visible()
    expect(page.get_by_label("备注", exact=True)).to_be_focused()
    page.keyboard.press("Tab")
    expect(page.get_by_role("button", name="关闭", exact=True)).to_be_focused()
    page.keyboard.press("Escape")
    expect(page.get_by_role("dialog")).not_to_be_visible()
    expect(opener).to_be_focused()

这份页面的可交互元素和初始焦点是受控的,所以可以从第一次Tab开始验证。放进真实产品时,应先明确入口状态,再按实际顺序编排动作。

函数还只是最小检查。模态弹窗内的Tab与Shift+Tab循环、背景是否不可操作、焦点样式是否可见,都要继续覆盖。不能因为对话框在DOM里有role,就宣称它已经满足全部可访问性要求。

看起来相同的两次“打不开”,处理方法可能不同

用户现象 应该检查什么
Tab一直到不了按钮 元素语义、焦点顺序、是否被错误禁用
Enter没有反应 键盘激活行为是否实现
弹窗打开,输入却落到背景 初始焦点、模态状态、背景交互
关闭后焦点消失 触发元素是否仍存在、返回位置如何约定

如果触发元素因业务操作被删除,关闭后也不能把焦点送到已经不存在的节点。应选择工作流里合理的后续位置,再据此设计测试。

02.png

AI生成界面之后,验收清单也得跟上

让AI生成一个“现代、好看”的页面,通常会把注意力引向颜色、间距和动效。可以给需求再加上可检查的行为:控件有可访问名称,键盘路径可完成任务,弹窗焦点管理符合任务,错误提示与相关输入关联。

这些要求应变成浏览器里的操作与断言。自动扫描能帮忙找到一部分结构问题;真实键盘路径、屏幕阅读器体验和复杂业务场景仍需要针对性验证。

对测试工程师来说,不必一开始就背完整规范。先挑一个团队最常用的弹窗,把这条路径录清楚:从哪里进、焦点在哪、怎样完成、怎样退出、退出后在哪里。

当一张精致的AI页面通过这条路径,它才多了一份“确实能被使用”的证据。

相关文章
|
21天前
|
缓存 人工智能 自然语言处理
阿里云千问大模型Qwen3.8-Max介绍:2.4 万亿参数模型,编程与办公能力全面跃升,限时4折起
本文全面拆解阿里云千问旗舰模型Qwen3.8-Max,围绕其2.4万亿参数MoE架构核心特性展开,梳理百万级上下文、原生多模态理解、长程自主规划等核心能力,覆盖六大全球部署区域的功能差异与完整计费体系,重点突出其在编程、办公及法律、金融等专业场景的优势,同步配套新用户免费额度、夜间4折等专属优惠,为开发者提供清晰的选型参考与落地优化指引。
|
21天前
|
人工智能 BI API
企业AI办公新方案|QwenWork千问办公深度实战:Qwen3.8基座六大核心能力、API调用与企业计费选型完整指南
大模型赋能办公已经迈入全新发展阶段,传统AI工具大多局限在问答对话、文档摘要、简单文案改写这类碎片化单点任务。在处理复杂真实业务时,使用者往往需要在多款软件之间来回切换,手动复制粘贴各类中间输出结果,很难形成端到端完整业务闭环。很多企业想要落地AI办公自动化,就必须投入大量研发人力做工具整合,开发门槛高,普通业务人员很难直接上手使用。
237 1
|
22天前
|
JavaScript 开发者
DSH plugin 从零怎么写?最小插件目录、本地构建与装进 profile 调试的完整起步流程
写第一个 DSH plugin 只需要一个导出 apply 函数的模块:先用 patch 覆盖层把本地文件插进 Web 界面验证,再做成包用 dsh plugin --profile add 装进 profile,最后用 --dump-config 与日志排错。
177 2
|
21天前
|
人工智能 自然语言处理 API
Qwen-Image-3.0-Pro 上线千问AI平台,支持复杂图文排版、精细渲染与图像编辑
Qwen-Image-3.0-Pro 现已上线千问AI平台,支持文生图和图像编辑,可处理最高 4.5K Tokens 指令,支持 12 种语言、20 余种字体和约 10 px 小字渲染,适用于复杂图文排版、真实质感、UI 设计和知识信息图等场景。
806 0
Qwen-Image-3.0-Pro 上线千问AI平台,支持复杂图文排版、精细渲染与图像编辑
|
21天前
|
缓存 人工智能 自然语言处理
阿里云大模型服务平台百炼是如何收费的?阶梯计费规则与不同模型最新调用收费标准参考
本文系统介绍了阿里云百炼平台全品类AI大模型的计费规则与最新价格,覆盖千问系列、开源模型、第三方主流模型,以及图像、音乐、语音、视频生成等全能力板块,详细列出五大地域的阶梯定价明细,同步介绍上下文缓存折扣、Batch调用半价、免费额度、夜间优惠等降本策略,为开发者和企业提供清晰的成本选型参考。
|
21天前
|
存储 人工智能 监控
阿里云百炼大模型服务平台新人免费额度介绍:免费试用申请、获取免费额度、查看剩余额度等相关规则参考
本文主要介绍阿里云百炼大模型服务平台面向新人用户发放的免费额度规则,包括免费额度的发放条件、地域限制、有效期、适用范围、主账号与 RAM 子账号之间的额度共享关系、不同模型及快照版本之间的额度独立规则、免费额度的获取方式、剩余额度查看方式,以及“免费额度用完即停”功能的开启与使用注意事项,帮助用户在免费试用阶段合理使用额度并避免产生意外费用。
|
22天前
|
存储 人工智能 数据可视化
新版百炼大模型平台完整指南:功能拆解、价格体系、API实操代码与业务选型避坑手册
大模型业务开发是一套完整的长链路,涵盖模型选型、接口推理调用、数据集处理、模型微调优化、向量知识库构建、智能体编排、业务上线部署、用量统计与成本管控等诸多环节。如果将这些环节拆分到多个不同平台完成开发,就会出现账号繁多、接口标准不统一、数据跨平台流转繁琐、账单分散难以统计、权限管理复杂等一系列现实问题,拉高AI项目的落地门槛。
199 0
|
22天前
|
JavaScript 开发工具 git
DSH 插件怎么开发?从最小插件到打包安装
DSH 插件是一个导出 apply 函数的 TypeScript 模块,基于 Cordis:通过 name 命名、inject 声明依赖、ctx 注册能力、Config schema 接受配置。本文从最小插件写起,讲清打包成 bundle、用 dsh plugin add 装进 profile 的完整流程。
355 0
|
21天前
|
存储 人工智能 IDE
阿里云千问办公和Qoder有啥区别?到底是选千问办公还是Qoder?用哪个更方便省钱?
阿里云千问办公(QwenWork)专注通用办公自动化,支持文档/PPT/数据分析等,深度集成钉钉;Qoder CN主打AI编程,兼容多模型、强IDE插件;Qoder Teams是其企业团队版,提供席位管理与协同功能。选型看角色:办公选千问,开发选Qoder。
504 0

热门文章

最新文章