如何使用代理进行 Web 可访问性测试

了解代理在 Web 可访问性测试中的作用

如同金缮艺术凸显而非掩盖缺陷一样，网页无障碍测试力求揭示障碍，从而为每个人带来完整的数字体验。代理服务器充当中介，使测试人员能够从不同的视角（地理、技术和感知）感知网页，这体现了佛教的“初心”（shoshin，意为“初学者的心态”）：开放、好奇、不带任何预设。

---

可访问性测试中使用的代理类型

代理类型	主要用例	优点	缺点
HTTP/S代理	检查和修改网络流量，测试替代内容交付	灵活，支持SSL解密	配置可能很复杂
SOCKS 代理	在 TCP 级别路由所有流量	与协议无关，可与许多应用程序配合使用	有限内容检查
反向代理	模拟服务器端更改，测试源头的可访问性	集中控制、缓存	不适合客户端脚本
无障碍代理	专门用于模拟辅助技术（例如屏幕阅读器）	专注于 A11y 场景	可用的工具更少

---

为什么使用代理进行可访问性测试？

正如禅宗花园通过精心布置展现景观一样，代理揭示了数字无障碍中的隐藏路径和障碍，例如：

• 测试向屏幕阅读器传递替代文本
• 模拟缓慢或不可靠的连接（模仿真实用户的限制）
• 拦截和修改请求以评估对辅助技术的响应
• 访问受地理限制的内容以测试本地化和语言支持

---

设置 HTTP 代理进行可访问性测试

示例：使用 Fiddler

1. 安装 Fiddler：从官方网站下载并安装Fiddler。
2. 配置浏览器/设备：将浏览器的代理设置为 127.0.0.1:8888 （默认的 Fiddler 端口）。
3. 捕获流量：打开 Fiddler 并开始捕获。所有 HTTP/S 请求都将通过 Fiddler 路由。
4. 修改请求：使用 Fiddler 的“AutoResponder”将图像、CSS 或脚本与模拟辅助技术行为的替代方案交换。
5. 测试输出：在浏览器中打开您的网站，使用屏幕阅读器，例如 NVDA 或者 大白鲨 验证变化如何影响可访问性。

代码示例：FiddlerScript 使用 ALT 文本交换图像

导入系统；导入 Fiddler；类处理程序 {公共静态函数 OnBeforeResponse（oSession：Session）{如果（oSession.uriContains（“example.com/image.jpg”））{oSession.utilReplaceInResponse（“

---

使用辅助代理模拟辅助技术

就像书法家测试多支画笔一样，辅助功能代理可以帮助您观察不同的辅助技术如何解读您的网站。

• axe-proxy：整合 斧核 将可访问性引擎集成到代理服务器中。它拦截 HTTP 请求，将 Axe 注入响应中，并返回自动可访问性报告。
• 设置 axe-proxy:
  1. 安装 Node.js。
  2. npm install -g axe-proxy
  3. 跑步： axe-proxy --端口 8080
  4. 将浏览器/系统代理设置为 本地主机：8080
  5. 浏览您的网站；查看代理报告的可访问性违规行为。

---

测试慢速连接和回退

就像茶师放慢倒茶速度来感受香气一样，模拟慢速网络来测试您的网站响应情况。使用辅助技术的用户通常带宽有限。

• 使用 查尔斯·普罗西:
  1. 打开查尔斯。
  2. 转到代理>节流设置。
  3. 启用节流，选择速度（例如，56kbps）。
  4. 观察网站加载和后备内容，尤其是图像和脚本。

---

拦截和修改 HTTP 响应

为了反映无常性，请测试您的网站如何处理丢失、更改或错误的资源：

• 使用 Fiddler 或 Charles，使用重写工具来执行以下操作：
  • 删除或损坏 ARIA 属性
  • 阻止 CSS 测试焦点可见性
  • 用其他语言替换文本

示例：使用 Mitmproxy 删除 ARIA 属性

从 mitmproxy 导入 http def response(flow: http.HTTPFlow) -> None: 如果 b'aria-label' 在 flow.response.content 中：flow.response.content = flow.response.content.replace(b'aria-label', b'')

• 另存为 删除aria.py
• 跑步： mitmproxy -s remove_aria.py

---

比较可访问性测试的代理

工具	平台	独特功能	最佳用例	关联
Fiddler	Windows/Mac	自动回复器、检查员	HTTP/S 流量操纵	https://www.telerik.com/fiddler
查尔斯·普罗西	Windows/Mac	节流，本地地图	模拟慢速网络，离线测试	https://www.charlesproxy.com/
mitmproxy	跨平台	Python 脚本、CLI	自定义响应操作	https://mitmproxy.org/
axe-proxy	Node.js	自动化 a11y 分析	自动化可访问性测试	https://github.com/dequelabs/axe-proxy

---

实际用例和分步指导

1. 测试图片 ALT 后备

   • 使用 Fiddler AutoResponder 删除图像。
   • 使用屏幕阅读器进行测试以确保读出描述性的 ALT。

2. 验证键盘导航

   • 使用 Charles，阻止 CSS 来显示选项卡顺序和焦点样式。
   • 手动浏览界面以确保逻辑顺序。

3. 语言和本地化

   • 使用 mitmproxy 将文本节点替换为其他语言。
   • 使用屏幕阅读器验证语言属性和公告。

4. 测试 ARIA 滥用

   • 拦截响应以删除或更改 ARIA 角色和属性。
   • 观察辅助技术反馈的变化。

---

文化洞察：持续精进之路

在日本工艺中，“kaizen”（改善）意为持续改进。网页无障碍访问就像耐心地塑造盆景一样，是一个持续不断的过程。使用代理服务器，您可以根据用户体验世界的不同方式调整您的网站，这不仅会改进技术架构，还会重塑网页本身的灵魂。

如需进一步阅读，请参阅：
– WebAIM：Web 可访问性简介
– W3C 可访问性测试
– Deque 大学：可访问性测试工具

就像聪明的园丁一样，让您的测试工具多样化，让您的测试方法深思熟虑，让您的包容性承诺坚定不移。