Braze でアクセシブルなメッセージを作成する

障がい者を排除したマーケティングコンテンツは、意図しなくても、何百万人もの人々がブランドと関わることを妨げる可能性があります。マーケティングにおけるアクセシビリティとは、誰もがマーケティングを体験し、コミュニケーションを受け取って理解し、製品、サービス、またはブランドに投資したり、ファンになったりする機会を得られることです。メッセージングをデザインする際には、どのようにすればすべての顧客がデザインにアクセスできるようになるかを考慮し、特別な時間をかけること。

なぜアクセシビリティが重要なのか

• 使いやすさの向上:アクセシビリティは、ユーザーがコンテンツとどのように相互作用するかを考えているため、アプリやサイトのユーザビリティについて考えることを促す。つまり、アクセシビリティは、障がい者だけでなく、すべてのユーザーのオンラインエクスペリエンスを向上させることが多いです。
• 市場でのリーチの拡大:世界の障がい者市場は10億人を超え、購買力は7兆ドル近くに上ります。

  「障がい者の市場は大きく、世界人口の高齢化に伴い拡大しています。英国では、大きな障がい者市場が「パープルポンド」と呼ばれ、障害者とその家族は毎年少なくとも2,490億ポンドを費やしています。米国では、障がい者の年間裁量支出は2,000億ドルを超えています。障がい者市場の世界的な推定規模は約7兆ドルです。」
  ソースW3C

• 法的リスクを最小限に抑える：多くの国で、デジタル・アクセシビリティを義務付ける法律がある。

考慮すべき障害分野

このセクションは、W3Cから一部引用している：Diverse Abilities and Barriers」から一部引用されています。

ビジュアル

視覚障がいは、片目または両目の軽度または中等度の視力喪失から、両目の視力の重度または完全な喪失までさまざまです。特定の色に対する感度が低下したり、完全に失われたりする人もいれば、明るい色に対する感度が高まる人もいます。

このようなユーザーがコンテンツを操作するには、次の機能が必要です。

• 文字や画像を拡大・縮小する
• フォント、色、スペーシングの設定をカスタマイズする
• コンテンツの音声合成を聞く（つまり、スクリーンリーダーを使う）
• ビデオの音声解説を聞く
• リフレッシュ可能な点字を使用したテキストの読み取り

聴覚

聴覚障害には、片耳または両耳の軽度から中程度の聴覚障害が含まれます。部分的な難聴であっても、オーディオ・コンテンツに関しては問題になることがある。

コンテンツを理解するために、これらのユーザーは以下に依存します。

• 音声コンテンツのトランスクリプトとキャプション
• キャプションを表示し、キャプションの文字サイズや色を調整するオプションを提供するメディアプレーヤー
• オーディオコンテンツの停止、一時停止、音量調整のオプション (システム音量から独立)
• バックグラウンドノイズと明確に区別できる高音質のフォアグラウンドオーディオ

身体

身体障がいには、筋力低下や筋肉の制御や感覚の制限、関節障害、動きを妨げる痛み、手足の欠損などが含まれます。

このようなユーザーは、（標準的なキーボードを使用していなくても）機能を有効にするためにキーボードのサポートに依存している。このようなユーザーがコンテンツを操作するには、以下が必要です。

• 大きなクリック可能領域
• タスクを完了するのに十分な時間
• 現在のフォーカスを目に見える形で示す
• ページヘッダーやナビゲーションバーなど、コンテンツのブロックをスキップする仕組み

認知的

認知障がい、学習障がい、神経障がいには、神経多様性や神経障がいのほか、必ずしも神経系とは限らない行動障がいや精神障がいも含まれます。これらは神経系のあらゆる部分に影響を及ぼす可能性があり、人の聞く力、動く力、見る力、話す力、情報を理解する力に影響を与えます。

個々のニーズにもよるが、このようなユーザーが頼りにしている：

• 明確に構成されたコンテンツ
• フォーム、ボタン、その他のコンテンツに一貫したラベルを付ける
• 予測可能なリンクターゲットと全体的な相互作用
• メニューや検索バーなど、さまざまなナビゲーション方法
• 点滅、点滅、または他の方法で気を散らすコンテンツを無効にする設定
• 画像に支えられたシンプルなテキスト

ベストプラクティス

コンテンツ

• コンテンツはブランドを保ちつつ、平易な言葉を使う。米国中学1年生レベルの読解力で書く。Hemingway Appなどのリソースを使用して、テキストの読み取りレベルを確認できます。
• コンテンツを論理的に構成し、見出しが正しい階層に従っていることを確認する。見出しのレベルを飛ばしてはいけない。
• コンテンツの長いチャンクには、中央揃えのテキストを使用しない。これは、認知障害や学習障害のあるユーザーには読みにくいかもしれない。2行以上に折り返すコンテンツは左寄せにする。
• デジタル機器で読みやすいサンセリフフォントを使う。
• テキストが切り捨てられていないことを確認するため、必ずデバイスにテストメッセージを送信してコピーをテストすること。メッセージが途切れると、コンテンツがユーザーに届かなくなるため、自分とユーザーの両方に悪影響が及びます。

