接口可用性测试

1）为什么，我们相信什么"准备好了"

• 满足了WCAG 2标准。1/2.目标平台的2级AA；
• 界面完全通过键盘；
• 正确操作屏幕阅读器；
• 对比符合规范；
• 所有状态/错误/状态都可以在视线之外且没有鼠标的情况下访问；
• 考虑了本地化，RTL，reduce运动和移动功能。

2）测试策略（金字塔A11y）

1.自动测试/linter（快速覆盖高达40-60%的问题类别）。
2.手动模式检查（键盘，焦点，内容，逻辑）。
3.辅助技术（AT）会话：屏幕阅读器、缩放、颜色过滤器。
4.与用户进行现场测试（如果可能的话）。

目的：捕捉元件/模式级别的系统缺陷,防止其繁殖。

3）基本检查支票清单（快速运行）

• 键盘：禁忌/箭头可以实现一切；焦点顺序是合乎逻辑的；有调制解调器中的焦点陷阱；ESC/Enter/Space正在运行。
• 焦点指示器在任何主题/背景中都可以看到。
• 对比：第4 ≥桉文。5：1（普通）,≥ 3：1（大）,图标/控制可读。
• 语义：正确的标签（'button'、'a'、'label'、'ul/li'、'th/td'）、角色和'aria-'仅在需要时。
• Scrinrider：按层次结构排列的标题、按钮/链接的语义名称、图标/图像的替代品。
• 表格：明确的"标签"，线索/错误相关（"aria-describedby"），错误文本是具体的。
• 动态：敬酒/横幅/错误通过"aria-live"（"polite"/"assertive"）宣布。
• 动画尊重"prefers-reduced-motion"；没有"摇动"接口。
• 本地化/RTL：关键屏幕对齐，数字/日期/货币由实用程序格式化。
• 移动：触摸目标≥ 44 × 44 px，不禁止变焦，屏幕旋转不会破坏内容。

4）角色、责任和文物

设计系统：每个组件描述中的A11 y要求。
开发人员：自动反驳,单位/交互测试与A11y-assert。
QA：手动脚本+AT会议；严重性/频率报告。
UX/内容：微观错误/状态，可读性大声。
工件：支票单，脚本，AT屏幕截图，带有WCAG参数的缺陷列表，建议。

5）自动化检查

Linters/分析仪： axe, eslint-plugin-jsx-a11y, pa11y, Lighthouse.

在pipline：我们在严重违规时阻止PR （role/label/对比/tab陷阱）。
对比快照：视觉主题/状态测试。

6）手动测试： 脚本

6.1个键盘

仅使用键盘（Tab/Shift+Tab/Enter/Space/箭头）浏览页面。
检查：焦点可见性、优先级、所有活动的可用性、没有"陷阱"和"死"元素。
在调制解调器中：内部焦点，关闭时返回到启动器。

6.2屏幕阅读器（最低设置）

Desktop: NVDA/JAWS (Windows), VoiceOver (macOS).

Mobile: VoiceOver (iOS), TalkBack (Android).

我们检查：正确的标题（H层次结构）,按钮/链接名称,表格读取（"th"/"scope"）,状态声明,可理解的形状错误。

6.3内容和微型

我们大声朗读批判性文本-没有歧义，没有"错误400"。
错误="什么不是+如何修复+限制/格式"。

6.4动态和生活区域

成功的敬酒是'aria-live='polite'，错误是'assertive'。
进度/下载由文本解释；skeleton比旋转器更可取。

7）形式和错误（深入）

每个字段都有相关的标签（不是placeholder）。
错误与以下字段相关联：'aria-invalid='true'，'aria-describedby='［id错误］'。
预先指定格式公式（日期，电话）；掩码不会破坏输入/插入。
在submit+自动滚动时,总错误横幅并关注第一个错误。
错误文本：特定，没有技术术语。

8）表，列表，图表

表：标题"th" so "scope="col/row"，标题，摘要。
列表是真实的"ul/ol/li"，不是天后。
图表-备用表格/说明；传说可用；颜色≠唯一的信号。

9）多媒体和动画

视频：字幕/解密；键盘控制；没有自动轨道（或安静）。
GIF/微动画：在"prefers-reduced-motion"中关闭；避免爆发。
振动/声音-可选且在视觉/文本中复制。

10）移动可用性

