WCAGの概要
こんにちは。チャコウェブラジオは、株式会社Cyber Catsが運営するチャコウェブのスタッフが、
ウェブアクセシビリティを実践したい制作者やウェブ担当者に向けて、ゆっくりじっくり解説していくポッドキャストです。
進行を担当するゆみこです。よろしくお願いします。
ミヤです。よろしくお願いします。
本日は、2025年最後の配信ということで、特別企画、WCAGのガイドラインを一気に振り返ろう、前編です。
年末に前編、年始に後編と、2回に分けて、WCAGのガイドラインを一気に振り返っていこうと思います。
はい、WCAG 2.0の解説シリーズが完結して、もう1年近く経つんですよね。
あやふやになっている部分もありそうなので、しっかり復習したいと思います。それではさっそくお願いします。
はい、お願いします。まず初めに、WCAGについて大まかに振り返っていきたいと思います。
WCAGとは、ウェブアクセシビリティの世界的なガイドラインのことです。
これは、W3Cというウェブに関する技術の標準を決めている国際的な団体によって作られました。
そして、WCAGにはいくつかバージョンがあるんですが、今回は2.0基準におさらいしたいと思います。
最新版ではなくて、2.0を基準にするのには、WCAGと日本産業企画、いわゆるJISの関係があるんですが、この関係性覚えていますか?
はい。確か、ウェブアクセシビリティに関するJISとして、JIS X 8341-3がありますが、この最新版である2016年版とWCAG 2.0は内容が一致しているんですよね?
はい、その通りです。JIS X 8341-3:2016とWCAG 2.0は同じ内容である一致企画となっています。
つまり、JIS X 8341-3:2016に準拠するのは、WCAG 2.0に準拠することと同じなんですね。
ということで、このバージョンを基準におさらいしていきたいと思います。
ここからは、WCAG 2.0のことをWCAGと呼びますので、ご了承ください。
知覚可能の原則
それでは次に、WCAGの構成について振り返りたいと思います。どうでしょう?構成は覚えていますか?
えーと、確か、4つの大きな原則があって、その下にガイドラインがあって、さらにその下に達成基準があるという3層構造でしたよね?
正解です。4つの原則の下に合計12個のガイドラインが存在し、ガイドラインの中にさらにレベルごとに分けられた達成基準が存在するという階層構造になっています。
この構造を理解しておくと、WCAG全体の見通しが良くなるので、ぜひここは押さえておいてほしい部分ですね。
それでは今回はこの4つの原則のうち2つと、それに紐づくガイドラインを見ていきたいと思います。さっそく1つ目の原則、視覚可能から振り返っていきましょう。
視覚可能ですね。この原則は誰にとってもウェブコンテンツを認識できるようにするという、本当に基本的で大切な考え方ですよね。
そうですね。ウェブユーザーの中には視覚障害がある人もいれば、聴覚障害がある人もいます。
だから視覚や聴覚などの1つの感覚だけに向けて情報を発信してしまうと、その感覚が使用できない状況では情報を得ることができません。
そうですね。だからこそどの感覚で情報を得ている人にも情報が伝わるように、さまざまな方法でコンテンツを提供する必要があるんですよね。
はい、その通りです。1つの方法だけに頼らないというのがポイントですね。この原則には4つのガイドラインがあります。
まず1つ目がガイドライン1.1。テキストによる代替です。これは画像や動画、音声といった非テキストコンテンツにテキストでの説明をつけるというものでしたね。
どうして非テキストコンテンツにテキストでの説明をつける必要があるのかは覚えていますか?
はい。テキストは展示や音声などユーザーが必要とする形式に変換できるからだったと思います。
例えば画像に代替テキストをつけておけば、スクリーンリーダーがそれを音声で読み上げてくれますよね。
その通りです。テキストは汎用性が高く、さまざまな支援技術に対応できる基本の形式です。
ユーザーが使いやすい形に変えられるようテキストが必要。これは以前の解説でもお話しした内容でした。
次はガイドライン1.2。時間依存メディアです。このガイドラインは動画や音声といった時間とともに変化するメディアに対応が必要だというものです。
具体的には動画に音声解説をつける、音声だけのメディアには書き起こしたテキストを用意するといった対応です。
そのように対応することで、視覚障害がある人は音声解説で動画の内容を理解できますし、聴覚障害がある人も音声メディアの内容をテキストで理解することができるんですよね。
最近は動画コンテンツやポッドキャストといったものがすごく増えていますから、このガイドラインの重要性はどんどん高まりそうですね。
本当にそうですね。それに動画の字幕は聴覚障害のある方だけでなくて、公共の場といった音を出せない環境で見る場合にも便利ですから、アクセシビリティ対応が結果的に多くの人の利便性向上につながるいい例だと思います。
視覚可能の3つ目がガイドライン1.3、適応可能です。これは情報や構造を損なうことなく、さまざまな方法でコンテンツを提供できるように制作する必要があるというものでした。
ここで重要なのは、ウェブページの見た目だけでなく、その裏にある構造も大切だということでしたね。適切な見出しタグを使ったり、リストを正しくマークアップしたりすることで、支援技術がページの構造を正しく理解し、ユーザーに伝えることができます。
以前、HTMLのマークアップを正しく使うことがアクセシビリティに直結するという解説がありましたよね。見た目を整えるためだけにタグを使うのではなく、意味を伝えるために正しいタグを使うのが重要だったと思います。
セマンティックHTMLのことですね。例えば、見出しを大きく表示したいからといって、ただ文字サイズを大きくするのではなくて、適切な見出しタグを使うことで、スクリーンリーダーがこれは見出しだと認識できるわけです。
さて、知覚可能の最後がガイドライン1.4、判別可能です。これはコンテンツをユーザーにとって見やすく聞きやすいものにするというガイドラインです。代表例として、文字の色と背景色のコントラストをはっきりさせることで、識覚特性があっても文字が読みやすいようにできるんですよね。
このガイドライン、他のガイドラインとちょっと違う特徴があったんですが、どうでしょう?覚えていますか?
コンテンツの形を変えることなく、そのままアクセシビリティを向上させることに注目したガイドラインでしたよね。
お、さすがです。ガイドライン1.1や1.2が、代替を用意するという考え方だったのに対して、ガイドライン1.4は、元のコンテンツ時代のアクセシビリティを向上させるという考え方でした。
以上が一つ目の原則、知覚可能のガイドラインです。
どんなユーザーにとっても、情報を認識できるようにするということに焦点を当てた原則、ガイドラインですね。確かに、情報にアクセスできなければ何も始まらないので、最初の原則が知覚可能なのは納得です。
はい、まさに最初の原則にふさわしい内容ですよね。それでは、次を見ていきましょう。
操作可能の原則
2つ目の原則は、操作可能です。情報にアクセスできても、操作ができなければ意味がありません。操作可能は、ウェブコンテンツを誰にとっても使用できるようにするための原則です。
この原則にも4つのガイドラインがあるので、1つずつ振り返っていきましょう。
1つ目は、ガイドライン2.1。キーボード操作可能です。これは、コンテンツのすべての機能をキーボードで利用できるようにするというものでしたね。
はい、ウェブユーザーにはマウスを使うのが難しい人もいるので、キーボードでの操作は非常に重要なんですよね。それから、キーボード操作が可能であれば、さまざまな支援デバイスでの操作にも対応できるようになるという解説があったと思います。
はい、そういったお話をしましたね。他にも、マウスが壊れたといった状況でも、キーボード操作が使えれば便利だと紹介しました。
次は、ガイドライン2.2。十分な時間です。このガイドラインは、ユーザーがコンテンツを読んだり使用するために十分な時間を提供する必要があるというものでした。
フォームの記入など、何かしらの操作をしている途中で、突然時間切れになってしまうということがあると、他のユーザーよりも操作に多くの時間を必要とするようなユーザーは不便ですよね。
こういった場合、制限時間をなくす、時間を延長できるようにするなどの対策を取ることで、運動障害や独自障害があるユーザーなど、操作に時間がかかるユーザーのサポートができるという内容です。
うーん、確かに。スライドショーなどで、内容を確認し終わる前に次に進んでしまうと、すごく困ります。
ああ、そういうことありますよね。そういう不便さに対応するのが、まさにこのガイドラインですね。
続いて、ガイドライン2.3。発作の防止です。これは、発作を引き起こすようなコンテンツを設計しないよう求めるガイドラインです。
以前の解説で、激しい光によって発作を起こす人がいるという話がありましたよね。
はい、そのようにお話ししました。画面が激しく点滅するような表現、いわゆる閃光と呼ばれるものは、その強い光の刺激で発作を引き起こす可能性があるため、注意が必要という内容でしたね。
具体的にどんな対応が必要かというと、1秒間に3回を超えて点滅するようなコンテンツは作らない、などがありました。
そして、操作可能の最後が、ガイドライン2.4。ナビゲーション可能です。
これは、ユーザーがウェブサイト内を移動したり、コンテンツを探し出したり、現在位置を確認したりすることを手助けする手段を提供するというものでした。
例えば、適切なページタイトルをつける、パンクズリストを用意する、適切な見出しを設定する、といった工夫をすると、ユーザーは自分が今どこにいるのか、探しているコンテンツがどこにあるのかがわかりやすくなります。
パンクズリストは本当に便利ですよね。自分が今サイトのどの階層にいるのか、一目でわかります。
そうですね。特にスクリーンリーダーを使っているユーザーは、視覚的にサイト全体を把握することができないので、このようなナビゲーションが非常に重要なんです。
また、ページタイトルや見出しも、コンテンツを読み飛ばしながら探す際の重要な手掛かりになります。
これがちゃんとしていないと、スクリーンリーダーでページ全体を聞いていかないと、自分の欲しい情報が見つけられなくなってしまいます。
そう考えると、見出しってデザインとして大切なだけではなくて、支援技術にとっても重要な目印なんですね。
原則の繋がりと理解
本当にそうなんです。以上の4つが2つ目の原則、操作可能のガイドラインでした。
視覚可能で情報を認識できるようにして、操作可能で誰にとっても実際にコンテンツが使えるようにするんですね。
まずは、情報を認識できるようにする必要がありますが、認識できても操作できなければ意味がない。
だから、1つ目の原則、視覚可能の後に、2つ目の原則として操作可能があるんですね。
はい、その通りです。原則やガイドラインなどいろいろ出てきて、最初は混乱するかもしれませんが、そのように順序立てて考えるとわかりやすいと思います。
うーん、こうして一気に振り返ってみると、原則同士の繋がりや全体の構造がより明確に見えてきた気がします。
お、それは良かったです。1つ1つの内容を理解することも大切ですが、全体の構造や繋がりがわかってくると、また一段と理解が進むと思います。
後編もこの調子で、残り2つの原則、理解可能と堅牢を振り返っていきますので、お願いします。
はい、本日のテーマは、WCAGのガイドラインを一気に振り返ろう、前編でした。
お聞きいただきありがとうございました。感想をいただけるととっても嬉しいです。
また、概要欄にメールフォームリンクをご用意しています。
ウェブアクセシビリティに対応したい方、チャコウェブにお仕事を依頼したい方や、ご相談がある方は、お気軽にメッセージをお寄せください。
それでは皆さん、良いお年を!
