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

たとえ意図していなくても、障害のある人を排除するマーケティングコンテンツは、何百万人もの人々があなたのブランドと交流するのを妨げる可能性があります。マーケティングにおけるアクセシビリティとは、誰もが簡単にマーケティングを体験し、コミュニケーションを受け取って理解し、製品、サービス、ブランドに投資したり、ファンになったりする機会を得ることです。メッセージをデザインする際には、すべての顧客がデザインにアクセスできるようにする方法を検討するために、余分な時間をかけてください。

アクセシビリティが重要な理由

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

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

• 法的リスクの最小化:多くの国では、デジタルアクセシビリティを義務付ける法律があります。

考慮すべき障害の領域

このセクションは、W3Cから 部分的に引用しています。多様な能力と障壁。

ビジュアル

視覚障害は、片目または両眼の軽度または中等度の視力低下から、両眼の重度または完全な視力喪失までさまざまです。一部の人々は、特定の色に対する感度が低下または不足している、または明るい色に対する感度が上昇しています。

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

• テキストサイズと画像を拡大または縮小する
• フォント、色、間隔の設定をカスタマイズする
• コンテンツのテキスト読み上げ合成を聞く (つまり、スクリーン リーダーを使用する)
• ビデオの音声解説を聞く
• 更新可能な点字を使用してテキストを読む

審問

聴覚障害には、片耳または両耳の軽度から中等度の聴覚障害が含まれます。部分的な難聴でも、音声コンテンツに関しては問題となる可能性があります。

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

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

形而下

身体障害には、筋肉の制御や感覚の衰弱や制限、関節障害、動きを妨げる痛み、手足の欠損などがあります。

これらのユーザーは、キーボードのサポートに依存して機能をアクティブ化します (標準のキーボードを使用していない場合でも)。コンテンツを操作するには、次のユーザーが必要です。

• クリック可能な大きな領域
• タスクを完了するための十分な時間
• 現在のフォーカスの目に見える指標
• ページヘッダーやナビゲーションバーなどのコンテンツのブロックをスキップするメカニズム

認知

認知障害、学習障害、神経障害には、神経多様性障害や神経障害、および必ずしも神経学的ではない行動障害やメンタルヘルス障害が含まれます。それらは神経系のあらゆる部分に影響を与え、人々が情報をどれだけよく聞き、動き、見、話し、理解するかに影響を与える可能性があります。

個々のニーズに応じて、これらのユーザーは以下に依存しています。

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

おすすめの方法

コンテンツ

• コンテンツはブランドに合わせながら、平易な言葉を使いましょう。米国の7年生の読解レベルに書きます。ヘミングウェイアプリなどのリソースを使用して、テキストの読解レベルを確認できます。
• コンテンツを論理的に構成し、見出しが正しい階層に従っていることを確認します。見出しレベルをスキップしないでください。
• コンテンツの長いチャンクの中央揃えのテキストは避けてください。これは、認知障碍や学習障碍のあるユーザーが読むのが難しい場合があります。2 行以上に折り返されるコンテンツは、左揃えにする必要があります。
• デジタルデバイスで読みやすいサンセリフフォントを使用します。
• 必ずデバイスに テスト メッセージを送信し てコピーをテストし、テキストが切り捨てられていないことを確認してください。メッセージが途切れると、コンテンツがユーザーに届かなくなるため、あなたとユーザーの両方に害が及びます。

リンクス

ユーザーを外部ページに誘導するなど、ナビゲーションにはリンクを使用します。

リンクがユーザーを誘導する場所を明確に説明するリンク テキストを記述します。スクリーンリーダーのユーザーは、コンテンツをざっと見るためにリンクからリンクへとスキップすることが多いため、リンクテキストが自立していることを確認してください。「ここをクリック」、「詳細」、「詳細はこちら」などのフレーズは、文脈から外れて読むと曖昧になるため、避けてください。

たとえば、天気予報を表示するためのリンクの書き方を考えてみましょう。

すべてのコンテンツと同様に、余分な言葉をできるだけ少なくして、わかりやすいものにしてください。

ボタン

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

リンク テキストと同様に、ユーザーがボタンを押したときに発生するアクションを明確に説明するボタン テキストを記述します (たとえば、「続きを読む」ではなく「記事全文を読む」など)。ボタンのテキストが長すぎないことを確認します。ボタンにすべてのテキストを表示できない場合は、テキストが新しい行に折り返されるのとは対照的に、省略記号で切り捨てられます。

画像

一部のユーザーは、マーケティング コンテンツ内の画像を表示できません。アクセシビリティを考慮しないと、画像はすべてのユーザーが同じコンテンツを受け取る際の障壁になる可能性があります。

代替テキスト

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

• すべての画像について、画像の情報または機能を提供する代替テキストを記述します。
• 画像が 装飾的である (コンテンツに追加されない)場合は、空のalt属性()alt=""を使用します。
• 代替テキストに「画像」や「画像」という単語を使用しないでください。

テキストの画像

スクリーンリーダーは画像内に含まれるテキストを読み取れないため、テキストの画像の使用は避けてください。また、テキストの画像はサイズ変更がうまくいかず、ユーザーのニーズや好みに合わせてカスタマイズすることもできません。実際のテキストを使用すると、ユーザーは色やコントラストなどをカスタマイズしたり、品質を損なうことなくテキストのサイズを変更したりできます。テキストの画像を拡大すると、ピクセル化されて品質が低下し、読みにくくなります。

ビデオ

動画にクローズドキャプションを付けます。視力障害のある人、騒がしい場所で見ている人、ビデオの言語とは異なる言語を話す人を助けます。

色のコントラスト

十分な色のコントラストを持つことは、アクセシビリティにとって手っ取り早いことです。前景色 (テキスト) と背景色のコントラスト比は、 WCAG 2.1 AA レベルの要件に準拠している必要があります。

• 通常のテキスト(本文、ボタン、リンクなど)のコントラスト比は4.5:1です。
• 大きなテキストのコントラスト比は 3:1 (ヘッダーを考えてください)

WebAim コントラスト チェッカー ツールを使用して、テキストが背景色に対して読み取れるかどうかを確認できます。

フォーム

長いフォームを小さなセクションに分割する
認知的負荷を軽減するには、長いフォームを小さなセクションに分割します。これはチャンクと呼ばれ、情報を使いやすくするために使用されるプログレッシブ開示パターンです。これはすべてのユーザーにメリットがありますが、認知障害のある人にとっては特に役立ちます。

重要なコンテンツをツールヒントやその他のホバー状態で非表示にしない
ホバー状態に含まれるコンテンツは見つけにくく、モバイルフレンドリーであり、画面拡大鏡のユーザーは、ホバーでのみ使用できるコンテンツを表示するのに苦労します。

フィールド内の無効な文字をブロックしないようにする
特定の文字タイプがフォームフィールドに入力されるのを妨げないでください。ユーザーが好きなものを入力できるようにしてから、何が問題なのかを示すエラー メッセージを提供することをお勧めします。キーボード入力のブロックは、フォームに正しく入力されたかどうかを判断するためにインライン検証に大きく依存しているため、支援技術ユーザーにとって特に問題を引き起こします。

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

カスタム HTML

メッセージでカスタム HTML を使用する場合:

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

1
<html lang="en-us">