アクセシビリティの基本【タイトルタグ】

2025年9月8日 2025年10月6日

login_user

ウェブサイトを誰にとっても使いやすくするためには、
アクセシビリティを意識することが大切です。
特に目の見えない人や視力の弱い人は、スクリーンリーダーを利用してWebページを読み上げさせています。

1 スクリーンリーダーと見出しタグ（hタグ）の関係

スクリーンリーダーには「見出しジャンプ」機能があり、
Tabキーやショートカットキーを使ってh1, h2, h3 などの見出しに一気に移動できます。
これにより、ページ全体を一行ずつ読むのではなく、見出し単位で内容を把握できるのです。

HTMLでは、ページの構造を示すために hタグを使います。


<h1>サイト全体のメインタイトル</h1>

<h2>記事の大きな章タイトル</h2>
  <h3>その中の小見出し</h3>
  <h3>別の小見出し</h3>

<h2>別の章タイトル</h2>
  <h3>さらに細かい見出し</h3>
  <h4>さらにさらに細かい見出し</h4>

見出しがないページでは、スクリーンリーダー利用者は
ページを頭から最後まで延々と読み続ける必要があり、必要な情報にたどり着くのが困難になります。

見出しタグはアクセシビリティだけでなくSEOにも影響します。
適切に見出しをつけることで、検索エンジンにもページの構造と重要なキーワードを伝えられます。

タイトルタグ（見出しタグ）は、単なるデザイン要素ではなく、
情報の道しるべとしての役割を果たします。
スクリーンリーダーを使う人は、見出しジャンプ機能を頼りにページを素早く移動します。
正しいhタグ構造を守ることは、すべての人にとって使いやすいウェブサイトづくりの第一歩です。