top of page
検索

ウェブアクセシビリティにおいて重要なのは見出し？文章構造の書き方をご紹介

ウェブアクセシビリティにおいて非常に重要な役割を持つ見出し

ウェブアクセシビリティの基準をクリアするために、非常に重要な要素となるのが、「見出し」要素です。


見出し要素とは、ウェブサイトにどのようなコンテンツがあるのかわかりやすくするための文の章ごとのタイトルのことを指します。


この章節の文章のタイトルが何なのかを明記しておくとユーザーは文章を認識しやすくなるでしょう。


ウェブアクセシビリティに配慮した見出し・文書構造の仕方

マークアップ方法について

各見出しを、HTMLでh1～h6でマークアップします。

例えば、以下のようなイメージです。


<h1>ウェブアクセシビリティにおいてh1タグは重要である！</h1>


主に<h1>タグは、記事のタイトルなど一番重要な見出しに使用されます。


文章構造によって適切に階層分けする

さらに、h1～h6を階層にして使用することが重要です。

例えば、以下のようなイメージです。


<h1>ウェブアクセシビリティにおいてh1タグは重要である！</h1>

　<h2>h1タグが重要な理由</h2>

　　　<h3>視覚的に読みやすいから</h3>

　　　<h3>スクリーンリーダーがh1タグを認識するから</h3>

※わかりやすいように見出しだけを記載しています。


ウェブアクセシビリティに配慮した見出しを作成するメリット

視覚的に見えやすくなる

まず、見出しがある文章は視覚的に見やすくなります。

障害の有無に関わらず、あらゆる人にとって文章を読む助けになります。


読み上げソフトウェアを使ってウェブサイトを認識している人にも便利

もちろん健常者だけではなく、視覚障害者などが聴覚でサイトを認識する際にわかりやすく読み上げソフトウェアを利用することができます。


読み上げソフトウェアは、コーディングを見て音声に変換しているため、何がhタグを使って書かれているのかわかりやすく認識することができるのです。


このため、hタグの使用は、あらゆる人にコンテンツを理解してもらう、情報の行動をわかりやすく伝えることにおいて有用です。

h1～h6の使用は、もちろん視覚障害者だけではなく、全ての健常者にもわかりやすいものとなります。


ウェブアクセシビリティに配慮した見出しを作成していない場合のデメリット

見出しを適切につけていないと、ページの内容をざっと把握することができなくなります。


例えば、不要な内容を読み飛ばすことができず、本当に重要な伝えたいことが伝わらないことが多々あります。

情報のグループごとにタイトルになるように見出しをつけ、簡単に内容の把握をし、読み飛ばしができるサイトにしてみましょう。


見出しを作成する際のよくある注意点

見出しを作成するときは以下の点などに注意しましょう。

・ユーザーにとって難しい表現は使わない
・できるだけ簡潔にし、長くても20文字程度にする
・正しい階層構造にし、事前に情報を整理し、グルーピングする
・同階層の見出しは、同じスタイル（動詞・名詞）で書く

上記を気を付けるとわかりやすい見出しになるでしょう。


見出しに関するよくある質問

そもそもどのようにマークアップしたらいい？

ここまで紹介した、hタグとは、”h”はheadingの略です。h1が最も上位の階層、h6が最も下位の階層のため、数字が若いほうが重要性が高いものにつける、と認識しましょう。


マークアップの方法はHTML上で、指定したい文字列を<h1>と</h1>で囲めば問題ありません。


h1は複数あってもいい？

h1は本来記事タイトルにつけるものであるため、複数設定してはいけません。

よくある勘違いが、重要なことは全部h1にするというものです。


そうではなく、そのページのタイトルになるものだけを一点だけをh1タグに設定しましょう。


HTMLの文章構造はどうしたらいい？

HTML 文書は、ブラウザに表示される部分は <body> の中に記述されています。

HTML の基本的な構成は次のとおりです。

・Doctype 宣言→html タグ→head タグ→body タグ

<body> の中に記述されるのは、ブラウザ内に表示されるコンテンツですが、代表的な要素は以下の通りです。

・h1〜h6の見出しタグ
・pの通常のテキストタグ
・brの改行タグ
・imgの画像タグ
・aのリンクタグ

以上を踏まえても、hタグが文章を理解するために重要な要素だとわかるでしょう。

このため、HTMLの文章構造を正しく記載しながら、特に、hタグは内容にそぐわせながら記載するのが大事なのです。


デザインにも配慮したほうがいい？

見出しの階層ごとにデザインを分けるのが一般的です。


h1は重要な要素なので目立つような色で大きく太字で配置し、数字が大きくなるにしたがって小さくしていくと良いでしょう。

その際は、色覚障害者の方向けの色合いにしておくことも忘れないようにしましょう。


まとめ

ウェブアクセシビリティに配慮する上で、見出しは非常に重要な要素です。

基本的にはhタグが正しくマークアップできており、デザインに問題がなければ大丈夫ではあるものの、よりわかりやすいウェブサイトを目指していくことも大切です。


気になる人はぜひ調べてみてください。

 
 
bottom of page