noteで書くこのコーナーでは、書籍『デザイニングWebアクセシビリティ』の一部を特別公開しています。筆者陣によるオンライン講座「アクセシビリティ入門(全7回)」放送中。適切な見出しがつけられていないと、ページの内容をざっと把握したり、不要な内容を読み飛ばすことが難しくなります。情報のまとまりごとに見出しをつけ、内容の把握や読み飛ばしができるようにしましょう。この記事では全9章の書籍から、第7章「コンテンツ設計」の適切な見出しが立っていないサイトの改善ポイント、7-2「適切な見出しが立っていない」の内容をお届けします。見出しがないと斜め読みや読み飛ばしができない適切な見出しがないと、必要な部分を拾い読みすることが困難になります。スクリーンリーダーでは、見出しがないと読み飛ばしができず、時間をかけて本文を読むはめになります。コンテンツの見出しがないコンテンツの冒頭に見出しがないと、このコンテンツが何なのか判断できません。ページタイトルは原則としてコンテンツ内には表示されませんし、ユーザーはコンテンツを見ているため、コンテンツを表す見出しが必要です。スクリーンリーダーのユーザーは、見出しジャンプの機能でヘッダ部分を読み飛ばすことがあります。コンテンツの先頭に見出しがないと、うまく飛ぶことができません。コンテンツに見出しが全くなく、いきなり本文テキストが始まる例。このコンテンツがそもそも何なのかがわかりにくく、見出しジャンプ機能でコンテンツの先頭に飛ぶこともできない。セクションの見出しがない長いコンテンツの多くは、意味のまとまりごとに分割することができます。本書は全体を9つの章に分割し、その中身を7-1、7-2などの節に分割しています。節の中も複数に分け、項目の冒頭に見出しを置いています。このように、コンテンツを分割できるそれぞれの単位を「セクション」と呼びます。章も、節も、その下の小見出しのついたかたまりも、大きさは異なりますが全てセクションです。ユーザーはコンテンツ全てを読むのではなく、必要な部分だけを読もうとします。セクションに見出しがないと、必要な部分をピックアップすることができません。スクリーンリーダーのユーザーはページをざっと見渡すことができないため、長い本文を読んでいかなければならなくなります。コンテンツがかなりの長文になっているが、途中に見出しが現れない例。読み飛ばしたり、途中から読んだりする際、どこから読めばよいのか判断できない。見出しから内容を推測できない見出しから内容が推察できなければ、見出しを活用できません。「その1」「その2」などの見出しでは、ページ内の順番しかわからず、そこに何が書かれているのか推察できません。見出し一覧を表示したところ、「その1」「その2」などが並んでいる例。見出しを見ても内容が推測できず、どこから読めばよいのか判断できない。見出しには大見出し、小見出しといった種類があり、階層化されているのが普通です。階層が適切でないと、コンテンツの構造や関係が伝わらないことがあります。ひとつのページに2つの製品情報があり、製品名の見出しの後ろに「重要なご注意」という見出しがあるとします。「重要なご注意」という見出しが商品名と同じ表現で並んでいれば、このページ全体の注意点に見えますし、見出しのレベルが落としてあれば、商品Bのアクセサリだけに関連するように見えます(図1)。見出しの親子関係がわからない例。カメラBの下にある「ご注意」という見出しが、カメラB固有の注意点なのか、ページ全体の注意点なのかわからない。見出しの階層が異なっているだけだが、情報の持つ意味には大きな違いが出てくる。コンテンツとセクションに具体的な見出しをつけるコンテンツの先頭と、各セクションに見出しを配置します。流し読みするユーザーにも内容が想像できるような具体的なテキストを見出しにして、コンテンツの階層に合った適切な見出しレベルを設定しましょう。コンテンツの冒頭に見出しを置くこのページ全体に対する見出しを用意して、メインコンテンツの先頭に配置します。これにより、このページが何なのかひと目でわかるようになり、スクリーンリーダーでは、見出しジャンプですぐにコンテンツを読み始めることができます。見出しの内容は、このページ全体の内容や主題を簡潔に表したものにします。ページタイトルにコンテンツのタイトルをつけているのであれば、それをそのまま見出しとして使うのが良いでしょう。ページタイトルがわかりづらい」を参照してください。コンテンツの冒頭や各セクションに適切な見出しを設けた例。アウトラインを表示すると、コンテンツの概要をひと目で理解することができる。http://www.jibunbank.co.jp/ces/セクション見出しを設置するページ内の各セクションに見出しをつけます。これにより、各セクションの内容が推測できるようになり、スクリーンリーダーでは、見出しジャンプで各セクションに飛ぶことができるようになります。コンテンツが長い場合は複数のセクションに分け、こまめに見出しを入れるようにしましょう。セクションが多い場合は、冒頭に目次をいれて概要を説明すると、さらに見通しが良くなります。コンテンツを含まないエリアに見出しをつける必要はありません。ヘッダやフッタ、ナビゲーションなどのエリアにスクリーンリーダー専用の隠し見出しを入れるケースもありますが、適切なマークアップをすれば、そのようなエリアをスクリーンリーダーに通知できます。不自然に感じられるような見出しを無理に入れる必要はないでしょう。スクリーンリーダー対応が不適切」も参照してください。内容を推測できる見出しをつけるユーザーは、見出しからそのコンテンツやセクションの内容を推測します。見出しをつける際は以下のような点に注意すると良いでしょう。単独で取り出してもわかるようにする見出しだけを取り出しても内容が推測できるようにしましょう。全文を読むつもりがないユーザーは見出しだけを見ることがありますし、スクリーンリーダーの見出し一覧機能では、見出しだけが単独で読まれます。前後の文章と重複して冗長になったとしても、見出し単独のわかりやすさを優先しましょう。「概要」「使い方」「詳細」といった一般的な見出しを使うと、ページ内で重複することがあります。同じ見出しで異なる内容が含まれていると混乱するため、なるべく避けたほうが良いでしょう。具体的に内容を推測できるようにするどのような内容にも適用できるような「その1」「その2」といった見出しを使うと内容が推測できません。「商品Aの概要」「商品Bの使い方」など、できるだけ具体的な表現にしましょう。セクションの内容が複数の話題にまたがっていると、具体的な見出しをつけづらいことがあります。このような場合、できればセクションを分割して、ひとつのセクションがひとつの話題になるようにするべきです。重要なキーワードを前に持ってくるユーザーがコンテンツを流し見する際は、見出しの冒頭がまず目に入ります。スクリーンリーダーもテキストを先頭から読み上げます。内容を示す重要なキーワードを見出しの前のほうに置くと、内容をすばやく理解しやすくなります。見出しのレベルを明確にするセクションが階層化されている場合、見出しに上下関係が生まれます。商品情報に「概要」「使い方」のような下位の見出しがあるとき、これが下層の見出しだと明確にわかるようにしましょう。コンテンツ設計時に見出しのレベルを明確に定義し、ビジュアルデザインやマークアップの際にも、レベルを意識することが重要です。上記の「概要」という見出しを「商品Aの概要」のようにすれば、たとえ階層がフラットでも、また見出しを単独で取り出しても意味が通じるようになります(図2)。見出しが少ない場合は、階層化せずにフラットにしたほうがわかりやすくなることもあるでしょう。階層がフラットでも理解できるようになる。発行:ボーンデジタルISBN:978-4-86246-265-7本書はアクセシビリティのガイドラインを解説した内容ではなく、サイトの制作プロセスに沿った実践的な内容となっています。それぞれのプロセスの概要と注意点、ユーザーにとって問題が起きるポイント、そして解決アプローチを紹介しています。2.0のレベルAおよびAAの達成基準のほとんどを達成することができます。2.0の達成基準と本書の内容との対照表を掲載していますので、ガイドラインに沿う場合の参考としてお使いいただけます。本書では基本的にHTMLとCSSで作られた静的なコンテンツを扱っています。動画や音声、アプリケーションなどについては、基本的な考え方を示すにとどめました。JavaScriptを駆使したWebアプリケーションのアクセシビリティについては、本書の姉妹書である『コーディングWebアクセシビリティ』が入門的な内容となっていますので、あわせて参考にしていただければ幸いです。委員を務めた後、2001年にBAに参加。Web技術の分野で幅広い専門性を持ち、セキュリティ分野においては「第二回IPA賞(情報セキュリティ部門)」を受賞。アクセシビリティ分野では、ウェブアクセシビリティ基盤委員会(WAIC)の委員として活動している。Webプログラミング」など。/ウェブアクセシビリティ基盤委員会(WAIC)理解と普及作業部会委員1999年よりWeb標準に則ったWebサイトの構築業務に従事。2004年にBAに参加。マークアップデザインエンジニアとして業務を行う傍ら、HCD(人間中心設計)プロセス導入を推進。現在はプロジェクト設計、調査分析、コンセプト立案から、アクセシビリティおよびユーザビリティを確保したインタラクションデザイン、さらにフロントエンド実装のディレクションまでを一貫して手がける。クリエイティブユニットmokuva所属。最近(過去90日間)の記事で、Facebookの「いいね!」が多かった記事をお見逃し無く。ネット広告への強い嫌悪感、テレビや新聞の倍以上に。いいね!伝説のTwitter企業アカウント“中の人”の先駆け。いいね!私は変人コレクター。いいね!「おもてなし」は思考停止ワード。大手広告代理店グループ★中之島★クライアントに対しWEB領域のソリューションプランニングを実践するWEBプロデューサー募集!大手広告代理店グループの制作プロダクションです。「おもてなし」は思考停止ワード。各週の人気記事ランキング記事を見るはてなブックマークですべての人気記事を見る今日の用語コンバージョンサイトを訪問した人が、商品を購入したり、資料請求したりすること。2/24~2/28のマーケティング、インサイドセールス、データ分析、EC、SEOなど他社セミナー情報52件Web担編集部がゼロから学ぶ、Tableau「BI講座」。Patterns』を3名様にプレゼント!【受付終了】企業がDXに向かう取り組み方を考える『デジタルファースト・ソサエティ』を3名様にプレゼント!すべて見るインフォメーションWeb担のメルマガを購読しませんか?Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。編集後記サイトマップFAQ(よくある質問とその答)Web担に広告を掲載しませんか?購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。