アクセシビリティ

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

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

前提条件

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

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

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

コンテンツカードとアプリ内メッセージでは、以下の機能をサポートしている：

• ARIAの役割とラベル
• キーボードによる操作をサポートする
• 集中管理
• スクリーンリーダーの読み上げ
• 画像の代替テキスト対応

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

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

コンテンツカードによって促進された

最大高さを設定する

コンテンツカードが縦方向に過剰なスペースを占めるのを防ぎ、アクセシビリティを向上させるため、フィードコンテナに最大高さを設定できる。例えば以下の例のように：

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;
}

ビューポートの考慮事項

インラインで表示されるコンテンツカードについては、この例のようにビューポートの制約を考慮せよ。

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 */
  }
}

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

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

アクセシビリティを手動でテストするには、以下のタスクを完了するんだ。

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

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

一般的なアクセシビリティの問題を避けるには、次のことを行え：

1. フォーカススタイルを維持する：SDKのフォーカスインジケーターはキーボードユーザーにとって不可欠だ。
2. 非対話display: none型要素でのみ使用せよ：インタラクティブな要素を非表示にするには、opacity: 0またはvisibility: hiddenを使用する。
3. ARIA属性を上書きするな。SDKは適切なARIAロールとラベルを設定する。
4. 属性tabindexを使う：これらはキーボード操作の順序をコントロールする。
5. 設定した場合overflow: hidden、スクロールを提供する。スクロール可能なコンテンツがアクセス可能であることを確認せよ。
6. 組み込みのキーボードハンドラに干渉するな：既存のキーボード操作が機能することを確認せよ。