アクセシビリティテスト（Accessibility Testing）

はじめに

ローカル環境をはじめにの指示に従って設定したことを確認してください。

キーボードテスト

マウスに加えて、インターフェースがキーボードのみのユーザーにも完全にアクセス可能であることを確認してください。変更をキーボードだけで操作してみてください:

• インタラクティブな要素がTab、Shift+Tab、または矢印キーを使用してフォーカスを受け取れることを確認してください。
• ボタンはEnterまたはSpaceを押すことでアクティブにする必要があります。
• ラジオボタンとチェックボックスはSpaceを押すことでチェックされるべきですが、Enterではありません。

要素が矢印キーを使用してフォーカスできるが、
TabやShift+Tabではできない場合は、WAI-ARIAコンポジットサブクラスロールのいずれかを使用してグループ化することを検討してください。たとえば、toolbar、menu、listboxなどです。

インタラクションが複雑または混乱している場合は、それがキーボードのみのユーザーにも影響を与えることを考慮してください。

スクリーンリーダーテスト

WebAIM: スクリーンリーダーユーザー調査 #8 結果によると、最も一般的なスクリーンリーダーとブラウザの組み合わせは次のとおりです:

スクリーンリーダーでテストする際は、このリストの上部にあるいくつかの組み合わせを使用してみてください。たとえば、VoiceOverでテストする場合は、Safariを使用することが望ましいです。

NVDA with Firefox

NVDAはWindows用の無料のスクリーンリーダーであり、最も人気のあるものです。

インストール後、他のプログラムと同様にアプリを開くことでNVDAを起動できます。システムトレイにアイコンが表示され、さらに多くのオプションにアクセスできます。「スピーチビューア」ダイアログを有効にすることをお勧めします。これにより、スクリーンショットを撮る際にNVDAが発表している内容を示しやすくなります。

Gutenbergエディタ内でNVDAが有効になっている状態で、
Insert+F7を押すと、リンク、見出し、フォームフィールド、ボタン、ランドマークなど、タイプ別にグループ化された要素を見つけることができる要素リストが開きます。

要素に適切なラベルが付いていることを確認し、ランドマークを通じてナビゲートし、その後Tabと矢印キーを使用してランドマーク内の要素を移動することをお勧めします。

VoiceOver with Safari

VoiceOverはmacOSのネイティブスクリーンリーダーです。システム環境設定 > アクセシビリティ > VoiceOver > VoiceOverを有効にするか、Commandキーを押しながらTouch IDを3回素早く押すことで有効にできます。

Gutenbergエディタ内でVoiceOverが有効になっている状態で、
Control+Option+Uを押すと、ローターが開き、ページ上のさまざまな領域や要素をより簡単に見つけることができます。これは、要素が正しくラベル付けされていることを確認するための良い方法でもあります。このリストの名前が意味をなさない場合は、改善する必要があります。

個々の要素ではなく、最初に地域や他の大きなエリアを選択することをお勧めします。そうすることで、その地域内のナビゲーションをより良くテストできます。

インタラクションしたい地域を見つけたら、Control+Optionと右または左の矢印キーを使用して、ページ上の次または前の要素に移動できます。その後、VoiceOverが発表する指示に従ってください。