ガイドライン3.2予測可能の紹介
ゆみこ：こんにちは。チャコウェブラジオは、株式会社Cyber Catsが運営するチャコウェブのスタッフが、
ウェブアクセシビリティを実践したい制作者やウェブ担当者に向けて、ゆっくりじっくり解説していくポッドキャストです。
ゆみこ：進行を担当するゆみこです。よろしくお願いします。
みあ：みあです。よろしくお願いします。
ゆみこ：本日のテーマは、WCAG 2.0 解説シリーズPart18「『ガイドライン3.2 予測可能』とその達成基準 前編」です。
みあ：今回から2回に分けて、ガイドライン3.2「予測可能」についてやっていきます。
前編では、4つあるレベルA、AAの達成基準のうち、2つを取り上げようと思います。
ゆみこ：はい、お願いします。さっそくですが、今回のガイドラインはどのような内容なんでしょうか?
みあ：はい。ガイドライン3.2「予測可能」は、WCAG 2.0 解説書にこのように書かれています。
「ウェブページの表示や挙動を予測可能にすること」
つまり、ウェブページの表示や動作をユーザーにとって予測しやすくすることで、混乱なく利用できるようにするためのガイドラインです。
ゆみこ：んー、なるほど。それで「予測可能」という名前なんですね。
みあ：はい。このガイドラインでは主に2つのことが求められています。
1つ目は、ウェブサイト全体を通して、レイアウトやコンテンツの配置に一貫性があり予測しやすいこと。
2つ目は、ボタンやリンクの動作に一貫性があり、予測可能な動きをすること。
ゆみこ：確かに、ページごとにデザインやレイアウト、ボタンやリンクの動きが異なると、ユーザーは戸惑いそうですね。
みあ：そうなんです。例えば、認知障害があるユーザーにとって、ページ間の一貫性は重要です。
ページごとに異なるレイアウトになっていると、混乱の原因になってしまうからです。
他にも、スクリーンリーダーや画面拡大ソフトなどを使用しているユーザー、キーボード操作を行うユーザーにとっても、レイアウトの統一は大切なんです。
ゆみこ：ページごとにレイアウトが違うと、スクリーンリーダーや画面拡大ソフトを使っているユーザーは、その度にページの構成を把握し直す必要がありますよね。
キーボード操作の場合も、フォーカス順序などがページごとに異なる可能性がありますね。
みあ：はい、そうなんです。そういった問題があるので、ページ間の一貫性を保ち、表示や動きを予測可能にすることが求められるんですね。
達成基準3.2.1フォーカス時の解説
みあ：それでは、次に達成基準を見ていきましょう。
まずは達成基準3.2.1「フォーカス時」です。
これは、レベルAの達成基準です。
解説書には「いずれのコンポーネントも、フォーカスを受け取ったときにコンテキストの変化を引き起こさない」と書かれています。
簡単に言うと、「ウェブページ上のユーザーインターフェースコンポーネントにフォーカスが当たった時に、予期せぬ大きな変化が起きないようにしましょう」ということです。
ゆみこ：以前少し登場しましたが、ユーザーインターフェースコンポーネントとは、フォームやリンク、ボタンなどのことでしたよね。
こういった要素にフォーカスが当たった時、自動的に変化が起きないようにすることを求める達成基準なんですね。
解説書に書かれている「コンテキストの変化」とは、一体どういう意味なんでしょうか。
みあ：ウェブコンテンツに生じる重要な変化を指します。
例えば、ページ全体が切り替わる、新しい情報が画面に表示される、操作中の画面のレイアウトが変わるなどです。
ウェブコンテンツの変化すべてがコンテキストの変化となるわけではありません。
あくまで重要な変化のことを指しています。
ゆみこ：んー、なるほど。ユーザーインターフェンスコンポーネントにフォーカスが当たることで、予期しないコンテキストの変化が引き起こされる具体的な例はありますか。
みあ：例えば、「送信ボタンにフォーカスが当たると、自動的にフォームが送信される」
「リンクにフォーカスが当たると、新しいウィンドウが開く」
「ある要素にフォーカスが当たると、他の要素にフォーカスが移動する」などがあります。
ゆみこ：あー、そのように意図せずいろいろ起きてしまうのは確かに不便ですね。
予期しないコンテキストの変化は、さまざまなユーザーにとって混乱の原因になりそうです。
みあ：そうですよね。しかも、スクリーンリーダーや画面拡大ソフトを使用しているユーザーは、
ウェブページ全体を一度に確認することが難しいため、このようなコンテキストの変化に気づかない可能性があるんです。
ゆみこ：うん。それでは、こういった問題を避けるにはどうすればいいんでしょうか。
みあ：フォーカスを要素に移動した時にはコンテキストが変わらないようにし、
ユーザーがクリックやエンターキーを押すなどの操作をした時にコンテキストが変化するようにするのが望ましいです。
CSSの擬似クラスで言うと、「focus」ではなく「active」を使用するということです。
ゆみこ：つまり、ユーザーが意図的に操作した時だけ変化が起きるようにすれば良いということですね。
みあ：はい、その通りです。次は、達成基準3.2.2「入力時」です。
達成基準3.2.2入力時の解説
みあ：こちらもレベルAの達成基準です。
解説書には「ユーザインタフェースコンポーネントの設定を変更することが、コンテキストの変化を自動的に引き起こさない。
ただし、利用者が使用する前にその挙動を知らせてある場合を除く」と書かれています。
ゆみこ：「ユーザインタフェースコンポーネントの設定」という聞き慣れない言葉が出てきましたね。
これはどういったものを指すのでしょうか?
みあ：簡単に言うと、データ入力やフォームコントロールの選択、つまりテキストフィールドへの入力やチェックボックス、ラジオボタンの選択などを指します。
ユーザーインターフェースコンポーネントには、状態を変更する操作と特定の動作を実行する操作の2種類があります。
状態を変更する操作の例は、テキストフィールドに文字を入力する、チェックボックスにチェックを入れるなどです。
こういった操作は、ユーザーが操作を完了した後もその状態が持続するという特徴があります。
例えば、テキストフィールドなら入力した文字列が保持されますし、チェックボックスならチェック状態が継続します。
この状態を変更する操作が、ユーザーインターフェースコンポーネントの設定を変更することにあたり、この達成基準の適用対象とされています。
特定の動作を実行する操作としては、リンクをクリックして新しいページへ移動する、ボタンを押してフォームを送信するなどがありますが、こちらは適用対象ではありません。
ゆみこ：状態を変更する操作が、「ユーザインタフェースコンポーネントの設定を変更すること」にあたり、この達成基準の対象となるんですね。
そして、状態を変更する操作は、テキストフィールドに文字を入力する、チェックボックスにチェックを入れるなどのことを指しているんですね。
みあ：はい、そうなんです。
そして、この達成基準では、ユーザーインターフェースコンポーネントの設定を変更したときに、コンテキストが自動的に変化しないことが求められています。
例えば、「ある入力欄へ入力すると、フォーカスが自動で次の入力欄に移動する」というのが、ユーザーインターフェースコンポーネントの設定を変更するとコンテキストが自動的に変化する例です。
ゆみこ：なるほど。知らない間にフォーカスが移動していると混乱するユーザーもいるかもしれませんし、入力途中でフォーカスが移動してしまうと不便ですよね。
ただ、「利用者が使用する前にその挙動を知らせてある場合を除く」と書かれているので、事前にユーザーに知らせてある場合は例外になるのでしょうか。
みあ：はい、その通りです。
例えば、フォームの上部に、「このフォームは、入力欄に入力したあと自動で次の項目に移動します」といった説明がある場合、自動でフォーカスが移動しても許容されます。
ゆみこ：では、この達成基準では、ユーザーインターフェースコンポーネントの設定を変更することで、自動的にコンテキストが変化しないようにするか、コンテキストが変化する場合は事前に説明することが大切なんですね。
みあ：はい、そのように対応するのが良いと思います。
ゆみこ：はい。本日のテーマは、WCAG 2.0 解説シリーズPart18「『ガイドライン3.2 予測可能』とその達成基準 前編」でした。
お聞きいただきありがとうございました。
感想をいただけるととっても嬉しいです。
ハッシュタグ「チャコウェブラジオ」をつけて、ぜひSNS、X（旧Twitter）で投稿してください。
また、概要欄にメールフォームリンクをご用意しています。
ウェブアクセシビリティに対応したい方、チャコウェブにお仕事を依頼したい方や、ご相談がある方は、お気軽にメッセージをお寄せください。
次回もお楽しみに。
