00:04
ゆみこ：こんにちは。チャコウェブラジオは、株式会社Cyber Catsが運営するチャコウェブのスタッフが、
ウェブアクセシビリティを実践したい制作者やウェブ担当者に向けて、ゆっくりじっくり解説していくポッドキャストです。
進行を担当するゆみこです。よろしくお願いします。
みあ：みあです。よろしくお願いします。
ガイドライン3.3の紹介
ゆみこ：本日のテーマは、WCAG 2.0 解説シリーズPart20「『ガイドライン3.3 入力支援』とその達成基準 前編」です。
みあ：今回から、4つの原則の3つ目「理解可能」の最後のガイドライン、3.3「入力支援」について、2回に分けて見ていきたいと思います。
ゆみこ：はい、お願いします。まずは、ガイドライン3.3がどんなものなのか教えてください。
みあ：はい。ガイドライン3.3「入力支援」について、WCAG 2.0 解説書にはこのように書かれています。
「利用者の間違いを防ぎ、修正を支援すること」
人は誰でもミスをしますが、障害特性や支援技術の使用状況によって、エラーを起こしやすかったり、エラーに気づきにくかったりするケースがあります。
例えば視野が狭い、色の判別が難しい、スクリーンリーダーを使用している、といった状況です。
ゆみこ：うーん、注意力や認知力が低下しているユーザーはミスが増える可能性がありますし、視野が狭いユーザーはエラー表示を見逃しやすいかもしれません。
それから色覚特性があるユーザーは、コントラストの低いエラー表示だと気づかないことも考えられますよね。
みあ：そうですね。このガイドラインはそういった不便を解消するためのもので、次の3つが目的とされています。
1.重大なエラーや取り消せないエラーを減らすこと。
2.すべてのエラーにユーザーが気づけるようにすること。
3.エラーをどう修正すればよいか、ユーザーが分かるようにすること。
ユーザーにとって使いやすいフォームにするために、この3点が大切なんですね。
ゆみこ：なるほど。この3点を意識するとユーザーが使いやすいフォームになるので、「入力支援」という名前のガイドラインなんですね。
みあ：はい、そうなんです。それでは、達成基準の解説に入ります。
達成基準3.3.1の解説
みあ：まずは、達成基準3.3.1「エラーの特定」です。
WCAG 2.0 解説書には「入力エラーが自動的に検出された場合は、エラーとなっている箇所が特定され、そのエラーが利用者にテキストで説明される」と書かれています。
簡単に言うと「エラーが見つかった場合、どこがエラーなのか特定して、どの部分が間違っているのかをユーザーにテキストで伝えるようにする」という内容の達成基準です。
適合レベルはAです。
ゆみこ：どこがエラーなのかを特定し、さらにテキストで伝える必要があるんですね。
エラーの部分が赤い枠で強調表示されるといったフォームも存在しますよね。テキストで伝える必要があるということは、そういった視覚的な表示ではいけないということでしょうか？
みあ：色で強調すること自体は禁止されていませんが、それだけでは不十分です。
なぜなら、視覚的な強調だけでは、エラーに気づけないユーザーもいるからです。
例えば、色覚特性のあるユーザーやスクリーンリーダーを使用するユーザーは、赤枠のような強調表示だけではエラーを認識できない可能性があります。
その場合、エラーに気が付かず、フォームに不具合があると判断して送信を諦めてしまうかもしれません。
ゆみこ：ああ、なるほど。そういったケースがあるので、この達成基準では色などの視覚的な強調だけでなく、テキストでエラーを伝えることが求められているんですね。
それでは、具体的にはどのように対応すれば、この達成基準を満たすことができるんでしょうか。
みあ：先ほどからお伝えしている通り、エラー部分が特定できるような説明をテキストで表示させることで、この達成基準を満たすことができます。
例えば、「氏名は必ず入力してください」、「電話番号が未入力です」といった感じですね。
ゆみこ：うん。そういったメッセージなら、どの部分がエラーなのかわかりやすいですね。
みあ：他にも、スクリーンリーダーがエラーを認識できるよう、適切なARIA属性を設定するのもよいと思います。
ゆみこ：ARIA属性、新しい言葉が出てきましたね。
みあ：ARIA属性は、Accessible Rich Internet Applicationsの略で、アクセシビリティ向上の目的でW3Cが定めたものです。
ARIA属性を使用することで、HTMLだけでは表現できない構造や状態を表すことができます。
これを適切に設定すると、ウェブコンテンツの構造や状態を支援技術を通じてユーザーに伝えることができます。
そのため、アクセシビリティの向上につながるんですね。詳しくは今後解説する予定です。
ゆみこ：うん、そういったものがあるんですね。今後の解説を待ちたいと思います。
達成基準3.3.2の解説
みあ：はい。次は、達成基準3.3.2「ラベル又は説明」です。
解説書には、「コンテンツが利用者の入力を要求する場合は、ラベル又は説明文が提供されている」と書かれています。
この達成基準の目的は、ユーザーが正しく入力できるように、フォームの入力欄に適切な説明やラベルを付けることです。
特に、特定の入力形式で入力する必要がある場合などは、その情報を明確に伝えることが重要です。
こちらも適合レベルはAです。
ゆみこ：入力欄の説明やラベルを適切にすることで、ユーザーが戸惑わないようにするための達成基準なんですね。
確かに、入力形式が決まっている場合は、説明がないと正しく入力できなくて困ってしまいそうです。
みあ：そうですよね。そのため、まずはフォームの入力欄に「何を入力すればいいのか」を示すラベルや説明文を用意することが大切です。
入力形式が決まっていたり、必須項目がある場合はそれもわかりやすく表示しましょう。
また、このときむやみに情報を増やしすぎないよう注意が必要です。
この達成基準で重要なのは、ユーザーにとって本当に役立つ情報を提供することです。
情報が多すぎると、かえって混乱を招くことがあります。
ユーザーが迷わず入力できるようにしつつ、余計な情報や操作を増やさないよう工夫が必要なんですね。
ゆみこ：うん、ただ情報を増やせば良いわけではなく、適切に表示することが大切なんですね。
それでは、具体的にどのような対応を行えばこの達成基準を満たせるんでしょうか。
みあ：簡単な対応方法の一つに、フォームの入力欄にわかりやすいラベルを付け、
さらに、送信時に必須項目が未入力だった場合、どこに入力が必要かをテキストで示すという方法があります。
例えば「氏名（必須）」のようにわかりやすいラベルを付けると、ユーザーは迷わず入力できます。
そして、必須項目が未入力のまま送信された時には、「氏名は必須項目です」といったエラーメッセージを表示し、
どの項目の入力が必要かをテキストで伝えることで、スムーズに修正できるようになります。
ゆみこ：なるほど。入力欄にわかりやすいラベルを付け、未入力時には必須項目が特定できるテキストを表示することで、ユーザーが迷わず入力や修正ができるようにするんですね。
みあ：はい、その通りです。他には、ラベルと入力欄をlabel要素を使用して関連付けるという方法もあります。
この方法は作り方を工夫したり属性を設定する必要があるため、少し手間がかかると感じる人もいるかもしれません。
ですが、メリットの多い、とてもアクセシブルな方法です。
ゆみこ：うーん、そうなんですね。例えば、どんなメリットがあるんですか?
みあ：はい。入力欄を選択すると、スクリーンリーダーが自動的にラベルを読み上げてくれるようになります。
これにより、スクリーンリーダーユーザーは、何を入力すればよいのかがわかりやすくなります。
さらに、ラベルをクリックすると入力欄が選択されるようになるため、クリックできる範囲が広がり、手の動きに制限があるユーザーなどが操作しやすくなるんです。
ゆみこ：うん、なるほど。少し手間はかかりますが、そのひと手間で入力しやすいフォームにすることができるんですね。
みあ：はい、そうなんです。ですから、label要素はぜひ使っていただきたいですね。
ゆみこ：はい。本日のテーマは、WCAG 2.0 解説シリーズPart20「『ガイドライン3.3 入力支援』とその達成基準 前編」でした。
お聞きいただきありがとうございました。感想をいただけるととっても嬉しいです。
ハッシュタグ「チャコウェブラジオ」をつけて、ぜひSNS、X（旧Twitter）で投稿してください。
また、概要欄にメールフォームリンクをご用意しています。
ウェブアクセシビリティに対応したい方、チャコウェブにお仕事を依頼したい方や、ご相談がある方は、お気軽にメッセージをお寄せください。
次回もお楽しみに。
