アクセシビリティと互換性のテスト

アクセシビリティは、目が見えにくい人、キーボードだけで操作する人など、誰でも使えるかということです。基準として WCAG（ウェブコンテンツのアクセシビリティの国際的なガイドライン）がよく使われます。

自動チェックと手動チェック

まず自動チェックを CI に入れて機械的な問題を防ぎ、主要な画面は手動で確かめる、と分担すると続けやすくなります。現在の WCAG の最新の勧告は 2.2 です。

WCAG（ウェブコンテンツ・アクセシビリティ・ガイドライン）は、W3C が出しているアクセシビリティの国際的な基準で、現在の勧告は 2.2 です。4つの原則の下に、確かめられる達成基準が並んでいます。

多くの組織はレベル AA を目標にします。日本では JIS X 8341-3 が WCAG に合わせた規格になっています。

キーボードだけで操作できるかは、特別な道具なしで誰でもすぐ確かめられる、効果の大きいテストです。マウスを使わず、次のキーで主要な流れを最後まで進めます。

よくある不具合は、フォーカスが見えない（枠線を消している）、ダイアログの外へフォーカスが逃げる、div で作ったボタンに届かない、の3つです。

スクリーンリーダーは、画面の内容を読み上げる道具で、目の見えない人や見えにくい人が使います。主要な画面だけでも実際に使ってみると、自動チェックでは分からない問題が見つかります。

確かめること：ボタンやリンクが「何をするか」を読み上げるか（「ボタン」だけにならない）、画像の代替テキストが意味として正しいか、エラーや「保存しました」などの通知が読み上げられるか、見出しの順で内容の構成が分かるか。

文字と背景の色の差（コントラスト比）は、レベル AA では通常の文字で 4.5:1 以上、大きな文字で 3:1 以上が求められます。開発者ツールで要素を選ぶと、コントラスト比を表示できます。

コントラストや代替テキストのような機械的に分かる問題は、axe を E2E テストに組み込んで毎回確かめると、入り込むのを防げます。

import AxeBuilder from '@axe-core/playwright';

test('カート画面に重大なアクセシビリティの問題がない', async ({ page }) => {
  await page.goto('/cart');
  const results = await new AxeBuilder({ page }).analyze();
  expect(results.violations).toEqual([]);
});

既存の画面で問題が多すぎるときは、重大なものから直し、新しい問題を増やさないことから始めます。

互換性のテストは、利用者が使うさまざまなブラウザ・端末・OS で正しく動くかを確かめるテストです。全部の組み合わせは試せないので、対応する環境を決めて、そこに絞ります。

対応する環境の一覧は、利用者向けのヘルプにも書いておくと、問い合わせの対応がしやすくなります。古い版のサポートを打ち切るときは、利用者の割合を見て PdM と決めます。

ペアワイズ（組み合わせテスト）