🗂️ Design Materials：アクセシビリティ・ガイドライン：QAのためのチェックリスト

このチェックリストを使用して、プロジェクトでの役割や段階に関係なく、プロセスにアクセシビリティを組み込むことができます。

1. プロジェクトに適用されるガイドラインのチェックボックスをオンにします。

2. チェックリストをプレビューしてクリップボードにコピーします。

3. チェックリストをドキュメント、クリックアップ、Slack、Trelloなどのマネージメントソフトに貼り付けます。それ以外の場合は、チームがプロジェクトを編成します。

QA品質保証

□ WAVEChrome拡張機能を使用して各ページを実行します。

このツールは完璧ではありませんが、アクセシビリティエラーの良い基盤を提供します。

WAVE Evaluation Tool

□ ユーザーは、キーボードを使用してコンテンツをナビゲートできる必要があります。

注意してください：ナビゲーションとドロップダウンメニューにアクセスすると、ユーザーはページ全体をタブで移動でき、要素に閉じ込められないようにする必要があります。これは、モーダルの一般的な問題であり、選択可能な要素（リンク、ボタン、等

□ ユーザーは、スクリーンリーダーを使用してコンテンツをナビゲートできる必要があります。

Appleの組み込みのVoiceOverはこのためにうまく機能し、その使用方法に関する組み込みのチュートリアルが含まれています。

MacでVoiceOverをオン/オフにする

□ コンテンツの一般的なアーキテクチャと階層は理にかなっているはずです。

ヘッダーが存在し、クリック可能な要素が明確に示され、ユーザーがナビゲートできる必要があります。照明が不十分なコンテンツや数フィート離れた場所からコンテンツを表示している場合は、テキストを読みやすくする必要があります。ユーザーがコンテンツを見たり理解したりするのに問題があると予測できる場合、それは何かがオフになっていることを示す適切な指標です。

□ スクリーンリーダーを使用しているユーザーや接続速度の遅いユーザーが引き続き画像を理解できるように、グラフと画像にはすべて代替テキストを含める必要があります。

□ 装飾的な画像はスクリーンリーダーに表示されないようにする必要があります。

上記のセクションでチェックしたすべてのガイドラインは、このプレビューボックスに表示されます。チェックリストをクリップボードにコピーして、チームと共有できる形式に貼り付けます。

ツールのご紹介

これらのツールを使用して、作業にアクセスできるようにしましょう。

[詳細]

• ベストプラクティスを確認するためのWCAG2.1ガイドライン
  WCAG2.1ガイドライン

• 製品全体のアクセシビリティを確認するためのWAVE
  Webアクセシビリティ評価ツール：Chrome拡張機能

• Webアクセシビリティチェッカー
  製品全体のアクセシビリティをチェックしよう：Webアクセシビリティチェッカー

• コントラスト・アナラ​​イザー
  色のコントラストを分析するための色のコントラスト・アナラ​​イザー

• カラーパレット・アクセシビリティ・チェッカー
  コントラストを通過するために色の組み合わせを自動的にチェックするカラーパレット・アクセシビリティ・チェッカー

• カラー・エクストラクター
  CSSですべての色を検索し、カラーパレットアクセシビリティチェッカーにロードするためのカラー・エクストラクター・ブックマークレット

• Webアクセシビリティ・チェッカー
  製品全体のアクセシビリティをチェックするWebアクセシビリティ・チェッカー

• カラーセーフ
  アクセス可能なカラーパレットを作成するためのカラーセーフ

• カラーオラクル
  色覚異常をシミュレートするカラーオラクル

• シム・ダルトニズム
  色覚異常をシミュレートするシム・ダルトニズム

私も色々勉強中なので、皆さまのご意見・ご感想をお聞かせください。
お読み頂きまして、ありがとうございました。

メルボルンを拠点にプロダクトデザイナーとして働いています。 主にデジタル・プロダクトの制作に携わっています。