Skip to content

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

マーケティングコンテンツにおいてアクセシビリティを考慮することが重要な理由と、Brazeでアクセシブルなメッセージを作成する方法について説明します。詳しいガイダンスについては、Braze Learningのアクセシブルなメッセージングの基礎コースをご覧ください。

障がいのある方を排除するマーケティングコンテンツは、たとえ意図的でなくても、何百万人もの人々がブランドと関わる機会を奪ってしまう可能性があります。マーケティングにおけるアクセシビリティとは、すべての人がマーケティングを体験し、コミュニケーションを理解し、製品やサービス、ブランドに投資したりファンになったりする機会を持てるようにすることです。

メッセージをデザインする際には、すべての顧客にとってアクセシブルなデザインにするために、少し時間をかけて検討してください。

Brazeにおけるアクセシビリティ

アクセシブルなコミュニケーションをサポートするということは、オープンで好奇心を持ち、学ぶ意欲を持ち続けることです。Brazeでは、人々のつながりを支援することを大切にしており、すべての人を受け入れることがその一部であると認識しています。アクセシビリティは「完了」と見なすものではなく、学び続ける機会を歓迎しています。

BrazeのアクセシビリティやBrazeから送信されるメッセージに関するフィードバックがあれば、ぜひお寄せいただきたい。グローバルヘッダのSupportメニューを開き、Share feedbackを選択して、あなたの考えをお送りください。

考慮すべき障がいの領域

このセクションはW3C: Diverse Abilities and Barriersから一部引用しています。

視覚障がいは、片目または両目の軽度から中程度の視力低下から、両目の大幅または完全な視力喪失まで多岐にわたります。特定の色に対する感度が低下している方や、明るい色に対する感度が高い方もいます。

コンテンツを利用するために、これらのユーザーには以下の機能が必要です：

  • テキストサイズや画像の拡大・縮小
  • フォント、色、間隔のカスタマイズ設定
  • コンテンツのテキスト読み上げ合成の聴取（つまり、スクリーンリーダーの使用）
  • 動画の音声解説の聴取
  • 点字ディスプレイを使用したテキストの読み取り

聴覚障がいには、片耳または両耳の軽度から中程度の聴力低下が含まれます。部分的な聴力低下であっても、音声コンテンツに関しては問題となる場合があります。

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

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

身体障がいには、筋肉のコントロールや感覚の弱さと制限、関節障害、動きを妨げる痛み、四肢の欠損などが含まれます。

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

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

認知、学習、神経学的障がいには、ニューロダイバーシティや神経学的障害、および必ずしも神経学的ではない行動面やメンタルヘルスの障害が含まれます。これらは神経系のあらゆる部分に影響を及ぼし、聞く、動く、見る、話す、情報を理解する能力に影響を与える可能性があります。

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

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

ベストプラクティス

アクセシブルなコンテンツの作成は、圧倒されるものである必要はありません。小さく思慮深い選択が大きな違いを生みます。このセクションでは、より多くの人がメッセージを正しく読み、ナビゲートし、操作できるようにするための実践的なヒントを紹介します。コピーの調整、ボタンのスタイリング、画像への代替テキストの追加など、一つひとつの改善がよりインクルーシブな体験につながります。それでは始めましょう。

コンテンツ

構造とフロー

まず基盤から始めましょう。コンテンツに明確な構造があると、すべての人にとって理解しやすくなります。特にスクリーンリーダーやキーボードナビゲーションに依存している方にとって重要です。

  • コンテンツをセクションに分割する： 見出し、箇条書き、リストを使用すると、急いでいるときでも、コンテンツをすばやく理解してスキャンできるようになります。
  • 見出しレベルをスキップしない： 見出しはコンテンツに構造を与え、読者がセクション間の関係をすばやく理解するのに役立ちます。見出しレベルをスキップすると（例えば、H2からH4に直接ジャンプする）、この論理的な構造が壊れます。これにより、特にスクリーンリーダーを使用しているユーザーにとって、メッセージのナビゲートと理解が困難になります。コンテンツが整理され、アクセシブルで、すべての人にとって理解しやすい状態を維持するために、常に論理的で順序立った見出しの階層（H1からH2、H3へと続く）に従ってください。

