00:05
ゆみこ：こんにちは。チャコウェブラジオは、株式会社Cyber Catsが運営するチャコウェブのスタッフが、
ウェブアクセシビリティやSNS運用など、ウェブに関するテーマについて楽しくお話しするポットキャストです。
進行を担当するゆみこです。よろしくお願いします。
みあ：みあです。よろしくお願いします。
ゆみこ：本日のテーマは、WCAG 2.0 解説シリーズPart6「『ガイドライン1.3 適応可能』とその達成基準 後編」です。
みあ：前回は、ガイドライン1.3「適応可能」と、達成基準1.3.1「情報及び関係性」について解説しました。
今回は残りの2つの達成基準を解説しますが、その前に軽くおさらいをしておきましょう。
前回お話ししたガイドライン1.3「適応可能」とは、どのようなものだったか覚えていますか?
ゆみこ：はい。えーと、情報や構造を保ったまま、様々な方法で利用できるように、ウェブコンテンツを制作する必要があるというお話だったと思います。
視覚的に表現されたものを音声で読み上げたり、より単純なレイアウトにしたりするときでも、
情報や構造が損なわれないようにすると、どんなユーザーにもコンテンツの内容を正しく伝えられるんですよね。
みあ：はい、その通りです。
それでは、達成基準1.3.1「情報及び関係性」の内容は覚えていますか?
ゆみこ：これは、何らかの形で情報や関係性が示されているとき、その内容をプログラムによって解釈できるようにするか、テキストで提供する必要があるというものでしたね。
みあ：はい、そうでしたね。
セマンティックHTMLでマークアップを行うのが、この達成基準に対応する方法の一つだというお話もしました。
ゆみこ：はい、そうでした。
HTMLを意味的に書くと、プログラムで解釈できるようになるんですよね。
みあ：はい、そうです。
それでは、ここからは新しい内容に入っていきましょう。
意味のある順序の重要性
みあ：まずは、達成基準1.3.2「意味のある順序」についてです。
この達成基準をWCAG 2.0解説書で見ると、「コンテンツが提示されている順序が意味に影響を及ぼす場合には、正しく読む順序はプログラムによる解釈が可能である」と書かれています。
ゆみこ：うーん、なんだかまた難しい感じがしますね。
みあ：うーん、確かにこの説明だけではわかりにくいですよね。
もう少し噛み砕いて考えてみましょう。
これは、並び順や読み順がそのコンテンツの内容や意味に影響するとき、正しい順序が支援技術などのプログラムにも伝わるようにする必要があるというものです。
ゆみこ：並び順や読み順がそのコンテンツの内容や意味に影響するとはどういうことでしょうか?
みあ：えー、段組みされた文章を例に考えてみましょう。
通常、こういった文章は、左側の段を最初から読んでいき、最後まで行ったら次の段に移るという順序で読みますよね。
これを右の段から読み始めて、最後まで行ったら左の段に移るという読み方をしたらどうなると思いますか?
ゆみこ：うーん、それは文章が繋がらないので
意味がわからなくなってしまいますよね。
みあ：そうですよね。
ということは、この文章には正しい順序があり、並び順や読み順がそのコンテンツの内容や意味に影響するということになります。
このように正しい順序が必要なコンテンツの場合、この順序をプログラムで正確に解釈できるようにすることが必要なんです。
ゆみこ：ああ、なるほど。確かに、読み順が崩れるとコンテンツの意味がわからなくなってしまいます。
ですから、これを支援技術などのプログラムでも理解できるようにするのが大切なんですね。
みあ：はい、そうなんです。
ゆみこ：この達成基準にはどのように対応すればよいのでしょうか?
みあ：一番取り組みやすいのは、コンテンツを意味のある順序で並べるという方法ではないでしょうか。
例えば、先ほどの段組みの例で考えてみましょう。
ウェブコンテンツ制作では、通常、HTMLでマークアップを行い、CSSでスタイルを適用しますよね。
段組みが必要な場合は、HTMLで文章をマークアップした後、CSSの段組みプロパティを使って段組みにします。
この場合、プログラムが正しい読み順を理解できるようになっているので、スクリーンリーダーが左から右へと自然な順番で内容を読み上げてくれます。
しかし、段組みプロパティを使わずに、見た目だけで段組みを再現すると、読み上げ順が乱れる可能性があるんです。
例えば、マークアップするときに、左の段の1行目を入力し、スペースを挟んで右の段の1行目を入力するという方法です。
これだと、テキストリーダーは左の1行目、スペース、右の1行目という順に読み上げてしまい、
文章の意味がわからなくなってしまいます。
この例の場合、コンテンツを意味のある順序で並べるためには、段組みプロパティを使って段組みするか、
そもそも段組みの使用をやめるかのどちらかにしたほうが良いと考えられます。
ゆみこ：んー、なるほど。CSSの使い方も重要になってくるんですね。
こうやってみると、この達成基準の大切さがわかりますね。
プログラムに意味のある順序が伝わらないことが原因で、ユーザーが混乱しないように、この達成基準があるんですね。
みあ：そうなんです。一方、順序が入れ替わっても問題ない場合があります。
それは、メニューバーや本文、関連記事をCSSで並べ替えているような時です。
見た目の順番は、メニューバー、本文、関連記事ですが、プログラムが読み取る順番は、メニューバー、関連記事、本文だったとします。
この場合、見た目とプログラムが読み取る順番が違いますが、コンテンツ自体の意味は変わりませんよね。
ですから、特に問題はありません。
ゆみこ：うん、確かに、メニューバーと本文と関連記事であれば、その塊をどの順番で読むかで、意味が通じなくなってしまうということはありませんね。
見た目と異なる順序であっても、内容が正しく理解できれば問題ないということですね。
みあ：はい、そうなんです。
この達成基準に取り組むときは、コンテンツの順序に意味があるかを考え、意味がある場合は、支援技術などのプログラムにも正しい順序が伝わるかを検証することが大切です。
感覚的な特徴の扱い
ゆみこ：それでは次に、達成基準1.3.3「感覚的な特徴」について教えてください。
みあ：はい。この達成基準をWCAG 2.0解説書で確認すると、「コンテンツを理解し操作するための説明は、形、大きさ、視覚的な位置、方向、又は音のような、構成要素が持つ感覚的な特徴だけに依存していない」と書かれています。
つまり、コンテンツを理解したり操作したりするための説明は、形や大きさ、視覚的な位置などの感覚的な特徴だけで伝えてはいけないということです。
ちなみに、色に関する話はこの先の達成基準で出てくるので、今回は割愛します。
ゆみこ：なるほど。確かに視覚情報を得られない人は、丸いボタンや右側のボタンとだけ言われても、どのボタンのことなのか特定するのは難しいですよね。
みあ：そうなんです。そのため、こういった場合には、他の情報も加えて誰でも理解できるようにする必要があります。
ただし、この達成基準は、形や位置を使った説明を完全に禁止しているわけではありません。
こういった特徴のほうが分かりやすいというユーザーもいますから、うまく活用しつつ、それだけに頼らないようにすることが重要です。
ゆみこ：そうなんですね。何か具体的な例はありますか?
みあ：はい。例えば、複数ページに分かれているお問い合わせフォームがあったとします。
このフォームの右下に、次のページに進むボタンがあると仮定して説明を考えてみましょう。
「次のページに進むには右下のボタンをクリックしてください」と書かれている場合、この達成基準を満たすことはできません。
右下という視覚的な位置や方向に依存しているからです。
この場合、「次のページに進むには右下の次へと書かれた角丸ボタンをクリックしてください」というように説明すると、とても良いと思います。
ゆみこ：うーん、確かに。位置やボタンテキスト、形など複数の情報を組み合わせて説明していますね。
みあ：はい、そうなんです。これにより、どんな人でもボタンを特定することができるんです。
ゆみこ：複数の手段で特定できるようにすることがとても重要なんですね。
ガイドラインの「適用可能」という言葉だけでは難しいイメージがあったのですが、前回と今回の解説を聞いたおかげで、理解が進みました。
エピソードのまとめ
ゆみこ：本日のテーマは、WCAG 2.0 解説シリーズPart6「『ガイドライン1.3 適応可能』とその達成基準 後編」でした。
お聞きいただきありがとうございました。感想をいただけるととても嬉しいです。
ハッシュタグ「チャコウェブラジオ」をつけて、ぜひSNS、X（旧Twitter）で投稿してください。
また、概要欄にメールフォームリンクをご用意しています。
ウェブアクセシビリティに対応したい方、チャコウェブにお仕事を依頼したい方や、ご相談がある方は、お気軽にメッセージをお寄せください。
次回もお楽しみに。