リンク

ユーザーを外部ページに誘導するようなナビゲーションのためにリンクを使う。

リンクがユーザーをどこに連れて行くかを明確に説明するリンクテキストを書く。スクリーンリーダーのユーザーは、コンテンツをざっと読む方法としてリンクからリンクへスキップすることが多いため、リンクテキストが単独で機能することを確認してください。ここをクリック」、「もっと見る」、「詳細はクリック」といった表現は、文脈を無視して読むと曖昧になるので避けること。

たとえば、天気予報を見るためのリンクをどう書くかを考えてみよう。

すべてのコンテンツに言えることだが、できるだけ余計な言葉を使わず、端的に書くこと。

ボタン

フォームの送信やカルーセルの再生など、クリック可能なアクションのボタンを使用します。

リンクテキストと同様に、ユーザーがボタンを押したときに起こるアクションを明確に説明するボタンテキストを書く（例えば、「続きを読む」ではなく「全文を読む」）。ボタンのテキストが長すぎないかテストする。ボタンにテキスト全体を表示できない場合は、テキストが新しい行に折り返されるのではなく、省略記号で切り捨てられます。

画像

マーケティング・コンテンツの画像を見ることができないユーザーもいる。アクセシビリティを考慮しなければ、画像はすべてのユーザーが同じコンテンツを受け取る際の障壁になりかねない。

オルトテキスト

代替テキストとは、スクリーンリーダーやその他の支援技術がユーザーに提供する、画像の内容に関する短い説明である。

• すべての画像について、その画像の情報や機能を提供する代替テキストを書く。
• 画像が装飾的な場合（コンテンツに追加しない場合）は、空のalt属性（alt="" ）を使用する。
• altテキストに「写真」や「画像」という言葉を使わないこと。

テキスト画像

スクリーン・リーダーは画像に含まれるテキストを読むことができないので、テキストの画像は使わないこと。テキストの画像もうまくリサイズできないし、ユーザーのニーズや好みに合わせてカスタマイズすることもできない。実際のテキストでは、ユーザーは色やコントラストなどをカスタマイズでき、品質を落とすことなくテキストのサイズを変更できる。文字の画像を拡大すると、ピクセル化され画質が低下し、読みづらくなる。

ビデオ

ビデオにクローズドキャプションを付ける。視力が低下している人、騒がしい場所で視聴している人、ビデオの言語とは異なる言語を話す人などに役立つ。

カラーコントラスト

十分な色のコントラストがあれば、アクセシビリティはすぐに向上します。前景色(文字)とバックグラウンド色のコントラスト比は、WCAG 2.1 AA レベル要件に準拠する必要があります。

• 通常のテキスト（本文、ボタン、リンクなど）のコントラスト比は4.5:1。
• 大きなテキスト（ヘッダーを考える）のコントラスト比は3：1である。

WebAim Contrast Checker Toolを使えば、背景色に対してテキストが読めるかどうかを確認できる。

フォーム

長いフォームを細かく切り分ける
認知的負荷を軽減するために、長いフォームを小さなセクションに分割する。これはチャンキングと呼ばれ、情報を消費しやすくするために使われる段階的な情報開示パターンである。これはすべてのユーザーに恩恵をもたらしますが、認知障がいのある人には特に役立ちます。

ツールチップやその他のホバー・ステートで重要なコンテンツを隠さない
ホバー状態に含まれるコンテンツは見つけにくく、モバイルフレンドリーでないため、画面拡大鏡を使用するユーザーはホバー時にのみ表示されるコンテンツを視認するのに苦労します。

フィールド内の無効な文字のブロックを避ける
フォーム・フィールドに特定の文字タイプが入力できないようにしない。ユーザーが好きなように入力できるようにし、何が間違っているのかエラーメッセージを出す方がいい。キーボード入力をブロックすることは、支援技術ユーザーにとって特に問題となる。彼らは、フォームに正しく入力されたかどうかを判断するために、インライン・バリデーションに大きく依存しているからだ。

明確なエラーメッセージを書く
良いエラーメッセージは3つの部分で構成されている：何が起こったのか、何が間違っていたのか、どうすれば修正できるのか。エラーメッセージは明確で理解しやすいものでなければならない。簡単な言葉で話してみてください。難しい専門用語は必要ありません。

カスタムHTML

メッセージングにカスタムHTMLを使用している場合：

• セマンティックHTMLを使用します。これは、ある要素を別の要素のように見せるためにスタイルを設定するのではなく、本来の目的に合った正しいHTML要素を使用することを意味する。ほとんどのHTML要素には、独自のアクセシビリティ・サポートが組み込まれている。
• HTML内の言語属性を設定して、コンテンツが含まれている言語を識別します。スクリーン・リーダーは、各言語の発音や特徴に基づいて、言語ごとに異なるサウンド・ライブラリを使用する。言語が指定されている場合、スクリーンリーダーは必要に応じて言語ライブラリ間で自動的に切り替えることができます。以下に例を示します。

1
<html lang="en-us">