読みやすさ

構造が整ったら、次のステップは言葉が実際に読みやすいことを確認することです。これは、シンプルで、スキャンしやすく、デバイスやユーザーのニーズに関わらず快適に読めるようにすることを意味します。

  • 短く明確な文を書く： 短い文はすべての人にとって理解しやすく、特にスクリーンリーダーを使用している方や複雑な情報の処理が困難な方にとって重要です。米国の中学1年生レベルの読みやすさで書くようにしましょう。Hemingway Appなどのリソースを使用して、テキストの読みやすさレベルを確認できます。
  • 読みやすいフォントサイズと間隔を選ぶ： 小さすぎるテキストは読みにくくなります。特にモバイルでは顕著です。本文テキストには少なくとも14pxを使用してください。見出しはユーザーが違いを明確に認識できるように大きくしましょう。行間（約1.5の行の高さ）と段落間の余分なスペースは、特に視覚的または認知的なニーズを持つ方にとって読みやすさを向上させます。
  • 均等割り付けテキストを避ける： 均等割り付けテキストは単語間に不均一なスペースを作り、ディスレクシアや認知障がいのある方にとって読みにくくなります。2行以上に折り返すコンテンツは、左から右に読む言語では左揃え、右から左に読む言語では右揃えにすることを検討してください。
  • 太字、斜体、大文字テキストは控えめに使用する： テキストを過度に強調すると、特にディスレクシアや視覚障がいのある方にとって読みにくくなります。シンプルに保ちましょう。

明確さと使いやすさ

最後に、ユーザーがコンテンツを見るだけでなく、理解し操作するのに役立つ細かい点について説明します。

  • リンクとボタンに明確なラベルを付ける： リンクとボタンのテキストが次に何が起こるかを明確に説明するようにしてください。スクリーンリーダーを使用している方やキーボードでナビゲートしている方が、何を期待できるかを知るのに役立ちます。
  • 記号や絵文字は控えめに使用する： 特殊文字や絵文字はコンテンツを楽しくしますが、スクリーンリーダーで読み上げられると混乱を招く可能性があります。控えめに使用し、明確で説明的なテキストの代わりにならないようにしてください。
  • 切り捨てをテストする： テキストが切り捨てられていないことを確認するために、常にデバイスにテストメッセージを送信してコピーをテストしてください。メッセージが途中で切れている場合、コンテンツがオーディエンスに届かなくなるため、あなたとオーディエンスの両方にとって不利益です。

ボタン

フォームの送信やカルーセルの再生など、アクションを示すにはボタンを使用してください。新しいURLに移動する場合は、代わりにリンクの使用を検討してください。

明確でアクション指向のテキストを書く

リンクテキストと同様に、ボタンのラベルはアクションを明確に説明する必要があります。効果的なボタンテキストは具体的でアクション指向です。例えば、「注文を送信」はクリック時に何が起こるかを明確に伝えますが、単に「送信」では曖昧になる可能性があります。各ラベルは意図されたアクションを正確に説明し、スクリーンリーダーやすべてのユーザーがボタンを操作する際の結果を簡単に理解し予測できるようにする必要があります。

切り捨てを防ぐために、ボタンテキストは簡潔に保ちましょう。ボタンのテキストが長すぎると、折り返されずに省略記号で切り捨てられる場合があります。

十分な色のコントラストを使用する

ボタンテキストは、ボタンの背景色に対して読みやすい必要があります。ボタンテキストがWCAG 2.2 AAのコントラスト最小値を満たしていることを確認してください：

  • 通常サイズのテキスト（ほとんどのボタン）で4.5:1のコントラスト比
  • 大きなテキスト（通常18pt以上）で3:1のコントラスト比

