ガイドライン1.3の基本概念
ゆみこ：こんにちは。チャコウェブラジオは、株式会社Cyber Catsが運営するチャコウェブのスタッフが、ウェブアクセシビリティやSNS運用など、ウェブに関するテーマについて楽しくお話しするポッドキャストです。
進行を担当するゆみこです。よろしくお願いします。
みあ：みあです。よろしくお願いします。
ゆみこ：本日のテーマは、WCAG 2.0 解説シリーズPart5「『ガイドライン1.3 適応可能』とその達成基準 前編」です。
みあ：今回と次回は、「ガイドライン1.3 適応可能」とそれに関連する達成基準について、2回に分けて解説していきたいと思います。
ゆみこ：はい、よろしくお願いします。
それでは、まずはガイドライン1.3の基本的な内容を教えてください。
みあ：はい。「ガイドライン1.3 適応可能」を WCAG 2.0の解説書で見ると、このように書かれています。
「情報、及び構造を損なうことなく、様々な方法（例えば、よりシンプルなレイアウト）で提供できるようにコンテンツを制作すること」
これは、情報や構造を保ったまま、様々な方法で利用できるようにウェブコンテンツを制作する必要があるということです。
ゆみこ：この様々な方法というのはどういうことでしょうか?
みあ：はい。例えば、視覚的に表現されたものを音声で読み上げたり、より単純なレイアウトにしたりするといった感じですね。
そういった場合に、情報や構造が損なわれないようにする必要があるということです。
ゆみこ：うーん、なるほど。ウェブコンテンツは視覚的な表現が多いですよね。
そういったものを音声で読み上げたり、レイアウトを変えたりした場合でも、情報や構造を保てるようにする必要があるんですね。
みあ：その通りです。このガイドラインは、誰にとってもウェブコンテンツの情報や構造が正しく理解できることを目的としています。
情報や構造を保ったまま、様々な形や環境でウェブコンテンツを利用できるようにすれば、これを実現することができるんです。
ゆみこ：うん、確かにそうですね。反対に、このガイドラインに沿ってウェブコンテンツを制作しないと、正しい情報を得られないユーザーが出てくるということでしょうか。
みあ：はい、そうですね。一部のユーザーにとって、コンテンツが理解できなくなる、しにくくなる可能性があります。
それは、どんな形式や環境でも情報や構造が保たれるようにしていないと、ユーザーの利用環境により情報が損なわれるなどの事態が起こり得るからです。
達成基準1.3.1の詳細
みあ：特に支援技術を使用しているユーザーは、自身が使いやすいように利用環境をカスタマイズしているため、影響を受けやすいと考えられます。
ゆみこ：そうなんですね。あらゆるユーザーにとって、正しく理解できるウェブコンテンツにするには、情報や構造を保ったまま、様々な形式や環境で利用できるようにする必要があるということですね。
みあ：はい、その通りです。また、スクリーンリーダーなどの支援技術に正確な情報が伝わるようにしておくと、
検索エンジンにとっても理解しやすいコンテンツになります。
そうすると、検索エンジンからの評価が上がりますから、結果として検索結果の順位が向上する可能性があるんです。
ゆみこ：なるほど。ウェブアクセシビリティの向上だけでなく、SEO対策にもなるんですね。
みあ：そうなんです。 ちなみに、このガイドラインに関連する達成基準は3つあります。
1.3.1 情報及び関係性
1.3.2 意味のある順序
1.3.3 感覚的な特徴
という3つなのですが、どれもレベルAとなっているんです。
ゆみこ：3つともAなんですね。つまり、このガイドラインや達成基準は、ウェブアクセシビリティの観点から見ると、基本的で重要な事項ということでしょうか。
みあ：そのように考えて良いと思います。
ゆみこ：そうなんですね。 それでは続いて、達成基準についても詳しく教えてください。
みあ：はい。まず、今回は1つ目の達成基準である「1.3.1 情報及び関係性」をご紹介します。
2つ目と3つ目の達成基準については後編で解説したいと思います。
それでは早速1つ目の達成基準を見ていきましょう。
「1.3.1 情報及び関係性」をWCAG 2.0解説書で見ると、
「何らかの形で提示されている情報、 構造、及び関係性は、プログラムによる解釈が可能である、
又はテキストで提供されている。」と書かれています。
これは視覚や聴覚で伝えられている情報や関係性が、他の形式でも同じように伝わるようにすることを目的とした達成基準です。
ゆみこ：うーん、少し難しそうですね。 もう少し詳しく教えてください。
みあ：はい、もちろんです。 例えば、視覚的な情報があった時、
視覚が使える人は、見た目の手がかりから情報を理解しますよね。
見出しが太字や大きなフォントで表示されていたり、リストの項目の頭にアイコンがついていたり、
強調されている言葉が特定の色やフォントで表示されていたりするのを見れば、
その部分がどういった役割なのかや、強調されているのかどうかなどがわかると思います。
ですが、こうした情報や関係性がプログラムで読み取れたり、テキストで提供されていない場合、
視覚以外から情報を得るユーザーは、この手がかりを得ることができません。
ゆみこ：ああ、なるほど。情報や関係性が伝わらず、欠けてしまうんですね。
そうすると、正しい情報が伝わらないことで、誤解を生んでしまうこともありそうです。
みあ：そうですね。どこが見出しなのかわからなかったり、
本当はリストや表なのに、それが伝わらなかったりという事態が発生する可能性があります。
ですから、プログラムに伝わるようにしたり、テキストで提供したりする必要があるというのが、この達成基準の内容となります。
ゆみこ：確かに、そのようにすればテキストリーダーなどの支援技術でも理解することができるので、
支援技術を使用しているユーザーにも正しく伝わるんですね。
先ほど出た「テキストで提供する」というのは、視覚的な情報をテキストにして表示するということですよね。
みあ：はい。例えば、フォームの中で、必須項目だけ項目名が太字になっているとします。
これでは、視覚情報がない場合、どこが必須項目なのかわからないですよね。
そこで、「お名前（必須）」というように、必須であることを項目部分にテキストで記載しておきます。
これがテキストで提供するということです。
ゆみこ：なるほど。それはわかりやすいです。
それでは、プログラムによる解釈を可能にするというのは、どうしたらいいのでしょうか？
みあ：様々な方法があるのですが、まずはセマンティックHTMLでマークアップを行うというのが大切だと思います。
ゆみこ：セマンティックHTMLという言葉は、以前少しだけ登場しましたね。
みあ：はい。ずいぶん前なので、もう一度説明しておきたいと思います。
セマンティックとは、「意味的な」といった意味があります。
つまり、セマンティックHTMLとは、意味的なHTMLということで、HTMLを意味的に書くことを指しています。
例えば、見出しであれば見出し要素のHタグを使用するとか、表ならテーブルタグを使用するといった感じですね。
ゆみこ：うーん、どうして意味的に書くことが大切なのでしょうか？
みあ：それは、意味的に書くことこそが、プログラムでの解釈を可能にする方法だからです。
例えば、Hタグを使用せずに、CSSで文字サイズを大きくしたり、太字にしたりして見出しを作ったとします。
これは、見た目は立派な見出しかもしれませんが、コードとして見た時に見出しだとはわからないんです。
つまり、テキストリーダーなどの支援技術からすると、どこが見出しかわからない状態になってしまうんです。
ちなみに、Hタグを使用せずに作った見出しを、プログラムに見出しとして伝える方法もあるのですが、話が脱線するので、ここでは省略したいと思います。
ゆみこ：なるほど。セマンティックHTMLでマークアップすることで、ウェブコンテンツの内容がプログラムに正しく伝わるようになるんですね。
みあ：はい。また他の達成基準の話になりますが、リンクやボタンはキーボードで操作できるようにする必要がありますよね。
これも意味的なマークアップが重要になってきます。
ですから、セマンティックHTMLはウェブアクセシビリティの基礎といっても過言ではないと思います。
そういったことも考え、「1.3.1 情報及び関係性」に取り組む際は、まずセマンティックHTMLでマークアップするようにしたら良いと思います。
ゆみこ：意味的にマークアップするということは、とっても大切なんですね。
みあ：はい、そうなんです。
また、プログラムによる解釈を可能にしたり、この達成基準を満たすための方法は、この他にもたくさんあります。
気になる人は、ぜひWCAG 2.0 解説書の「情報及び関係性 達成基準 1.3.1 を理解する」のページを読んでみてください。
今後の展望とエピソードのまとめ
ゆみこ：はい、では残り2つの達成基準については、後編で解説してもらいたいと思います。
本日のテーマは、WCAG 2.0 解説シリーズPart5
「『ガイドライン1.3 適応可能』とその達成基準 前編」でした。
お聞きいただき、ありがとうございました。
感想をいただけると、とっても嬉しいです。
ハッシュタグ「チャコウェブラジオ」をつけて、ぜひSNS、X（Twitter）で投稿してください。
また、概要欄にメールフォームリンクをご用意しています。
ウェブアクセシビリティに対応したい方、チャコウェブにお仕事を依頼したい方や、ご相談がある方は、お気軽にメッセージをお寄せください。
次回もお楽しみに。
