Skip to content

アクセシビリティ

この記事では、Brazeが統合環境内でアクセシビリティをどのようにサポートしているかについて概説します。

Braze Web SDKは、Webコンテンツアクセシビリティガイドライン（WCAG 2.1）が提供する標準をサポートしています。アクセシビリティ基準を維持するため、すべての新規ビルドにおいてContent Cardsとアプリ内メッセージに対して100/100のLighthouseスコアを維持しています。

前提条件

WCAG 2.1を満たす最小のSDKバージョンはv3.4.0に近いです。ただし、画像タグの重大な修正のため、少なくともv6.0.0へのアップグレードを推奨します。

主なアクセシビリティの修正

サポートされているアクセシビリティ機能

Content Cardsとアプリ内メッセージでは、以下の機能をサポートしています。

  • ARIAロールとラベル
  • キーボードナビゲーションのサポート
  • フォーカス管理
  • スクリーンリーダーによる読み上げ
  • 画像の代替テキスト対応

SDK統合のためのアクセシビリティガイドライン

アクセシビリティに関する一般的なガイドラインについては、Brazeでアクセシブルなメッセージを作成するを参照してください。このガイドでは、Braze Web SDKをWebアプリケーションに統合する際のアクセシビリティを最大限に高めるためのヒントとベストプラクティスを提供します。

Content Cards

最大高さの設定

Content Cardsが縦方向のスペースを過剰に占めるのを防ぎ、アクセシビリティを向上させるために、フィードコンテナに最大高さを設定できます。以下はその例です。

1
2
3
4
5
6
7
8
9
10
11

/* Limit the height of the Content Cards feed */
.ab-feed {
  max-height: 600px; /* Adjust to your needs */
  overflow-y: auto;
}

/* For inline feeds (non-sidebar), you may want to limit individual cards */
.ab-card {
  max-height: 400px; /* Optional: limit individual card height */
  overflow: hidden;
}

ビューポートに関する考慮事項

インラインで表示されるContent Cardsについては、以下の例のようにビューポートの制約を考慮してください。

1
2
3
4
5
6

/* Limit feed height on mobile to prevent covering too much screen */
@media (max-width: 768px) {
  body > .ab-feed {
    max-height: 80vh; /* Leave space for other content */
  }
}

アプリ内メッセージ

モバイルに関する考慮事項

レスポンシブデザイン

SDKにはレスポンシブブレークポイントが含まれています。カスタマイズがさまざまな画面サイズで正しく機能することを確認してください。以下はその例です。

1
2
3
4
5
6
7
8
9
10
11
12

/* Mobile-specific accessibility considerations */
@media (max-width: 768px) {
  /* Ensure readable font sizes */
  .ab-feed {
    font-size: 14px; /* Minimum 14px for mobile readability */
  }

  /* Ensure sufficient touch targets */
  .ab-card {
    padding: 16px; /* Adequate padding for touch */
  }
}

アクセシビリティのテスト

手動テストチェックリスト

以下のタスクを実施して、アクセシビリティを手動でテストしてください。

  • Content Cardsとアプリ内メッセージをキーボードのみ（Tab、Enter、Space）で操作する
  • スクリーンリーダー（NVDA、JAWS、VoiceOver）でテストする
  • すべての画像に代替テキストがあることを確認する
  • 色のコントラスト比を確認する（WebAIM Contrast Checkerなどのツールを使用する）
  • タッチ操作が可能なモバイルデバイスでテストする
  • フォーカスインジケーターが表示されていることを確認する
  • モーダルメッセージのフォーカストラッピングをテストする
  • すべてのインタラクティブな要素がキーボードで到達可能であることを確認する

よくあるアクセシビリティの問題

よくあるアクセシビリティの問題を避けるために、以下を実施してください。

  1. フォーカススタイルを維持する： SDKのフォーカスインジケーターはキーボードユーザーにとって不可欠です。
  2. display: noneは非インタラクティブ要素にのみ使用する： インタラクティブな要素を非表示にするには、visibility: hiddenまたはopacity: 0を使用してください。
  3. ARIA属性をオーバーライドしない： SDKは適切なARIAロールとラベルを設定します。
  4. tabindex属性を使用する： これらはキーボードナビゲーションの順序を制御します。
  5. overflow: hiddenを設定する場合はスクロールを提供する： スクロール可能なコンテンツがアクセス可能であることを確認してください。
  6. 組み込みのキーボードハンドラに干渉しない： 既存のキーボードナビゲーションが正しく機能することを確認してください。
New Stuff!