高いコントラストにより、視覚障がいのあるユーザーや困難な環境でメッセージを閲覧しているユーザーを含め、すべての人にとってボタンが読みやすくクリックしやすくなります。詳しいガイダンスについては、色のコントラストセクションをご覧ください。

ボタンをタップしやすくする

ボタン（およびリンク）が、モバイルデバイスのユーザーにとって十分な大きさで、十分な間隔を持っていることを確認してください。小さすぎたり密集しすぎたタッチターゲットは、運動障がいのあるユーザーにとってフラストレーションの原因となったり、操作が不可能になったりする場合があります。

外部ページへのユーザー誘導など、ナビゲーションにはリンクを使用してください。

説明的なリンクテキストを書く

リンクテキストは、リンク先をユーザーに明確に説明するように書いてください。スクリーンリーダーのユーザーは、コンテンツをざっと読む方法としてリンクからリンクへスキップすることが多いため、リンクテキストが単独で意味を成すようにしてください。「ここをクリック」「詳細」「クリックして詳細を見る」などのフレーズは、文脈から切り離されると曖昧になるため避けてください。

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

すべてのコンテンツと同様に、余分な言葉をできるだけ少なくして簡潔にしましょう。

Brazeのドラッグ＆ドロップエディターはデフォルトでセマンティックHTMLを出力するため、リンクがボタンのようにスタイリングされることはありません。ただし、カスタムHTMLを使用したりコードレベルの変更を行う場合は、以下の点に注意してください：

  • リンク（<a>） はEnterキーに応答します。
  • ボタン（<button>） はEnterキーとSpaceキーの両方に応答します。

リンクをボタンのように見せるスタイリングは、キーボードでナビゲートする方を混乱させる可能性があります。Spaceを押して動作することを期待するかもしれません。

アクションに適した要素を使用してください：

  • フォームの送信やモーダルの表示などのアクションには<button>を使用します。
  • 別のページやファイルへのリンクなどのナビゲーションには<a>を使用します。
1
2
3
4
5

<!-- Recommended: A true button for an action -->
<button type="button">Download report</button>

<!-- Not recommended: A link styled as a button -->
<a href="#" class="btn">Download report</a>

タッチターゲット

タッチターゲットとは、ボタン、リンク、アイコンなど、ユーザーがアクションを実行するためにタップするメッセージの任意の部分です。これらの要素は、特にモバイルデバイスで、人々が簡単にタップできるように十分な大きさと間隔が必要です。

タッチターゲットが小さすぎたり近すぎたりすると、運動能力や器用さに課題のあるユーザーにとって、メッセージの操作がフラストレーションの原因となったり不可能になったりする場合があります。これを改善することで、エラーを減らし、すべての人にとってよりスムーズな体験を作り出すことができます。

以下の点に注意してください：

  • 適切なタッチターゲットサイズを使用する。 最小タッチターゲットサイズとして44 x 44ピクセルを目指してください。これはWCAG 2.2のタッチターゲットガイドラインおよび一般的なモバイルユーザビリティ基準に準拠しています。
  • 各ターゲットに余白を持たせる。 タップターゲットが近すぎる場合（積み重なったリンクや密集したボタンなど）、ミスタップや誤ったターゲットのタップが起こりやすくなります。要素間にスペースやパディングを追加して防止してください。
  • 視覚だけに頼らない。 小さなアイコンでも、追加のパディングによりレイアウトを変更せずに最小サイズ要件を満たすことができます。
  • モバイルでプレビューする。 さまざまな画面サイズでメッセージをテストし、インタラクティブな要素が使いやすいことを確認してください。

タッチターゲットの改善は、モバイルでメッセージをよりアクセシブルにする最も効果的な方法の一つであり、すべての人にとって良いUXです。

画像

代替テキストを提供する

代替テキスト（altテキスト）は、スクリーンリーダーやその他の支援技術がユーザーに提供する、画像のコンテンツや機能の短い説明です。意味のあるすべての画像に対して、ビジュアルを見ることができないユーザーでもメッセージやコールトゥアクションを理解できるように、説明的な代替テキストを書いてください。

