【HTML5】HTMLのセマンティック要素を取り入れてWEBページを読みやすくする方法

はじめに

セマンティック要素は HTML コードに意味を持たせるための HTML 要素です。
多くの WEB ブラウザとスクリーンリーダーに対応しており、導入すると WEB ページのアクセシビリティが向上します。
今回は HTML5 のセマンティック要素について解説します。

セマンティックとは？

IT の世界での「セマンティック」は人間の言葉や意味をコンピュータに正しく伝えるための技術を指す言葉です。
例えばあいまいな検索キーワードからコンピュータがその意味を汲み取って検索結果を表示する「セマンティック検索」などがあります。

WEB の場合は HTML に後述するセマンティック要素を使用することで読み上げソフトや検索エンジンが理解しやすい WEB ページにできます。

HTML5 以前

HTML5 以前は HTML 要素に意味を持たせる手段がありませんでした。
例えばスクリーンリーダーは div タグや span タグの組み合わせで作られたものがナビゲーションなのかプログレスバーなのかあるいはフッターなのか識別できません。

開発者にとっても div タグや span タグの組み合わせから目的の要素を見つけたり構造を理解することは困難でした。
やや大げさですが以下は非セマンティックな HTML コードの例です。

ご覧の通り要素が何を表しているのか直感的には分からないですね。
これは人間だけではなく検索エンジンやスクリーンリーダーにとっても読みにくい HTML になっています。

HTML5 の登場

現在主流の HTML5 では main タグや nav タグなどの「セマンティク要素」が導入されました。
セマンティック要素は HTML 要素に意味を与えるもので、WEB ページの見た目には一切影響しません。

以下は先程の HTML コードをセマンティック要素に置き換えた例です。
置き換え前と比べて各要素の役割が明確になりましたね。

これにより検索エンジンやスクリーンリーダーがナビゲーションやフッターなどを識別できるようになりました。
また、要素の役割が明確になったことで WEB 開発者にとっても読みやすいコードになりました。

「でも、見た目に影響しないなら div タグや span タグでもいいのでは？」という声が聞こえてきそうですが、スクリーンリーダーの利用者にとってはいくつかメリットがあります。
例えば NVDA というスクリーンリーダーでは main タグの要素に移動したとき、に「メイン・ランドマーク」のように読み上げられるので、ユーザーは「ここからメインのコンテンツが始まるんだな」と認識できます。

また、NVDA では「D」キーを押すことで nav、main、footer などのランドマーク要素を瞬時に移動できるので毎回ページの最上部から１行ずつ読む手間がなくなります。
「ランドマーク」とは目印になる建物を指す言葉ですが、スクリーンリーダーの利用者にとってはこれらの要素がまさに目的地にたどり着くための道しるべとなっています。

このように、現代ではセマンティック要素のおかげで目の不自由なユーザーでもスムーズに WEB ページを読めるようになりました。

セマンティック要素のメリット

まとめるとセマンティック要素を導入するメリットは以下のようになります:

スクリーンリーダーを使用する目の不自由な人にとっての補助になる
、検索エンジンがそのページの構造や重要な情報を理解できる
開発者にとって読みやすいコードになる。構造を素早く理解し目的の要素を見つけやすくなる。

セマンティック要素の一覧

以下は HTML5 で使用できるセマンティック要素の一覧です。
それぞれスクリーンリーダーでどんな風に読まれるのか実際に試してみることをおすすめします。

HTML のセマンティック要素:

article : 記事、商品カード、コメントなどの単体でも意味を成すコンテンツ
section : セクション。見出しと併用される章単位のコンテンツ
aside : 補足情報や関連するコンテンツ。
details : 折りたたみ表示が可能なコンテンツ。summary タグと併用される
summary : details 要素のラベル
figure : イラスト、図、写真などの自己完結しているコンテンツ。figcaption タグと併用される
figcaption : figure 要素内のコンテンツの説明
footer : フッター要素
header : ヘッダー要素
main : メインのコンテンツ
nav : ナビゲーション。そのページで主要となるリンクのグループ
mark : ハイライトを含むテキスト

おわりに

今回は HTML のセマンティック要素について解説しました。
セマンティック要素は開発者やスクリーンリーダーの利用者を助ける大事な機能です。

WEB 開発者の方は自分のプロダクトにセマンティック要素を取り入れてみて実際にスクリーンリーダーでどんな風に読まれるのか確認してみることをおすすめします。
WEB アクセシビリティが向上すればプロダクトをより多くのユーザーに使っていただけるようになります。

今回は以上です。
ここまで読んで頂きありがとうございます！

Accessible Tech Blog