cometchat-a11y

根拠： UI Kit コンポーネントは、WCAG 2.1 レベル AA を目標に設計されており、キーボードナビゲーションが組み込まれています（Angular コンポーネントのドキュメントで最も明確に記載されています。ただし、完全な適合には手動テストが必要という、ドキュメント自身の注意書きに留意してください。ユーザーに、全面的に AA に適合している、あるいは VPAT があると断言しないでください）。AA は設計目標であり、認証済みの保証ではありません。CometChat アプリのアクセシビリティ上の問題は、ほとんどの場合、ホスト側のリグレッションが原因です。グローバル CSS、フォーカス順序の不具合、アクセシブルネームのないコンテナー、またはユーザーの設定を無視するモーションなどです。コンポーネント単位のアクセシビリティに関する主張は、各コンポーネントのドキュメントページ（cometchat-<family>-components → docs-map）で確認してください。このスキルが担うのは、Kit が制御できないホスト側の対策です。

このスキルを使う場面

アクセシビリティのレビュー（WCAG／Section 508／ADA／EN 301 549）、スクリーンリーダーやキーボードに関する苦情、または「チャットをアクセシブルにしてほしい」という依頼があった場合に使います。公共部門、教育、医療、大企業の調達では、これが求められます。

Kit が提供するものを起点にする

Kit にはアクセシブルなコンポーネントが含まれています。キーボードで操作できるリスト／コンポーザー、フォーカス管理、そして AA を目標に設計されたセマンティクスです（設計目標であり、認証済みの保証ではありません。上記を参照）。Web では ARIA のロールと名前が自動で設定されます。会話やユーザーのリストはラベル付きの listbox として描画され、ロービングフォーカスを管理するため、これらを上書きしたり取り除いたりしないでください。役割は、機能を損なわないこと、そして周辺のアプリも同じようにアクセシブルにすることです。まず、次の 2 つのルールを守ってください。

1. グローバル CSS を .cometchat サブツリー（Web）に漏らさないでください。グローバルな outline:none、コントラストを下げる上書き、text-align／flex のリセット、Tailwind のベーススタイルによって、Kit が適切に設定したフォーカスリングが消えたり、コントラストが崩れたりすることがあります。リセットの適用範囲を Kit の外にしてください（RULES.md → CSS isolation）。
2. チャットコンテナーに、適切な名前を付けた実体のある配置場所を用意してください。サイズが指定された領域（アクセシビリティには、視認でき、折りたたまれていない領域も必要です）と、アクセシブルネーム（たとえば Web では aria-label／ランドマーク、ネイティブではアクセシビリティラベル）を設定し、スクリーンリーダーのユーザーが見つけて入れるようにします。

チェックリスト（ホスト側）

• キーボード： すべての操作経路をキーボードでたどり、操作できるようにします。会話を開く、入力する、送信する、スレッドを開く、閉じる、といった操作です。フォーカスを閉じ込めないでください。パネル／ダイアログを閉じたときは、適切にフォーカスを戻します。フォーカスのアウトラインを取り除かないでください。スタイルを変更する場合も、フォーカスインジケーターが見える状態を保ってください。
• スクリーンリーダー： 領域とその各セクションにアクセシブルネームを付けます。Kit の周囲に追加するボタンにもラベルを付けてください（aria-label／アクセシビリティラベルがなく、アイコンだけのボタンにしないでください）。新着メッセージの通知については、対象のスクリーンリーダー（VoiceOver／NVDA／TalkBack）で Kit のライブリージョンの動作を確認し、祖先要素に aria-hidden を指定して通知を抑制しないでください。
• コントラスト： Kit のテーマをカスタマイズする場合（cometchat-<family>-customization）、テキスト／UI のコントラストを AA（テキストは 4.5:1、大きなテキスト／UI は 3:1）に保ってください。ライトテーマとダークテーマの両方を確認してください。ライトテーマでは基準を満たすブランドカラーでも、ダークテーマでは満たさない場合があります。
• 動きを抑える設定： チャットの周囲に追加するアニメーションでは、prefers-reduced-motion（Web）／OS の「視差効果を減らす」設定（ネイティブ）を尊重してください。ユーザーが望んでいない動きを強制しないでください。
• テキストの拡大／ズーム： 200％のズーム／大きな Dynamic Type でも、領域を使いやすい状態に保ってください。フォントサイズの上限を設けたり、大きなテキストを切り取ったりしないでください。
• RTL： RTL ロケールでも方向が正しくなるようにしてください（cometchat-i18n と連携します）。
• ターゲット： 追加するカスタムコントロールは、最小タッチターゲットサイズを満たしてください。Kit のターゲットを小さくしないでください。

通話のアクセシビリティ（通話機能を使う場合）

• カメラ／マイクへのアクセスを要求するときは、ユーザーに見える明確な説明と理由を提示してください。
• 追加する通話コントロール（ミュート、終了、カメラ）にアクセシブルラベルを付けてください。
• 利用可能な場合は、字幕／文字起こしを表示してください。着信 UI が通知され、キーボード／支援技術で操作できることを確認してください。

テストする

• 自動テスト（ウェブ）： チャット画面で axe／Lighthouse を実行し、指摘されたコントラストの問題、名前の欠落、ARIA の誤用を修正します。（自動ツールで検出できる問題は約 3 分の 1 です。手動テストも行ってください。）
• 手動テスト： マウスを外した状態で一連の操作を最後まで Tab キーで行い、VoiceOver／NVDA／TalkBack で操作し、ズームを 200% にし、視差効果を減らす設定を切り替え、ダークモードにします。独自の実装で問題が起きた場合は修正します。キットコンポーネントに実際の不足がある場合は、コンポーネントのドキュメントで確認して報告してください（キットの内部を直接修正しないでください）。

よくある落とし穴

1. .cometchat 内でグローバル CSS がフォーカスリングやコントラストを無効にしている — リセット CSS の適用範囲を限定してください。
2. ラベルのないアイコンのみのカスタムボタン — アクセシブルな名前を追加してください。
3. ラベルがない、折りたたまれている、または到達できないチャットコンテナー — サイズを設定し、名前を付けてください。
4. アニメーションが視差効果を減らす設定を無視している。
5. 1 つのテーマだけでコントラストを確認している — ライトモードとダークモードの両方を確認してください。
6. 自動ツールだけで十分だと思い込んでいる — キーボードやスクリーンリーダーでの操作フローは検出できません。手動でテストしてください。

動作を確認する

チャットの一連の操作をキーボードだけで行え、フォーカスインジケーターが見える · スクリーンリーダーが画面、メッセージ、操作ボタンを読み上げる · ライトモードとダークモードの両方でコントラストが AA に適合している · 200% のズーム／大きな文字でも UI が崩れない · 視差効果を減らす設定が反映される · RTL が正しく反転される · チャット画面の axe／Lighthouse でコントラスト、名前、ARIA に関するエラーがない。