00:04
ゆみこ：こんにちは。チャコウェブラジオは、株式会社Cyber Catsが運営するチャコウェブのスタッフが、
ウェブアクセシビリティやSNS運用など、ウェブに関するテーマについて楽しくお話をするポッドキャストです。
進行を担当するゆみこです。よろしくお願いします。
みあ：みあです。よろしくお願いします。
ゆみこ：本日のテーマは、「キーボードトラップについて」です。
みあ：ウェブアクセシビリティにおいて、キーボードトラップをなくすというのは、とても重要です。
キーボードトラップとは何なのか、どうしてなくす必要があるのか、本日はそういったお話をしていきたいと思います。
ゆみこ：はい、よろしくお願いします。
早速ですが、キーボードトラップとはどんなものか教えてください。
みあ：はい。キーボード操作でウェブを利用しているとき、特定の部分にフォーカスが当たったまま閉じ込められてしまい、そこから抜け出せない状況が発生することがあります。
これをキーボードトラップと呼びます。
キーボードトラップがあると、キーボードのみで操作を行うユーザーは、そのウェブサイト内を自由に移動することができなくなってしまうため、これをなくすことが重要だとされています。
ゆみこ：うーん、確かにウェブサイトをキーボードで操作してみると、特定の場所で閉じ込められてしまって、タブキーを押しても同じ場所をぐるぐる回ってしまうことがありますよね。
マウスを使えば抜け出せる場合もあるんですが、中にはマウスを使えないという人もいますから、これは非常に困ることだと思います。
みあ：はい、そうなんです。なので、誰でも自由に動けるウェブサイトにするには、キーボードトラップをなくすことが最も重要なんですね。
ゆみこ：キーボードトラップをなくすには、どのようなことが必要なんでしょうか?
みあ：はい、まずセマンティックHTMLでウェブサイトを作ることが重要です。
ゆみこ：セマンティックHTMLですか?
みあ：はい、HTMLの仕様に沿ってタグの意味合いが適切になるようにコーディングしたHTMLをこのように呼びます。
セマンティックHTMLでサイトを制作するだけで、キーボード操作でもボタンやリンクに適切な順序でフォーカスが当たるようにすることができるんです。
ゆみこ：セマンティックHTMLという言葉は何度か聞いたことがあります。
ウェブアクセシビリティにおいても重要なものなんですね。
03:04
みあ：セマンティックHTMLとウェブアクセシビリティは一見別物のように見えますが、実は深く関係しているんです。
この辺りは細かい話になりますので、別の回で詳しくお話しする予定です。
ゆみこ：そうなんですね。楽しみにしています。
みあ：はい、お願いします。話を戻しますが、先ほどお伝えしたように、セマンティックHTMLでマークアップを行うと、タブキーや矢印キーを使ってフォーカスを移動させるといった基本的なキーボード操作が可能になります。
ただ、コンテンツによっては、あえて標準的な方法でフォーカスを外したり移動することができない仕組みにしている場合もあると思います。
そういった場合は、フォーカスを外したり移動させる方法をユーザーに通知する必要があるんです。
ゆみこ：なるほど。操作方法がわからないと困ってしまいますから、事前にユーザーに伝える必要があるんですね。通知はどのような方法で行うのでしょうか?
みあ：いろいろとありますが、簡単なもので言うと、操作が必要な部分の近くにテキストで操作方法の表示をするといったやり方があります。
他には、通知画面を表示させてそこで案内するという方法もありますね。
ゆみこ：なるほど。そのように、フォーカス解除や移動の方法をユーザーに知らせておくと、ユーザーが困ることなく操作できるんですね。
みあ：はい、そうなんです。
ゆみこ：ところで、キーボードトラップの具体的な例というのはどういったものがありますか?
みあ：一番よくあるのは、モーダルダイアログだと思うので、こちらをお話ししたいと思います。
ゆみこ：はい、お願いします。
みあ：まず、モーダルダイアログは略してモーダルと呼ばれるので、ここからはモーダルと呼びたいと思います。
モーダルというのは、現在閲覧しているウェブページの上に表示されるウィンドウのことを指します。
これが表示されると、それまで閲覧していたページの操作が一時的に制限され、ユーザーはモーダル内での操作を求められます。
モーダル以外の操作が一時的に制限されることで、ユーザーの注意を引くことができるので、
ウェブサイトで何らかの重要なメッセージを表示したいときや、確認が必要な操作を行うとき、またはホームに入力してもらいたいときなどに使用されます。
ゆみこ：うーん、今まで見ていた画面が少し暗くなって、さらに操作もできなくなって、その代わりにメッセージやボタンが表示された小さいウィンドウが出てくるのを見たことがあります。あれのことでしょうか?
06:18
みあ：はい、それがモーダルです。モーダルで表示されるものとしては、何かを削除するときに表示される「本当に削除しますか?」といったような重要事項を確認するメッセージやログインフォームなどがあります。
ゆみこ：うーん、SNSなどでは、ログイン後しばらく操作を行っていないと「セッションが切れました。再度ログインしてください。」といったメッセージがモーダルで表示されることがありますよね。
みあ：はい、ワードプレスでもしばらく操作していないと、そのような形でログインフォームが表示されますね。
こういったモーダルが表示されている間は、背後のページが操作できない状態になりますから、フォーカスはモーダル内に固定されます。
そして、何らかの操作を行うまでは、元のページに戻ることができません。
ゆみこ：なるほど。何かの操作を行って、モーダルが消えるまでは、後ろの画面が操作できないので、
タブキーや矢印キーを使用しても、フォーカスはモーダルの中をぐるぐるすることになるということなんですね。
みあ：はい、そうです。基本的には、キャンセルやOKボタン、バツ印のアイコンを押すことで、ダイアログを閉じることができる場合が多いですね。
ログインフォームの場合には、ログインすることでモーダルが消え、後ろの画面が操作可能になります。
そういったモーダルを消すための操作が、キーボードでもできる場合は問題ありません。
問題なのは、キーボード操作ではモーダルが消せない場合です。
ゆみこ：モーダルが消せない場合ですか?
みあ：はい。閉じるやバツ印にキーボードでフォーカスを当てることができないなど、キーボード操作ではモーダルが消せない場合、
キーボード操作でウェブを使用しているユーザーは、モーダルから抜け出せなくなってしまいます。
これがキーボードトラップですね。
ゆみこ：なるほど。モーダルは重要なメッセージなど様々なところで使用されているものなので、
これがキーボードトラップになっていると、キーボード操作を行うユーザーはとても不便ですよね。
みあ：そうなんですよね。ですから、キーボードトラップのないウェブサイトにする必要があります。
ちなみにここまでお話しした内容は、WCAGの達成基準「2.1.2 キーボードトラップなし」に記述されています。
09:11
ゆみこ：「2.1.2 キーボードトラップなし」は、ユーザーがウェブサイト内を自由に移動できるようにするための達成基準ということですね。
これはウェブサイトの使いやすさ向上に直結しそうです。
みあ：はい、その通りです。この基準に沿ったウェブサイトにすることで、あらゆるユーザーにとって使いやすいサイトにすることができます。
ですから、この基準はWCAGの中で最も重要なものの一つとなっているんですね。
ゆみこ：なるほど。誰もが自由に移動できるウェブサイトにするには、キーボードトラップをなくすことが非常に重要だということがよくわかりました。
本日のテーマは、「キーボードトラップについて」でした。
お聞きいただき
ありがとうございました。
感想をいただけるととっても嬉しいです。
ハッシュタグチャコウェブラジオをつけて、ぜひSNS、X（旧Twitter）で投稿してください。
また、概要欄にメールフォームリンクをご用意しています。
ウェブアクセシビリティに対応したい方、チャコウェブにお仕事を依頼したい方やご相談がある方は、お気軽にメッセージをお寄せください。
次回もお楽しみに。