互动≥ 44 × 44 px，有足够的间隔。
不禁止缩放（没有"user-scalable=no"的meta viewport）。
表单/键盘：不隐藏系统功能的正确类型（"tel"，"email"，"number"）。
在黑暗主题和系统字体"更多"中进行验证。

11）本地化、数字和RTL

带上下文的i18n密钥上的字符串；长语言（DE/TR）不会破坏布局。
日期/货币格式是实用程序，不是字符串。
RTL模式：导航图标的镜像，检查焦点和车厢顺序，双向输入。

12）关键flow的细节（iGaming）

付款/调查结果

明确指示，限制/时限/佣金-文本。
提供商的错误被明确声明，没有代码；还有其他行动。
操作确认：专注于逻辑CTA,可取消。

CUS/验证

照片/文件的逐步提示；进步和ETA。
"模糊/眩光/裁剪"错误-带有修复示例。
中立的语气，没有幽默。

13）缺陷严重性评估

Blocker：无法完成关键任务（键盘/屏幕阅读器）。
批评：关键功能起作用，但有严重的障碍。
专业：干扰，有解决办法。
次要：不影响任务的化妆品/不匹配海德。

每个缺陷都是指向WCAG准则和可重现的脚本。

14）验收标准（Done的定义，A11y）

100%不带鼠标的键盘脚本。
axe/Lighthouse：没有严重或严重的违规行为。
AA在所有主题/状态中的对比。
关键路径（nawbar，形状，调制解调器，敬酒）的屏幕阅读器运行。
文档A11y 用于新组件/fich（角色模型，aria，焦点，示例）。
CI中A11y测试的回归是绿色的。

15）流程和自动化

在开发之前：任务中的A11 y标准，具有焦点/错误状态的布局。
在开发中：局部组装中的linters/ahe；对比/焦点的视觉快照。
在CI中：pa11y/axe-scan按关键页面；在Blocker/Critical下的票据下降。
发布后：季度审核,监视A11 y标签上的用户投诉。

16）反模式

播放器代替标签。
"div"而不是"button"/"a"。
断开焦环"为了美丽"。
颜色作为唯一的状态载体。
无焦点打击/ESC调制解调器。
禁止移动扩展。
没有人为解释的"400/500错误"。

17）测试脚本模板

脚本1-键盘导航（表格页面）

1.Tab到第一个字段,输入数据。
2.Shift+Tab向后-确保顺序正确。
3.调用验证（submit）-焦点传递到第一个错误。
4.用ESC键关闭调制解调器,焦点恢复到启动器。

脚本2-Scrinrider（付款页面）

1.导航到页面标题（h1）,收听部分。
2.打开方法选择-可以听到角色/状态声明。
3.故意犯和错误-读取消息并与字段相关联。
4.关于付款的成功敬酒宣布为"polite"。

情景3-动态

1.以>3 c运行操作-包含有关进程/ETA的文本。
2.如果网络错误-标语"assertive"，可从键盘访问，则有"重复/帮助"路径。

18）有用的微模式

敬酒的角色/aria

html
<div role = "status" aria-live = "polite"> Payment accepted. Balance updated. </div>
<div role = "alert" aria-live = "assertive"> The payment was denied. Try another method. </div>

错误与字段的关系

html
<label for = "amount "> Amount </label>
<input id="amount" aria-invalid="true" aria-describedby="amount-error">
<div id = "amount-error "> Minimum 100 UAH. Please enter a larger amount. </div>

Modalka（语义属性）

html
<div role="dialog" aria-modal="true" aria-labelledby="m-title">
<h2 id =" m-title "> Confirm Payment </h2>
<! -- content -->
<button> Confirm </button>
<button> Cancel </button>
</div>

19）实施A11 y实践的快速计划

1.审核当前组件/模式（对比/焦点/角色语义）。
2.设计系统编辑：在每个组件中添加A11 y部分。
3.工具：在本地和CI中配置linters/axe/pa11y/Lighthouse。
4.培训：设计师/开发人员/撰稿人的短篇小说。
5.飞行员：修复3-5最常见的缺陷（调制解调器，形状，敬酒）。
6.法规：具有A11 y标准的国防部；季度审计。

最终的spargalka

检查键盘、焦点、对比度、屏幕阅读器、动态。
通过aria-live宣布状态；错误-与字段相关。
尊重节拍动作，不要禁止缩放。
考虑语义（标签/角色）而不是"外观"。
自动验证,但总是手动补充。
通过参考WCAG，严重性和播放脚本捕获缺陷。