00:05
ゆみこ：こんにちは。チャコウェブラジオは、株式会社Cyber Catsが運営するチャコウェブのスタッフが、
ウェブアクセシビリティやSNS運用など、ウェブに関するテーマについて楽しくお話しするポッドキャストです。
進行を担当するゆみこです。よろしくお願いします。
みあ：みあです。よろしくお願いします。
ガイドラインの概要
ゆみこ：本日のテーマは、WCAG 2.0 解説シリーズPart10「『ガイドライン2.1 キーボード操作可能』とその達成基準」です。
みあ：今回から、4つの原則の2つ目「操作可能」の範囲に入ります。
この原則には、4つのガイドラインがありますが、まずは1つ目のガイドライン2.1「キーボード操作可能」について見ていきましょう。
ゆみこ：はい、ついに4つの原則の2つ目ですね。さっそくですが、ガイドラインについて教えてください。
みあ：ガイドライン2.1をWCAG 2.0 解説書で見ると、「すべての機能をキーボードから利用できるようにすること」と書かれています。
ゆみこ：お、これはわかりやすいですね。コンテンツの全機能をキーボードで操作可能にするためのガイドラインなんですね。
ひとつ質問なんですが、どうしてキーボードで操作できるようにする必要があるんでしょうか?
みあ：それは、キーボード操作可能なコンテンツにすると、他の操作方法にも対応できるようになるからなんです。
ゆみこ：そうなんですね。具体的にはどんな方法に対応できるんでしょうか?
みあ：通常通りキーボードで入力する方法に加え、画面上に表示されたキーボードをマウスで操作する方法や支援デバイスで操作する方法などが利用できるようになります。
ゆみこ：さまざまな方法で操作できるようになるんですね。
みあ：そうなんです。複数の操作方法に対応していれば、ユーザーが使いやすいものを選択することができますよね。
そのため、キーボード操作に対応する必要があるんです。
もちろん、キーボード操作以外は不要というわけではありません。
マウス操作や音声操作なども重要な方法のひとつです。
このガイドラインは制限を設けるものではなく、さまざまな操作方法のひとつとして、必ずキーボード操作を可能にしましょうというものなのです。
ゆみこ：なるほど。キーボード操作は必ずサポートする必要があるということですね。
みあ：はい、その通りです。
達成基準2.1.1の解説
ゆみこ：では、具体的な達成基準はどうなっているんでしょうか。
みあ：ガイドライン2.1には、レベルAの達成基準が2つあります。
達成基準2.1.1「キーボード」と2.1.2「キーボードトラップなし」です。
まず、2.1.1から解説します。
ゆみこ：はい、お願いします。
みあ：達成基準2.1.1「キーボード」、これをWCAG 2.0 解説書で確認すると、
「コンテンツのすべての機能は、個々のキーストロークに特定のタイミングを要することなく、
キーボードインタフェースを通じて操作可能である」と書かれています。
ゆみこ：キーストロークに特定のタイミングを要することなく、とはどういう意味でしょうか。
みあ：これは、キーを押すタイミングが指定されていないということです。
例えば、短時間で複数回キーを押さなければいけない、キーを長押しし続けないといけない、
などの制約があると、人によっては操作が困難になってしまいます。
ゆみこ：ああ、確かに、手に運動障害があるようなユーザーは、キーの連打や長押しが難しいかもしれませんね。
みあ：そうなんです。つまり、キーストロークに特定のタイミングを要することなく、というのは、
そういった連打などの特定のタイミングを要する操作が求められないということですね。
ゆみこ：うん、そうなんですね。
みあ：注意点として、この達成基準には例外が存在します。
WCAG 2.0 解説書には、先ほど紹介した文の後に、
「ただし、その根本的な機能が利用者の動作による始点から終点まで続く一連の軌跡に依存して実現されている場合は除く」と書かれているんです。
ゆみこ：おー、例外があるんですね。
「利用者の動作による始点から終点まで続く一連の軌跡に依存して実現されている場合」というのは、どういった場合を表しているのでしょうか?
みあ：難しい書き方ですが、簡単に説明すると、
ユーザーが行う始まりから終わりまでの一連の動きに意味があるものは例外として扱われるということです。
具体的には、自由に絵や文字が書けるお絵かきツールなどが挙げられます。
ゆみこ：なるほど。確かに、お絵かきツールで書いた絵や文字は、ユーザーの一連の動きによって生まれるものなので、軌道に意味がありますよね。
それでは、ファイルを移動させるためのドラッグ&ドロップのような動作はどうなのでしょうか?
みあ：そういった操作は、例外として認められないんです。
なぜなら、この場合、ファイルを移動させること自体に意味があり、ユーザーによるドラッグ&ドロップの軌道は重要ではないからです。
ドラッグ&ドロップは、開始位置と終了位置、つまりどのファイルをどこに移動させるのかさえわかっていれば、ショートカットキーでも実現できますよね。
反対に、お絵かきツールは、マウスを動かす速度や方向、動かす時間によって結果が変わってきます。
そして、この結果自体が重要なんです。
ゆみこ：たしかに、ファイルの移動の場合は、どういった軌道を描こうが、始まりと終わりの位置が同じであれば、結果も同じですよね。
それに比べて、お絵かきツールは、どの軌道でマウスを動かしたかによって結果が変わります。
これがユーザーが描く軌道に意味があるかどうかということなんですね。
みあ：はい、その通りです。
ゆみこ：以前、キーボード操作を可能にするには、セマンティックHTMLが重要だというお話があったと思います。
この達成基準も、セマンティックHTMLでマークアップすることで、適合させることができるのでしょうか。
みあ：はい、細かい調整が必要な場合もありますが、セマンティックHTMLでマークアップすれば、基本的なキーボード操作が可能になります。
基本的なキーボード操作というのは、ボタンやリンクにフォーカスした状態でエンターキーを押すとクリックと同じ動きをするだとか、スペースキーでチェックボックスのチェックをつけたり外したりできるといった感じですね。
ゆみこ：やっぱりセマンティックHTMLは重要なんですね。
達成基準2.1.2とキーボードトラップ
ゆみこ：それでは続いて、達成基準2.1.2について教えてください。
こちらはどんな内容なんでしょうか。
みあ：達成基準2.1.2「キーボードトラップなし」は、WCAG 2.0解説書にこのように書かれています。
「キーボードインタフェースを用いてキーボードフォーカスをそのウェブページのあるコンポーネントに移動できる場合、キーボードインタフェースだけを用いてそのコンポーネントからフォーカスを外すことが可能である。
さらに、修飾キーを伴わない矢印キー、 Tab キー、又はフォーカスを外すその他の標準的な方法でフォーカスを外せない場合は、フォーカスを外す方法が利用者に通知される」
簡単にまとめると、キーボード操作によりあるコンテンツに移動することができるのであれば、そのコンテンツからフォーカスを外すのもキーボード操作のみで行える必要があります。
さらに、フォーカスを外す方法が一般的なものではない場合、ユーザーにフォーカスの外し方を知らせる必要があるとも書かれています。
ゆみこ：キーボードトラップに関しては、確か第10回で詳しくやりましたよね。
みあ：はい、そうでしたね。
振り返りにはなりますが、キーボードトラップとはどんなものだったか覚えていますか?
ゆみこ：はい。キーボード操作でウェブを利用しているとき、特定の部分にフォーカスが当たったまま閉じ込められてしまい、抜け出せなくなることでしたよね。
キーボードトラップがあると、キーボード操作でウェブを利用するユーザーは、このウェブサイト内を自由に移動することができなくなってしまいます。
そうならないために、キーボードトラップがないウェブサイトにするのが重要だというお話だったと思います。
みあ：さすが！その通りです。
それでは、キーボードトラップをなくすためにはどうすればよいか覚えていますか?
ゆみこ：はい。先ほどのお話と同じで、まずはセマンティックHTMLでウェブサイトを作ることが重要でしたね。
そうするだけで、キーボードで操作したときに、ボタンやリンクに適切な順序でフォーカスが当たるようになります。
また、標準的な方法でフォーカスを外したり移動したりすることができないコンテンツの場合は、フォーカスの移動方法をユーザーに通知する必要があるんですよね。
テキストで操作方法を表示する、通知画面で案内する、といった方法があったと思います。
みあ：はい、その通りです。
そのようにして自由に移動できるようにすると、誰にとっても快適なウェブサイトを作ることができるんですね。
ゆみこ：はい。本日のテーマはWCAG 2.0 解説シリーズPart10「『ガイドライン2.1 キーボード操作可能』とその達成基準」でした。
お聞きいただきありがとうございました。
感想をいただけるととっても嬉しいです。
ハッシュタグ「チャコウェブラジオ」をつけて、ぜひSNS、X（旧Twitter）で投稿してください。
また、概要欄にメールフォームリンクをご用意しています。
ウェブアクセシビリティに対応したい方、チャコウェブにお仕事を依頼したい方や、ご相談がある方は、お気軽にメッセージをお寄せください。
次回もお楽しみに。
