チャットのモバイルアクセシビリティの追加

ほとんどのブラウザは、チャットモーダルが開いたときに携帯電話のスクリーンリーダー向けにバックグラウンドコンテンツを非表示にすることをサポートしていません。コードにフックを追加することで、これらのユーザがチャットに集中できるようにエクスペリエンスを合理化できます。ウィンドウが閉じると、Web ページの完全なコンテンツが戻ります。

左側の携帯電話は、モーダルが開いたときにスクリーンリーダーがアクセスする内容を示しています。右側の携帯電話は、不活性化機能が追加されたエクスペリエンスを示しています。

このソリューションでは、支援技術に対して一時的にドキュメント本文の子を非表示にして、組み込みサービス Web ウィジェットのみをアクセスおよび表示��能にするコードを提供します。

ベースページと、空の onBodyLoaded JavaScript メソッドを含むコードスニペットから開始します。body ページコンテンツは id が #body-content の div にラップされ、body には onload ハンドラが指定されています。スニペットを追加した後に CSS セレクタ div.#body-content を使用し、JavaScript メソッド onBodyLoaded() を実装します。

組み込みチャットコードスニペットを含むベースページコード

onBodyLoaded のコード

次に、JavaScript メソッド onBodyLoaded を実装します。このメソッドは、組み込みチャットが開くたびに id が body-content の div を無効にし、組み込みチャットが最小化されるか閉じられるたびに body-content を再有効化します。このステップで JavaScript メソッド onBodyLoaded を定義します。最大化、破棄、最小化のイベントハンドラの追加についての詳細は、「チャットイベント通知の受信」を参照してください。

モバイルアクセシビリティ対応組み込みチャットのサンプルコード

完了したステップのコードを組み合わせると、次のようになります。