キーボードで開けず、閉じるボタンにも名前がないチャット

div のクリック処理は、マウスでしか動きません。×は button ですが、中にはタイトルのない svg しかないため、名前がありません。closeChat() の launcher.focus() も div には効かず、フォーカスは body に戻ってしまいます。

起動ボタンは button になったので、Tabキーで届き、EnterキーでもSpaceキーでも押せます。押すと同じクリック処理が動き、チャットを閉じればフォーカスは起動ボタンに戻ります。aria-label で、起動ボタンに「チャットで相談」、×に「チャットを閉じる」という名前を付けたので、「チャットで相談、ボタン」「チャットを閉じる、ボタン」と読まれます。aria-hidden で、アイコンは読み上げの対象から外れます。スクリプトは変わりません。ボタンには div のときと同じクラスを付けているので、見た目もそのままです。ブラウザーの既定の枠線や背景が出る場合は、そのクラスで消します。各ボタンの中に視覚的に隠したテキストを入れても、同じように名前を付けられます。名前がないアイコンだけのボタンを参照してください。

どちらも、起動ボタンと×をTabキーで届くボタンにし、名前を付けるため、2.1.1と4.1.2を満たします。名前を隠す方法なら、丸い吹き出しのデザインをそのまま残せ、起動ボタンがページに重なるスマートフォンでも場所を取りません。名前を表示する方法は幅を取りますが、何のボタンかが誰にでも分かります。音声操作の利用者は隠れた名前を推測せずにボタンの言葉を言え、アイコンを知らない人は言葉を読めます。デザインに余裕があれば名前を表示し、吹き出しを小さく保つ必要があれば名前を隠す方法を選んでください。

多くのチャットウィジェットは提供元のスクリプトで、起動ボタンもパネルも、提供元のドメインのフレームの中に描かれることがよくあります。その場合、自社のCSSやスクリプトは中に届きません。できることは次のとおりです。

• 導入する前に、「修正の確認」の手順でウィジェットを試す。提供元のデモページか、自社のテスト用ページで行います。
• ウィジェットの設定を確認する。起動ボタンに文字のラベルを表示できるものや、ボタンの名前を設定できるものがあります。サイトで使うそれぞれの言語で、両方を設定します。
• 起動ボタンと閉じるボタンが名前のあるHTML標準のボタンか、どのスクリーンリーダーで試したかを、提供元に尋ねる。フレームのタイトルについても尋ねます（詳しくはタイトルがない、または中身の分からないiframeを参照）。
• うまくいかない点を、再現手順を添えて提供元に報告する。直るまでは、アクセシビリティ方針に既知の問題として記載し、チャットを案内しているページに、メールアドレスなど別の問い合わせ方法を示します。

提供元のスクリプトは、自社のリリースと関係なく変わります。提供元の更新やウィジェットの設定の変更のたびに、確認を繰り返してください。

divに role="button" を付けるだけでは足りない。 役割を付ければスクリーンリーダーは「ボタン」と読みますが、div のままではフォーカスを受け取らず、EnterキーにもSpaceキーにも反応しません。tabindex="0" と、両方のキーを扱う処理を自分で加える必要があります。HTML標準の button には、どれも最初から備わっています。役割だけでは修正にならない理由は、Tabキーで到達できないdivのボタンを参照してください。

何をするかで名付ける。 「チャットで相談」「ヘルプ」「質問する」は、押すと何が起きるかを伝えます。「チャットアイコン」「吹き出し」や提供元の製品名は伝えません。×は「チャットを閉じる」にし、「×」や「閉じるアイコン」にはしません。未読の返信の数を起動ボタンに表示する場合は、「チャットで相談、新着メッセージ1件」のように名前にも入れます。メッセージを読み上げないチャットウィジェットが、パネルを閉じている間に届いた返信について勧めている方法です。

最小化ボタンもあるパネル。 「最小化」と「閉じる」の二つのボタンを持つパネルもあります。名前のないアイコンが二つ並ぶと一つのとき以上に分からないため、それぞれ「チャットを最小化」「チャットを終了」のように、何をするかで名付けます。

起動ボタンの位置。 隅に固定された起動ボタンは、フォーカス中のコントロールを覆うことがあります。フォーカス中のボタンを一部隠すチャットボタンを参照してください。HTMLでフッターの後に置かれたパネルには、フォーカスが最後にしか届きません。フォーカス順の最後に回る、フローティングボタンとパネルを参照してください。フォーカスを中に留めたまま、Tabキーで届く閉じるボタンもEscapeキーもなく、キーボードでは出られないパネルは、キーボードトラップです。キーボードで閉じられないポップアップを参照してください。