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

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

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

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

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

デザイナー

□ テキストとその背景色の間に十分なコントラストがあることを確認してください。

WCAGによると、テキストとテキストの背景のコントラスト比は少なくとも4.5対1である必要があります。フォントが少なくとも24ピクセルまたは19ピクセルの太字の場合、最小値は3対1に下がります。（ただし、これは番号付きのサイズは必ずしも視覚的なサイズタイプを反映しているとは限らないため、少しあいまいです）。画像上のテキストには特に注意してください。

出典：Salesforce UX

□ 色だけを使用して重要な情報を表示しないようにします。

色を簡単に区別できない人があなたのコンテンツを理解して使用できるように、別のインジケーター（色分けに付随するアイコンやリンクされたテキストの下線など）が必要です。

出典：UCLA

□ コントラストを上げるために（色相だけでなく）色の値をペアにします。

2つの色相から色情報を取り除き、値を比較すると、大きな違いはない場合があります。 異なる値をペアリングすると、コントラストが作成されます。

出典: UCLA

□ コンテンツを理解して操作するための唯一の指標として感覚特性に依存しないでください。

コンテンツを操作または理解するための重要な指示を示すために、画像、形状、サイズ、視覚的な位置、向き、または音だけに頼るべきではありません。 代わりに、コンテンツを識別するために、配置、色、およびラベル付けの組み合わせを使用してください。

出典：W3C

□ ユーザーが自分のいる場所をナビゲートして理解できるように、フォーカス状態をデザインします。

デザインがフォーカス状態を積極的に隠してはいけません。人々がキーボードを使用してナビゲートする場合、製品には非常に目立つフォーカス状態が含まれている必要があります。

出典： W3C

□ ユーザーが入力を理解し、間違いを回避して修正できるようにします。

フォーカスが入力内にある場合、ラベルが完全に消えることはありません。 ユーザーは、入力する内容について常に明確な指示を持っている必要があります。 エラーとエラーの修正方法を説明するエラーメッセージをテキストで入力します。 エラーを示すために色だけに頼らないでください。

出典：W3C

□ 画像に適した代替テキストを書く

視力の弱いユーザーは、話すブラウザを使用してWebを「読み取る」ことがよくあります。これらの専用ブラウザは、ユーザーがサイト上の単語を聞くことができるように、テキストを音声に変換します。 話しているブラウザが画像に到達すると、読み上げ可能な代替テキストを探します。 何も見つからない場合は、「画像」とだけ表示されることが多く、画像が何であるか、ストーリーにとってどのように重要であるかについて、ユーザーは暗闇の中に置かれます。

代替テキストを「写真」のように設定するだけでなく、画像で何が起こっているかを説明するすべての要素を説明します。

テキストの画像を使用する必要がある場合は、関連する場合はデザインと、画像内のすべての単語を必ず説明してください。

出典：WebAim: The Basics of Good Alt Text

□ エクスペリエンスにアクセスできない場合は、ユーザーがその情報を取得するための別のルートを作成します。

特定のコンポーネント（SVGマップなど）をアクセス可能なエクスペリエンスにするのは難しい場合があります。そのような場合は、スクリーンリーダーに適した追加のエクスペリエンスを作成することを検討するか、少なくともユーザーにエクスペリエンスを説明してください。

□ レイアウトとコピーをできるだけ一貫して明確にしましょう。

機能、配置、およびラベル付け全体で一貫性を保ちます。 同じ機能を持つコンポーネントが機能し、一貫して識別される必要があります。 セクションの見出しを使用してコンテンツを整理します。 書面で明確にしてください。 専門用語やイディオムを避けてください。

出典：Viget

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

ツールのご紹介

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

[詳細]

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

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

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

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

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

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

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

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

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

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

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

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