ウェブ・アクセシビリティ・クックブック

第13章. デバッグの壁

この作品はAIを使って翻訳されている。ご意見、ご感想をお待ちしている：[e-mail]

何がアクセシブルなWebサイトとなるかを理解し、実装する際に何を見るべきかを知ることは不可欠だが、いずれにせよ失敗から身を守ることはできない。

さらに、Webサイトでは他の人と一緒に作業することも多い。多くの人が関われば関わるほど、バグが発生しやすくなる。異なる専門分野の人が多いということは、潜在的なエラーの原因も多くなるということだ。

自動テストソフトウェアは、手動テストに取って代わるものではないが、低空飛行の果実を捕らえ、ずさんなミスを発見するのに役立つ。デバッグツールと組み合わせることで、キーボード、スクリーンリーダー、その他の支援技術を使用した手動テストのためにWebサイトを準備することができる。

13.1 アクセシビリティの問題を自動的に発見する

問題

、手動でコードをスキャンしてアクセシビリティの問題を探すのは、時間がかかり、困難で、エラーが起こりやすい。

解決策

手動テストに進む前に、自動テストツールを使って、簡単に検出できるアクセシビリティの問題を発見してください。例13-1のコードには、テストのためにいくつかのアクセシビリティの問題が含まれている。

例 13-1. デモをテストする：HTMLのサンプル・コードにアクセスできない

<h2 aria-label="Registration">Sign Up</h2>

<form aria-labelledby="h2">
  <input type="text" name="username">

  <button>
    <img src="send.jpg">
  </button>

  <p>
    <a href="#" aria-hidden="true">Disclaimer</a>
  </p>
</form>

例 13-1のコードは、さまざまなブラウザ拡張を使ってテストできる。よく使われるテストツールは、axe DevTools(図13-1を参照)、Google Lighthouse(図13-2を参照)、WAVE(図13-3を参照)、ARC Toolkit(図13-4を参照)、IBM Equal Access Accessibility Checker(図13-5を参照)の5つである。

図13-1 axe DevToolsは問題の合計数を表示する

図13-2. Google Lighthouseがスコアを出す

図13-3. WAVEはエラーの数を表示し、影響を受けた要素に注釈を付ける。

図13-4. ARC Toolkitは問題の合計数を示している。

図13-5. IBM Equal Access Accessibility ...