テキストの画像を避ける

可能な限り、画像内にテキストを配置することを避けてください。スクリーンリーダーは画像ベースのテキストを読み取ることができず、ユーザーはフォントサイズや色を簡単に調整して視認性を向上させることができません。以下のヒントを参考にしてください：

  • 可能な場合はテキストを削除する： 画像から説明的またはプロモーション的なテキストをメッセージのテキストフィールドに移動してください。これにより、ユーザーはデバイスやブラウザの設定を使用して、必要に応じてサイズ変更や色の変更ができます。
  • 読みやすさとコントラストをテストする： テキストを画像内に残す必要がある場合は、色のコントラストのベストプラクティスに従い、大きなスケールのフォントを使用してください。これは、太字でないテキストの場合は少なくとも18ポイント（約24ピクセル）、太字の場合は14ポイント（約18ピクセル）を意味します。これらのサイズを使用すると、ユーザーがズームインしなくてもテキストが読みやすくなり、コンテンツ全体のコントラストと読みやすさが向上します。小さな画面でも読みやすいことを確認するためにテストしてください。
  • 代替テキストを提供する： 画像内に残す必要がある重要なテキストについては、その文言を説明する代替テキストを含めてください。

画像にテキストが含まれていて編集できない場合、視覚障がいのあるユーザーは読みやすさの調整を行う柔軟性を失います。テキストを画像から分離することで、より多くのユーザーがメッセージを快適に読み、操作できるようになります。

代替テキストを書くためのヒント

画像に実際に写っているものを説明する

スクリーンリーダーのユーザーは、画像のコンテンツや機能を理解するために代替テキストに依存しています。視覚的に表示されているものと一致しない一般的な「マーケティング用語」は避けてください。

短く、しかし具体的に保つ

簡潔な代替テキストは、ユーザーが処理しやすくなります。目的を伝えるのに十分な詳細を含めつつ、余分な情報は省きましょう。一般的なルールとして、代替テキストは125文字以内に収めてください。短いフレーズや文以上のものが必要な場合は、W3Cの長い説明の方法の使用を検討してください。

「画像の」や「写真の」を避ける

スクリーンリーダーはすでに画像であることをアナウンスします。すぐに対象の説明に入りましょう。

画像に表示されているテキストを反映する

画像に重要なテキストが含まれている場合は、ユーザーが見逃さないように、その情報を代替テキストに含めてください。

関連するコンテキストに留める — 余分なマーケティング用語は不要

画像に直接関係のないSEO用語やコールトゥアクションで代替テキストを埋めないでください。画像を見ることができない方に価値を提供しましょう。

画像の目的を考慮する

画像がリンクやコールトゥアクションとして機能している場合は、表示されているラベルや製品だけでなく、意図されたアクション（「購入する」「リンク先」「登録する」）を説明してください。

画像に目的がない場合も、それを明示してください。ロゴなどの装飾的な画像には、スクリーンリーダーがアナウンスをスキップすることを認識できるように、空のaltタグ（alt=""）を設定する必要があります。これがないと、通常は画像のファイル名が読み上げられます。

動画

動画は魅力的ですが、アクセシブルでなければ、オーディエンスの一部を排除するリスクがあります。以下のヒントを使用して、動画コンテンツをよりインクルーシブにしましょう：

クローズドキャプションを提供する

動画にクローズドキャプションを含めて、ユーザーがダイアログ、効果音、その他の音声コンテンツを追えるようにしてください。キャプションは以下の方に役立ちます：

  • 聴覚障がいのある方
  • 音声をオフにして視聴している方
  • 読みながら理解したい非ネイティブスピーカー

クローズドキャプションはオン・オフを切り替えることができ、ユーザーが自分に最適な方法を選択できます。

再生コントロールを提供する

埋め込み動画に、再生、一時停止、ミュート、シークなどのアクセシブルな再生コントロールが含まれていることを確認し、ユーザーが自分に最適な方法で操作できるようにしてください。

