行动计划

把指南转化为安全试用流程

使用真实资料前,请先在CSS Z-index 层级映射器中用合成数据试做《移动界面质量:层级、触控目标与可访问名称》的步骤。勾选状态只保留在当前标签页。

0%0/4 已完成
  1. 打开工具
  2. 打开工具
  3. 打开工具
  4. 打开工具

《移动界面质量:层级、触控目标与可访问名称》清单不会创建账户,也不会把您的内容发送到服务器;页面刷新后进度会被清除。

01

简短答案与目标

建立验收矩阵:从 320px 视口到桌面以及 200% 文本放大,用户都能找到、触摸、键盘触发并读取主要操作结果。

针对“无障碍界面设计”决策,开始前明确责任人、错误影响、数据类别和不得自动化的最终批准;“移动界面质量:层级、触控目标与可访问名称”示例不得包含个人或机密数据。

  • 建立验收矩阵:从 320px 视口到桌面以及 200% 文本放大,用户都能找到、触摸、键盘触发并读取主要操作结果。
02

输入与范围契约

对于“移动界面质量:层级、触控目标与可访问名称”,成功不只是工具产生输出:验收页头、菜单、弹窗与工具操作时,不只看外观,还要测试遮挡、触控、键盘和屏幕阅读器任务。 执行前还要明确决策责任人与回退路径。

显示此流程每一步的输入、输出、停止条件和回退方式;在 mobil-arayuz-katman-dokunma-hedefi-rehberi 范围内,错误必须指出字段和修正动作,不得静默修复。

03

可执行的分步方法

先定义有名称的层级和小型 z-index 预算,用设计令牌替代数字竞赛;再测量真实目标矩形及最近间距。每个图标操作都应有可见文字或可访问名称、正确焦点顺序、清晰焦点指示和结果播报。

对于“移动界面质量:层级、触控目标与可访问名称”,把数字与来源总数、文案与真实界面、安全主张与威胁模型、内容主张与 W3C Web Content Accessibility Guidelines (WCAG) 2.2 等最新第一手证据逐项核对。

04

负面与边界测试

主动测试横向溢出的标签、被固定页头遮住的焦点、弹窗后仍可点击的内容、仅悬停显示的帮助、长文字导致缩小的按钮以及过近的关闭操作。土耳其语和德语长标签可能比英语更早溢出。

除桌面外,还要在窄屏移动端、键盘、200% 文本、受限设备和离线状态下完成“无障碍界面设计”任务,并覆盖这些负面场景:主动测试横向溢出的标签、被固定页头遮住的焦点、弹窗后仍可点击的内容、仅悬停显示的帮助、长文字导致缩小的按钮以及过近的关闭操作。土耳其语和德语长标签可能比英语更早溢出。

05

依据用户任务验证

先用小型合成样本构建“无障碍界面设计”正常路径,再以相同验收标准测试空、损坏、超大、重复和边界输入。

验收记录必须包含版本、日期、样本、阈值、已知风险、批准者和下次复核触发条件;最低证据要求是:按路径和断点记录目标尺寸、焦点顺序、可访问名称来源、200% 文本视图、深浅主题对比度,以及键盘和触控完成一项主要任务的结果;截图需结合交互证据才有意义。

06

证据与维护记录

按路径和断点记录目标尺寸、焦点顺序、可访问名称来源、200% 文本视图、深浅主题对比度,以及键盘和触控完成一项主要任务的结果;截图需结合交互证据才有意义。

维护时重新打开 W3C Web Content Accessibility Guidelines (WCAG) 2.2,记录其版本或日期,并用同一合成样本重跑;即使无变化,也要记录已验证范围。

07

边界与负责的下一步

静态 CSS 与测量行不能证明真实层叠上下文、屏幕阅读器输出或运动可用性;最终检查必须在支持的浏览器、移动设备和辅助技术上执行真实任务。

不要把“移动界面质量:层级、触控目标与可访问名称”输出当作最终事实。静态 CSS 与测量行不能证明真实层叠上下文、屏幕阅读器输出或运动可用性;最终检查必须在支持的浏览器、移动设备和辅助技术上执行真实任务。 重大决策必须关联最新来源并由合格人员复核。

  • 静态 CSS 与测量行不能证明真实层叠上下文、屏幕阅读器输出或运动可用性;最终检查必须在支持的浏览器、移动设备和辅助技术上执行真实任务。
应用核验

把指南转化为可重复的检查流程

请使用这套包含 4 个工具的检查计划来落实《移动界面质量:层级、触控目标与可访问名称》。目标:验收页头、菜单、弹窗与工具操作时,不只看外观,还要测试遮挡、触控、键盘和屏幕阅读器任务。 包含负面测试、验收证据与维护步骤的原创实践指南。 请先用安全示例代替真实数据,并记录每一步的预期结果与验收决定。

01

CSS Z-index 层级映射器

