Webアクセシビリティテストにプロキシを使用する方法

Webアクセシビリティテストにおけるプロキシの役割を理解する

金継ぎのように、欠点を隠すのではなく際立たせる技術のように、ウェブアクセシビリティテストは、デジタル体験がすべての人にとって完全なものとなるよう、障壁を明らかにすることを目指します。仲介役として機能するプロキシは、テスターが地理的、技術的、そして知覚的な様々なレンズを通してウェブを捉えることを可能にします。これは、仏教の「初心」（初心、つまり開かれた、好奇心旺盛で、思い込みにとらわれない心）の概念を反映しています。

---

アクセシビリティテストで使用されるプロキシの種類

プロキシタイプ	主な使用例	利点	デメリット
HTTP/Sプロキシ	ウェブトラフィックを検査および変更し、代替コンテンツ配信をテストする	柔軟性があり、SSL復号化をサポート	設定は複雑になる可能性がある
SOCKS プロキシ	すべてのトラフィックをTCPレベルでルーティングする	プロトコルに依存せず、多くのアプリケーションで動作します	限定的なコンテンツ検査
リバースプロキシ	サーバー側の変更をシミュレートし、ソースでアクセシビリティをテストする	集中管理、キャッシュ	クライアントサイドスクリプトには適していません
アクセシビリティプロキシ	支援技術（スクリーンリーダーなど）のシミュレーションに特化	a11yシナリオに焦点を当てる	利用できるツールが少ない

---

アクセシビリティ テストにプロキシを使用する理由

禅庭が慎重な配置によって風景を明らかにするのと同じように、プロキシは次のようなデジタル アクセシビリティの隠れた経路と障害を明らかにします。

• スクリーンリーダーへの代替テキスト配信のテスト
• 低速または信頼性の低い接続をシミュレートする（実際のユーザー制約を模倣する）
• 支援技術への反応を評価するためにリクエストを傍受して変更する
• 地域制限のあるコンテンツにアクセスしてローカリゼーションと言語サポートをテストする

---

アクセシビリティテスト用のHTTPプロキシの設定

例: 使用 フィドラー

1. Fiddlerをインストールする: 公式サイトから Fiddler をダウンロードしてインストールします。
2. ブラウザ/デバイスの設定: ブラウザのプロキシを次のように設定します 127.0.0.1:8888 (デフォルトの Fiddler ポート)。
3. トラフィックをキャプチャ: Fiddler を開いてキャプチャを開始します。すべての HTTP/S リクエストは Fiddler を経由してルーティングされます。
4. 変更リクエスト: Fiddler の「AutoResponder」を使用して、画像、CSS、またはスクリプトを、支援技術の動作をシミュレートする代替手段と交換します。
5. テスト出力: スクリーンリーダーを使用してブラウザでサイトを開きます。 NVDA または ジョーズ 変更がアクセシビリティにどのような影響を与えるかを確認します。

コード例: ALT テキストで画像を交換する FiddlerScript

System をインポートします。Fiddler をインポートします。Handlers クラス { パブリック静的関数 OnBeforeResponse(oSession: Session) { if (oSession.uriContains("example.com/image.jpg")) { oSession.utilReplaceInResponse("

---

アクセシビリティプロキシによる支援技術のシミュレーション

書道家がたくさんの筆をテストするように、アクセシビリティ プロキシは、さまざまな支援技術がサイトをどのように解釈するかを観察するのに役立ちます。

• 斧プロキシ: 統合 斧芯 アクセシビリティエンジンをプロキシサーバーに組み込みます。HTTPリクエストをインターセプトし、レスポンスにAxeを挿入して、自動アクセシビリティレポートを返します。
• axe-proxyを設定する:
  1. Node.js をインストールします。
  2. npm インストール -g axe-proxy
  3. 走る： axe-proxy --port 8080
  4. ブラウザ/システムプロキシを設定する ローカルホスト:8080
  5. サイトを閲覧し、プロキシによって報告されたアクセシビリティ違反を確認します。

---

低速接続とフォールバックのテスト

茶道の達人が香りを楽しむためにゆっくりと茶を注ぐように、低速ネットワークをシミュレートしてサイトの応答性をテストしましょう。支援技術を使用しているユーザーは、帯域幅が制限されていることがよくあります。

• 使用 チャールズ・プロキシ:
  1. チャールズを開きます。
  2. [プロキシ] > [スロットル設定] に移動します。
  3. スロットルを有効にし、速度を選択します (例: 56kbps)。
  4. 特に画像とスクリプトについては、サイトの読み込みとフォールバック コンテンツを観察します。

---

HTTPレスポンスの傍受と変更

非永続性について考えるには、サイトが欠落したリソース、変更されたリソース、またはエラーのあるリソースをどのように処理するかをテストします。

• Fiddler または Charles では、書き換えツールを使用して次の操作を実行できます。
  • ARIA属性を削除または破損する
  • フォーカスの可視性をテストするためのブロック CSS
  • テキストを別の言語に置き換える

例: Mitmproxy による ARIA 属性の削除

mitmproxy から http をインポートします。def response(flow: http.HTTPFlow) -> None: flow.response.content に b'aria-label' が含まれている場合: flow.response.content = flow.response.content.replace(b'aria-label', b'')

• 名前を付けて保存 削除_aria.py
• 走る： mitmproxy -s remove_aria.py

---

アクセシビリティテストのためのプロキシの比較

道具	プラットフォーム	ユニークな機能	ベストユースケース	リンク
フィドラー	ウィンドウズ/マック	自動応答、検査官	HTTP/Sトラフィック操作	https://www.telerik.com/fiddler
チャールズ・プロキシ	ウィンドウズ/マック	スロットル、マップローカル	低速ネットワークのシミュレーション、オフラインテスト	https://www.charlesproxy.com/
mitmproxy	クロスプラットフォーム	Python スクリプト、CLI	カスタムレスポンス操作	https://mitmproxy.org/
斧プロキシ	Node.js	自動a11y分析	自動アクセシビリティテスト	https://github.com/dequelabs/axe-proxy

---

実践的なユースケースとステップバイステップのガイダンス

1. 画像のALTフォールバックのテスト

   • 画像を削除するには、Fiddler AutoResponder を使用します。
   • スクリーン リーダーでテストして、説明的な ALT が読み上げられることを確認します。

2. キーボードナビゲーションの検証

   • Charles では、CSS をブロックしてタブ順序とフォーカス スタイルを表示します。
   • 論理的な順序を確保するために、インターフェイスを手動でタブ操作します。

3. 言語とローカリゼーション

   • mitmproxy を使用して、テキスト ノードを代替言語に置き換えます。
   • スクリーン リーダーを使用して言語属性とアナウンスを確認します。

4. ARIA の誤用テスト

   • 応答をインターセプトして、ARIA のロールとプロパティを削除または変更します。
   • 支援技術のフィードバックの変化を観察します。

---

文化的洞察：継続的な洗練の道

日本の職人技において、「カイゼン」とは継続的な改善を意味します。Webアクセシビリティは、盆栽を根気強く手入れするのと同じように、継続的なプロセスです。プロキシを活用することで、ユーザーが世界を体験する多様な方法に合わせてサイトを適応させ、技術的な構造だけでなく、Webそのものの魂を洗練させることができます。

さらに詳しい情報については、以下を参照してください。
– WebAIM: Webアクセシビリティ入門
– W3Cアクセシビリティテスト
– デケ大学: アクセシビリティテストツール

賢い庭師のように、テストツールを多様化し、方法を慎重に検討し、包含への取り組みを揺るぎないものにしてください。