自動再生を避ける

可能な限り、動画の自動再生を避けてください。自動再生は以下の方にとって不快感や混乱を引き起こす可能性があります：

  • スクリーンリーダーやキーボードナビゲーションに依存しているユーザー
  • 動きに敏感な方
  • 静かな環境にいる方（職場や深夜の環境など）

明確なコントロールを含めて、ユーザーが動画を再生するタイミングを選択できるようにしてください。

フラッシュやストロボコンテンツを避ける

特に高頻度のフラッシュやストロボ効果のある動画を含めないでください。これらは光過敏性てんかんのあるユーザーに発作を引き起こし、他の方にも不快感を与える可能性があります。

色のコントラスト

十分な色のコントラストは、低視力の方や明るい環境や困難な条件でコンテンツを閲覧している方を含め、すべての人にとってメッセージを読みやすくするのに役立ちます。WCAG 2.2 AAレベルの要件に準拠したコントラスト比を目指してください：

  • 通常のテキスト（本文テキスト、ボタン、リンクなど）で4.5:1のコントラスト比
  • 大きなテキスト（見出しや大きなラベルなど）で3:1のコントラスト比

WebAim Contrast Checker Toolを使用して、色の選択をテストできます。

カスタムHTML

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

  • セマンティックHTMLを使用してください。これは、ある要素を別の要素のように見せるスタイリングではなく、意図された目的に対して正しいHTML要素を使用することを意味します。ほとんどのHTML要素には、独自のアクセシビリティサポートが組み込まれています。
  • HTML内にlang属性を設定して、コンテンツの言語を識別してください。スクリーンリーダーは、各言語の発音と特性に基づいて異なるサウンドライブラリを使用します。これが指定されていない場合、スクリーンリーダーはコンテンツがユーザーがスクリーンリーダーの設定時に選択したデフォルト言語で書かれていると仮定します。メッセージが実際にはデフォルト言語でない場合、スクリーンリーダーがメッセージを正しく発音できない可能性があります。
1

<html lang="en-us">
  • ARIA属性を使用して追加のコンテキストを提供してください。これらの属性は支援技術に追加情報を提供し、それ自体では意味が不明確なUI要素の役割、状態、またはプロパティを明確にするのに役立ちます。

ARIA属性

Brazeエディターでカスタムコードを使用する場合、Accessible Rich Internet Applications（ARIA）を使用して、支援技術に依存するユーザーに追加のアクセシビリティサポートを提供できます。ARIAのロールと属性は、特にそれ自体では意味を伝えない要素（<div>や<span>など）を使用している場合に、スクリーンリーダーがコンテンツをより明確に解釈するのに役立ちます。

メッセージングのコンテキストで特に役立つ例をいくつか紹介します：

aria-label

aria-labelは、表示テキストのない要素にアクセシブルな名前を追加します。テキストのないアイコン（ゴミ箱や閉じるための「X」など）を使用している場合、スクリーンリーダーを使用している方はラベルがなければその機能を知ることができません。aria-labelはそのアイコンに声を与えます。

1
2
3

<button aria-label="Close message">
  <svg ...></svg>
</button>

aria-labelledby

aria-labelledbyは、すでに表示ラベルを持つ要素に要素を接続します。バナーやリージョンにタイトル付きで読み上げてほしい場合、aria-labelledbyを使用して支援技術に「あそこの見出しを使ってこの部分に名前を付けて」と伝えることができます。

1
2

<h2 id="banner-title">Important Update</h2>
<div role="region" aria-labelledby="banner-title">...</div>

aria-hidden=”true”

aria-hidden="true"はスクリーンリーダーから要素を非表示にします。重要な意味を伝えないテキストやビジュアル（純粋にスタイルのために使用されるキラキラ、チェックマーク、絵文字など）に役立ちます。