准备
CSS Z-index 层级映射器的输入应为受支持的颜色、CSS、SVG、图像或尺寸值。本次处理目标是:按 z-index 排序 CSS 选择器,找出冲突与极端层级。处理敏感真实数据前,请先用合成示例确认格式。
执行
运行设备端处理。CSS Z-index 层级映射器为实现“按 z-index 排序 CSS 选择器,找出冲突与极端层级”采用以下可解释方法:使用浏览器 API 和公开的转换公式处理数值,同时保留源内容。
验收检查
验收检查:接受CSS Z-index 层级映射器的结果前,请完成在浅色/深色背景、不同屏幕尺寸、目标应用及源内容之间进行视觉比较;核验证据应与“按 z-index 排序 CSS 选择器,找出冲突与极端层级”这一目标一致。CSS Z-index 层级映射器的使用边界:代码不会执行;未发现问题并不能证明不存在漏洞。
预期输出
CSS Z-index 层级映射器完成后会提供可预览的视觉值、尺寸或格式摘要,以及可复制或下载的结果,并围绕“按 z-index 排序 CSS 选择器,找出冲突与极端层级”组织结果。. 按 z-index 排序 CSS 选择器,找出冲突与极端层级。
02

触控目标尺寸审计器

准备
触控目标尺寸审计器的输入应为您有权检查的、已合成或最小化的代码、配置、标识符或文件内容。本次处理目标是:按宽度、高度与间距检查界面目标,排序移动端可用性风险。处理敏感真实数据前,请先用合成示例确认格式。
执行
运行设备端处理。触控目标尺寸审计器为实现“按宽度、高度与间距检查界面目标,排序移动端可用性风险”采用以下可解释方法:内容不会执行;只应用可解释的静态模式和受限的浏览器操作。
验收检查
验收检查:接受触控目标尺寸审计器的结果前,请完成在源位置人工复核,并使用适当的专业安全工具或授权流程独立验证;核验证据应与“按宽度、高度与间距检查界面目标,排序移动端可用性风险”这一目标一致。触控目标尺寸审计器的使用边界:代码不会执行;未发现问题并不能证明不存在漏洞。
预期输出
触控目标尺寸审计器完成后会提供证据位置、严重程度、误报可能性和下一步核验操作,并围绕“按宽度、高度与间距检查界面目标,排序移动端可用性风险”组织结果。. 按宽度、高度与间距检查界面目标,排序移动端可用性风险。
03

ARIA 可访问名称清单

准备
ARIA 可访问名称清单的输入应为包含按钮、链接、图片与表单控件且无需执行脚本的 HTML 片段。本次处理目标是:盘点 HTML 中按钮、链接与表单控件的可访问名称,并找出无名称控件。处理敏感真实数据前,请先用合成示例确认格式。
执行
运行设备端处理。ARIA 可访问名称清单为实现“盘点 HTML 中按钮、链接与表单控件的可访问名称,并找出无名称控件”采用以下可解释方法:HTML 由 DOMParser 作为惰性文档解析,并按可访问名称优先级检查可见文本、label 关联、aria-labelledby、aria-label、alt 与 title。
验收检查
验收检查:接受ARIA 可访问名称清单的结果前,请完成使用键盘聚焦每个交互元素,并在真实屏幕阅读器与无障碍树中核对名称、角色、状态和错误信息;核验证据应与“盘点 HTML 中按钮、链接与表单控件的可访问名称,并找出无名称控件”这一目标一致。ARIA 可访问名称清单的使用边界:静态 HTML 清单无法完整观察 CSS 隐藏文本、Shadow DOM、运行时状态或屏幕阅读器行为,也不是 WCAG 合规报告。
预期输出
ARIA 可访问名称清单完成后会提供包含元素类型、选择器提示、名称来源以及无名称或可疑控件状态的清单,并围绕“盘点 HTML 中按钮、链接与表单控件的可访问名称,并找出无名称控件”组织结果。. 盘点 HTML 中按钮、链接与表单控件的可访问名称,并找出无名称控件。
04

颜色对比度检查器

准备
颜色对比度检查器的输入应为受支持的颜色、CSS、SVG、图像或尺寸值。本次处理目标是:按 WCAG 对比度与文本阈值比较两种颜色。处理敏感真实数据前,请先用合成示例确认格式。
执行
运行设备端处理。颜色对比度检查器为实现“按 WCAG 对比度与文本阈值比较两种颜色”采用以下可解释方法:使用浏览器 API 和公开的转换公式处理数值,同时保留源内容。
验收检查
验收检查:接受颜色对比度检查器的结果前,请完成在浅色/深色背景、不同屏幕尺寸、目标应用及源内容之间进行视觉比较;核验证据应与“按 WCAG 对比度与文本阈值比较两种颜色”这一目标一致。颜色对比度检查器的使用边界:请保留源文件,并在目标应用中验证输出兼容性。
预期输出
颜色对比度检查器完成后会提供可预览的视觉值、尺寸或格式摘要,以及可复制或下载的结果,并围绕“按 WCAG 对比度与文本阈值比较两种颜色”组织结果。. 按 WCAG 对比度与文本阈值比较两种颜色。
何时应停止?

CSS Z-index 层级映射器适用以下边界:CSS Z-index 层级映射器的使用边界:代码不会执行;未发现问题并不能证明不存在漏洞。 如果未满足该条件,请勿把输出传递到工作流的下一步。

检查记录

落实《移动界面质量:层级、触控目标与可访问名称》时,请记录工具名称、所选设置、浏览器版本,以及“使用CSS Z-index 层级映射器完成:按 z-index 排序 CSS 选择器,找出冲突与极端层级”的接受或拒绝理由,而不是敏感内容。这样既能重复检查,也不会复制真实数据。