通过

辅助功能测试功能

  • 项目

本文列出了要测试网页的典型辅助功能方面，以及 Microsoft DevTools 中的相应功能。

图像的替换文字

检查的辅助功能方面 DevTools 的功能 文章
验证图像是否具有替换文字 报表的问题 工具 >辅助功能 部分 在自动测试网页中的辅助功能问题中验证图像是否包含替换文字
验证图像是否具有替换文字 有关替换文字的 Lighthouse 工具>问题 使用 Lighthouse 测试辅助功能

键盘支持

检查的辅助功能方面 DevTools 的功能 文章
验证键盘支持 检查 覆盖层 >的工具辅助功能 部分 使用“检查”工具通过悬停在网页上来检测辅助功能问题 ， 并使用“检查”工具分析 HTML 页面
验证键盘支持 Tab、 Shift+Tab 和 Enter 键 使用 Tab 和 Enter 键检查键盘支持
验证键盘支持：验证是否已指示焦点 “检查 工具”、“ 样式 ”选项卡和 “源” 工具 分析缺少键盘焦点的指示
验证键盘支持：验证表单按钮是否可以与键盘一起使用 “检查工具”、“元素”工具中的 DOM 树和“事件侦听器”选项卡 分析表单中缺少键盘支持
验证键盘支持：验证 Tab 键 顺序 “元素”工具>“”辅助功能“选项卡”源顺序查看器”> 使用源顺序查看器测试键盘支持
验证键盘支持 有关键盘支持的 Lighthouse 工具>问题 使用 Lighthouse 测试辅助功能

文本对比度

检查的辅助功能方面 DevTools 的功能 文章
验证文本是否自动具有足够的对比度 (，以便整个页面) 报表的问题 工具 >辅助功能 部分 在自动测试网页中的辅助功能问题中验证文本颜色是否具有足够的对比度
验证文本是否具有足够的对比度 元素 工具 >“样式 ”选项卡 >颜色选取器 使用颜色选取器测试文本颜色对比度
验证文本是否具有足够的对比度 检查覆盖>对比度行的“检查工具>辅助功能”部分 使用“检查”工具通过悬停在网页上来检测辅助功能问题 ， 并使用“检查”工具分析 HTML 页面
验证文本是否具有足够的对比度：处于悬停状态 元素 工具 >“样式 ”选项卡 >“切换元素状态 ” (显示 “强制元素状态 ”复选框) 验证元素的所有状态的可访问性
验证文本是否具有足够的对比度：深色主题 (深色模式) 浅色主题 呈现 工具 >模拟 CSS 媒体功能 prefers-color-scheme 检查深色主题和浅色主题的对比度问题
验证文本是否自动具有足够的对比度 (，以便整个页面) Lighthouse 工具 > 有关文本对比度的问题 使用 Lighthouse 测试辅助功能

屏幕阅读器支持

检查的辅助功能方面 DevTools 的功能 文章
验证屏幕阅读器支持：验证输入字段是否具有标签 报表的问题 工具 >辅助功能 部分 在“自动测试网页”中验证输入字段是否具有标签，了解辅助功能问题
验证屏幕阅读器支持 > 检查覆盖>名称和角色的工具辅助功能部分 使用“检查”工具通过悬停在网页上来检测辅助功能问题 ， 并使用“检查”工具分析 HTML 页面
验证屏幕阅读器支持 元素 工具 >辅助功能 选项卡 >辅助功能树 检查辅助功能树以获取键盘和屏幕阅读器支持， 并使用“辅助功能”选项卡测试辅助功能
验证屏幕阅读器支持 Lighthouse 工具 > 有关屏幕阅读器支持的问题 使用 Lighthouse 测试辅助功能

视力缺陷

检查的辅助功能方面 DevTools 的功能 文章
验证网页是否可由色盲人士使用 渲染 工具 >“模拟视觉缺陷” 下拉列表 验证页面是否可由色盲人士使用
验证网页是否可用于视觉模糊 渲染 工具 >“模拟视觉缺陷” 下拉列表 验证页面是否可用于模糊的视觉
在关闭 UI 动画 (减少运动) 时，验证网页是否可用 渲染 工具 >模拟 CSS 媒体功能首选减少运动 在关闭 UI 动画的情况下验证页面是否可用
验证网页是否可由有视力缺陷的人使用 有关视力缺陷的 Lighthouse 工具>问题 使用 Lighthouse 测试辅助功能

窄时可用

检查的辅助功能方面 DevTools 的功能 文章
验证网页布局在窄时是否可用 设备仿真 工具 验证网页布局在窄时是否可用，并 模拟移动设备 (设备仿真)

另请参阅