これにより、スクリーンリーダーのユーザーにとって体験がよりクリーンになります。そうでなければ、冗長または混乱を招くコンテンツを聞くことになるかもしれません。まだ展開されていないオフスクリーンのアコーディオンコンテンツを非表示にする場合にも便利です。

1

<span aria-hidden="true">✔️</span>

一般的に、装飾的な画像やアイコンにはaria-hidden="true"よりもalt=""を使用する方が良いです。セマンティックHTMLはすべてのスクリーンリーダーと支援ソフトウェアで広くサポートされていますが、ARIAのサポートは異なります。aria-hiddenを使用する場合でも、空のalt属性を含める必要があります。

role=”presentation”

role="presentation"は、デザインテーブルなどのレイアウト専用の要素を無視するように支援技術に伝えます。例えば、メールでは要素を整列させるためだけにテーブルを使用することがよくあります。このロールがないと、スクリーンリーダーはレイアウトがデータテーブルであると仮定し、行番号と列番号を読み上げ始める可能性があります。

1

<table role="presentation">...</table>

メールのドラッグ＆ドロップエディターで作成されたメールでは、プレゼンテーション要素にARIA属性role="presentation"が自動的に付与されます。

aria-live=”polite”

aria-live="polite"は、ユーザーの操作なしにコンテンツが変更されたときに更新をアナウンスします。メッセージ内で成功、エラー、その他の通知などのダイナミックな更新を表示する場合に使用してください。

1

<div aria-live="polite">Your preferences have been saved.</div>

自動アクセシビリティテスト

アクセシビリティの問題を早期に特定して修正するために、Brazeは以下の領域で自動アクセシビリティテストを提供しています：

これらのテストは、Webコンテンツアクセシビリティガイドライン（WCAG）標準（アクセシブルなコンテンツのための国際的に認められた技術標準のセット）に基づいてメッセージをチェックします。自動的に検出できる問題はフラグが立てられ、優先順位付けに役立つように重大度別に分類されます。

自動テストで検出できるものとできないもの

自動アクセシビリティテストは優れた出発点ですが、すべてを検出できるわけではありません。一部の問題は、特にコンテキストやビジュアルデザインがユーザーのメール体験にどのように影響するかという点で、適切に評価するには人間の判断が必要です。

一部の問題は要レビューとしてマークされる場合があります。これらは、チェッカーがアクセシビリティの問題であるかどうかを確実に判断できないケースです。その場合は、手動でレビューすることをお勧めします。

自動ツールが確実に検出できないものの例：

  • インタラクティブ要素のフォーカス順序が論理的な順序に従っているかどうか
  • マウスを必要とせず、キーボードだけでコンテンツが完全に操作可能かどうか
  • 代替テキストが画像を意味のある形で説明しているかどうか
  • 見出しがコンテンツを整理するために適切に使用されているかどうか
  • リンクとボタンが明確にラベル付けされ、理解しやすいかどうか
  • タッチターゲットが十分な大きさで適切な間隔があるかどうか
  • 背景画像上のテキストが色のコントラスト要件を満たしているかどうか
  • 指示やラベルがすべてのユーザーにとって明確で役立つかどうか

これらの制限はBraze固有のものではなく、すべての自動アクセシビリティツールに共通するものです。自動チェックは、すべての支援技術、スクリーンリーダー、またはユーザーのニーズを模倣することはできません。そのため、アクセシビリティは一度きりのチェックではなく、継続的なプラクティスです。

メッセージがすべての自動チェックに合格した場合でも、以下を行うことが重要です：

  • フラグが立てられた問題、特に要レビューとラベル付けされたものを慎重にレビューする。
  • 可能な場合は手動でテストする。特にレイアウトとインタラクションパターンについて。
  • スクリーンリーダー、キーボードのみのナビゲーション、ブラウザのズームなどのツールを使用して、さまざまなアクセスニーズをシミュレートする。

自動テストと思慮深い手動レビューを組み合わせることで、より多くの潜在的な問題を発見し、すべての受信者にとってよりインクルーシブで使いやすいキャンペーンを作成できます。
New Stuff!